Cara Menyisipkan Tombol Share di Blogger Seperti di Blog Saya Ini

Cara Menyisipkan Tombol Share di Blogger Seperti di Blog Saya Ini-- Anda yang baru saja berkenalan dengan Blog, atau boleh jadi sudah lama kenalannya, mungkin masih dilanda kebingungan tentang bagaimana cara menambahkan tombol share di akhir postingan blog. Jika memang iya, anda tidak perlu bingung lagi, saya menyiapkan tutorialnya buat kita semua.

Kenapa saya katakan buat kita semua? Saya menulis di blog ini seperti menyimpan draf pribadi saya. Agar tidak lupa makanya sayamenulisnya disini, bagi anda yang menemukan tulisan saya ini sebelum anda meng-aply-nya di blog anda senyum-lah minimal satu kali aja, hehe. Yuk kita mulai tutorialnya.

Pertama, Login dulu ke Dashboard Blogger sobat, kemudian masuk ke Template, kemudian Edit HTML

Kedua, Silahkn masuk ke halaman pengeditan HTML, cari kode  </style> , Untuk cara cepat mencari tekan Ctrl + F, kalau sudah ketemu, pastekan kode dibawah ini tepat diatas kode </style> tersebut.

.article-share-habatekno{width:100%;height:43px;margin-bottom:10px}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-tw-cont,.article-share-other-cont,.article-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
.article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.article-share-fb,.article-share-tw,.article-share-gp,.article-share-li,.article-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHw1zU-0KsLuUhTeB6WnXU34lKKRIeC-MYjvJ3JOpt19SQVUYZKqtswewe_DUHUhsW-aqBwfzr44QsHVM9VxUb1RBQ2ApdYPoopRNawu8mUT2U8o6zOlV8kbBsZiadoyolygSJU_GF9U8/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.article-share-fb-label{color:#2d609b}
.article-share-fb-label,.article-share-tw-label,.article-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.article-share-tw{background-position:0 -43px}
.article-share-tw-label{color:#00c3f3}
.article-share-gp{background-position:0 -86px}
.article-share-gp-label{color:#f00}

Ketiga, tekan dulu Simpan Template. Kalu sudah pastekan lagi kode di bawah ini tepat dibawah kode <data:post.body/> yang terakhir, ingat yang terakhir ya... karena ada beberapa buah kode tersebut. 

<div class='article-share-habatekno'>
<div class='article-share-fb-cont'>
<a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a>
<a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
<a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
<a class='article-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
<a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
<a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
</div>

Terakhir, Save Template. Semoga berhasil.