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.

Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

5 comments

Write comments
March 20, 2015 at 6:37 PM delete

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

Reply
avatar
February 12, 2016 at 2:59 AM delete

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/

Reply
avatar
February 13, 2016 at 11:24 PM delete

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..

Reply
avatar
February 13, 2016 at 11:27 PM delete

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 !

Reply
avatar
Anonymous
AUTHOR
June 10, 2017 at 8:24 PM delete

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

Reply
avatar