- Home >
- Tips Blog , Trik Blogging , Widget >
- Cara Membuat Widget Jejaring Sosial Tema Windows 8
Posted by : Cyberr Pamekasan
Minggu, 30 Juni 2013
Hallo sobat Taretan Mania . Semoga kesehatan selalu anda rasanya setiap harinya. Sehingga anda bisa beraktivitas sesuai yang di inginkan. Amiin.
Okkey, kali ini saya 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.
Cara Menambahkannya ke Blog
1. Login ke blogspot.com terlebih dahulu.2. Setelah itu silahkan masuk ke web anda.
3. Pilihlah menu Tata Letak
5. Setelah anda pilih maka akan muncul halaman baru seperti gambar dibawah ini. PilihlahHTML/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXXw9Rvr_8vrI-w9N6VPk5PiASM4j9zhwOQr8vtVVQ9lWaNh09QqE2x9XG19acmggZC6Py4OY44t4dUhnv_27x6I1mqtJebDgFAkGkryhMnNtlTIAHiCp263SCMIRTpQN6o5fAofn1Ec/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/AVvXsEi2I1Kyh-C3t-JgxHkEcZbQpXoaL9465cG3-eMPn-In5L67zzTtjtx8Loe-3XNMg4XEm9EXZb3DN7r0y8Bcp1FzFooLW1q6bzOqfzKFDr5GKWZ700jmJQSwQmXJStEiPWjo0BUf0WDlGzKw/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/AVvXsEigFyv0HFgNKpKtu4Jq7DiUgtkv5ZUMWGpCqu093pQGdciAcwcNvAmBWE6M_rNqRBb6bSdMcidfDF-ZJaX2lhxc2ClrKFVlF-nHk0o8qTm36AMnxJdycb3WGfFeWMODaM0CErjMxwf5m_tc/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/AVvXsEgUiMZv3RcnOQhfMyXneau5I535gQc4-15pKNw3HvQV3P922yDUCcqQ5m5n6PvvChxIui_PJvwdKpCRG_knHACC9Ct-znE1GX7IwXE23poN0OD2e5vBApO4liW73P56thmYZ7ouEIGPOHd-/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/AVvXsEikVCmqPLLcpnmLYn39CGvkGLJqbTTYkh5Rxo3_cTzpgF6yWaNJzt_G02cCBIidVbxQleabrrRQqSnImFxOXxCAdDaR4hGDAydfIsI07-aKFHi0iNjxxc34ccTqzinDSMekCPrNbsBzjVw/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/AVvXsEgUadv2TAjPSpFLECvr-Hm7W6uiIVOQNWQRtei7M5rSooVBD16CjbZypSWHLdzhSE3xFWlitY0v949TQfeCcfbm5A79gunqWXCxD0n79WBKsHHKL9nWN23MOSn0m0uvK-Ly-aAXZbDdk78/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/AVvXsEjp9wEb6Ka8PnFCokUOnBzn8Qny3cyBQ6FI0ahrggWAuqGcQGrvW1oMcRdr9LAvg6-x9kk-5CKFPvtwY9mRf41gJLipFRC0qZpxhbbvo6Tc6SXY44QIwS7B5062P3hw8yud1kZNW0UBgZM/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>
7. Gantilah tulisan yang berwarna sesuai ID anda .