Widget Sosial Media Metro Style

salam buat Sobat Semua... Pada artikel yang akan saya akan bagikan ini, saya akan berbagi sebuah widget Sosial Media, Sosial Media ini berbeda pada Widget sosial media lainnya, Kalau kursor bergerak ke salah satu Sosial media, sosial tersebut akan membesar sendiri, Widget ini bisa menambah Menarik dan Elegan untuk Blog Kita, Langsung Saja Kalau sobat ingin membuatnya Untuk Tutorialnya Seperti ini.

Membuat Widget Sosial Media Metro Style Di Blog

---------------------------------------------------------

• Pertama, Kita Harus Login Ke Blogger, Dengan Akun Anda
• Klik Menu ''Template'' Di Dasbor Blogger
• Terus, Klik ''Edit HTML''
• Cari kode ]]></b:skin, Setelah ketemu Copy Kode diBawah ini di Atasnya

/* Code */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 40px; /* width of each image.*/
height: 40px; /* 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 */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

• Setelah Selesai, Klik ''Simpan''

Cara Pemasangannya :

• Pergi Ke Menu ''Tata Letak''
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript''
• Terus, Copy Kode dibawah ini Di dalamnya

<ul class="bubblewrap">
<li><a href="https://plus.google.com/1080216080377971194"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqk0gP0M9jMR0Wn_4DkpkZis8H-o6d_EXAZHJFWoXmNiXNi7_A4y9MVtI7Fd5Id8FB_FN38MC49_dvb4-FUwmb0XGDVZbfN-NGTtUa1ABOV_WhqIEkeeDVXuDnrIf_Chbcb55tsXBF3Y/s1600/bloggertrix.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="https://www.facebook.com/arieadie30"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMmxf0TRZZ7j_sixUwnpHVOQJefqktXbai_9N4rMmDyPa6cLrv1iQvCFhS5OSbHT45RdShLH_nnvfFMgp9rBjUTfiTiZxHFmEC9fmc6K5QZrh8py9aauDac0sv3zfIZU7seXWPA7ZpWc/s1600/bloggertrix.com-facebook-icon.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUmlu8B9aOYClpV8h6va-KL8kdR8ms3B3iJuwgc4jbWJ9aXR2WC-rQ3r8JeOJY1v4QLWHU3Y4ICdjC7aT3TmDhP2tpfKaEiGC5OBgVZQ2RS51TngcqQy3wi302WjgGyDAYnQ_lXyzQ2-w/s1600/bloggertrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd1L47nSQjkzbyDdRdpJ_Vyhr0ILOxBUMyRoYUrXfn03HlyCHUxH6TsWceo4m6q8lZHItpPAmo0wWRgqN8s7WTOswjOpY_D0xHQ_89wygsz0TSRPmbP-AeaJ0Q7kvhJlSrGDGRdFBZYFw/s1600/bloggertrix.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/arieadie"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZHbQ3jwUK6ykJ4xucgpUzmh_zK2dJiiRJ6KBn6kAYlYM71pvyEms3fnYCecYUIbbWmxTvel-PWUbR-VsoRS3uGNeKtlruzJ59uIHXH0qh-LaSpez6CBxaY3fp-w0AJ3atCe_BAFHJ0k/s1600/bloggertrix.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

• Ganti 108021608037797119 Dengan Id Google+ anda
• Ganti arieadie30 Dengan username Facebook anda
• Ganti lindamarlina40 Dengan username Twitter anda
• Ganti Username Dengan username digg anda
• Ganti arieadie Dengan ID feedburner anda
• Setelah semua di ganti, Sekarang Klik ''Simpan''

Demikianlah Artikel ini Semoga artikel yang Saya bagikan ini bermanfaat dan Mudah Untuk Di Pratekkan, Silkan Beri Pendapat Tentang artikel atau ada yang kurang dimegerti Silakan Berkomentar Di Kolom Komentar Di Bawah ini, Terima Kasih..

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit