-->

Membuat Sexy Social Bookmark Terbaru Maret 2011

Sebenarnya artikel tentang membuat sexy social bookmark pernah saya tulis sebelumnya, tapi beberapa hari ini banyak teman yang bertanya bagaimana cara membuat sexy social bookmark seperti yang ada di blog ini. untuk tutorial sexy social bookmark yang lama baca:new sexy social bookmark.

Di artikel ini saya akan memberikan tutorial tentang cara membuat sexy social bookmark yang berbeda dari yang dulu, untuk contohnya anda bisa lihat di bawah artikel ini atau gambar di bawah ini.


Cara pembuatannya adalah sebagai berikut ingat backup dulu template anda sebelum menjalankan tutorial ini :
1. Masuk ke dashboard blogger anda
2. Klik design > edit html > centang expand widget template
3. Masukkan scrypt di bawah ini di atas atau di bawah kode : ]]></b:skin>
div.sociable { margin: 16px 0;}

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 ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
4. Kemudian letakkan scrypt di bawah ini di atas kode : <div class='post-footer'>

<div class='sociable'>
<div class='sociable_tagline'>
<img alt='Satriacell blogger tutorial tips trick SEO & Add-ons' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZ182p5b_oRQg9IV-u0YVMYPWRS397Ls0PxOftF0a2Xa234LqUAlNQKZyey9Jd7OlouJZGqPTFEcaFyfdy58d4RLnChqgJTCf0CuAuNRygsyM2dS8WBmzks407Lv0fEJEL-d4NJ0HKHWy/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<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'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB9qEMVciExofqQAnKMZYJ_WYFIzmeAxdpJWrzOo3uoQx6RyLY9nvixu8P0UisTNYUz3Iae3X4aIT-T_e1D9ia-n03oGLRwyS05J53VAyzJBCY8v45Lfp4QeuhyjjFEJ9ygxs3JTzWz0Bt/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9-s1cEonJm0EXf-vkBX4mShIDhQznz7a_yxyGzsEvcIadJ-ZZtG6lLRJ7f9xwm576LW1Ezo-hFnFzeacBJgC-KB7siD33Xvqf0ekOhyCI0EHjuvKKDw6xbSlgk37m8JRQxGb8puQjTwq/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8szvq0Vh4H-OmCpbJWKBtBF-QrLbuWezwA8ZWW356IVTsFHZXWmpDsncwGFJvWXexCCrjgU4zwcDOlNvwXyFLLXxot1MNJpDn2_iKON8qb3EnU-AC1VVNQV0JRvscSvgv0Z6fx3_pr9CD/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDrZYcEGwNV3LOw4lWdrAHkRQVVcWUQNA5p0QEGelL58ItocuE8JDAAApzxQT76bR_UFHtMVO-zDlIWcivc6wEDcqzB90HNSAKNcZl_xEw5TXDv63AzZOHjr6uJA7XVs45KEY_8itOOWu/s400/googlebookmark.png' title='Google'/></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'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhf8G4DO2uK-xFzRZPPvSvo-5q8tPecIjIjderj5hkpPFgcrAKJKZAipEJvhrwjfUxYCx-V3Hb7zlPNAYbrs6RadoX39jW7G9KofNFhCliGMNFYgCyi5Mb_1EvNQtNLRgTyJEf1_M9aBk/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLj35CQrIxDqfKelO0N3sTCoydCyxzvmudh_FaRejbaYjr-501_Nj1unQqXPuHt0Z2xTyCCctfNiWWVguAwaZYlUku4Lqpez_rVTWW2QeA-ZSzN97VZpvJVCUs0C7taaDSSfaarXp3JjKJ/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59pCj9Ub991OJnuAVPn2HaGMlmhcWkzZqrylgLy63pEztes_jORMs3jHMuAehHo8anRm1sb6EZZAqaYfgOpLpG3hk16mwy5kVel3hfz1lT08oDAYlxP745Hk44zuBCo6YHNHuGr8Pm3tc/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
5. pratinjau atau langsung simpan template anda.
Selamat mencoba dan semoga berhasil

Ayo dukung terus kontes SEO Terbaru yang bertema "javahostindo web hosting indonesia" dengan mengikuti link berikut ini |javahostindo web hosting indonesia |

Posting Komentar

Label

Subscribe Our Newsletter