Senin, Agustus 31, 2009

Membuat keterangan gambar (caption) apik dengan CSS pada blog

Keterangan gambar atau biasa disebut "caption" banyak diperlukan untuk menjelaskan gambar yang dipasang, atau paling tidak sebagai sarana penghargaan bagi sumber gambar tersebut sehingga fasilitas untuk menulis nama ataupun sumber gambar tersebut sering menjadi sebuah kebutuhan.

Kebanyakan caption ditempatkan asal saja sehingga di samping kelihatan tidak menyatu dengan gambar juga kurang artistik, untuk itu di sini saya mencoba "share" kepada anda semua tentang cara membuat caption apik ini. Baiklah, kita langsung saja mulai.

Langkah pertama.



Login ke Blogger, klik layout Layout lalu klik .
Anda tidak perlu mencentang Expand widget template.

Ide bagus jika anda membuat back up template anda dengan men-download-nya dengan mengklik Download full template. Ini hanya sebagai antisipasi jika sekiranya anda membuat kesalahan pada template maka akan tetap punya cadangan template yang sama yang masih utuh.

Copy seluruh kode CSS di bawah ini kemudian paste sebelum kode ]]></b:skin>.



Simpan template anda setelah proses di atas selesai.

Langkah kedua.


Bagi anda yang baru melangkah di dunia blogging seperti saya, ada "kabar buruk" bagi anda yaitu anda harus bekerja pada mode HTML sewaktu membuat konten blog. Namun percayalah, ini adalah salah satu kenikmatan blogging, terutama bagi saya.
Langkah pertama tadi tidak akan membuat perbedaan. Anda perlu sedikit kode tambahan untuk menampilkan gambar dengan caption yang bisa diatur.

Perhatikan kode berikut!


  • Tata letak gambar
    Kalau anda menggunakan kode seperti kode 2 di atas untuk gambar anda, maka hasilnya adalah gambar anda berada di sisi kiri post body dengan lebar 250px sedangkan tingginya akan tersesuaikan secara otomatis.

    Perhatikan kode dengan warna hijau di atas. Ya, anda pasti bisa menerka sekarang, untuk membuat gambar berada di tengah tengah post body, cukup ganti kode leftimg dengan centerimg.
    Begitupun jika anda ingin agar gambar anda berada di sisi kanan post body, ganti kode leftimg dengan rightimg.

  • Lebar gambar
    Untuk mengatur lebar gambar, perhatikan kode angka yang berwarna merah pada kode 2 di atas. Anda cukup mengganti besaran nilai lebar gambar anda sesuai kebutuhan dan keinginan anda. Hal yang harus anda perhatikan adalah lebar post body anda, agar gambar anda tidak sampai melewati post body. Lebar post body biasanya ditentukan dengan kode #main {width: 476px; pada template anda, yang berarti lebar post body anda adalah 476px dikurangi margin. Kabar baiknya, anda tidak usah pusing dengan ini, bereksperimenlah, jika hasil gambarnya terlalu lebar, kurangi saja nilai angkanya, sederhana bukan? ;-)

    Baik, anda sekarang sudah tahu cara mengatur tata letak dan menyesuaikan lebar gambar anda. Kini kita akan memulai langkah selanjutnya.

Langkah ketiga, upload gambar/image


  1. Upload
    Sekali lagi saya tekankan, cara ini hanya berhasil jika anda bekerja pada mode HTML bukan pada mode Compose.

    Upload gambar seperti biasa dengan mengklik icon Image upload icon pada post mode, pilihlah None untuk menghindari konflik pada style.

    Kode HTML gambar selalu muncul di baris paling atas setelah anda mengklik Done.

    Berikut adalah contoh kode dari hasil upload dengan pilihan None,



  2. Modifikasi kode
    Ganti kode yang berwarna biru dengan angka 100% dan delete kode yang berwarna merah sampai batas tanda " sehingga menjadi:


  3. Cut and Paste
    Baru kemudian cut kode HTML gambar dan paste sesuai petunjuk pada kode 2 di atas sehingga codenya akan menjadi seperti ini:


Jika tidak mau repot, ikuti langkah keempat ini!


Anda tentu saja tidak mau repot menghafal kode 2 diatas. Cara gampang agar selalu ingat adalah dengan menaruhnya di post template. Caranya adalah, login ke Blogger, klik Setting , kemudian pilih tab Formatting Formatting. Scroll turun sampai menemukan Post template, lalu copy seluruh kode pada kode 2 di atas dan paste pada kotak Post template
Post Template
,
lalu klik Save setting.
Pada saat melakukan new post, anda hanya tinggal mengganti leftimg dengan rightimg atau centerimg, dan merubah nilai lebar gambar sesuai kebutuhan anda. Kalau anda tidak membutuhkannya, tinggal di delete saja.



Beberapa contoh image dengan caption




Contoh 1
Gambar ini berada di bagian kiri post body dengan lebar 160px.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.

Ini adalah contoh teks yang dipadukan dengan gambar dengan caption di sebelah kiri artikel seperti pada contoh 1.



Contoh 2
Gambar ini berada di tengah tengah post body dengan lebar 350px.




Contoh 3
Gambar ini berada di sisi kanan post body dengan lebar 250px dan caption ini tidak tertulis miring.
Lihat penjelasan soal ini di atas pada bagian tag disebelah kiri gambar ini. Dan gambar ini juga ada frame-nya.
Tag <cite>
Kalau anda tidak menginginkan huruf pada caption anda tertulis miring, cukup ganti tag <cite> dan </cite> pada kode 2 di atas dengan tag <span> dan </span>.



Sesungguhnya ada berbagai cara untuk menampilkan image dengan caption-nya berikut beberapa di antarannya:
Bloggerbuster.com- Add stylized caption to images in your blogg
Bloganol.com - Add caption to your blogger posts
Tips & Tricks - Caption for photos or images


SEMOGA BISA DIPAHAMI, SELAMAT MENCOBA, DAN SEMOGA BERHASIL...!



Di tulis oleh Wira


Share on Facebook

8 comments:

Faps 4 September 2009 pukul 11.25  

Tips yang bagus, bro !

Anonim,  9 September 2009 pukul 17.01  

Ini yang gue cari....thanks sob...

sabirinnet 30 September 2009 pukul 13.16  

alhamdulillah akhirnya kita bisa menaruh keterangan gambar langsung dalam satu area image. makasih bro..sukses yaaa

Anonim,  31 Oktober 2010 pukul 03.41  

wah ni baru terik yang amat capek,,,... Udah 2 mingu brosing2 ngak dapet-dapet, ahirnya dapet juga dah,,,...

Makasih sobat blogwalking untuk trik ininya,,,... Segah sudah pencarian dan rasa penasarannya di bayar tunai,,,...

Tahnk banget sob,,,..!!!

weNETelu 15 Maret 2011 pukul 12.47  

akhirnya ikut ngetes juga, makasih mas..

ilalang 2 Juni 2011 pukul 21.27  

Mas..., mau nanya cuma lain pembahasan.
Caranya masang "artikel terkait" di tengah postingan seperti blog mas ini, gimana caranya mas.??
Ditunggu tutorialnya mas..., makasih sebelumnya.

Posting Komentar

LINK EXCHANGE

Untuk tukar link, copy kode di bawah kemudian masukan di blog anda, dan harap tinggalkan pesan di chatbox.


Something to share
Page Rank Checker Button

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008

Back to TOP