Cara Membuat Share Box Keren Di Bawah Postingan Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara membuat share box keren di bawah postingan blog. Share box memang penting untuk blog selain untuk membagikan artikel ke sosial media, tampilan yang unik sharebox pada blog anda mungkin akan menjadi daya tarik pengunjung untuk membagikan artikel tersebut, nah langsung saja simak tutorialnya;

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih edit template,

3. Setelah itu cari kode </style> dengan cara

Ctrl

+

F

,

4. Copy script di bawah ini lalu paste tepat di atas kode </style>,

 /* ShareBoxKeren
------------------------------------------------ */
.share-box{position: relative;display: block;background: url("https://scontent-sin.xx.fbcdn.net/hphotos-prn1/t39.1997-6/p128x128/851558_690520954295111_911904297_n.png") -15px center no-repeat scroll #54687C;color: #f4f4f4;margin: 20px 0 0 0;padding: 5px 10px 20px 100px;border-radius: 2px;border-bottom: 4px solid rgba(0,0,0,0.2);line-height: 1.4em;}
a.more{background:#cad1d5;border:2px solid #bac0c4;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:0 4px;margin-top:-4px;border-radius:3px;}
a.more:hover{border:2px solid #e56967;background:#196ca8;color:#fff;}
.printfriendly{float:right;right:10px;background:transparent;color:#777;text-decoration:none;padding:3px 5px 3px 0;font-family:'Open Sans';font-size:12px;font-weight:400}
.printfriendly span.print{background:url(http://4.bp.blogspot.com/-sZ2p3TXACas/U4T8pFMORGI/AAAAAAAADUU/S6UJQ6B--qw/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-left:20px}
.printfriendly span.pdf{background:url(http://3.bp.blogspot.com/-lAtBOfQS0mQ/U4T8o8NhzMI/AAAAAAAADUQ/pu9oEi1tKHE/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-left:20px} 

7. Setelah itu cari kode  <data:post.body/> dengan cara

Ctrl

+

F

,

8. Mungkin anda akan menemukan beberapa kode <data:post.body/> di blog anda, cari kode  <data:post.body/> paling akhir, setelah itu copy script di bawah ini lalu paste tepat di bawah kode  <data:post.body/>,

<div class='share-box'><p>Terima kasih sudah berkunjung dan membaca artikel mengenai  <u><data:post.title/></u>  jika sobat ingin menyebar luaskan artikel ini di mohon untuk mencantumkan Link Sumbernya, Terima Kasih atas kerjasamanya ^_^</p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'> 
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>&#10010;</a></p>
<div style='padding-right:5px;float:right;font-size:10px'/>
<script type='text/javascript'> 

var node = document.createElement(&#39;script&#39;); node.type = &#39;text/javascript&#39;; node.async = true; node.src = &#39;http://static.addtoany.com/menu/page.js&#39;; var runscript = document.getElementsByTagName(&#39;script&#39;)[0]; runscript.parentNode.insertBefore(node, runscript); 


</script>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='Printer Friendly and PDF'><span class='print'/> <span class='pdf'/></a>
<div class='clear'/>
</b:if></div>

9. Setelah itu cari kode </head> dengan cara

Ctrl

+

F

,


10. Copy script di bawah ini lalu paste script tersebut tepat di atas kode </head>,

 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script> 

9. Simpan template.

Demo

Nah itu saja dari saya semoga bermafaat jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Share this