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>
----------------------------------------------- */
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="http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title target=_blank title=Digg><img alt=Digg class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4t7dW3D9cFvYuCn5Rud04cUSnYyPrPk1olRfyYlsLzOODFLYGdEwUi6B7SITnqJ6bxCEFHGURDTGiABHPfQq-fqyjW65tfET-CBjpSOQw89JLeryY8ftUE4XtiiOCq_Sh7YQrQpACII/s320/digg.png title=Digg/></a></li>
<li><a expr:href="http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title target=_blank title=Delicious><img alt=Delicious class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9LVst0lIWqTr_0sCkx5zMczxaviK0dbMQWiBOtP6EGdPRCQd7DLTUt61ssSh4EjedzCZ8FNZDtdJEqQm_ikWHTGv6PkenT3WUpWfrRX_0ThyaASdRVE4q9I-4tYyP72VTUrbh8_mRsw/s320/delicious.png title=Delicious/></a></li>
<li><a expr:href="http://www.facebook.com/share.php?u=" + data:post.url + "&t=" + data:post.title target=_blank title=Facebook><img alt=Facebook class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdanlIvZ-tMCbjJLzEiI_BliMrNYXv7dJ2McyaZZYXcA4C5265PRvVBNTv4BCKWOW_l4hqW-2uZ6MuJKBiHNVRsmZdsxCAWuZ-FRNC2eE7xlH_n9b98K9JuKuqcX0Cw6m5sUkaoTnVbws/s320/facebook.png title=Facebook/></a></li>
<li><a expr:href="http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title target=_blank title=Mixx><img alt=Mixx class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjARxZ9wtnhVCTb1cTbHqexpoJeWME7H8xzDjdaWNXT8RsMLtvEnEX4Sz9NM1mmuVD_GyR7jx-DF-MwGt97TOWkXOIVFDdkyldtAsSFHKQWYv5BgkiMstr6WrhqcFRjU22o7cJfhU6KuKg/s320/mixx.png title=Mixx/></a></li>
<li><a expr:href="http://google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title target=_blank title=Google><img alt=Google class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvL2XXiJqAh4hDsVnBmvGdp0c3OWQcCJPGxqazGsPW_7ddAymcKxI4J93AJA4-OhzedggK2gIhyphenhyphen13YFQe7DGtBCZrm0KMXOJRrzxAZo1OlsnpbCnOCcvkgSRjiqZd9nk6Bx12XJhaO1E/s320/google.png title=Google/></a></li>
<li><a expr:href="http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url target=_blank title=Furl><img alt=Furl class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh11gyYr81WrQ5_Ryldu9a6I7hq9JGy4CtxQ_UykMHImQcZeVm213H3XWfKqLFPljdGtx_0bTvSJusuUHLe619PhH2fiPU8TyVmlmoIKK4SQCpy_1tdGdgWoGBY5aqwJUFtmL2MSyM7Y1k/s320/furl.png title=Furl/></a></li>
<li><a expr:href="http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title target=_blank title=Reddit><img alt=Reddit class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzaoM0ew1FSLbZRtm2_ImRzUYhVjTqkj7RGp4zA7pf7mlA721d-PPA9WmFmT3knyILZa7JCCPTn_-hL0YaF798pLdwCejd6ooTm7GjqQH29BdZKVICJD7EcyjebL3seUtFqTAOJLEgt5I/s320/reddit.png title=Reddit/></a></li>
<li><a expr:href="http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title target=_blank title=StumbleUpon><img alt=StumbleUpon class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQQzMhl01OrR4IQ1_bVEGN1xGKVJHr3r4sRsShza_UVlGX1h2zRW9SJzT2WBrAM1F5QlbHcbNNAWCz_S2tCABeU584C0HT_r8ssFv19Jvz-WR_K489H2-O952oSDmgpZvMjOh9_-QyJo/s320/stumble.png title=StumbleUpon/></a></li>
<li><a expr:href="http://technorati.com/faves?add=" + data:post.url target=_blank title=Technorati><img alt=Technorati class=sociable-hovers src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJ970wKgasrm1SZOPiXdagswLurOtVaX3cp48SGZPlhKA9XvC5e065zQuI-MxH8MgY66laL14Ec_q97TT-7wLdO4rDU-Q8MCaMsEQ8O_5_o4LODVq-gS9PlA8X69QhDfywbfyvyXhc7w/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
Post a Comment