MEMBUAT SOSIAL MEDIA MIRIP WINDOWS 8 DIBLOG

Edit Template blog - Selamat datang kawan goglees, setelah kemarin kita membahas cara Pasang Widget IP Address Pengunjung yang Resmi dari Google kini akan dilanjutkan dengan pembahasan yang berjudul MEMBUAT SOSIAL MEDIA MIRIP WINDOWS 8 DIBLOG. 

Tentunya kita sudah tidak asing lagi dengan tampilan yang diberikan oleh raksaksa Komputer Microsoft Corporation yang tampilannya diberi nama dengan tampilan Windows 8. Dengan adanya windows 8 kita dapat meningmati tampilan teknologi yang begitu indahnya.

Tampilan indah tersebut yang melatarbelakangi adanya artikel ini. Dengan memasang widget sosial media mirip windows 8 diharapkan dapat membuat tampilan blog anda menjadi bertambah indah dan nyaman serta disukai oleh para pengunjung. namun saya sarankan untuk menerapkan widget ini pada sidebar, karena ukuranya lebih condong ke lebar daripada tinggi atau sekitar 300px (ukuran default sidebar).

Tampilan widgetnya seperti gambar dibawah ini, jika anda berminat langsung saja terapkan diblog anda.

Tampilan widget sosial media seperti windows 8

Cara Pemasangannya

Seperti biasa anda login dalam akun blogger anda. Login pilih tata letak pilih add gadget pilih HTML/JavaScript.

Setelah itu copy paste kode dibawah ini kedalam HTML/JavaScript.

Kode Widget yang  harus anda copas<style> .seconds{ text-align:right; color:#000; font-size:10px; } .supportive a:active{position:relative;top:1px} .list-style{display:none;} .widget-item-control a{display:none;} .widget-item-control a{display:none;} #supportive{width: 300px; float: left;margin-top: 10px;} #supportive li{position:relative; cursor:pointer; padding: 0 !important;} #supportive .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #supportive .icon{} #supportive .facebook{width: 147px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-1urgBDR_2LkOtPp3ji20qcmLFr9s66InXz9j6ZsTsGHlkIk27x8GXhBl6MwPPFEtnUFiFXg7RpIf5e1Y8F61Vz5SI8H0iSvWFcmA0hUeLLp4tytMIlyullr7UhhSnIn1Hm-oj6f_ZU/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfa8l9kgGXfc13Z42ZETuzz0p3ZQ028ZL0-v_6_Z3zq-wj1qoARD7pYZMd-d5HMl-RszO3153q82VA-OwlUr_htI5NtmolVfyz_cf5aeVkx4RdM_iB4KCPfkDrY4UUMQQ_cLxlUv_PHaMW/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfcJxiPMpkgcM1T7u_rsSiMn5-G1ZHGBn3cVySO-z-h-ydsnpSp7_8zIlSAQPPWGvazJ-Nnn85XjiAsIlRjg2aal_GXXZQ8TpqIqoehiL6JYiD9Qt1xCRO6x8z1fAf7vu_gtjzUO9eXUS5/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8v2WO5o6haO8WqpmrOjM-22-uwabktxU6xf9bll5ATzuy6pW4hUT0Wg_tGi0ZV2FLEJy-0YcQW073oYO9Lczohyphenhyphen0oPFVrbjLwkwHfXDQ49fd9U-FNF8moVagrt2RHYf4z7hvOXfcBDqK/s1600/rss.png") no-repeat center center;} #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLi5NnrQpVAqz2n74bb4L1HweIvBijIqvp6vdoxnIFt4Z9N7MnMKQACIFn35Abtg9xKv-0FKwe2tKrN7BRckf-fDUOIM5T_OyZKtk1W6MokD2F5gbob6f9TjwTdpj2KWgCuVmJ8E0qZU/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Q2RJMAhhQqKHcTIQYIHGNndCikt_F0NeK3-WdoUuaDhonJ_U-_BYeOFsMnKCkBAlIg4O5IZxu3A6qLSYhSzjAU9CMPWb2Z2Ce7c5qqpAv6BLP0q7vinBuAQGFLm2ElLRLMMvkTmy6Mc/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgall2z_LM5bsfilPLO-TfXDfVPkereIH6Pqdk54GZRbYT3q9KL2dGNZwAw8EeD6JLFCeQGTDS2cV-hEFyqmu2uaec71C-dJpOFexu1Es2Hd4FGwxXxrJt4gXhLVQifKTak-mGnsedBDDk/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} </style> <ul id='supportive'> <li><a class='icon facebook' href='<span style="color: red;">http://www.facebook.com/FacebookFanPage</span>'/></a></li> <li><a class='icon twitter' href='<span style="color: lime;">http://twitter.com/TwitterUserName</span>'/></a></li> <li><a class='icon googleplus' href='<span style="color: yellow;">https://plus.google.com/Google+ID</span>/'/></a></li> <li><a class='icon rss' href='<span style="color: blue;">http://feeds.feedburner.com/IDFeedburner</span>'/></a></li> </ul>

Ganti kode yang
Berwarna Merah dengan alaman URL Facebook anda.
Warna Hijau dengan alamat URL Twitter anda.
Warna kuning dengan alamat Google+ anda.
Warna Biru dengan alamat URL Feedburner blog anda.

Kalau sudah klik simpan deh.

Bagaimana sob? cantik bukan tampilan widget sosial medianya. Mungkin hanya cuma itu yang bisa dibahas dalam MEMBUAT SOSIAL MEDIA MIRIP WINDOWS 8 DIBLOG jika ada permasalahan silahkan anda tinggalkan komentar diblog ini.
Untuk perhatiannya kami ucapkan banyak terimakasih.
Sekian.