Sobat blogger pasti sudah familiar dengan kata caption. Apalagi yang suka bermain table dalam postingannya. Caption adalah suatu keterangan atau judul dari sebuah tabel. Biasanya berada diatas tabel. Cara membuatnya adalah dengan mengapit kata-kata yang hendak dijadikan keterangan table diagram dengan tag <caption> dan </caption>. Nah keterangan sebuah gambar foto juga disebut caption. Kali ini akan menjelaskan cara membuat caption dengan css.
Ini merupakan hasil percobaanku selama beberapa hari, dan ternyata berhasil. Yang terbiasa menggunakan table dalam membuat keterangan gambar, tak ada salahnya mencoba menggunakan metode yang ane gunakan, yaitu menggunakan inline css.
Berikut script yang ane gunakan dalam membuat caption sebuah gambar:
<div style="padding:7px; width:170px; border:1px #00FF00 inset; background-color:#696969; text-align:left">
<div style="padding:5px" align="center">
<img src="Letakkan url gambar sobat disini" alt="Keterangan gambar"></div>
<div style="color:#274e13; padding:5px; font-size:16px" align="center">
Add caption</div>
</div>
<div style="padding:5px" align="center">
<img src="Letakkan url gambar sobat disini" alt="Keterangan gambar"></div>
<div style="color:#274e13; padding:5px; font-size:16px" align="center">
Add caption</div>
</div>
Keterangan script diatas:
1. padding:7px dan padding:5px bertujuan untuk memberikan jarak sekeliling gambar dengan garis tepi. Nilainya bisa di sesuaikan dengan kebutuhan.
2. width:170px digunakan untuk mengatur lebar bingkai foto. Nilai 170px bisa sobat sesuaikan sendiri.
3. border:1px #00FF00 inset berfungsi untuk memberikan border pada sisi bingkai. Warnanya bisa sobat sesuaikan sendiri (#00FF00=warna hijau). Untuk inset bisa sobat ganti dengan solid, dashed. Nanti sobat bisa lihat sendiri perbedaannya.
Jika tidak ingin menggunakannya, isi nilai border dengan nol (border:0px)
4. background-color:#696969 bisa sobat sesuaikan sendiri warnanya. Jika ingin transparant sesuai dengan background postingan, hilangkan saja background-color:#696969
5. text-align:left berfungsi untuk mengatur posisi gambar dalam postingan. Sobat bisa ganti dengan center(posisi ditengah) atau right(posisi di sebelah kanan)
6. style="color:#274e13" sobat juga bisa menyesuaikan sendiri. contoh: style="color:blue" untuk memberikan warna biru.
7. font-size:16px untuk mengatur besar tulisan. Nilainya atur sendiri dalam pixel.
8. Add caption sobat ganti dengan keterangan gambar. Misal:Kopdar bareng di Ancol.
9. Note: tulisan yang berwarna merah wajib kalian sesuaikan untuk mendapatkan tampilan yang bagus.
Contoh penggunaan script diatas sebagai berikut:
Bergaya di Waterboom
^Original by HP Yitno^
73 Komentar untuk "Membuat caption dengan inline css"
okeh sob, makin makyus nih, tutornya :D
tutorial disini memang beda
He..he...
Kemarin habis mengintip script gambar sobat blogger. Kok menggunakan table semua dalam membuat caption. Iseng-iseng ane coba membuat sesuatu yang berbeda. Ya itu kang, berbekal pengetahuan css yang minim. Eh ternyata bisa juga membuat caption css dengan inline css. Ya udah langsung ane share aja. Sekalian buat archive ane kang :)
He..he...
Semua blogger pasti mempunyai ciri khas dalam memberikan penjelasannya. Termasuk ane dalam menjelaskan
tutorial cara membuat caption css ini.
Tutorial ini nggak hanya buat sobat blogger saja, tapi juga buat ane. Karena ini merupakan percobaan ane. Ane bisa aja lupa. Kalau lupa, tinggal buka archive ane tentang tutorial ini.
ane coba nih tutorial nya,,,,,,,,
makasih sobat
Falah Mulyana berkunjung di blog sobat untuk bersilaturahmi dan mengucapkan Happy Blogging,,,,
asek..dapat info baru lagi.. :)
Makasih sobat dah berkunjung ke blog sederhanaku. Silahkan dicoba sobat tutorial cara membuat caption gambarnya :)
He..he..
Info baru hasil percobaanku sob. Bagi para master css, caption gambar dengan css adalah hal biasa sob.
oya bang.. mau nanya ni. aku tuh kalo posting entri baru ngk bisa masuk hlaman dasbor karna sy juga si yang ngotak atik setelan blog sampe postingannya ngk mncul.. tuh knpa yah bang??
Sama kemarin juga gw ngalamin tuh, tiga kali posting di blog ujung-ujungnya ilang padahal udah di edit sedemikian rupa.. *pertanyaanya sama ngga sih?
Waaah percobaannya bermanfaat untuk yang lain bang =)
Iya ya keren hasilnya :) TFS...
Haduh ane kurang tau sob. Tapi kalau dashboard seharusnya nggak masalah. Tinggal di otak-atik pengaturannya aja. Soalnya kita nggak bisa mengacak-acak dashboard blogger selain yang ada disitu kan? Paling yang teracak-acak adalah template blog kamu sob. Kamu punya back-upan template kamu nggak sob. Soalnya ada script yang buat nampilin postingan blog. Namanya apa ya, aku lupa. Tak coba ngintip script blogku dulu ya.
Alhamdulillah kalau bermanfaat. Hasil iseng-iseng bermain css sob. Hasilnya jadilah script untuk membuat caption gambar dengan css ini. Kan lebih rapi dan bagus kalau gambar ada keterangannya. Betul nggak sob?
He..he..
Yang gambar bawah menggunakan background warna gelap sob. Sedangkan yang paling atas nggak menggunakan background. Hanya menggunakan border:1px doang sob. Bagusnya sih yang transparant gitu sob.
iya bang... sama kejadiannya cuma aku ni da beberpa posting ngk bisa muncul2 di halaman depan..
thanks tutorialnya, kalau inget sih masang foto pakai caption tapi seringnya males :)
itu dia ya sob, intinya kreatifitas, semua bakal tampil asik kl pake kreasi sendiri, ya gak ... :D
Coba kamu lihat tanggal dan settingan waktunya. Soalnya meskipun posting sekarang, tapi tanggalnya di mundurin beberapa hari. Jadi seolah-olah postingannya dah lama juga bisa mempengaruhi sebuah postingan nggak bisa tampil di halaman depan.
Betul sekali kang stumon. Dengan kreasi sendiri, kita juga bisa belajar banyak dari kesalahan. Dan akhirnya tahu cara kerjanya.
He..he...
Ane juga baru dua postingan yang memakai caption. Sebelumnya nggak pernah pakai caption. Belum tau caranya sob. Kebetulan ane sedang belajar membuat caption dengan css. Ternyata kok sukses diterapkan di blogspot, ya udah ane tampilkan aja gambar dengan caption. Sekalian share script caption css yang ane gunakan.
Brarti gambarnya diambil dari server lain ya sob?
Thanks tutorialnya :)
Yups betul sekali.
Gambar dari hosting blogger juga bisa. Tapi agak repot karena harus menuliskan script dengan cara manual. Kalau ane ngambilnya dari picasaweb.google.com
Gambar blogspot juga, hanya saja ukurannya lebih kecil dari gambar aslinya.
aiinizza@ mungkin waktunya tuh.. saya pernah begitu tanggalnya bukan saat kita posting, jadinya bukan artikel terbaru..
gambarnya gak bisa ngambil dari file dr PC sendiri ya? Btw, iya neh beberapa waktu lalu sempat bikinan post yg ada tabelnya tp akhirnya edit lagi utk ngilangin si tabel..hehehe..#katrox ya
Kalo rajin coba2 kayak mas Yitno ini asyik, selalu punya bahan buat blognya :)
Yups betul sekali kang agus bg.
Merubah waktu juga mempengaruhi. Adakalanya seorang blogger juga memainkan itu untuk membuat postingan. Seperti acara giveaway mbak Nurmayanti Zain, tanggal postingannya di majuin pada bulan April. Padahal kan ini masih bulan maret kan. Nah posisi postingan yang di majuin bulan april itu selalu di halaman utama. Walaupun bukan postingan terakhir sebenarnya.
Sebenernya bisa mbak Ririe Khayan. Cuma agak ribet. Caranya sobat upload dulu gambar sobat dalam postingan. Setelah itu rubah model postingan dari compose ke edit html. Setelah itu cari url gambar. Format gambar biasanya jpeg, jpg, png dan gif. Nah sobat tinggal mengapit url gambar tadi dengan script caption tadi.
Lebih jelasnya, letakkan url gambar dalam posisi script caption diatas.
He..he...
Sekalian belajar kok sob. Setelah berhasil, langsung tak jadikan postingan. Syukur-syukur bermanfaat buat temen-temen blogger.
terimakasih kawan sudah berbagi ilmu yang sangat bermanfaat bagi saya dalam mengelola tampilan blog...salam :)
sip tipsnya sob.. ane perlu kyaknya buat nampilin photo2 nih..
Semangat info^^
asik fotonya langsung dijadiin contoh :D
Sama-sama kawan. Selama ane bisa berbagi, ane akan bagikan ilmu yang ane punya. Semoga bermanfaat. Syukur bisa dikembangkan menjadi lebih baik.
Emangnya mau nampilin foto apa sob dengan menggunakan script caption ini. Jadi penasaran pengen lihat. Silahkan dicoba sobat :)
He..he...
Ya iyalah sob, masa foto orang lain. Bisa melanggar hak cipta nantinya. Sebenernya mau menampilkan foto abstrak. Sayangnya ane nggak bisa nggambar. Ya udah foto ane aja yang aku pasang. Siapa tahu ada yang naksir. *plakk*
Kok semangat info doang?
Emangnya berita tv swasta he..he..
Kalau berita, kok nggak ada foto atau videonya. Wah belum ngerti membuat caption video nih kayaknya... He..he..
Falah mulyana berkunjung di blog sahabat untuk bersilaturahmi dan mengucapkan Happy Blogging sobat,,,,,,,,,,,,,
oh jadi kayak gini to rumusnya.
salam kenal mas... follower 54 ... kunjung balik yaa
Happy blogging juga :)
Nggak dibawa bang oleh-olehnya tentang cara membuat caption gambar dengan css yang unik?
Yups betul sekali.
Sebuah rumus sederhana tentang inline css yang digunakan untuk membuat bingkai foto dan caption gambarnya. Cukup mudah kan membuatnya?
Salam kenal juga sobat.
Kok nggak pakai id blogger sob dalam berkomentar? Kan nggak asyik kalau nggak ada fotonya he...he...
Silahkan dibawa oleh-oleh script css dalam membuat caption gambar. Siapa tahu nanti bermanfaat.
yufz pasti akan jauh lebih rapi hehe.. *sok tau..
ntar ya aku pelajari dulu, haduh katrok dah klo beginian.. liat kode2nya aja dah bingung.. but kpn2 pasti aku cb.. ^^
weeww.....maknyuss sangat nih tipsnya
thnks broo
saya gak begitu paham dgn masalah kode HTML tapi sya bangga karena blog sya sendiri di buat tanpa bantuan orang lain. kalo sya mau unggah gambar langsung lewat menu upload padahal sih bsa ya sob pakai url juga... terimakasih postinganya setidaknya sudah memberi sya ilmu baru. moga ada ibrah buat semua yg sudah baca ya soob hehe... teruslah berkarya :)
Wah sobat ternyata jago komputer ya ... tfs ya sob ...
manis ya :D
kapan" dicoba :D
Pelan-pelan saja sob mempelajari script caption ini. Nggak usah terburu-buru. Yang penting sudah berani mencoba. Script caption gambar memang terlihat sederhana bagi yang sudah bisa. Tapi untuk pemula, lumayan susah memahaminya.
He..he...
Kayak makanan aja maknyus.
Tapi bener juga kata kamu sob, sebuah gambar dengan sedikit sentuhan css akan terlihat maknyus.
Betul sekali kang Djangkies.
Memang script caption css ini untuk yang suka menampilkan gambar dari hosting gambar diluar hosting gambar blogger. Intinya yang nggak langsung upload, tapi yang menggunakan url gambar kang.
Hebat kamu sob.
Berkarya dengan jerih payah sendiri. Hal itu adalah hal yang paling berguna sekali sob. Karena dari situ kita tahu letak kesalahan saat melakukan percobaan. Sama kayak ane juga sob. Ane belajarnya juga otodidak.
He..he..
Kalau jago sih nggak. Tapi suka banget dengan dunia komputer, web-designer dan programmer. Sekarang juga lagi tahap pembelajaran sob. Template-ku aja masih standar bawaan blogger kan?
Apanya mbak yang manis. Tampilan css-nya apa orangnya?
He..he.... *plaaakkk* (lagi ngigau)
Ok sobatku jiah al jafara. Nyobanya kapan-kapan nggak masalah. Yang penting tahu dulu. Kan lumayan buat pengetahuan css dan html.
okeh bang segera aku coba setting lg, mksih infonya :)
mantap sob euy,, saya ijin cpas kodenya,, :)
Silahkan aja di copas kode-nya.
Ane seneng kalau artikel ane bermanfaat. Apalagi banyak yang menggunakan kode diatas. Terlebih bisa mengembangkannya menjadi lebih baik.
Selamat menggunakan script caption gambar css sobat. Semoga berhasil :)
haha sekalian cari jodoh ternyata ;p
WUIH KEREN...
MAS BAHAS DONK CARA BUAT KOTAK KOMENTAR SEPERTI YG PUNYA MAS INI...
JD BALASNYA BISA DIBAWAH..
:)
Sepertinya banyak manfaatnya mas :)
mantap sharex sob..., btw klo berkenan kita tukaran link ya., link sobat dah aq pasang.., terima kasih *smile
hihihihi, numpang ketawa ah ... wew ^^
masa, padahal ahli SOE nih, ajarin kita dong jiah ... ^^
Jadi Jiah al jafara ahli bermain SEO ya. Wah mau minta di ajarin juga ah. Biar artikelku banyak di index mbah google. Termasuk artikel caption css ini. Ane lihat di google search, tapi nggak tahu artikelku ini berada di urutan berapa?
He..he...
Ok sobat, ntar kalau ada waktu tak pasang link-nya. Soalnya kalau ngedit lewat hape, kata-katanya sudah penuh. Jadi susah ngeditnya. Maklum sob, ngeblognya pakai HP.
Makasih dah pasang link ane.
Komentar ini kan asli bawaan blogger sob. Kalau pakai template lama sih nggak seperti ini tampilannya. Coba di upgrade sob template-nya. Siapa tahu bisa otomatis seperti ini tampilan komentarnya. Sorry sob belum bisa bantu.
selamat mencoba Mbak...saya juga pengen nyobain tapi ...
Tutorialnya membantu sob, terimakasih sudah berbagi, ditunggu kunjungannya
Keren... :) numpang copy scriptnya pak..
maksh infonya kang terus terang gw org bru didnia blogg hehe bnyk yg hars gw pelajari
1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat