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 == "item"'>
<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'>✚</a></p>
<div style='padding-right:5px;float:right;font-size:10px'/>
<script type='text/javascript'>
var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'http://static.addtoany.com/menu/page.js'; var runscript = document.getElementsByTagName('script')[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
10. Copy script di bawah ini lalu paste script tersebut tepat di atas kode </head>,
9. Simpan template.
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.
