Share to Social Bookmark Love

Tutorial berikut merupakan serie dari icon Share to Social Bookmark yang lumayan banyak saya posting di blog ini untuk menambah koleksi anda dan bingung memilihnya karena semuanya bagu-bagus.. :D
Share Social Bookmark Love
Anda bisa mengakses tutorial yang lain dengan membaca serie dari Share social bookmark atau membaca artikel pada Related Post dibawah:

Berikut tutorial untuk menambah icon diatas sebagai share social bookmark pada blog anda:
  • Login ke Blogger.com
  • Kemudian Tata Letak
  • Pilih Edit HTML
  • Centang Expand Widget
  • Selanjutnya Copas kode berikut diatas kode ]]></b:skin>
div.sociable { margin: 16px 0 0 0; text-align: center; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable li {
background: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 35px;
height: 35px;
border: 0;
margin: 5px 5px; /*jarak antar icons*/
padding: 0;
}
  • Copas kode berikut diatas kode <data:post.body/>
<!-- Star Social Bookmark --><div class='sociable'>
<span class='sociable_tagline'>
</span>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ipyQjafCI/AAAAAAAABIY/X5rAbYhpfno/s320/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='http://4.bp.blogspot.com/_5yyQgf23Pco/S1ips7jKTcI/AAAAAAAABIA/AwTGeTNl1tQ/s320/delicious.png' title='Delicious'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://1.bp.blogspot.com/_5yyQgf23Pco/S1ip0OGyhCI/AAAAAAAABIo/oZPuLgBkpr8/s320/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='http://4.bp.blogspot.com/_5yyQgf23Pco/S1i9Gk0HenI/AAAAAAAABLQ/D5BNFpKtb9o/s320/mixx.png' title='Mixx'/></a></li>
<li><a expr:href='&quot;http://google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ip2m9pNBI/AAAAAAAABJA/Llz8rTUkUmQ/s320/google.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1ip1iQFZxI/AAAAAAAABI4/kwhxzaMQupE/s320/furl.png' title='Furl'/></a></li>
<li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://2.bp.blogspot.com/_5yyQgf23Pco/S1jAk3GYBOI/AAAAAAAABLY/BuLB3qK0U1E/s320/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://1.bp.blogspot.com/_5yyQgf23Pco/S1i8IxdjmdI/AAAAAAAABLI/6Is3ZzZQTDI/s320/stumble.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='http://3.bp.blogspot.com/_5yyQgf23Pco/S1iqFfVXSyI/AAAAAAAABKQ/8mO0V0oaLtM/s320/technorati.png' title='Technorati'/></a></li>
</div> <!-- Tutorial Blogger. http://rasiqzonetwork.blogspot.com--><!-- End Social Bookmark -->
  • Terakhir Save Template
Semoga berhasil.. :D
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.