Iklan

Cara Membuat Widget Social Media Profile Keren di Blogger


Cara Membuat Widget Social Media Profile Keren di Blogger

Kali ini BLOGGINGPASURUAN ingin sharing  cara membuat widget profil sosial networking menarik dengan colored style.

Fiturnya meliputi dibawah ini :

>>>  7 jejaring social yang paling sering digunakan
>>> Efek hover dan desain yang elegan,
>>> Sangat comfortable dan clean
>>> Tidak ada JavaScript, No Jquery, original dengan CSS

Cara memasang script CSS Widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.

Untuk para Blogger langkahnya seperti berikut, dibawah ini:

 >>> Pada Dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript

>>> Copy dan paste kode berikut dibawah ini :


<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/ID-FB-anda rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/ID-twitter-Anda></a></li>
<li><a class="gp" href="https://plus.google.com/ID-googleplus-Anda"></a></li>
<li><a class="pi" href=http://pinterest.com/ID- pinterest –Anda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/id- linkedin-Anda  rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/Id-Youtube-Anda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/Id- feedburner-Anda rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>




Kustomisasi
Ganti link ID-diatas dengan ID profil link profil milik anda.

>>> Simpan dan lihat hasilnya diblog anda.

Demikian tutorial dari BLOGGINGPASURUAN  cara membuat social profile widget pada blog. Semoga bermanfaat.

Next
Prev Post
Previous
Next Post

5 comments:

  1. Makasih gan untuk informasinya, sangat membantu :)
    http://grosiracemaxstasik.com/

    ReplyDelete
  2. Kalo mau nambah atau ganti social medianya bisa gak mas ? misalnya yang twitter mau di ganti instagram gitu ? mohon bantuannya

    http://thegembeltrip.blogspot.co.id/

    ReplyDelete
    Replies
    1. Terima kasih atas kunjungaannya..

      Ok Mas Sendi, saya menjawab BISA ! Namun ada tapi-nya, kita bisa mengganti apapun jenis desain widget yg didalamnya terdapat beberapa bahasa pemrograman termasuk java script,css3,jQuery,html itu yang umum di gunakan di blogger..

      Untuk pemula ini akan sangat menyulitkan sekali Mas Sendi, bukan saya meremehkan siapapun, tapi untuk pemula yang buta peng-kodingan akan sangan menyulitkan...

      Kalau saya tahu seperti apa yang dimaksud ,,akan senang hati saya bantu Mas..

      Delete
    2. Mas Sendi : Templete yang saya gunakan ini JUGA saya RE-DESAIN sendiri, ada beberapa tambahan element di dalamnya, cuma saya tidak menghilangkan credit ( hak ciptanya ) ETIS-nya seperti itu sih !

      Delete
  3. Salam kenal mas, terima kasih artikelnya menarik, saya mau tanya mas, kalau masang halaman face book 2, misalnya satu halaman tentang memasak, satu halaman lagi tentang profil pribadi penulis itu sendiri, pertanyaan saya apakah berpengaruh terhadap kebijakan google, ataupun loading... mohon penjelsannya mas.. salam

    ReplyDelete