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.
Kalo mau nambah atau ganti social medianya bisa gak mas ? misalnya yang twitter mau di ganti instagram gitu ? mohon bantuannya
ReplyDeletehttp://thegembeltrip.blogspot.co.id/
Terima kasih atas kunjungaannya..
DeleteOk 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..
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 !
DeleteSalam 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