Cara Membuat Share Box Keren Di Bawah Postingan Blog

15:14:00
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(&quot;https://scontent-sin.xx.fbcdn.net/hphotos-prn1/t39.1997-6/p128x128/851558_690520954295111_911904297_n.png&quot;) -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:&#39;Open Sans&#39;;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

Cara Membuat Share Box Keren Di Bawah Postingan Blog




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

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

0 Comments