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.

Cara Menciptakan Tabbed Widget Sidebar Dengan Jquery

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

Membuat Form Kontak (Halaman Statis) Blog

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

Membuat Ikon Media Umum Sederhana Di Blogspot

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

Menambahkan Jquery Di Blogger Dan Blogspot

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

Membuat Ikon Media Umum Sederhana Di BlogspotSetiap link Daftar Widget dengan $ type=social_icons dan dalam judul akan menjadi daftar ikon sosial kalau template Anda terintegrasi Blogger sosial ...
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 Menghapus Atau Menghilangkan Judul & Gambar Thumbnail Di Halaman StatisCara menghapus atau menghilangkan, menyembunyikan Judul pages dan gambar feature Image Thumbnail di halaman statis. Biasanya muncul judul halaman la ...
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 ...
Menambahkan Jquery Di Blogger Dan BlogspotMenambahkan JQuery di Blogger dan Blogspot. JQuery sangat penting Java untuk menciptakan efek, animasi dan fungsi keren diblog Anda, banyak pluin blo ...
Cara Mengubah Warna Background Di Blogger Secara OtomatisCara Otomatis Mengubah Background Warna di Blogger , Pasti pengunjung blog kita akan heran jikalau blog kita setiap kali dikunjunginya akan otomatis ...

Cara Menciptakan Social Profile Widget Keren: Metro Ui

Related Posts