Tutorial blogging Adalah Kumpulan panduan dan tips mengenai blogger,Google Adsense,SEO,Backlink,adwords, Khusus Bagi yang ingin mendalami ilmu internet marketing

Kamis, 22 September 2016

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.

Cara Membuat Share Button / Sosial Button Yang Keren dan Responsive Di Blog Terbaru Rating: 4.5 Diposkan Oleh: Angga Gilang

0 komentar:

Posting Komentar