Cara Membuat Widget Jejaring Sosial Tema Windows 8 di blog

Hallo sobat blogger. Semoga kesehatan selalu anda rasanya setiap harinya. Sehingga anda bisa beraktivitas sesuai yang di inginkan. Amiin.

Okkey, kali ini ane akan share tentang Cara Membuat Widget Jejaring Sosial Tema Windows 8 di blog. Kenapasih memakai tema Windows 8. Tentunya keren dong..hehehe.. Karena sekarang lagi musimnya Windows 8.






Langsung saja kita mulai langkah-langkahnya..
1. Login ke blogspot.com terlebih dahulu.
2. Setelah itu silahkan masuk ke web anda.
3. Pilihlah menu Tata Letak

4. Setelah anda pilih Tata Letak  akan muncul tampilan kurang lebih seperti dibawah ini. Setelah muncul tampilan seperti di bawah pilihlah Tambahkan Gadget.

5. Setelah anda pilih maka akan muncul halaman baru seperti gambar dibawah ini. Pilihlah HTML/JavaScript.

6. Copykan code yang ada dibawah ini ke halaman HTML yang anda pilih tadi.

<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://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/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://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/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://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/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://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/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='http://www.facebook.com/FacebookFanPage'/></a></li> <li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li> <li><a class='icon googleplus' href='https://plus.google.com/Google+ID/'/></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/IDFeedburner'/></a></li> 

Gantilah tulisan yang berwarna sesuai ID anda.. Tara.... jadi deh hasilnya seperti ini.