Membuat Images Bubbles di Bawah Postingan Blogspot

Tweet

Membuat Images Bubbles di Bawah Postingan Blogspot -

Pada postingan kali ini, saya inigin share tentang cara Membuat Images Bubbles di Bawah Postingan Blogspot. Bukankah teman-teman semua ingin blog yang dibuat itu kelihatan menarik? Banyak tutorial tentang cara mempercantik blo seperti Cara Membuat Text Berjalan Di TAB Browser,  Cara Membuat Tag Cloud , Label Berputar Di Blog, dll.
Tapi Kali ini saya akan share tentang cara Membuat Images Bubbles di Bawah Postingan Blogspot. 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.

1. Login ke Blogger.
2. Klik Rancangan.
3. Masuk ke Edit HTML centang expand widget templates
4. Jika terjadi kesalahan sebaiknya download terlebih dahulu template anda
5. Copas kode css berikut 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 ini :

<data:post.body/></b:if>
</div>

Kemudian letakkan kode berikut setelah kode diatas :

<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.

Itulah tutorial tentang Membuat Images Bubbles di Bawah Postingan Blogspot, Semoga bermanfaat.

Terimakasih, Anda telah membaca artikel tentang Membuat Images Bubbles di Bawah Postingan Blogspot dan anda bisa menemukan artikel Membuat Images Bubbles di Bawah Postingan Blogspot ini dengan url http://mr-odingk.blogspot.com/2012/07/membuat-images-bubbles-di-bawah.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Images Bubbles di Bawah Postingan Blogspot ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blogger Kendari