Cara Membuat Widget Social Media Metro Windows 8

Cara Membuat Widget Social Media Metro Windows 8 - Hadir dengan semangat baru, Windows 8 dibekali dengan New Interface atau antar muka terbaru dari Microsoft Corporation, mengangkat nama Metro sebagai tampilan baru, nampaknya kini Windows 8 siap menggebrak pasar gadget nasional maupun internernasional, dan siap bersaing dengan para rival-rivalnya seperti Mac besutan Apple Inc. Berhubungan dengan itu, saya baru saja mendapatkan ide dari blog mas riefsaz, yaitu tentang widget social media atau jejaring social yang bertemakan ala metro windows 8, tentunya widget ini sangat cocok sekali untuk berada di blog anda yang bernuansa simple dan Windows 8 style.

Pada kesempatan sebelumnya saya juga sudah pernah memberikan beberapa varian widget social media seperti floating social media di sisi blog, yaitu widget jejaring sosial media yang melayang di tepi kiri atau kanan blog dan dilengkapi dengan efek easing. Tak jauh berbeda dengan widget sebelumnya, widget social media metro windows 8 ini terdiri dari 3 kolom yang berbentuk kotak-kotak layaknya antarmuka Windows 8, namun saya sarankan untuk menerapkan widget ini pada sidebar, karena ukuranya lebih condong ke lebar daripada tinggi atau sekitar 300px (ukuran default sidebar).

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini kedalamnya.

<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/AVvXsEhtcAkSiCvh90hpTKr1YMHwMBz4MAbP_qXXziGTUueYCcRCxA43ZCV5iOYKxxdJi8t_AMdoIbyZFK0-RcYHMO5d7mhHZkEm9Pq5DNn2eNEv8KrsLKk6nK6LDJJ1m0TImBc0q6jyGg21rzQ/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/AVvXsEijX2RlypAF4FAI2oTVnJqElH1iRS7LkxHFsuYPwXts7-mCY0O-ljWzyW7v9Jk2SezAMtjLyIe_oL16hqKtsaE1ziYcvJmhWaXJSK7jtm27qK07k6DLn-tuCityr_QgNqDVaOujq6UCBZ8j/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/AVvXsEhfR839lIcq3lTNrkMK2CW7UTllVnFGJoUh_iIUp2rSPZJwANrckzZtnKgQkD8XFaHgUnN5lQ0ana7TQvpjte9vqJ_KDNl-nvRB8c1xZEkzZpbEcuNfVR0QA3xeM_TGqA33s5QnotimQxI5/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/AVvXsEi6WsAGtLMVeHJgXfVwle1ufDerWFhqohUbaq9L9puC-L38LAjhhmhO_JAAUWwG1hTOOMp-rVWeEtVaHJdmaDL3KTZGqDjYzJ9mYkVeJP_26SX8HH4jidjgAGxpnNJhEfmy6klsrSTx6mpH/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/AVvXsEg-qQquPYKRCASwJvbMcKfKPXTCjUQA3XF5u73Vt2JnRVLLgx2XnBUUXse-S4k9s7L0g067qXngcto2nwhAomruUXqHzhoSuI4WdiPGGRoekKJHB0_ktPBRWXE6qzFX7l3vI4_sk0LJ-dw/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/AVvXsEjp0_WLHpFVgOfDNpicln4LnpL8a1mToflhW3nmAKNQbHvaJsavp2U7lc-e-SVoyCFG-_YWZrG5pkDAGxzl-VwG_yxRBeSqX487ENfTCKZojBvvswD4TaQgzyBRGaxOEENP7ndNm169Vyc/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/AVvXsEjh3gIZ7mmnF27TWtVZfGqeTGEEnzCB4POwP6TNlO8D4L_2gDGxJsXZMFL6UW9zb2_2c2C3U0GuhkWSMaNeV40cIlGQs0hzzzeXdtXY4Yq62Rgp6oCv3oA1Wvp0FUIh1M6oQe1lmHq2vuw/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> 

Keterangan: 

• Ganti kode yang berwarna biru tua dengan Fan Page / ID Facebook anda.
• Ganti kode yang berwarna biru muda dengan Username Twitter anda.
• Ganti kode yang berwarna merah dengan ID Google+ anda. (ex. https://plus.google.com/115286939984964916456/posts).
• Ganti kode yang berwarna oranye dengan ID Feedburner anda.

6. Klik "Save/Simpan", selesai.

Demikian informasi seputar tutorial blog tentang cara membuat widget social media metro windows 8, semoga bermanfaat, dan selamat mencoba. Bila ada pertanyaan atau ada yang kurang jelas, anda bisa meninggalkan komentar di bawah atau langsung e-mail saya di muhammad.farhan.mf@gmail.com.

Sumber Referensi : Riefsaz