Assalamualaikum Warahmatullahi Wabarakatuh

Wednesday, 13 February 2013

Cara Membuat Tombol Share (Berbagi) di Blog

Kindly Bookmark and Share it:

Tombol share
Tombol share sangat penting dalam suatu blog. Ketika pengunjung membaca artikel di blog dan merasa tertarik atau butuh, pengunjung tersebut dapat membagikan artikel tersebut ke berbagai jejaring sosial seperti Facebook dan Twitter sehingga bisa dibaca orang lain dalam jumlah banyak. Jika artikel kita dibaca dan bermanfaat kebaikan bagi orang banyak maka kita termasuk orang yang berbuat kebaikan. 

Sesuai dengan judul artikel ini maka langkah-langkah untuk membuat tombol share agar kita menjadi orang yang lebih baik dan lebih bermanfaat adalah



  1. Login ke blog sahabat
  2. Masuk ke template kemudian masuk ke edit html kemudian
  3. Jangan lupa Centang Expand Widget Template
  4. Cari kode <data:post.body/>
  5. Copy kode di bawah ini dan paste tepat di atas kode <data:post.body/>
<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"/>


Sekian info yang dapat kami bagikan. Semoga bermanfaat kebaikan. Jika sahabat ingin berkonsultasi mengenai cara dan tutorial ini bisa langsung disampaikan melalui kotak komentar di bawah. 

9 komentar:

  1. tombol share yang di blog ini kok jadi mblasak di atas sih sob

    ReplyDelete
  2. Kl saya sih cuma pasang widget yg di layout itu, bro...

    ReplyDelete
  3. It's an remarkable article for all the internet viewers; they will obtain benefit from it I am sure.

    Check out my blog ... fat loss pills

    ReplyDelete
  4. This blog was... how do you say it? Relevant!! Finally I've found something that helped me. Cheers!

    Look at my blog ... muscle building foods

    ReplyDelete
  5. Thanks banget bro atas info n tipsnya sdh saya oraktekan ditunggu kunjungan baliknya..

    ReplyDelete
  6. mas... kok nya tidak ada di HTML blogku...
    gmana nih mas caranya... :D
    Wisnu kelas 8 mas

    ReplyDelete
  7. wah.. mantap sob.. saya coba ya.. terima kasih loh infonya.. sangat bermanfaat.. ^^

    ReplyDelete
  8. terimakasih gan, ane coba dan berhasil..cuma ukurannya bisa di kecilin ngga ya?

    ReplyDelete

 

Followers

Powered by Blogger.