Cara Mudah Membuat Images Bubbles di Bawah Postingan Blogspot
Blogger.com-Membuat tampilan blog menarik adalah sebuah keharusan. Banyak cara yang bisa dilakukan untuk mempercantik blog Anda salah satunya adalah membuat images bubbles dibawah postingan blog. Berikut adalah cara membuat social bookmark berbentuk images bubbles yang terletak dibawah postingan blog.
Cara Membuat Images Bubbles dibawah Postingan Blog
- Login ke Blogger anda dan kunjungi dashboard blog anda
- Klik template
- Masuk ke Edit HTML
- Jika terjadi kesalahan sebaiknya cadangkan atau download terlebih dahulu template anda
- Coy dan paste kode css dibawah ini sebelum kode : ]]></b:skin>
.bubblewrap{
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);
}
Cari kode yang mirip seperti kode dibawah ini :
<data:post.body/></b:if>
</div>
Kemudian copy dan paste kode dibawah ini setelah kode diatas :
<div class='bubblewrap'>
<ul>
<li><a href='#'><img src='https://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li><li><a href='#'><img src='https://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li><li><a href='#'><img src='https://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li><li><a href='#'><img src='https://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li><li><a href='#'><img src='https://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 anda inginkan. Demikian Cara Mudah Membuat Images Bubbles di Bawah Postingan Blog. Selamat mencoba.
