Cara Membuat Widget Profil Sosial Networking
http://adsenbook.blogspot.com/2013/08/cara-membuat-widget-profil-sosial.html
Selamat datang di halaman artikel berjudul Cara Membuat Widget Profil Sosial Networking dengan
Label:
Blogger Widgets,
Facebook Plugin
artikel ini di rangkum dari berbagai sumber yang ada di internet , mudah-mudahan bisa menambah informasi bagi pembaca semua . Kita tidak menjamin ke akurasian isi artikel ini , jangan di jadikan satu satunya acuan untuk mempraktekanya . terimakasih dan selamat membaca .
View Demo
Step by step for blogger
Keterangan : Ganti link profil yang diberi blog warna diatas sesuai dengan link profil milik anda.
Terimakasih telah membaca artikel berjudul Cara Membuat Widget Profil Sosial Networking Mudah-mudahan apa yang telah di sampaikan dalam artikel ini bisa bermanfaat untuk anda , jika anda suka dengan artikel ini silahkan sampaikan pada teman . Jika kurang berkenan silahkan sampaikan pada admin dengan cara memberi komentar di kolom yang telah di sediakan .
PASANG IKLAN 1
Sosial Profile banyak digemari blogger untuk menunjukkan jati diri penulis. untuk itulah kali ini waroenkblog ingin Menerangkan Cara Membuat Widget Profil Sosial Networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati. Untuk melihat hasilnya seperti apa silahkan lihat Demonya terlebih dahulu :Fitur Metro UI
- Meliputi 7 jejaring social yang paling sering digunakan
- Efek hover dan desain yang elegan,
- Sangat rapi dan bersih
- Tidak ada JavaScript, No Jquery, murni dengan CSS
Cara menambahkan 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.Step by step for blogger
- Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
- Copy dan paste kode berikut pada kolom konten:
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/Namafacebookanda rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/NamaTwitterAnda></a></li>
<li><a class="gp" href="https://plus.google.com/KodeNomorGPlusAnda"></a></li>
<li><a class="pi" href=http://pinterest.com/NamaPinterestAnda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/NamaLingkedinAnda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/NamaAkunYoutubeAnda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/NamaFeedBlogAnda 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>
Keterangan : Ganti link profil yang diberi blog warna diatas sesuai dengan link profil milik anda.
- Simpan dan lihat hasilnya diblog anda.
Terimakasih telah membaca artikel berjudul Cara Membuat Widget Profil Sosial Networking Mudah-mudahan apa yang telah di sampaikan dalam artikel ini bisa bermanfaat untuk anda , jika anda suka dengan artikel ini silahkan sampaikan pada teman . Jika kurang berkenan silahkan sampaikan pada admin dengan cara memberi komentar di kolom yang telah di sediakan .