Akan
lebih menarik jika di Blog kesayangan kita terdapat foto
yang di kasih sedikit sentuhan yang berbeda. Solusinya
adalah dengan modifikasi Caption.
Pengen Coba?? Tapi sebelum ke tutorialnya, akan saya tunjukkan contoh
foto dengan caption menggunakan teknik modifikasi HTML,
klik Preview
:
- Login ke blogger
- Masuk 'Layout' ---> 'Edit HTML' ---> centang 'Expand widget template' (jangan lupa backup buat jaga-jaga)
- Cari kode </head>
- Letakkan script berikut ini di atas kode </head>
<style
type="text/css">
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}
.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>
.caption {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 0px 5px 0px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.caption img {
margin: 0px 0px 5px 0px;
padding: 0px;
border: 0px;
}
.caption p.caption-text {
margin: 0px;
padding: 0px 0px 0px 0px;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>
- Klik Simpan Template
Cara 2 :
Untuk memunculkan foto dengan teks pada postingan, sisipkan kode dibawah ini pada postingan anda :
<div
class="caption" style="width: 410px;"><img
src="URL
foto yang sudah diupload"/><p
class="caption-text">Tulis
teks disini</p></div>
Contoh
kode gambar saya:
<div
class="caption" style="width: 410px;"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIdT5xlDP6UxrN0akvHgs3WpGRY1XtAm7qqHMr02bQzavXKGtukMYAGOsTPvGCNJ6bddmjMDESE56JRXm4bGENxNnkr2mMJDjHTf10qIp09kHRkw5gyd0X0qgGshti1o3hKSutE-EDEA/s400/wonogiri.gif"
/><div class="caption-text"><a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIdT5xlDP6UxrN0akvHgs3WpGRY1XtAm7qqHMr02bQzavXKGtukMYAGOsTPvGCNJ6bddmjMDESE56JRXm4bGENxNnkr2mMJDjHTf10qIp09kHRkw5gyd0X0qgGshti1o3hKSutE-EDEA/s400/wonogiri.gif">Liburan
bersama keluarga di Wonogiri</a></div></div>
Slamat
mencoba . . . . Good Luck . . . .
http://blogg-tutorial.blogspot.com/2009/08/membuat-caption-atau-teks-foto-menarik.html
2 Comments
topic. You realize a whole lot its almost tough to argue with you (not that I personally will need to…HaHa).
You certainly put a brand new spin on a topic which has been written about for years.
Great stuff, just wonderful!
my blog post critical success (en.wikipedia.org)
on this website, saved to fav!