Cara membuat hover image di postingan blog

: 15.46 4 comments

H allo sobat blogger mau share nich tentang cara membuat hover image di postingan blog ,bukan cara baru sich tapi dengan sedikit sentuhan css code aku ingin tampilkan berbeda dengan hover image yang lain .sebagai contoh coba arahkan kursor ke halam postingan dan perlu kaliah ketahui bahwa dalam postingan Cara membuat hover image di postingan blog ini sedikit aku kasih bonus ....yaitu Dropcap teks atau tulisan bentuk koran bentuknya coba sobat lihat di setiap awal postingan pasti huruf nya lebih besar dari huruf huruf yang lain tapi kali inipun aku buat dengan tampilan berbeda mau tahu yok kita ikuti tutorial Cara membuat hover image di postingan blog di bawah ini  :
  1. Login ke blogger.com dengan id sobat
  2. masuk ke dasbor/desain 
  3. Cari kode ]]></b:skin> lalu masuk kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya :
    #postimg{backround:#000}
    #postimg:hover{background:#000 url(http://karinafotocollection-project.googlecode.com/files/photo.png )no-repeat center}
  4. Lalu Save template
  5. Jangan lupa ganti teks yang warna merah dengan url gambar yang akan di tampilkan sebagai background
  6. Lalu kita menuju ke forum desain/dasbor  yang bentuk nya kayak gambar di bawah ini

  7. Ikuti petunjuk sesuai gambar lalu masukkan scrip di bawah  ini seperti petunjuk gambar no 3 nah setelah itu simpan setelan dengan menekan tombol simpan setelan yang ada di pojok kanan atas

    Berikut kode script nya:
    <div id="postimg">
    <div style="border: 1px solid #fff; color: blue; height: auto; margin: 15px; overflow: auto; padding: 15px; width: auto;">
    <span style="color: black; float: left; font-family: Times New Roman; font-size: 60px; line-height: 40px; padding-right: 3px; padding-top: 1px; text-shadow: 2px 1px 1px rgb(255, 153, 0);">H</span>sobat bisa mulai posting dari sini

    .....</div></div>
PERLU DIPERHATIKAN : setiap anda posting awal ,di anjur kan dengan menggunakan mode Compose dulu agar lebih mudah ,dan huruf H yang berwarna merah adalah huruf awal postingan yang nantinya akan terlihat besar/dropcap
oke kawan akhirnya selesai juga semoga bermanfaat bila ada kekeliruan dalam penulisan Artikel ini mohon petunjuk lewat kotak komentar...wassalam...






photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat hover image di postingan blog Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

4 komentar

Nurfani delete 28 Juni 2012 pukul 07.23

Wah tampilannya pakai yang baru ya bos?

Unknown delete 28 Juni 2012 pukul 10.05

@NurfaniIbarat rumah memperbaiki yang bolong bolong aja maksih dah hadir My man

topSpot | Find your top spot here delete 30 Desember 2012 pukul 02.07

Nice tutorial sob..kapan-kapan bakal saya terapkan nih di blog saya.

Nice blog & Thanks :)

Unknown delete 1 September 2013 pukul 13.30

thanks infonya bermanfaat banget :\

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>