Membuat Widget Icon dengan CSS

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

www.junioriqfar.com, Membuat Widget Icon dengan CSS. Pada hari minggu yang cerah ini, alhamdulillah saya masih bisa menyempatkan diri untuk memposting artikel tentang Membuat Widget Icon dengan CSS. Widget ini merupakan widget kedua setelah saya memposting artikel tentang Membuat Widget Social yang animasinya juga menggunakan CSS. Bila sobat belum membaca artikel saya tentang Membuat Widget Social silahkan sobat membaca dulu karena widget social ini cocok buat sobat yang mempunyai sidebar yang kecil. Dan kembali ke Widget Icon ini, widget ini membutuhkan sidebar yang dibilang cukup lebar jadi waktu di sorot mouse, maka animasinya akan tampak. Jika tidak disorot mouse sangat terlihat widget ini boros tempat. Bila sobat ingin menggunakan widget ini, saya akan berikan tutorial lengkap. Ikuti saja langkah demi langkah yang saya berikan.

Demo Widget Icon dengan CSSKlik disini untuk melihat demo Widget Icon dengan CSS

1. Masuk ke akun sobat
2. Lanjut ke Rancangan, Edit HTML
3. Copy code dibawah ini

#iconjunior li {
cursor: pointer;
height: 41px;
position: relative;
border-top: none;
border-bottom:none;
}
#iconjunior .icon {
background: #d91e76 url('http://i766.photobucket.com/albums/xx310/Ikhfar/iconjunior.png') 3px 0 no-repeat;
background-color: rgba(217,30,118, .42);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
display: block;
color: #141414;
float: none;
height: 40px;
line-height: 40px;
margin: 5px 0 0;
position: relative;
text-align: left;
text-indent: 50px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 250px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;
box-shadow: rgba(0,0,0, .28) 0 1px 3px;
}
.js #iconjunior .icon {
width: 40px;
}
#iconjunior .icon {
color: #fafafa;
overflow: hidden;
text-decoration: none;
}
#iconjunior .facebook {
background-color: rgba(65,131,196, .42);
background-position: 3px 0;
}
#iconjunior .twitter {
background-color: rgba(45,118,185, .42);
background-position: 3px -40px;
}
#iconjunior .gplus {
background-color: rgba(80,108,123, .42);
background-position: 3px -80px;
}
#iconjunior .dribble {
background-color: rgba(80,108,123, .42);
background-position: 3px -120px;
}
#iconjunior .rss {
background-color: rgba(255,109, 0, .42);
background-position: 3px -160px;
}
#iconjunior li:hover .icon {
width: 250px;
}
#iconjunior li:hover .icon {
background-color: #d91e76;
}
#iconjunior li:hover .facebook {
background-color: #2d76b9;
}
#iconjunior li:hover .twitter {
background-color: #4183c4;
}
#iconjunior li:hover .gplus {
background-color:#4d90fe;
}
#iconjunior li:hover .dribble {
background-color: #506c7b;
}
#iconjunior li:hover .rss {
background-color: #ff6d00;
}

4. Dan letakkan sebelum kode

]]></b:skin>

Untuk mencari kode, tekan CTRL + F, lalu masukkan kode ]]></b:skin>
5. Selanjutnya masukkan scriptnya

<script src='http://yandex.st/modernizr/2.0.6/modernizr.min.js' type='text/javascript'></script>

6. Save template sobat
7. Lalu klik Rancangan lagi, dan masuk Elemen Laman
8. Klik Tambah gadget
9. Setelah itu pilih HTML/Javascript
10. Copy kode ini pada kotak kontent

<ul id="iconjunior">
<li data-alt="Follow us on Twitter"><a rel="external" href="http://twitter.com" class="icon twitter">Follow us on Twitter</a></li>
<li data-alt="Follow us on Facebook"><a rel="external" href="http://www.facebook.com" class="icon facebook">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a rel="external" href="https://plus.google.com/" class="icon gplus">Follow us on Google+</a></li>
<li data-alt="Follow us on Dribble"><a rel="external" href="http://dribbble.com" class="icon dribble">Follow us on Dribble</a></li>
<li data-alt="Subscribe with RSS"><a rel="external" href="http://feeds.feedburner.com" class="icon rss">Subscribe via RSS</a></li>
</ul>

Silahkan sobat menambahkan link sesuai data sobat
11. Klik Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait