Cara Membuat Wigdet Responsife Sosial Media Instagram, Facebook, Twitter,

Cara membuat wigdet keren sosial media 2015 - Simbol atau icon wigdet sosial media pada blog tentu lah sangat berguna untuk para pengunjung blog kita. yang mana memudahkan untuk para pengunjung untuk menambahkan kita pada situs media mereka.
nah kali ini saya akan berbagi cara membuat wigdet keren sosial media 2015 yang mana wigdet ini terdapat pada tamplate Fastest Magz tamplate punya mas sugeng.
Baca juga : Download tamplate Fastest Magz V3.5 Gratis

Pertama silahkan sobat salin atau copy kode di bawah ini !

/* SOCIAL WIDGET */
.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttq6jB8S5P513ivbKwsIF74Vv0xQIaTrHmhi9R2GzWv1oQDAW5f__23uXzv2PAd8WY0G9FY3WzVHNmmTB1Fphahc3lrbkT4doA3qfDRkkPH0RfrYnDFo44R0KSGJsCGbEdkNnfQLU20A/s1600/sosial+media+icon+Lismanian.png");background-repeat:no-repeat;}.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#fff;}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}

Jika sudah kalian copy kode di atas tersebut
selanjutnya silahkan sobat buka Dashbor - Template - Edit HMTL

Silahkan sobat cari kode ]]></b:skin> /* Sidebar Wrapper */  Seperti gambar di atas. mungkin setiap tamplate berbeda-beda karna saya pakai tamplate Vikka Fast and Responsive Blogger   maka silahkan cari yang agak mirip sepeti kode yang saya sebutkan tadi.

Kalau sudah ketemu dengan kode yang saya sebutkan tadi. maka silahkan sobat letakan kode yang tadi sobat copy tepat di atas kode ]]></b:skin>.

Terakhir silahkan sobat buka Tata Letak pada dashbor blog sobat.
Tambahkan Gadget - HTML/JavaScript silahkan sobat copy kode di bawah berikut !

<div class='social-box'>
 <div class='social-item-outer'>
 <a class='social-item-box facebook-box' href='http://www.facebook.com'>  
   <div class='counter'>
 76.098
</div>
<span class='social-title'>Fans</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box twitter-box' href='http://twitter.com'>
   <div class='counter'>
 6.987
</div>
<span class='social-title'>Followers</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box googleplus-box' href='http://plus.google.com'>
   <div class='counter'>
 4.987
</div>
<span class='social-title'>Followers</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box rss-box' href='/feeds/posts/default'>
   <div class='counter'>
 398
</div>
<span class='social-title'>Subcribers</span>
 </a>
 </div>
    </div>

Jika sudah silahkan sobat klik simpan dan lihat hasil nya

Keterangan
-Tulisan warna merah ganti dengan url sobat
-Tulisan warna kuning ganti angka sesuka hati sobat
-Tulisan warna biru ganti dengan text sobat.

Saya rasa sampai di sini saja penyampain dari saya. salah kata mohon di ma'afkan

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.