Seperti inilah tampilan Caption buatan sendiri.
Klik dan anda akan melihatnya baru ia'...iu'...ihi'...oho'...!
Membuat caption melalui fitur yang tersedia di box posting blogger tentu saja bisa dilakukan. Ya...., bahkan ini membuat semua blogger termanjakan hingga kadang "punya pikiran untuk tak lagi perlu bersusah-susah menggunakan cara lain". Nggak salah... memang ini bukan sang blogger. He.... siapa, sih yang mau bersusah-susah letika didepan mata ada yang bisa langsung dipakai. He... tanpa mikir dan gratis lagi!
Yah... terlepas dari segala tetek bengek yang tersampaikan di atas, tak ada salahnya kalau trik ini coba kita buat. Ya...barangkali saja ini menjadi motivasi baru bagi sobat-sobat blogger untuk mau mengenal lebih dekat tentang fungsi dan kegunaan kode css dan html.
Perbandingan kode 2 model caption
Silahkan coba perbandingkan antara kode html caption yang digunakan blogger dan caption yang coba kita buat sendiri.Kode Caption Blogger
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s1600/img_gubhugreyot-sample-posting.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="177" src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s320/img_gubhugreyot-sample-posting.jpg" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Gadis manis rambut kuncung pupu kandel tubuh sintal!</td></tr> </tbody></table>
Kode Caption Buatan Sendiri
<div class="capsimgL" style="width:320px;height:auto;"> <a href="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s1600/img_gubhugreyot-sample-posting.jpg"><img height="177" src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s320/img_gubhugreyot-sample-posting.jpg" width="320" /></a><p> Gadis manis rambut kuncung pupu kandel tubuh sintal!</p> </div>
Kode CSS Image dilengkapi Caption
Kode html yang ke-2 dihasikan melalui kode css di bawah ini. Kode css memungkinkan blogger berimprovisasi hingga didapatkan sebuah box image dilengkapi caption yang amat bervariasi dan berbeda dengan yang didapatkan melalui posting mode Compose. Simpan kode CSS di antara tag <head> dan tag </head>
Kode CSS
.capsimgL{
float:left;
margin:5px 15px 5px 0;
}
.capsimgR{
float:right; /* original code by: gubhugreyot */
margin:5px 0 5px 15px;
}
.capsimgC{
margin:20px auto;
}
.capsimgL,.capsimgR,.capsimgC{
padding:9px 6px;
background:#ccc;
border:2px solid #aaa;
box-shadow:2px 2px 2px #000;
border-radius:8px;
text-align:center;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}
.capsimgL:hover,.capsimgR:hover,.capsimgC:hover{
box-shadow:-1px -1px 1px #333, 4px 4px 6px #000;
border-radius:12px;
}
.capsimgL a,.capsimgR a,.capsimgC a{
padding:0;
margin:0; /* original code by: gubhugreyot */
}
.capsimgL a img, .capsimgR a img, .capsimgC a img{
border:0 solid;
margin:0;
padding:0;
border-radius:4px;
box-shadow:-2px -2px 2px #666, 2px 2px 2px #666;
}
.capsimgL p,.capsimgR p,.capsimgC p{
display:block;
margin:8px 0 0;
padding:2px 4px;
text-shadow:1px 1px 1px #fff;
color:#900;
font-size:11px;
font-family:Georgia,"Times New Roman",Times,serif;
background:rgba(0,0,0,0.2);
}Cara Menyimpanan kode CSS
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML
- Backup Template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
- Cari kode ]]></b:skin>
- Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
- Klik Simpan Template *(Save Template).
Kode Posting image dilengkapi caption
Ini adalah kode dasar untuk posting image/gambar yang dilengkapi caption. Anda bisa melihat bentuk kode riil-nya di atas pada perbandingan 2 model posting image dilengkapi caption.
Kode Dasar Posting image di kanan (right):
<div class="capsimgR" style="width:...px;height:auto;"> <a href="URL"><img height=".." src="image.jpg" width=".." /></a><p> Tulis caption di sini !</p> </div>
Kode Dasar Posting image di tengah (center):
<div class="capsimgC" style="width:...px;height:auto;"> <a href="URL"><img height=".." src="image.jpg" width=".." /></a><p> Tulis caption di sini !</p> </div>
Catatan/Keterangan:
- URL bisa diisi dengan alamat image, alamat blog atau alamat posting.
- L, R, C digunakan sesuai posisi yang diinginkan dalam meletakkan image (kiri, kanan atau tengah/centre).
- Height dan width sesuaikan dengan ukuran image.
- image.jpg adalah URL image yang akan ditampilkan di halaman posting.
- Tulis caption di sini ! adalah tempat caption (teks) dituliskan.
- Anda bisa menambahkan tag <b> , <i> , <strong> untuk membuat bentuk dan style teks berbeda.
- <div class="capsimgL" style="width:...px;
<div class="capsimgR" style="width:...px;
<div class="capsimgC" style="width:...px;
width:...px » width=lebar image.
Contoh menambah tag:
<div class="capsimgL" style="width:...px;height:auto;"> <a href="URL"><img height=".." src="image.jpg" width=".." /></a><p> <strong>Tulis caption</strong> <i>di sini !</i></p> </div>
0 comments:
Post a Comment