rozikin blog

Berbagi Pengalaman Online

» » » Memasang Widget Metro Style Social Media

Sunday, March 3, 2013

Memasang Widget Metro Style Social Media

–
Ayo sob hias blog kita dengan widget sosial media . Widget yang satu ini selain indah untuk tampilan blog juga berguna sebagai tombol share ke media sosial seperti facebook, twitter, dan google plus. Widget ini di beri nama oleh penciptanya Metro Style Social Media. Kalo ingin lihat demonya silahkan disini.

Bagi sobat yang suka widget silahkan dicoba, berikut ini adalah langkah sederhana untuk memasang widget Metro Style Social Share:


Memasang Widget Metro Style Social Media

  • Login ke akun Blogger.
  • Pilih Template » Edit HTML » Lanjutkan » Expand Template Widget.
  • Cari kode ]]></b:skin> dengan menggunakan Ctrl+F, lalu letakkan kode dibawah tepat di atas kode ]]></b:skin>.
 .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{overflow:hidden;}

    #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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Mbc1Dothd79QBvxLgCmKnzmLOYaWZEN50xF3IxBhGVeNUd_kvncD_d8MO3S-baCH4ei5jcpltHArlXQg-U58IBnFVVDxIkIzWiDGjrpo_scDUZiw5jFzSHkL05WKL9T9PQ4nBgdvDq4Y/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/AVvXsEjaC1G03u9Du_FJjFYmo51zRbRaqdOoS_SFa5BkxpBZzEE3AkL9va9FhXKsiNuUYhx3QEcCoNiyEiWekVriRpIrFGgLiHQ7bGhX1KciZv_yNlIlPdExEMtJFvbxpvEgBpLeWO9aqt6gfyCD/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/AVvXsEgyV-KmKD8b-4lZhB_bpnKws9rnZTTk2Xm9EuLveYBTWw1EoGS0UaIuEkajDUab5IpyQ4MdrmvTxLmUPagfeDPHUWh17Gj0k-yBltXJBLp8ugZVyW4HMtFv8Jt5-OgD2uD16HAZd6P_hmK6/s1600/rss.png") no-repeat center center;}

    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

    -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;}

  • Setelah selesai simpan template.
  • Kembali ke dasboard > Tata Letak > Tambah Gadget > HTML/Java Script > Letakkan kode dibawah ini.

 <ul id='supportive'>

<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>

</ul>

  • Ganti URL Facebook, Twitter, Google Plus, dan Feedburner milik sobat.


Ukuran ideal untuk widget ini lebar 300px, kalo di rubah ukurannya penampilan akan terlihat kurang proporsional. Semoga menarik ya sob blognya setelah dipasang widget metro style social media. Salam Blogger!

Back To Top