Cara Membuat Share Box Keren Dibawah Postingan

Tampilan Share Box

Opick Weblog - Sobat blogger pasti sudah sering melihat berbagai macam tombol share, baik itu berupa widget atau yang berada pada artikel. Kali ini saya ingin share sebuah kotak berbagi atau share box. Apa bedanya dengan tombol share biasa? Bisa Anda lihat sendiri kalau share box lebih lengkap dari pada tombol share pada umumnya. Share Box ini memiliki fitur tambahan, seperti print, pdf, icon gambar, dan lain-lain. Bila ingin mencobanya pada blog sobat, silahkan ikuti tutorialnya sampai selesai.

Cara Memasang Share Box Dibawah Artikel atau Postingan

1. Login ke blog sobat.

2. Langsung buka menu template dan pilih edit HTML

3. Silahkan gunakan Ctrl + F untuk mencari kode ]]></b:skin> atau </style>
Jika sudah menemukan kode tersebut, silahkan copy kode di bawah tepat sebelum kode di atas.

.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 #999; color: #eee; margin:10px 0 0 0; padding: 10px 20px 40px 100px; border-radius: 5px; border-bottom: 1px solid rgba(0,0,0,.1); line-height: 1.4em; font-weight: bold;}
a.more{background:#cad1d5;border:2px solid #bac0c4;font-size:16px;font-weight:700;color:#eee;text-align:center;padding:0 4px;margin-top:-4px;border-radius:3px;}
a.more:hover{border:2px solid #e56967;background:#196ca8;color:#eee;}
.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}

4. Setelah itu, copy kode di bawah ini di atas kode </head>

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

Baca juga : Cara Memasang Widget Recent Post Keren Pada Blog

5. Nah, untuk memunculkan kotak share silahkan cari kode <data:post.body/> , biasanya terdapat lebih dari satu kode, pilih kode yang ke-3 lalu letakkan kode di bawah ini 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'><a href='http://goo.gl/3bJU0p' target='_blank'>get this</a></div>
<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>

6. Klik save dan lihat hasilnya

Jika tidak muncul, silahkan letakkan kode HTML di bawah kode <data:post.body/> yang pertama atau yang ke-2.

Saya rasa cukup sekian artikel kali ini dengan judul Cara Membuat Share Box Keren Dibawah Postingan. Semoga bisa bermanfaat bagi sobat blogger yang ingin mencobanya. Sebelum meninggalkan halaman ini, ada baiknya bila Anda berkomentar terlebih dahulu. Terima kasih banyak kunjungannya.

Bagikan Artikel ini