Senin, 14 Juni 2010

Cara Membuat Caption pada Gambar

Blogger kabarnya melakukan blunder besar-besaran! Ketika kemarin (atau kapan lupa tetapi di akhir minggu kemarin kayaknya) saya login ke Blogger link yang dulunya bertuliskan Tata Letak berubah menjadi Rancangan. Lihat gambar dibawah!

Apabila anda sabar sih, anda boleh saja mengedit semua postingan anda, tetapi itu rasanya "nggak mungkin! nggak mungkin ku akan kembali denganmu karena salahmu buat hancurnya hatiku..." Daripada nyanyi, lebih baik kirimkan komplain ke alamat ini Generated by TxtNinja.com agar pada selanjutnya Blogger bisa lebih baik lagi. (Sumber: http://www.masdoyok.co.cc/2010/06/tata-letak-hilang-ada-dimana-layout-tab.html).

Udah, lebih baik kita membahas soal caption pada gambar. Caption pada gambar adalah penjelasan dari isi sebuah gambar. Nih, lihat contoh-contohnya:

Untuk yang disebelah kiri:
Untuk yang ditengah:
Untuk yang disebelah kanan:
Bagaimana? Menarik tidak? Ini bisa digunakan untuk menjelaskan isi gambar. Misalnya, jika ada foto anda bersama 2 orang teman anda, maka anda bisa menyebutkan nama teman-teman anda di bagian caption ini.

Kalau ingin membuatnya, begini caranya.

1. Login ke Blogger, lalu klik Rancangan > Edit HTML.
2. Backup template anda terlebih dahulu. Caranya masih sama seperti yang dulu.

3. Cari kode ]]></b:skin> lalu ketikkan kode berikut diatasnya.
/* caption */
.caption-left{
clear:left;
float:left;
margin:10px 10px 10px 0;
}
.caption-center{
clear:both;
text-align:center;
margin:10px 0;
}
.caption-right{
clear:right;
float:right;
margin:10px 0 10px 10px;
}
.caption-left, .caption-center, .caption-right{
background-color:#0B3861;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
width:auto;
height:auto;
}
.caption-left img, .caption-center img, .caption-right img{
margin-bottom:10px;
}
.caption-left span, .caption-center span, .caption-right span{
font-size:smaller;
display:block;
color:#fff;
text-align:center;
}
4. Klik Simpan Template.

Untuk menggunakannya, klik tab Posting, lalu akan muncul editor teks. Lalu beralih ke modus Edit HTML (dengan mengklik tab Edit HTML). Lalu ketikkan kode berikut.
<div class="caption-left">
<a href="http://muhammadrizkifadillah.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_g30iiY0E5ek/S_fSIwNY3hI/AAAAAAAAArM/AqmId6GivNE/s320/pacman+google.JPG" /></a>
<span>Asyiknya main Pacman di Google!!!</span>
</div>
Ket: yang berwarna biru adalah jenis dari perataan gambar. Apabila ingin dikiri ketikkan caption-left, untuk ditengah caption-center, sedangkan untuk disebelah kanan kodenya adalah caption-right. Kode yang berwarna kuning adalah link pada gambar, sehingga jika diklik maka akan terbuka website yang telah ditentukan. Ynag berwarna merah adalah URL dari gambar. Dan yang berwarna hijau adalah keterangan dari gambar tersebut. Kode diatas hasilnya seperti ini nih...
Sedikit info hari ini, semoga bermanfaat.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



9 komentar:

Manchester United Tech mengatakan...

wah keren sob, ternyata caption blogger bisa di utak-atik.., btw follow balik yah...

Ryan mengatakan...

wah. Bagus nih post. Follow balik n kunjungi balik blog saya ya.
Www,phonecompi.co.cc

Rizky2009 mengatakan...

ok mas Rizki langsung tak coba

Matthew King mengatakan...

Terima kasih posting yang bermanfaat.

Koje mengatakan...

wahhh amntap-mantap...!
tapi saya pake wordpress :)
http://ekos06.student.ipb.ac.id

Jabon mengatakan...

sama saya juga bnyak yang make wordpress....

oktri mengatakan...

nice post

Best Download Site | Sharing free download mengatakan...

sangat bermanfaat sekali TQ

poker mengatakan...

poker online | Agen Domino | Agen Poker|Kumpulan Poker | bandar poker | Judi Poker | bandar qiu | Judi online terpercaya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.