Efek CSS mempercantik link di sidebar

Modifikasi link di blog menjadi unik adalah kerjaan semua blogger yang hobi utak-atik blognya, tak jarang mereka menggunakan beberapa efek CSS maupun jquery untuk melampiaskan nafsunya dalam mempercantik blog.

Dan pada pagi yang mendung ini saya akan memberikan satu lagi rekomendasi untuk modifikasi percantik link di sidebar blog anda. Posting ini adalah kelanjutan dari cara membuat link menari (link nudging) yang sudah saya bahas sebelumnya, Tapi mudahnya pada tutorial kali ini kita tidak perlu menyisipkan format .js (java script) di dalam template kita, jadi blog tidak akan terganggu dietnya ( Silahkan dibaca: Sebuah blog juga perlu diet ). maksudnya blog tidak akan berat dengan link nudging tutorial kali ini.

Jika anda masih awam dengan istilah link nudging, silahkan search di search engine, atau baca saja posting saya yang ini: Cara membuat link menari di blog. Sedikit gambaran, Link nudging menurut saya adalah link yang ketika di sentuh (hover) akan berpindah tempat ke arah kanan dan ketika kita meninggalkan sentuhan nya maka link itu akan balik lagi ke tempatnya.
Baiklah tanpa berpanjang lebar lagi, kita mulai gawe nya.

disini kita hanya menyisipkan sedikit kode link nudging di CSS section yang anda inginkan.
Kodenya seperti ini:

.labels1 .widget-content ul li :hover {margin-left: 15px;
padding-left: 10px;
-moz-transition: all 0.90s ease-out;  /* FF4+ */
-o-transition: all 0.90s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.90s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.90s ease-out;  /* IE10? */display: block;
}

tulisan yang berwarna merah diatas merupakan CSS section untuk labels di sidebar blog saya, silahkan anda cari id widget blog sesuai dengan template anda masing-masing.
Sebagai percobaan, saya pernah menaruhnya pada:

Artikel terkait di bawah posting  : kodenya #underpost
Sidebar rndom post blog ini        : kode di template saya .sidebar2
labels blog ini                             : kodenya .sidebar4

anda bisa menaruh dimana saja tempat yang anda ingin efek itu bekerja, yang penting anda tau id pada CSS section anda, sebagai contoh dengan gambar (klik kanan Open New Tab jika ingin lebih jelas):

Pada gambar diatas saya membuat satu section baru pada sidebar ke empat saya, yaitu labels. disana saya hanya menambahkan #sidebar4 a:hover sebagai awalan yang akan di beri efek link nudging, lalu setelahnya barulah di tambahkan kode CSS Link nudging tersebut. Silahkan anda berkreasi pada sidebar anda yang mempunyai unsur link list (li) seperti pada labels, related post, random posts, recent posts, dll.
Yang terpenting kode itu di letakkan di atas:

]]></b:skin>

dan jika ingin mempunyai efek background gradasi, maka kodenya seperti ini:

#underpost .widget-content ul li :hover {margin-left: 10px;
padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);
-moz-transition: all 0.70s ease-out;  /* FF4+ */
-o-transition: all 0.70s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.70s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.70s ease-out;  /* IE10? */display: block;
}

Silahkan ganti tulisan berwarna merah.
jika ingin menambahkan tanda panah yang mengikuti link nudging, silahkan tambahkan lagi di bawahnya ( sebelum tanda penutup } ) url gambar seperti berikut ini:

background: url(http://martajasa.com/wp-content/themes/PhoneGadget/images/arrow.png)
no-repeat scroll left transparent;}

(ganti url gambar nya sesuai minat anda)

Selamat mencoba, dan jika masih bingung ada baiknya kita sharing di komentar posting ini. semoga artikel Efek CSS mempercantik link di sidebar ini berguna buat anda, wassalam.

Review:

Judul	Efek CSS mempercantik link di sidebar
Deskripsi	Modifikasi link di blog menjadi unik adalah kerjaan semua blogger yang hobi utak-atik blognya, tak jarang mereka menggunakan beberapa efek ...
Author	Unknown
Author Rating	4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini

3 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari