Bukankah
teman-teman semua pengin blog yang dibuat itu kelihatan menarik? Kali
ini saya akan memberikan cara yang membuat blog Anda semua lebih
menarik. Dari sekian banyak pembuatan social bookmark, cara ini yang
paling saya suka disamping simpel, gambar logonya lebih menarik. Yang
akan saya bahas disini adalah css image bubbles transitions, dan
sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser
firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa anda
lihat disini.
Sebelum
memulai ada baiknya anda backup template anda terlebih dahulu,
biasakan untuk melakukan hal ini jika ingin melakukan pengeditan
template.- Login ke Blogger.
- Klik Rancangan.
- Masuk ke Edit HTML centang expand widget templates
- Jika terjadi kesalahan sebaiknya download terlebih dahulu template anda
- Copas kode css berikut sebelum kode ]]></b:skin>
.bubblewrap{Cari kode yang mirip seperti ini :
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
<data:post.body/></b:if>Kemudian letakkan kode berikut setelah kode diatas :
</div>
<div class='bubblewrap'>
<ul>
<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li><li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li><li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li><li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li><li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li></ul>
</div>
Simpan Template.
Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, anda bisa ganti dengan gambar social bookmark yang sobat punya.
Semoga bermanfaat
Post a Comment
Post a Comment
This Blog is DOFOLLOW, Well Please Comment and are not included in spam Thank You..
Cheers,
Admin