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 anda2. 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'>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);
}
<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='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + 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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + 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='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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='"http://technorati.com/faves?add=" + data:post.url + "&title=" + 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='"http://twitter.com/home?status=" + data:post.url + "&title=" + 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>
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
Posting Komentar