Trik Edit Gambar Follower Dengan CSS

Banyak pertanyaan dari rekan blogger atau bahkan postingan yang terkait dengan widget yang satu ini. Yakni widget Follower, entah dengan bahasa yang seperti apa untuk menerangkan ini. Yang bisa saya pahami yaitu dengan menerjemahkan dari kata Follower itu sendiri kedalam bahasa Indonesia. Saya yakin rekan bloggerpun sudah bisa menerjemahkannya dengan bahasa masing-masing, yang artinya pasti pengikut.

Tidak akan panjang lebar saya meneragkan ini, silahkan bagi rekan blogger yang belum paham dengan widget Followers ini langsung baca saja disini.

Yang akan saya terus terangkan mungkin kelanjutan setelah kita menerapkan widget ini didalam blog kita. Trik ini saya peroleh dari beberapa blog yang sempat saya kunjungi ini, dan blognya o-om yang tidak lupa selalu saya hampiri untuk mengorek-ngorek ilmu dari sana.

Tengok beberapa gambar yang saya tampilkan dibawah ini :

Gambar ini masih bawaan dari bloggernya, belum dapat sentuhan editing.

Berikutnya setelah mengalami beberapa proses editing, yakni dengan memberikan sentuhan berupa garis pinggir berwarna putih.

Coba perhatikan pada foto yang diberi lingkaran hijau, foto itu akan sedikit membesar kalau kita mengarahkan mouse pada fotonya. Jadi semua foto itu akan membuat efek membesar kalau kita mengarahkan kursor mouse kita pada fotonya.

Langsung saja pada langkah-langkanya :

1. Seperti biasa login terlebih dahulu kedalam akun blog kita, berikutnya tuju pada bagian Tata Letak atau Layout, dan langsung pada kolom Edit HTML. Setelah masuk jangan lupa memberikan centang pada bagian Expand Template Widget.

2. Copy paste code di bawah ini tepat diatas kode ]]></b:skin>

.follower-img {float: left; border:1px outset #ffffff; margin:5px 5px 5px 5px;}
.follower-img:hover {width:110%; height:110%; margin:-3px;}

3. Setelah beres memasukan kode CSS diatas, tinggal klik Simpan.

Kode yang berwarna biru merupakan kode yang bisa disesuaikan, atau bisa kita edit kembali.
Pada bagian border, angka 1 merupakan ukuran tebal garis pinggir yang diterapkan pada gambar. Sedangkan ffffff kode warna yang bisa kita sesuaikan.
Bagian margin, merupakan batas dari gambar itu sendiri. Agar kelihatan renggang gambar itu, maka kita bisa menambahkan angka diatas 5.

Pada bagian .follower-img:hover merupakan kode pemberian efek hover pada foto di follower itu. Untuk memperbesar gambar saat kursor mouse diarakan, silakan tambahkan ukuran yang lebih besar pada bagian width dan Height. Sedangkan pada margin, silahkan disesuaikan saja.

Gimana rekan blogger, bisa diikuti trik yang saya berikan ini? Semoga saja tidak membuat rekan bogger bingung ya ;). Apabila ada pertanyaan, layangkan saja di kolom komentar atau pada shoutbox. Insya Allah saya akan menjawabnya.

Semoga bermanfaat. And Keep Blogging