Membuat Gambar Thumbnails Dengan CSS

Diposkan oleh Hery Prasetyo Wednesday, March 17, 2010
بسم الله الرحمن الرحيم

Membuat Gambar Thumbnails dengan CSS. HAPIA Mesir bingung ingin memberikan judul yang pas seperti apa. ini hanya perkembangan dari tutorial sebelumnya yaitu Membuat Artikel Translate dengan CSS. akan tetapi sekarang HAPIA Mesir kembangkan untuk digunakan pada gambar atau foto.


Membuat Gambar Thumbnails Dengan CSS
Contoh gambar thumbnails dengan CSS adalah berikut :

Membuat Gambar Thumbnails Dengan CSS

Cara membuatnya adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Masuk ke "Tata Letak - Edit HTML" kemudian copy paste code CSS berikut diatas ]]></b:skin> :

#showpic ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#showpic li {
list-style: none;
margin: 0;
padding: 0;
}
#showpic li img, #showpic li img:visited {
color: #333;
display: block;
margin: 0;
width:300px;
background:transparent;
font: bold 13px tahoma, Times New Roman;
}
#showpic li p, #showpic li p:visited {
color: #333;
display: block;
margin: 0;
width:300px;
background:transparent;
font: bold 13px tahoma, Times New Roman;
}
#showpic li li img,#showpic li li img:visited {
background:transparent;
color: #fff;
float: left;
margin: -250px 0 0 100px;
padding: 5px;
border: 1px solid #f0f0f0;
}

#showpic li ul {
z-index: 9999;
position: absolute;
height: auto;
left: -999em;
margin: 0;
padding: 0;
}
#showpic li:hover ul ul,#showpic li.sfhover ul ul, {
left: -999em;
}
#showpic li:hover ul, #showpic li li:hover ul, #showpic li.sfhover ul,#showpic li li.sfhover ul{
left: auto;
}

- Simpan Template.

- Pada kata-kata dalam postingan yang ingin anda translate gunakanlah format berikut :

<ul id="showpic"><li><img style="width: 100px; height: 70px;" src="Link Gambar/Foto yang Nampak pada Posting" border="0" alt="" /><ul><li><img style="width: 400px; height: 300px;" src="Link Gambar/Foto" border="0" alt="" /></li></ul></li></ul>

Atau untuk tulisan yang nampak pada postingan gunakan code berikut :


<ul id="showpic"><li><p>Acara Peresmian HAPIA Mesir</p><ul><li><img style="width: 400px; height: 300px;" src="Link Gambar/Foto" border="0" alt="" /></li></ul></li></ul>


Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

34 Responses to Membuat Gambar Thumbnails Dengan CSS

  1. Rock Says:
  2. Keren nich... Ijin copy scriptnya dulu kawand... Makasih...

     
  3. aryadevi Says:
  4. wah, sip..langsung copy dan simpan

     
  5. akhatam Says:
  6. Wah Mantap HAPIAH triknya... Langsung di coba

     
  7. HAPIA Mesir Says:
  8. silahkan sob. semoga bermanfaat.

     
  9. Jaka Utama Says:
  10. wah sekrng apa2 dah bisa pake css ya sob :D

     
  11. super keren sahabat.... ilmu baru bagi aku.. sangat bermanfaat

     
  12. HAPIA Mesir Says:
  13. Jaka Utama@ iya sob... CSS lebih ringan..

     
  14. Assalamu Alaikum Masalah HTML saya gaptek Mas

     
  15. HAPIA Mesir Says:
  16. blogger bumi lasinrang@ waalaikum salam sobat. g masalah sobat. step by step aja.. saya dl juga buta soal HTML. mencoba memahami sedikit demi dikit.

     
  17. act Says:
  18. bisa di coba nie sob, makasih udah share

     
  19. info asik Says:
  20. wah boleh juga mas, triksnya makasih ya

     
  21. berita bola Says:
  22. mantab sob...info baru bagi aku ini...tapi kayaknya aku masih tetap pake spoiler aja dulu

     
  23. wah..
    si akang emang jagonya CSS nih.

     
  24. Beben Says:
  25. hmmm...prasaan kalo maen css di...hihihihi
    mantap...css3 lebih mantap

     
  26. Lia_Lovaa Says:
  27. Keren ne..pengen coba juga ah..makasih ya buat infonya

     
  28. iswady Says:
  29. mantap triknya sobat.........

     
  30. Keren bermain dengan CSS...
    Pengen belajar banyak, karena saya gak paham sama sekali dengan CSS.
    Makasih berbaginya, sangat bermanfaat bagi saya blogger pemula

     
  31. ducky Says:
  32. ih keren deh..tp mo ngedit htmlnya itu looo panjang banget sob..but nice info gan...:)

     
  33. mantaph...mantaph

     
  34. fansbook Says:
  35. wah... keren sob artikelnya

     
  36. Rizky2009 Says:
  37. waw keren, nanti di coba.... test dulu dech

     
  38. Mas Adi Says:
  39. wew... sip banget sob tutorialnya... bisa kalah KR nich... he he
    Ngomong, iklannya kok bejibun ya?? apa gak mempertimbangkan lama loading ke visitor nich??
    Kabuuuuuuuuuurrrrrr............

     
  40. HAPIA Mesir Says:
  41. Mas Adi@ wakakakak.. kalo KR g mungkin kalah ma saya lah sob. orang awal mulanya saya bergurunya ma KR.

    oh terkesan kebanyakan iklan ya om. sep lah saya kurangin segera..

     
  42. Ade Sanjaya Says:
  43. coba kang yaaaa

     
  44. TRIMATRA Says:
  45. terima kasih atas pelajaran berharga ini

     
  46. mantab coy. .

    ::terima kasih::

     
  47. Bahtiar.AS Says:
  48. manthep buangETZZZZ

     
  49. oketrik Says:
  50. Mantab sob nice info, gw juga punya trik efek gambar dengan css nie linknya http://oketrik.blogspot.com/2010/01/manipulasi-tampilan-gambar-dengan-css.html keren sob di jajal. ^_^

     
  51. oketrik Says:
  52. sory sob, kemarin baru ganti baju jadi ada kode yang g ke ikut, sekarang sudah saya masukan silahkan lihat efeknya, Terima kasih... ^_^

     
  53. Bunglon Blog Says:
  54. asalamualikum,
    apa kabar sobat lama tidak berkunjung kemari
    wah ini persisi seperti sistem flicker zoom on kren sob
    sukses sobat!

     
  55. HAPIA Mesir Says:
  56. Bunglon Blog@ waalaikum salam.

    alhmdllh agak g enak badan kawan. cuaca memang lagi g menentu disini. mohon doanya saja

     
  57. make smart Says:
  58. assalamualaikum....
    saya suka dengan semua tutorial yang abang hapia ajarkan. bagus" euyh.... apalagi ketika berhasil dicoba.

     
  59. HAPIA Mesir Says:
  60. make smart@ waalaikum salam kawan..

    terima kasih banyak..semoga bermanfaat dan dapat membantu..

     
  61. banyak hal baru disini yang saya peroleh, terima-kasih sahabatku sudah berbagi. Salam

     

Post a Comment