Cara Membuat Share Button / Sosial Button Yang Keren dan Responsive Di Blog Terbaru

Cara Membuat Share Button / Sosial Button Yang Keren dan Responsive Di Blog - Hay sobat AS!! Kali ini saya akan membagikan tutorial tentang cara membuat share button atau sosial button yang keren dan responsive di blog. Langkahnya cukup mudah. Share button ini akan berada di bawah postingan. Yang membedakan share button yang akan saya bagikan ini dengan share button yang lainnya adalah karena share button ini responsive...gak percaya..

 Share Button Versi Desktop

Share Button Versi Mobile

Responsive bukan...Ok langsung saja berikut langkah-langkah cara membuat share button yang responsive :

Langkah 1

Silakan salin kode HTML berikut lalu letakkan diatas kode <data:post.body/> 

#NB : Karena kemungkinan dalam satu blog kode <data:post.body/> ada lebih dari satu maka silakan cari saja kode <data:post.body/> yang versi desktop atau bisa juga dengan meletakkan kode yang sudah disalin diatas semua kode <data:post.body/> yang ada.

#Gunakan perintah Ctrl + F


Kode Html

<div data-limit="3" class="don-share">   <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-hackernews"></div>   <div class="don-share-buffer"></div>   <div class="don-share-xing"></div>   <div class="don-share-pocket"></div>   <div class="don-share-fancy"></div>   <div class="don-share-yummly"></div>   <div class="don-share-scoopit"></div>   <div class="don-share-weibo"></div>   <div class="don-share-vk"></div>   <div class="don-share-mailru"></div>   <div class="don-share-odnoklassniki"></div>   <div class="don-share-hatena"></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>

Langkah 2
Salin kode berikut lalu letakkan / pastekan diatas kode </body> 

Kode Html

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function downloadJSAtOnload(){var d=document.createElement("script");d.src="h ttps://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/share-donreach.js",do cument.body.appendChild(d)}window.addEventListener?window.addEventListener("lo ad",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",down loadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script> </b:if>

Langkah 3
Salin kode HTML dibawah ini lalu letakkan / pastekan diatas kode </head> 
 

Kode Html
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .don-share .don-share-total{position:relative!important} .don-share .don-share-total:after{bottom:0!important} </style> </b:if>

Selesai...

Silakan buka blog sobat untuk melihat hasilnya...Itu lah artikel tentang cara membuat share button yang responsive semoga artikel ini bermanfaat bagi kita semua.