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

Title : Trik Edit Gambar Follower Dengan CSS
Description : Banyak pertanyaan dari rekan blogger atau bahkan postingan yang terkait dengan widget yang satu ini. Yakni widget Follower, entah dengan bah...

14 Responses to "Trik Edit Gambar Follower Dengan CSS"

  1. Pertamaaaxxx..

    Waahh keren Info nya mas,,,

    coba ah..thanks

    keep share

    ReplyDelete
  2. duh ketinggalan mas..berarti kaleu pengen judul posting pas disorot mouse bsa gede pake sara ini juga mas??

    thanks

    ReplyDelete
  3. @aaLiL; Iya mas,, utak atik az coba ;)

    ReplyDelete
  4. wah... kreatif banget nih... pengen nyoba..
    tapi sepertinya di Internet Explorer ndak berfungsi ya :D :(

    ReplyDelete
  5. @Syahuri; Iya neh mas di IE tak support :(

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. kang kalo pengen jumlah follower yg tampil kurang dari 19 bisa nga? apa harus 19 aja mohon di kasih solusinya

    ReplyDelete
  8. tapi koq gagal mulu yah ....dodol neh anna

    ReplyDelete
  9. keren mas infonya... mksi mas....

    ReplyDelete
  10. wow terima kasih gan , info blog anda bagus dan bermanfaat. salam sukses blogger dan salam kenal juga.
    sprei bed cover
    sprei
    sprei anak
    bed cover murah
    sprei belladona

    ReplyDelete

Terimakasih sudah memberikan komentar pada tulisan saya :)
Mohon maaf, komentar spam dan menyematkan link tidak bermanfaat terpaksa saya hapus!

Semoga bermanfaat!