Wednesday, June 27, 2012

Cara membuat hover image di postingan blog

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...






No comments:

Post a Comment