Membuat Images Bubbles di Bawah Postingan Blog

Membuat Blog terlihat lebih menarik merupakan salah satu trik SEO, mungkin tidak banyak dari sahabat Blogger menginginkan trik tersebut. Banyak cara untuk membuat Blog terlihat lebih menarik, seperti memodifikasi entri populer post, mengganti warna background dan memasang sosial bookmark. Yang akan saya ulas kali ini mengenai Sosial bookmark, Sosial bookmark ini menurut saya sangat menarik dengan tampilan simpel dan logonya pun keren.

Nama tampilan sosial Bokmark ini adalah css image bubbles transitions, image diartikan adalah gambar dan bubble diartikan adalah gelembung, image bubble adalah gelembung gambar. maksudnya adalah Efek gelembung pada akan terlihat jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi menggelembung/membesar apabila cursor melintas diatas gambar. namun kode ini akan bekerja/efek ini akan terlihat apabila dengan menggunakan browser firefox versi 3.5+, opera 9.5+, safari dan chrome.

Sebagai contoh berikut ini efek yang dihasilkan pada  image bubbles transitions

 Live Demo :

• 

Jika  Images Bubbles css image bubbles transitions menarik perhatiaan anda berikut ini langkah penerapannya :

1. Login keakun Blogger
2. Pilih Template => Sebelum melakukan pengeditan sebaiknya anda Backup terlebih dahulu untuk antisipasi
3. Klik Edit HTML
4. Kemudian anda cari kode  ]]></b:skin>
5. Copy kode dibawah ini dan anda pastekan diatasnya

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCQeXvTVAC1bOa5hUZXI4ZP7wRYALZFs73z-g8plIebY14aQDqXwAwKn-phSDC2KDrhAVuRtKMFBIWOT3Ux5y9-aNkq3_kJdDksYV-blKBSHPodQVmA879bRvpHJnbjKd-5OMGnWJcDuk/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-YnDk3YkYcgJx9WWClhMRwnjWzepMFDqxCtZd0Zb_k2v-tfuYpAcibKISaoBFZ8Rflxs-SNsqLiuFe3i9vWUJI9HA48GbB79YTK21qo2hyphenhyphenIuHOHejjeqrC5HMUU6eFbgOtZPEFLYdUo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_BvL6Has43KIhVdk0pkeuyzg1qLJZ2U9UWYiCOVFEVJx3vdf6ACsGtyGPgIFhb6uBGWrypxR6-SCcd7upq75S9BJjvwFUYGgN5m6PI3OdUX7tmSnUAKdGoYqRJ49C4wyQmLxrMyN0p0/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.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);
}

5. Selanjutnya anda cari kode <data:post.body/> 

6. kemudian anda copy kode dibawah ini dan pastekan dibawahnya 

<div class='bubblewrap'>
<ul>
<li><a href='URL Tujuan'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9bCPi2Wgd1z3XclbaiILzoZ7EQfOA-HN4gTiWqYJhmcGDJai8qyCe3tAJmLqwP9-62kfTxY2MAgcLyKzfUI5NbYZma-aTZklvvoc3fswK1mwU7lEgdDRfMhXnZcgoqPCXJ1WhaLlO4Y8/s1600/dreamweaver-icon.png' title='Add to dreamweaver'/></a>
</li>
<li><a href='URL Tujuan'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCceZF6mUtCaV8yJJwWIm2KmVzor-2J19nIj12hVO3W0eMuWn3EoRz0LknjRb33sugmx3hEllvmSyPu7If_LrjaOPlFDAPBBPhWOvIHEec5Jj8zaRaqTJ5uvfP4TPw5ECYqSGwZFW4kqo/s1600/twitter-icon.png' title='Add to Twitter'/></a>
</li>
<li><a href='URL Tujuan'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDgch7FUbEw4KO0y2vrjsjwx7l0ggtI75jm0Bvo60e3wqbe6rsYetOdH1jQRC_KFY7MxiQwodJVGU2yfWDMwCdQi1yBxbrezpj3l9ESpYJgbqONPXC-6XKik_dRzjergdFtD6T23mZak/s1600/facebook-icon.png' title='Add to Facebook'/></a>
</li>
<li><a href='URL Tujuan'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQzXcoW8BaYXjezRI-vHH6KfIcE88Tb2PEC72F_nz9-bb6hpel9EiWh9iJt7KsHyWitlXdp3mGkiQwe30LwSJiQk-PxxRsf0ssw2T1d2Ccnl1_CF-h37uNJwx7wQA0Es0YQxQYL3d3tI/s1600/google-icon.png' title='Add to Google+'/></a>
</li>
<li><a href='URL Tujuan'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEUQBMt8_gCzoSk0pKAoyTuPj5v0svFxJWDSH0AWE_5B5BxzG6O2kPY5kbIqf7bhusFhBJpSJn27kriv2twpRUTrTZ2cPXriDUy_aDFzl7jubXJqjHvh0EV-AcDuGdmyaoXiY1pFtuAY4/s1600/dribbble-icon.png' title='Add dribbble'/></a>
</li>
</ul>
</div>

Keterangan:

• Kode yang saya beri warna merah isi dengan URL Tujuan anda

7. Klik Simpan Template

Demikian Membuat Images Bubbles di Bawah Postingan Blog, Semoga bermanfaat!

Bagikan Artikel ini