Saya akan memberi Tutorial tentang cara memasang Tombol share dibawah postingan yang Ringan, Tutorial yang satu ini saya dapatkan dari mas Kompi Ajaib , cuma ada bagian yang saya tambahkan, seperti tombol Share Digg dan Linkedin, karena mas Kompi ajaib hanya membuat 3 Tombol Share saja yaitu tombol Share to Fb - Share to Twitter - Share to Gplus+, walaupun gak seberapa hehehe.
(Sobat bisa melihat previewnya diatas atau Melihat Tombol Share yang saya gunakan sekarang. )
Ok, langsung saja kita mempraktekannya.
- Copy Code berikut :
<!-- Horizontal social buttons Start -->
<b:if cond='data:blog.pageType == "item"'>
<div style='background:#f6f6f6; border:2px solid #fff;width:100%;height:22px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:2px 0;margin-right:15px;font:bold 14px Arial;color:#333'>
<strong>Share This Article</strong> :
</div>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on fb</a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>
<a expr:href='"http://digg.com/submit?url=" + data:post.url' style='color: #fff; background: #009999; text-decoration: none; border: 1px solid #009999; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Digg'>Digg</a>
<a expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' style='color: #fff; background: #00477D; text-decoration: none; border: 1px solid #00477D; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Linkedin'>Linkedin</a>
</div>
</b:if>
<!-- Horizontal social buttons End -->
- Setelah itu, tempelkan Kode diatas Kode <div id='related-posts'> (semua Template Maskolis pasti ada Kode tersebut.)
Demikian Artikel dari saya, semoga bermanfaat.
Note :
Jika bagian atasnya terlalu tinggi keatas, sobat bisa ganti kode yang berwarna merah dengan 5px.
Artikel Terkait
Ngarepnya SNMPTN Dapatnya SBMPTN
Setelah sekian lama saya melalui lika-liku perjalanan pendaftaran masuk PTN, akhirnya saya sampai juga di bagian pembayaran UKT dan sudah menjadi MABA. Dalam artikel ini, saya ... 
Cara Menghilangkan Kolom Pada Post Tertentu
Setelah lama saya gak nulis Artikel, akhirnya saya menulis lagi artikel yang berkategori Tutorial ini, judulnya "Cara Menghilangkan Kolom Pada Post Tertentu", maksud kolom dala ... 
Membuat Dropdown Menu Responsive Dengan Effect Float
Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float ... 
Fungsi CDATA Dalam JS dan CSS
Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <
Cara Memasang Recent Post Dengan Pilihan LabelKali ini saya akan memberi tutorial kepada sobat Blogger tentang Cara Memasang Recent Post Dengan Pilihan Label.
Setelah saya Searching di google dengan Keyword "Cara Memasang Wid ...
