$show=home

Trik Edit Gambar Follower Dengan CSS

SHARE:

Banyak pertanyaan dari rekan blogger atau bahkan postingan yang terkait dengan widget yang satu ini. Yakni widget Follower, entah dengan bah...

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

KOMENTAR

BLOGGER: 14
Loading...
Name

Adsense,1,Affiliates,2,Android,6,Aplikasi,8,Apple,2,Artikel,14,Award,1,Bahasa,3,BBM,1,Beasiswa,1,Bisnis,1,Bisnis Internet,8,Blog Contest,2,Blogger,15,Cianjur Festival,2,CMS,4,Coretan Pribadi,18,CSS,5,Download,9,Dunia Pendidikan,10,E-book,1,Edukasi,7,Festival Nasyid,1,Forex,1,Gebyar FKIP,1,GEG,2,Google,4,Grab,5,Grabfood,2,Happy New Year 2010,1,Hari HIV Aids,1,Humor,1,HUT RI,1,Idul Adha,1,Idul Fitri,2,Info Cianjur,4,Informasi,33,Internet,9,Iseng,5,Jibas,1,Kabar Cianjur,3,Karya Tulis,1,Kesehatan,9,Ketika Cinta Bertasbih,1,KMII 2009,1,Komputer,1,Kontak Saya,1,Lintas Berita,20,Lintas Jabar,8,Lomba,1,Mahasiswa,17,Merdeka,1,Motivasi,1,Muri FOSS,1,Novel,1,NUPTK,2,ospek,1,Pelajar,2,Pendaftaran SMK Islamiyah,1,Ramadhan,2,Resensi Buku,3,Reuni,1,Reuni Smansa,1,Sejarah Cianjur,3,Sekolah,1,Seminar,1,Seminar 2009,2,Seputar Cianjur,24,Seputar Kampus,4,Seputar Nasyid,3,Sinopsis,2,Sistem Informasi,2,Tafakur,8,Tag,1,teknologi,3,Tips n Trik,16,Tips Sehat,2,Tutorial Blog,11,Website,3,Widget,2,Windows,3,Wisata bahasa,1,
ltr
item
Website Asep Nurdin: Trik Edit Gambar Follower Dengan CSS
Trik Edit Gambar Follower Dengan CSS
http://1.bp.blogspot.com/_2-JTTVJbPk4/SYMPyAbjjMI/AAAAAAAAAS0/IOabAO3mP5o/s320/follower5.JPG
http://1.bp.blogspot.com/_2-JTTVJbPk4/SYMPyAbjjMI/AAAAAAAAAS0/IOabAO3mP5o/s72-c/follower5.JPG
Website Asep Nurdin
http://www.asepnurdin.com/2009/01/trik-edit-gambar-follower-dengan-css.html
http://www.asepnurdin.com/
http://www.asepnurdin.com/
http://www.asepnurdin.com/2009/01/trik-edit-gambar-follower-dengan-css.html
true
15063752939711634
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE CARI ALL POSTS Not found any post match with your request Beranda Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Untuk membukanya silahkan Bagikan postingan ini terlebih dahulu Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy