Cara Menciptakan Social Profile Widget Keren: Metro Ui

Cara menciptakan Social Profile Widget Keren: Metro UI , widget ini sangat menarik dengan beberapa warna yang keren , dan aneka macam mempunyai beberaa feature, menyerupai jejaring sosial, Efek hover dan desain yang elegan, Bersih (clean), tidak ada javascrit, no jquery, pokonya murni memakai CSS.

Cara memasang membuat Social Profile Widget Keren: Metro UI .

Untuk membuatnya widgetnya sanatlah mudah, baik memakai blogspot, wordpress atau layanan blogging yang lainn dimana style CCS dan HTML niscaya diterima pada widget atau template. Caranya Anda tinggal meambahkan isyarat widget pada bab HTML/JavaScript.

1. Masuk Pada Menu Tataletak> Tambahkan Gadget> Pilih HTML/JavaScript.
2. Copy isyarat dibawah ini pada kolom konten.

Menghilangkan Navbar Di Blogger Dengan Mudah

<li><a class="tw" href="http://twitter.com/contohblogspot"></a></li>
<li><a class="gp" href="https://plus.google.com/contohblogspot"></a></li>
<li><a class="pi" href="http://pinterest.com/contohblogspot=" nofollow=""></a></li>
<li><a class="in" href="https://www.linkedin.com/in/contohblogspot=" nofollow=""></a></li>
<li><a class="yt" href="http://www.youtube.com/contohblogspot"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/contohblogspot" 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}

Menampilkan Rating Bintang Dipencarian Google

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

Modifikasi Tampilan Widget Popular Post Di Sidebar

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

Ingat ganti Link warna Merah Dengan Profil Milik Anda.
3. Klik Save.

Demikian cara membuat membuat Social Profile Widget Keren: Metro UI . Dengan mudah.

Sumber http://contohblogspotnih.blogspot.com/

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

Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger

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

Ingat ganti Link warna Merah Dengan Profil Milik Anda.
3. Klik Save.

Demikian cara membuat membuat Social Profile Widget Keren: Metro UI . Dengan mudah.

Sumber http://contohblogspotnih.blogspot.com/

Modifikasi Tampilan Widget Popular Post Di SidebarCara memperindah atau mempercantik Tampilan Desain Widget popolar post di Sideabr blog. Widget popolar posts meruapakan salah satu navigasi sajian in ...
Menghilangkan Navbar Di Blogger Dengan MudahMenghilangkan Navbar di Blogger dengan Mudah, disini aku memiliki beberapa cara untuk menghilangkan atau menyeembuyikan dari halama atau dengan cara ...
Membuat Form Kontak (Halaman Statis) Blog Cara Membuat Form Kontak (Halaman Statis) Blog Blog Anda belum menyiapkan widget "Formulir Kontak: untuk dipasang di sidebar Blog atau di halaman S ...
Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Membuat kotak komentar dibawah posting blogger yakni trik yang sangat cantik kenapa ? seb ...
Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery Cara menciptakan Tabbed Widget Sidebar dengan jQuery. Apakah Ada pernah atau sering melihat blog yang mempunyai tab area widget di sidebar terdiri ...
Cara Memperbaiki Kesalahan Xml Parsing Di Template Cara Memperbaiki Kesalahan XML Parsing di Template Blogger .Seorang Blogger niscaya pernah mengalami kesalahan parsing dalam template Blogger ...

Cara Menciptakan Social Profile Widget Keren: Metro Ui

Related Posts