Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Selasa, 12 Desember 2017

Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile

Kali ini kita akan menciptakan share button. Padahal kemarin kita sudah menciptakan share button yang tak kalah bagusnya. Tapi tidak problem mungkin yang kemarin kurang bagus,jadi buat yng baru.Share button ini bekerjsama hampir mirip seakan-akan share button yang saya bagikan kemarin yang membedakan yakni share button ini lebih ringan dan lebih kecil serta ramah SEO.

Yang pastinya share button ini tidak akan berpengaruh terhadap kecepatan loading blog sobat. Jika loading blog anda cepat maka sesudah memasang share button ini loading blog akan masih akan tetap cepat. Jika loading blog anda lambat maka sesudah memasang share button ini akan tetap lambat. 😄

 Kali ini kita akan menciptakan share button Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile
 
Share button ini berukuran mini serta support untuk mobile device. Jadi jangan khawatir jikalau pengunjung anda kebanyakan memakai mobile,mereka maih bisa membagikan artikel anda. Untuk lebih lengkapnya,berikut Fitur yang terdapat dalam share button ini  :
  • Responsive
  • Seo Friendly
  • + ada counternya 
  • dll.
Lalu bagaimana cara memasangnya di blog,untuk memasangnya cukup gampang ikuti saja langkah dibawah ini.

Cara Membuat Share Button Sederhana dan Seo Friendly

#1. Buka  blogger ,Template ➞ Edit HTML

#2. Salin kode berikut kemudian pastekan diatas kode </body>

<script src="http://share.donreach.com/buttons.js"></script>

#3. Salin kode berikut dan pastekan dimana share button ingin ditampilkan. Biasanya ditampilkan dibawah artikel jadi letakkan kode <data:post.body/>

Karena kode  <data:post.body/> bisa anda temukan lebih dari satu ditemplate blog,oleh alasannya yaitu itu maka silakan pilih kode <data:post.body/> yang paling selesai anda temukan atau coba cocokan satu per satu.

<div class="don-share" data-bubbles="right" data-limit="3">   <div class="don-share-total"></div>   <div class="don-share-facebook"></div>   <div class="don-share-twitter"></div>   <div class="don-share-google"></div>   <div class="don-share-linkedin"></div>   <div class="don-share-pinterest"></div>   <div class="don-share-tumblr"></div>   <div class="don-share-vk"></div> </div> <script type="text/javascript">    (function() {     var dr = document.createElement('script');     dr.type = 'text/javascript'; dr.async = true;     dr.src = '//share.donreach.com/buttons.js';     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);   })(); </script>

Ganti kode yang berwarna merah dengan jumlah ikon sosial media yang ingin anda tampilkan.

Lalu simpan template.

Sekarang coba anda buka blog sahabat kemudian lihat hasilnya. Gimana keren dan sederhana buka. Itulah tutorial yang bisa saya bagikan. Semoga membantu dan bermanfaat.

Sumber http://www.tips-trick.com

Sabtu, 09 Desember 2017

Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo Magz

Memasang Subcription Box Seperti Di Evo Magz Blog - Kotak berlangganan yang sering juga disebut subcription box adalah kotak yang berfungsi sebagai media bagi pengunjung blog yang ingin mengetahui dan berlangganan artikel terbaru di blog kita. Dalam kotak berlangganan biasanya juga berisi pesan acuan biar pengunjung mau berlangganan artikel melalui email.

Kotak berlangganan atau subscription box ini bisa kalian letakkan dibawah artikel atau juga disidebar dan footer lantaran adalah memang subsription box ini responsive design serta fungsi aslinya yang terletak dibawah artikel.

Kotak berlangganan yang akan kita buat ini saya ambil dari template Evo Magz,pasti tahu kan template Evo Magz. Walaupun subcription box pada template buatan Mas Sugeng tersebut berada dibawah artikel tapi anda bisa meletakkannya di sidebar lantaran adalah responsive. Bagaimana penampakan subcription boxnya? Dibawah adalah penampakannya ↴

Cara Membuat Kotak Berlangganan Evo Magz

Langkah 1
Silakan buka blogger, Template pilih Edit HTML

Langkah 2
Lalu salin isyarat dibawah ini kemudian letakkan diatas isyarat ]]></b:skin>

/* SUBSCRIBER BOX */ .berlangganan-box {  border-top: 1px solid #f0f0f0;  border-bottom: 1px solid #f0f0f0;  padding: 15px;  margin:0 -15px 15px;  text-align:center; } .berlangganan-box input.email-address[type="text"] {  width:60%;  padding:10px;  border:1px solid #ddd;  text-align:center;  border-radius: 4px;  outline:none; } .berlangganan-box input.submit-email[type="submit"] {  transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;  padding:10px 15px;  background:#07ACEC;  border-radius: 3px;  color:#fff;  border:none;  font-weight:bold;  outline:none; } .berlangganan-box input.submit-email[type="submit"]:hover {  background:#0D9AD0;  cursor:pointer; } .berlangganan-box input.email-address[type="text"]:focus {  background: #f9f2a5; }

Lalu simpan template


Langkah 3
Salin isyarat dibawah ini kemudian letakkan dimana subcription box ingin ditampilkan,bisa di sidebar/footer atau dibawah artikel.

<!-- Box berlangganan --> <div class='berlangganan-box'><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=anggasave&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>    <p>Silakan berlangganan Untuk Mendapatkan Film Terbaru :</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='anggasave'/>    <input name='loc' type='hidden' value='en_US'/>    <p><input class='submit-email' type='submit' value='Subscribe'/></p>    </form>   </div>

Ganti isyarat yang berwarna merah dengan url/id feedburner blog anda.

Sekarang coba lihat blog sobat. Apakah kotak berlangganan sudah tampil di blog anda. Cukup sekian tutorial cara menciptakan subcription box. Semoga membantu dan bermanfaat.

Sumber http://www.tips-trick.com

Rabu, 06 Desember 2017

Cara Memasang Sosial Share Button Dengan Counter Dibawah Postingan

Membuat Share Button dengan Counter - Tombol membuatkan atau share button ialah widget yang mempunyai kegunaan untuk memudahkan dalam membuatkan artikel. Share button ini biasanya terhubung dengan media sosial yang dipakai untuk media dalam membagikan artikel.

Share button yang bagikan ini bisa tampil di semua device,alias responsive. Sehingga anda tidak perlu mencari tutorial menciptakan share button lain khusus untuk mobile. Bukan hanya responsive ,share button ini juga dilengkapi dengan counter/penghitung. Counter ini akan menghitung berapa kali artikel yang sudah di share jadi anda bisa tahu jumlah share yang ada.

Berikut penampakan share button yang akan saya bagikan.👇👇👇

 Tombol membuatkan atau share button ialah widget yang mempunyai kegunaan untuk memudahkan dalam  Cara Memasang Sosial Share Button Dengan Counter Dibawah Postingan

Bagaimana? Tertarik untuk menciptakan share buttonnya,langsung saja berikut langkah-langkah :

Membuat Share Button dengan Counter

1. Buka  blogger ,Template ➞ Edit HTML

Baca juga : Cara Membuat Share Button Sederhana dan Ringan [Seo Friendly]

2. Salin isyarat berikut kemudian letakkan diatas isyarat </body>

<script src="http://share.donreach.com/buttons.js"></script>

3. Salin isyarat berikut dan letakkan dimana share button ingin ditampilkan. Biasanya ditampilkan dibawah artikel jadi letakkan isyarat <data:post.body/>

Karena kode  <data:post.body/> bisa anda temukan lebih dari satu ditemplate blog,oleh alasannya yaitu ialah itu maka silakan pilih isyarat <data:post.body/> yang paling final anda temukan atau coba cocokan satu per satu.

<div class="don-share" data-bubbles="right" data-limit="3">   <div class="don-share-total"></div>   <div class="don-share-facebook"></div>   <div class="don-share-twitter"></div>   <div class="don-share-google"></div>   <div class="don-share-linkedin"></div>   <div class="don-share-pinterest"></div>   <div class="don-share-tumblr"></div>   <div class="don-share-stumbleupon"></div>   <div class="don-share-reddit"></div>   <div class="don-share-buffer"></div>   <div class="don-share-xing"></div>   <div class="don-share-pocket"></div> </div> <script type="text/javascript">    (function() {     var dr = document.createElement('script');     dr.type = 'text/javascript'; dr.async = true;     dr.src = '//share.donreach.com/buttons.js';     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);   })(); </script>

Lalu simpan template.

Selesai share button sudah dipasang di blog sobat. Ganti isyarat yang berwarna merah dengan jumlah sosial media yang ingin anda tampilkan. Itulah tutorial cara menciptakan share button responsive dengan counter,semoga bermanfaat.

Sumber http://www.tips-trick.com