Cool Bubble Subscribe Widget

Kali ini saya akan share bagai cara membuat subscribe widget dengan menggunakan hover efek. Sebelumnya saya telah membagikan cara membuat bubble subscribe wdget yang tidak kalah menarik. Bedanya hanya pada bentuk dimana widget sebelumnya berbentuk lingkaran, sedangkan ini berbentuk segi empat. Sekarang mari kita bahas cara membuat Cool Bubble Subscribe Widget, ikuti langkah berikut.

DEMO

• 
• 
• 
• 
• 

Login ke blogger
Klik Template
Masukkan kode berikut di atas kode ]]></b:skin>

.mplwrap{list-style-type:none;margin:0;padding:0;}.mplwrap li{display:inline;width: 60px;height:60px;}.mplwrap li img{width: 50px; /* width of each image.*/height: 50px; /* height of each image.*/border:0;margin-right: 4px; /*spacing between each image*/-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */}.mplwrap li img:hover{-moz-transform:scale(1.8); /*scale up image 1.8x*/-webkit-transform:scale(1.8);-o-transform:scale(1.8);}

Selanjutnya klik Simpan Template
Klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul class="mplwrap"><li><a href="https://plus.google.com/u/0/id_Google+" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFW-Kboexps-rvTfBv-Ynl88t_6Mfz4ddl_IoLoOJ3gq2hYzaaR-DxEnPcpcxhTg6iN3W-eiUHVGHKmJWqaSzfhIbjQTkrIefBMNP6Mu57HaNMYrS1xQ_XvohTl2rQ4UAIX31hvB5Oou8/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li><li><a href="http://www.facebook.com/id_facebook" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYKBtqRMae6pRvm56arSJP_pXQlxtr6gLIm8RhBsOJ5dcfvwxgdcQW8zHhbW79hi8-8XYzVjXgJKUi0IBSVgmfj1yzukNVKPr_Q2jFyXziwEXQLgIc0UmEY8v42z3cIUgQDf8UkEvX5s/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li><li><a href="http://www.digg.com/id_digg" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6n5DFrjWRCc8UN7qbOJQ42bni9U-AmMQFJrLafZdC6z7kcr4OwmypnZVFFvM9TysAKpm2T4xx9BJoxtJ6xTix4oJxc2aGVyGVqUBJk2ATFIbdGKR47oXvvecmsbjiZf2NrN56e-MgRw/s1600/bloggertrix-digg-icon.png" title="Add to Digg" /></a></li><li><a href="http://www.twitter.com/id_twitter" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_pPVtlR3QDBu9L2vEf-OQB69qmYROnTQxx-urkcRxqS1b2QV_y1aFjrwLc-Rr_iPEXJNmM5JrdpGPtnVj5d7SzgHA5jzBrhBduj2icWHb-B0dz827_N81XME-voOf2iSXEAZajE0GYg/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li><li><a href="http://feeds.feedburner.com/id_feedfburner" target='_blank' rel='nofollow'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhg0U6d7eN8rSdDuLHCpImOmExLNzwdYfs5Ik-Juoy4gd9zPMkJS2L4MqVdIkG2WK6O1IE9q-zgUD1EzFF1F0N4waY0NALDWxo90It8iMKxHcXlAu59XFFlSYo6zQNHpz3qGgfgqHS1oo/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li></ul>

Ganti kode biru dengan cetak tebal sesuai petunjuk

Klik Simpan dan lihat hasilnya
Demikian cara membuat cool bubble subscribe widget untuk blogspot. Semoga bermanfaat bagi semua. Amin.

"keep spirits and do the best"