Cara Membuat Images Bubbles Di Bawah Postingan Blog
By Unknown - Friday, September 7, 2012
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.
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.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Cara Membuat Images Bubbles Di Bawah Postingan Blog"