Beranda » Edit Blogger » Membuat Tombol Share di Blog

Membuat Tombol Share di Blog

Label: Edit Blogger

Membuat Tombol Share di Blog » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Tombol Share di Blog yang disponsori oleh MASFIM.com | Portal Informasi Terkini.
Blog merupakan salah satu media bagi kita yang senang menulis karena dengan begitu mungkin kita menjadi lebih tenang. Di blog sendiri Anda akan sangat banyak belajar untuk bisa menuangkan segala ide maupun kreatif Anda kepada semua orang yang berkunjung di blog Anda. Oleh sebab itu ada baiknya Anda memperhatikan betul tampilan dari blog Anda agar membuat pengunjung pun merasa nyaman berada di blog Anda.

Nah berbicara tentang ide. Pastinya ide yang Anda miliki pasti akan ada orang yang menyukai dan sependapat dengan pemikiran Anda dan berminat untuk membagikannya ke orang-orang terdekatnya. Nah hal yang sangat riskan bukan jika pada blog Anda tidak terpasang kode untuk membaginya atau dengan kata lain mempermudah si pembaca untuk mensharenya.

Oleh sebab itu kali saya akan membagi kode yang bisa Anda tanamkan pada blog Anda untuk mempermudah pengunjung menshare konten Anda yang di anggapnya menarik. Berikut adalah kodenya:

<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/AVvXsEgu-E369-nKH6mFsyQ31T60zz9e-mXSTEWadhmb0vsiMo-9_DWQ5zQ1TtY3g7J6Ca9_0iHE-yBBf91XZX3HL4Mc9aIUbwPcVHDHIZcl1CuyRLLCANObxMnkmVeMsCy2Zg3FRyvHrMLE220/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"/>

Share Artikel Ini : Facebook Google+