Bagi anda mungkin tampilan blog yang keren merupakan sesuatu yang sangat di idam-idamkan bukan? untuk membentuk tampilan yang keren kita juga membutuhkan widget / gadget yang keren pula, pada posting kali ini saya akan membahas cara membuat Icon dengan Efek Modern dan Transisi, Widget ini selain sangat Friendly juga sangat Mudah dalam cara pemasangan, Anda hanya perlu memasang sedikit kode CSS dan Script pada blog anda, Widget ini tidak memakan banyak Beban untuk memuat Blog anda, jadi jangan khawatir tentang lama pemuatan blog anda jika memasang widget ini, di widget ini ada 5 tombol yaitu , Twitter, Facebook, Google+, Dribble, dan RSS, namun jika anda ingin menghilangkan salah satu atau beberapa tombol anda hanya perlu mendelete pada bagian widgetnya. Untuk sedikit review dan tata cara pemasanganya silahkan simak dibawah.
Deskripsi
Pada saat kita melakukan sorotan / Hover pada bagian Widget ini maka secara otomatis Icon yang terkena Hover akan menimbulkan efek memanjang Transisi , seakan akan ditarik, hal ini akan menambah ketertarikan pengunjung blog untuk melakukan klik pada icon tersebut, selain itu perubahan Oppacity / Transparansi juga ikut serta dalam efek tersebut
Skenario HTML
HTML dibawah ini merupakan komponen utama yang harus diletakan pada tempat widget ini ingin ditampilkan:
<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>
- Iconjunior adalah sebagai induk dari icon-icon dibawahnya
- li merupakan susunan agar widget tersusun menjadi baris - baris
- link diatas dapat anda rubah sesuai dengan kebutuhan anda
Skenario CSS
Kode CSS dibawah ini terdiri dari beberapa bagian, ada bagian icon , bagian posisi list dan lain-lain , untuk lebih lengkapnya silahkan dipelajari sendiri.
#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;
}
Integrasi jQuery Author Threaded Comments Highlight
Langkah 1Login ke Blog anda
Langkah 2
Masuk ke Edit HTML
Langkah 3
Cari kode dibawah ini:
]]></b:skin>Langkah 4
Masukan (copy paste) kode CSS diatas (Skenario CSS) tepat diatas kode pada langkah 3 (Lihat Skenario CSS)
Langkah 5
Letakan kode HTML (Skenario HTML) pada bagian Blog yang anda inginkan untuk menampilkan widget ini.
Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode :
<script src='http://yandex.st/modernizr/2.0.6/modernizr.min.js' type='text/javascript'></script>Langkah 7
Simpan template anda dan preview blog...
Kesimpulan
Dengan tekad dan niat kita dapat merubah berbagai macam hal di dalam blog kita, bahkan kita bisa merubah blog kita menjadi mesin pencetak dolar, jadi berusahalah sekuat mungkin untuk mengembangkan blog anda, jangan menyerah dengan berbagai macam masalah yang ada tapi cobalah utnuk menghadapinya......
0 comments: