Cara Membuat Bookmark Social Share

Social Share sudah pernah melihat bukan?, Apa Kegunaan dari Social Share?,  Bookmark Social Share digunakan untuk menshare posting yang ada pada blog dan mengirimnya pada social media, dan untuk mempermudah menshare posting tanpa harus memasukan url posting. Social Share ini biasanya terletak di bawah postingan. Widget Social Share ini memiliki 20 ikon Social Media Seperti : Facebook, Twitter, Yahoo, Delicious, Stumble, Dan lain-lain.

Widget ini dibuat dengan menggunakan kode CSS Modern, Sehingga tidak berat untuk menampilkannya dari browser, dan 20 ikon ini digabungkan menjadi satu, Sehingga berubah sendiri jika kursor diarahkan pada Social Bookmark ini. Untuk cara membuatnya, Berikut cara untuk membuatnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, Terlebih dahulu anda backup template anda, Lalu, Klik Tombol Edit HTML.
• Centang Expand Template Widgets, Cari Kode <data:post.body/> dengan menekan CTRL+F atau dengan F3.
• Lalu Masukan Kode Berikut ini dibawah kode <data:post.body/> :

<!--YBB Bookmark Widget-->
<div class='YBB-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#8B8B8B' face='ms sans serif' size='3'><b>Like The Above, Please Share:</b></font>
<br/><br/>
<!-- 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;'/>
<!--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;'/>
<!--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;'/>
<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&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;'/>
<!--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;'/>
<!-- 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='Bookmark and tag this :&gt;'/>
<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</b:if></div>

Keterangan:

1. Tulisan Yang Berwarna Merah adalah warna dari Judul Pada Social Share.
2. Tulisan Yang Berwarna Kuning adalah Judul Dari Social Share.

• Lalu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau Dengan F3.
• Masukan Kode Berikut ini diatas kode ]]></b:skin> :

/*--------YBB Bookmarking Widget (CSS#1)------*/
.YBB-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQYXvsDCR7LZ2FeBd0AzW35FT4ULm_tZRtM1Ip0lFW4uKqpON935NAhcsPD8HTpCrzeuWBkiRJXR6Dy-ZZzVUC2NynwlKGOkaT7-7PXvEvjgaJI28FGzxnTUnJQKQTd8uoyiZnt01avpk/s1600/Social+bookmark1.jpg) no-repeat;
}
.YBB-bookmarking a.delicious {
background-position:0px 0px;
}
.YBB-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.YBB-bookmarking a.digg {
background-position:0px -86px;
}
.YBB-bookmarking a.digg:hover {
background-position:0px -129px;
}
.YBB-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.YBB-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.YBB-bookmarking a.technorati {
background-position:0px -430px;
}
.YBB-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.YBB-bookmarking a.twitter {
background-position:0px -516px;
}
.YBB-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.YBB-bookmarking a.facebook {
background-position:0px -172px;
}
.YBB-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.YBB-bookmarking a.reddit {
background-position:0px -258px;
}
.YBB-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.YBB-bookmarking a.yahoo {
background-position:0px -602px;
}
.YBB-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.YBB-bookmarking a.rss {
background-position:0px -774px;
}
.YBB-bookmarking a.rss:hover {
background-position:0px -817px;
}


Dan Jika anda ingin memasang yang lebih besar dari yang diatas, dengan ukuran 64px X 64px, Tambahkan Kode Berikut ini Diatas kode ]]></b:skin> :

/*--------YBB Bookmark Widget2------*/
.YBB-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg1onhlPy8haTXpzWwJw7m674OtkHG18ECZFuJSomlMgv1umghPzOv8KBYiPJgiFkxMyB2jEUUCFBHJdPLFqJDLuasZCIhj2zbdi6-Wkb4Pj06KjF1-4Jx3iNueawsgFSPAmxilT-9WSr/s1600-h/flapper2.jpg) no-repeat;
}
.YBB-bookmarking a.delicious {
background-position:0px 0px;
}
.YBB-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.YBB-bookmarking a.digg {
background-position:0px -114px;
}
.YBB-bookmarking a.digg:hover {
background-position:0px -171px;
}
.YBB-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.YBB-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.YBB-bookmarking a.technorati {
background-position:0px -570px;
}
.YBB-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.YBB-bookmarking a.twitter {
background-position:0px -684px;
}
.YBB-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.YBB-bookmarking a.facebook {
background-position:0px -456px;
}
.YBB-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.YBB-bookmarking a.reddit {
background-position:0px -342px;
}
.YBB-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.YBB-bookmarking a.yahoo {
background-position:0px -798px;
}
.YBB-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.YBB-bookmarking a.rss {
background-position:0px -912px;
}
.YBB-bookmarking a.rss:hover {
background-position:0px -969px;
}

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG