Membuat Widget Sosial Media Metro Style Di Blog |
Ghiyats Blogs -
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 Eleg
an 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/
108021608037797119476"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUj-3faAtOHDGftIPLIFPOZfu1iayA-xmMzDTrZlWhY2o1qRAXivdp91KxO5sFqEsLYNM4cUIMbLWrArW3gJu5q2GwqFIrA817V2TKPkigYLtzDN-vqfE2HJmFUHw9Sdn658wpK6Of30/s1600/bloggertrix.com-google-icon.png" title="Google pus" /></a></li>
<li><a href="https://www.facebook.com/
Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmU8zbl80_9pSOTbCe_bp1ptlRsOv3jkg9R-mkue2HiU9LK7cKaIxkjVrLWGMWvs1ir0pAB5L3CicaRbTn_05-f4unR51KdZStpkYmKNUpLhtc8e7vSkbdRYfkQoVV_trJtL3jhd4yJI/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/AVvXsEhQ8h6R9e9fZCbEJW6JG4jeIf_zXMIdnEnKZdCd_jlL6P3X8p_wRRPHv7_USLozJ0_g6LyEViIHLf8cSFmz9tl-KkWFHpr1t8NPkcatgjAZXwoXBBeMCQbFSH687P6ZHkTYvFsQzvIF4IQ/s1600/bloggertrix.com-digg-icon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter.com/
GhiyatsBlogs"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXuUoWMOyqznBbQxmT6vi16V4X8EpUPb8bd6lz5vOVg7sSKHSGqTmrH79nh8P8GZvQvdggVqXrRIIRQWf1YksOxPuSKNAF-kVH-ps0_z5zoLiYQix_6v1dfezD84BdD_6eZpRTnPDeLw/s1600/bloggertrix.com-twitter-icon.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/
GhiyatsBlogs"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUWfEG-EgxKy0TOJrUKuLABLBu5Rfjsb3nlKE9LSWRPtm7sMyIlyNi-JL6c0-Uuo73xQNYIsLJ38R_P6lCIeh-pXXCEYs4VgBVMO8TPqFrCoUsyaLICBYfJyaHtX6T4_pWhBv-wxkdrI/s1600/bloggertrix.com-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>
- Ganti 108021608037797119476 Dengan Id Google+ anda
- Ganti Username Dengan username Facebook anda
- Ganti GhiyatsBlogs Dengan username Twitter anda
- Ganti Username Dengan username digg anda
- Ganti GhiyatsBlogs 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..
Happy Blogging
