Cara Menciptakan Share Box Keren Dibawah Postingan

Tampilan Share Box

- Sobat blogger niscaya sudah sering melihat aneka macam macam tombol share, baik itu berupa widget atau yang berada pada artikel. Kali ini aku ingin share sebuah kotak menyebarkan 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 mempunyai fitur tambahan, menyerupai print, pdf, icon gambar, dan lain-lain. Bila ingin mencobanya pada blog sobat, silahkan ikuti tutorialnya hingga selesai.

Cara Memasang Share Box Dibawah Artikel atau Postingan

1. Login ke blog sobat.

2. Langsung buka sajian template dan pilih edit HTML

3. Silahkan gunakan Ctrl + F untuk mencari arahan ]]></b:skin> atau </style>
Jika sudah menemukan arahan tersebut, silahkan copy arahan di bawah sempurna sebelum arahan 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 arahan 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 arahan <data:post.body/> , biasanya terdapat lebih dari satu kode, pilih arahan yang ke-3 kemudian letakkan arahan di bawah ini sempurna di bawah arahan <data:post.body/> .

<div class='share-box'><p>Terima kasih sudah berkunjung dan membaca artikel mengenai  <u><data:post.title/></u>  kalau sahabat 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 arahan HTML di bawah arahan <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 sanggup bermanfaat bagi sahabat blogger yang ingin mencobanya. Sebelum meninggalkan halaman ini, ada baiknya bila Anda berkomentar terlebih dahulu. Terima kasih banyak kunjungannya.