Game Files: Cara Memasang Tombol Share Di Bawah Posting Blog

Sunday, November 13, 2016

Cara Memasang Tombol Share Di Bawah Posting Blog

Tutorial - Tombol share dalam blog sangat penting untuk meningkatkan pengunjung ke blog kamu. Namun untuk menarik perhatian agar pengunjng blog mau berbagi artikel yan dibaca ke berbagai jejaring sosial, tentunya kamu membutuhkan tombol share yang cukup keren.

1. Login ke blog kamu
2. Pilih Edit HTML > Jangan lupa Centang Expand Widget Template > Cari kode <data:post.body/>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfxW6hzJMWaxQfZUolnnwWC475NX3Lt0VwjsFynEXQhS4_T_gaNTc42OQSbRIDpQmDasRSUk4ICTF6xaaXz5ZIzUoXauSbZpF8bTxqNP7iS1fx5VKjRKFCDBYiHsO0IsrmGln-prm_2s/s1600/sharebelow.png) no-repeat;
}
.sharebelow a.googleplus {
background-position: 0px -348px;
}
.sharebelow a.googleplus:hover {
background-position: 0px -406px;
}
.sharebelow a.pinterest {
background-position: 0px -464px;
}
.sharebelow a.pinterest:hover {
background-position: 0px -522px;
}
.sharebelow a.delicious {
background-position: 0px 0px;
}
.sharebelow a.delicious:hover {
background-position: 0px -58px;
}
.sharebelow a.digg {
background-position: 0px -116px;
}
.sharebelow a.digg:hover {
background-position: 0px -174px;
}
.sharebelow a.stumbleupon {
background-position: 0px -812px;
}
.sharebelow a.stumbleupon:hover {
background-position: 0px -870px;
}
.sharebelow a.technorati {
background-position: 0px -928px;
}
.sharebelow a.technorati:hover {
background-position: 0px -406px;
}
.sharebelow a.twitter {
background-position: 0px -928px;
}
.sharebelow a.twitter:hover {
background-position: 0px -986px;
}
.sharebelow a.facebook {
background-position: 0px -232px;
}
.sharebelow a.facebook:hover {
background-position: 0px -290px;
}
.sharebelow a.reddit {
background-position: 0px -580px;
}
.sharebelow a.reddit:hover {
background-position: 0px -638px;
}
.sharebelow a.rss {
background-position: 0px -696px;
}
.sharebelow a.rss:hover {
background-position: 0px -754px;
}
.shareandbookmark{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:18px;
font-family:sans-serif;
}
</style>
<div class=sharebelow>
<b:if cond=data:blog.pageType == "item">
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>

<a class=facebook expr_href="http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title rel=external nofollow target=_blank title=Share this on Facebook :>/>

<a class=googleplus expr_href="http://plus.google.com/share?url=" + data:post.url rel=external nofollow target=_blank title=+1 it :>/>

<a class=twitter expr_href="http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Tweet this :>/>

<a class=pinterest href="http://pinterest.com/" rel=external nofollow target=_blank title=Pin it :>/>

<a class=delicious expr_href="http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Add this to Delicious :>/>

<a class=stumbleupon expr_href="http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Stumble this :>/>

<a class=digg expr_href="http://digg.com/submit?phase=2&url=" + data:post.url rel=external nofollow target=_blank title=Digg this :>/>

<a class=reddit expr_href="http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=external nofollow target=_blank title=Add this to Reddit :>/>

<a class=rss expr_href=data:blog.homepageUrl + "feeds/posts/default" target=_blank title=Bookmark :>/>
</b:if></div>
<div style="clear:both"/>

4. Simpan dan lihat hasilnya.

Available link for download