Cara Menambahkan Icons Social Bookmark Pada Postingan -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Menambahkan Icons Social Bookmark Pada Postingan, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Sosial Bookmarking, Artikel Tutorial Blogger, Artikel Variasi Icons, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Menambahkan Icons Social Bookmark Pada Postingan
link : Cara Menambahkan Icons Social Bookmark Pada Postingan
Gambar dibawah ini

Cara Menambahkan Icons Social Bookmark Pada Postingan

View Demo

Beberapa kali blogwalking ke blog teman-teman tidak  jarang saya menemukan kenyataan bahwa masih banyak blog yang belum memasang tombol share atau icons sosial bookmark pada blog atau postingan. Entah karena belum mengerti manfaat dari widget sosialbookmark ini atau justru karena tidak mengetahui cara memasang widget ini pada template blogger. Padahal banyak keuntungan yang dapat kita peroleh dari widget share ini, diantaranya jika pengunjung mensubmit artikel atau blog kita pada salah satu situs sosial bookmark tentu hal ini akan menjadi sarana promosi blog yang baik, meningkatkan traffic visitors, juga perolehan backlink. yang tentunya akan mendongkrak page rank google dan alexa blog or web sobat.

Nah tutorial kali ini, saya ingin berbagi trik cara menambahkan sosial bookmark pada postingan. Karena trik ini saya terapkan pada blog saya Jejak-Jejak Hati jadi saya memilih icons sosial bookmark khusus seperti screenshoot diatas:

Bagi teman-teman yang ingin mengganti icons sosial bookmark diatas silahkan saja kembangkan kreatifitas sobat, berikut ini beberapa icon lainnya yang bisa sobat gunakan

Oke, berikut langkah-langkah cara menembahkan sosial bookmark pada postingan

• Dalam keadaan log in pada account blogger sobat>>> Klik Tata Letak>>> Edit HTML>>> Expand Template Widget>>> Cari kode ]]></b:skin>
• Sekarang letakkan kode berikut diatas ]]></b:skin>

/* Social Bookmark
----------------------------------------------- */
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;
}

• Letakkan kode berikut dibawah 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1p022zX3hN-EDCNR66B949D77IB-Xpo_P7NfsoI41grSlt0uoPFAf1zvRmE-BhfSvaeAoMnM1IMGKXk1XUY0TQkKBaFX1c1ZVpfK6bIN7r45iYpAfvAmIEc_Aclc1iQ0ProKntM93jmQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgybXIosIcuftzvpvjEoYQ-_uQFXA4jpUfkrtTqYKGbp1WTol2fQRvTispsInoEvsHpi51y3NmsbmGwLdG4P6utnNOAFpaQPnROQMIVZJ00dNdhdcjW6PBZ4sKT55KX2eYmOvq-yhDJ5Eo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNEV07dIHgl3TGoh0FHecKtIONTy1GPyW4_7j7B68-wXg10iTCI76QnOPRJn3Q8Q8LFW46Nm3YbnrX60lamHhg2aSTzAUhf44mAQYg1opYN5QYCmfwgrK0IQMzvKTXnBmZARhqHkjEF0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpxfh_RjpSlPrEUHx8ltKooLYm5myb61CsutBErKWxNtdVB7ZAdAD-hnfQAduxI35-_bMWguAlFUrmu88hIOObzXINJkksBjsXDL4egkGyWoyFhYsgbsuDEzyvVJsYcNW7xnDOnRwdEI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR6kGGftemFoq0jiLVqYlXuk74Gbg8-INWamFMLCROIP_PhKU4w9EpL2VFd1zVgKHFuHPLnRhi0SjvCPOWqQT_1FwRJM0gFE0ShXMXgR_G3T3oW7-rh8rNHqDeLpdk_c0BS-o_9vTVyZE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUsSN6v1rjCCd9b0pS8EnJ5-Pdn-asiiKWN4GvgdhG3anxYJZvIuX0ESpP3ZER_xlh6bohPHkLM9dv6woDiw2YNyFPWaqvbmNiSrOC_4B-bfXJfrrLhey48eJ8wjLEfsjNagjt-rpuE44/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSS0_dob5Lz8KtXBjQACBI8mTFzXKTykKpNDt9GAAZNxRpoVfEEJpweW5cAixoLWhulmO1TLVwpxzCaYIKNtV6Xqt6yy9W8rnz_kw7ySNNTOJBhj326F3Yx9UjaNh1E95smBxYUJlH6pI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje5qtLJNmWgbC8ROd4jDew8JgvVOXFOB5J9p8HKm8k1ulhEH_jl8Wyz2R3tEiDL-gwRUnNtwFGCDYEoquNFy_cbyymb5iIKvRU_QjjnTr-D0qri-gppHbt7eIxm3nIZVAWP7_iT0YpDTs/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpdc7BChNfLJ9puHr0h9qVujSypS7sp_oIL_cooRXvVit8IFhc_5FPu8fiBoJJKWwEyixAWTt4vMXrV7L63NXw1xSqgW4ht8pvThKN3rrfINLJ_qeYqY1e8zCX4LgdevSUR_s-Ito0jlE/s320/technorati.png' title='Technorati'/></a></li>
</div> <!-- Indahnya Berbagi. http://amatullah83.blogspot.com--><!-- End Social Bookmark -->

• Simpan template. Selesai

I hope you enjoyed this tutorial comments are welcome see my result

Demikianlah Artikel Cara Menambahkan Icons Social Bookmark Pada Postingan

Sekianlah artikel Cara Menambahkan Icons Social Bookmark Pada Postingan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Menambahkan Icons Social Bookmark Pada Postingan dengan alamat link https://trikmitos.blogspot.com/2010/01/cara-menambahkan-icons-social-bookmark.html