mas template

Membuat Images Bubbles di Bawah Postingan Blogspot

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

Semoga bermanfaat
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 Creating Website

3 comments:

  1. sahabat punya saya kok ngga ada code


    gimana ya sahabat ?
    mohon bantuannya :)

    ReplyDelete
  2. @Rangga:
    Kode yang mana yang nggak ada Mas Rangga, intinya begini cari kode yang mirip dengan data:post.body/

    ReplyDelete
  3. mantap mas, cuma link contohnya dah broken...

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger