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.
Contoh gambar thumbnails dengan CSS adalah berikut :
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> :
- 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;
}
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 :
- 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.
Keren nich... Ijin copy scriptnya dulu kawand... Makasih...
wah, sip..langsung copy dan simpan
Wah Mantap HAPIAH triknya... Langsung di coba
silahkan sob. semoga bermanfaat.
wah sekrng apa2 dah bisa pake css ya sob :D
super keren sahabat.... ilmu baru bagi aku.. sangat bermanfaat
Jaka Utama@ iya sob... CSS lebih ringan..
Assalamu Alaikum Masalah HTML saya gaptek Mas
blogger bumi lasinrang@ waalaikum salam sobat. g masalah sobat. step by step aja.. saya dl juga buta soal HTML. mencoba memahami sedikit demi dikit.
bisa di coba nie sob, makasih udah share
wah boleh juga mas, triksnya makasih ya
mantab sob...info baru bagi aku ini...tapi kayaknya aku masih tetap pake spoiler aja dulu
wah..
si akang emang jagonya CSS nih.
hmmm...prasaan kalo maen css di...hihihihi
mantap...css3 lebih mantap
Keren ne..pengen coba juga ah..makasih ya buat infonya
mantap triknya sobat.........
Keren bermain dengan CSS...
Pengen belajar banyak, karena saya gak paham sama sekali dengan CSS.
Makasih berbaginya, sangat bermanfaat bagi saya blogger pemula
ih keren deh..tp mo ngedit htmlnya itu looo panjang banget sob..but nice info gan...:)
mantaph...mantaph
wah... keren sob artikelnya
waw keren, nanti di coba.... test dulu dech
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............
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..
coba kang yaaaa
terima kasih atas pelajaran berharga ini
mantab coy. .
::terima kasih::
manthep buangETZZZZ
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. ^_^
sory sob, kemarin baru ganti baju jadi ada kode yang g ke ikut, sekarang sudah saya masukan silahkan lihat efeknya, Terima kasih... ^_^
asalamualikum,
apa kabar sobat lama tidak berkunjung kemari
wah ini persisi seperti sistem flicker zoom on kren sob
sukses sobat!
Bunglon Blog@ waalaikum salam.
alhmdllh agak g enak badan kawan. cuaca memang lagi g menentu disini. mohon doanya saja
assalamualaikum....
saya suka dengan semua tutorial yang abang hapia ajarkan. bagus" euyh.... apalagi ketika berhasil dicoba.
make smart@ waalaikum salam kawan..
terima kasih banyak..semoga bermanfaat dan dapat membantu..
banyak hal baru disini yang saya peroleh, terima-kasih sahabatku sudah berbagi. Salam