Cara Baru Membuat Tombol Share Keren Otomatis di Bawah Postingan Blog

Cara Baru Membuat Tombol Share Keren Otomatis di Bawah Postingan Blog

Pada kesempatan ini, me akan ngshare mengenai cara baru membuat tombol share keren otomatis di baeah postingan blog. Tentunya para sobat blogger menginginkan agar artikel yang sodara posting cepat tersebar keseluruh penjuru dunia maya, dan tentunya dengan demikian blog sobat akan banyak pengunjungnya, maka dari itu tombol share untuk postingan pada Blog ini saya pikir sangat penting untuk di buat. Ok langsung saja yah sodara berikut cara-caranya, disimak dan di praktekin yah.

Berikut Langkah-Langkahnya :
 
1. Pertama sodara Login ke akun Blog sodara, tentunya dengan email an paswor soara sendiri, dan akan langsung menuju ke dasbor blog sodara.

2. Langkah selanjutnya sodara Pilih Template, kemudian pilih Edit HTML, selanjutnya akan masuk di Format HTML dalam bentuk xml, kemudian sodara klik semua tanda panah hitam kecil pada format HTML tersebut untuk membuka semua format tersebut.

3. Selanjutnya sodara Cari kode <data:post.body/> . Kode tersebut pada umumnya berjumlah 3 , namun kalau pada blog aku jumlahnya ada 4. Setelah ketemu letakan kode di bawah ini tepat dibawah kode <data:post.body/>. yang ke tiga.

<style>
/*--------Social Sharing Widget Below Blog Post ------*/
.sharebelow a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(http://3.bp.blogspot.com/-vslV5wtB7Hc/T_iYKWWojFI/AAAAAAAAAKc/IBi91mIC0b8/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 == &quot;item&quot;'>
<div class="shareandbookmark">
Kindly Bookmark and Share it:</div>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
</b:if></div>
<div style="clear:both"/>


4. Langkah terakhir yang sodara lakukan ialah tinggal klik save / Simpan dan lihat hasilnya pada halaman postingan blog sodara.


Demikian tutorial singkat ini, selamat mencoba, dan semoga bermanfaat.

Wassalam...