Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Bookmark Social Share

by Irsyad Aslam , at 3/31/2013 , has 0 komentar
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
Irsyad Aslam
About
Cara Membuat Bookmark Social Share - written by Irsyad Aslam , published at 3/31/2013, categorized as Widget . And has 0 komentar
0 komentar Add a comment

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger
-->