Nah, mari kita coba cara yang pertama dengan memodifikasi default blockquote blogger. Template default blogger telah menyediakan fitur blockquote ini pada kode CSS berikut :
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
Inilah yang perlu dimodifikasi sedikit saja. Bagi yang sudah biasa dengan kode CSS, tentu hal ini sangat mudah dilakukan. Bagi teman-teman lain yang masih belajar seperti saya, dapat mengikuti cara berikut. Silahkan masuk ke blog dengan ID blogger anda » tuju Layout dan » klik Edit HTML » jangan lupa untuk mencentang kotak kecil Edit Template Widget. maka kode default blogger harus diganti menjadi seperti ini :
.post blockquote {
background:url(http://i34.tinypic.com/11j7yvk.jpg) no-repeat;
padding:10px;
margin:1em 20px;
background-position:10px 10px;
border:2px #000000 solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 0;
}
Perhatikan kode apa saja yang ditambahkan pada default blockquote blogger. Anda dapat mengganti latar belakang gambar dengan gambar anda. Untuk border dan jarak tepi serta posisi teks, bisa anda sesuaikan dengan template blog anda.
Ada dua tanda quotation pembuka dan penutup. Cara membuatnya sama dengan cara pertama. Anda hanya perlu memodifikasi blockquote penutupnya saja. Artinya, tambahkan beberapa perintah blockquote pada kode default blogger yang kedua atau biar mudah, ganti semua kode default blockquote blogger menjadi seperti berikut :
.post blockquote {
background:url(http://i34.tinypic.com/11j7yvk.jpg) no-repeat;
padding:10px;
margin:1em 20px;
background-position:10px 10px;
border:2px #000000 solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 5;
background:url(http://i37.tinypic.com/211qd03.jpg) no-repeat;
padding:20px;
background-position:bottom right;
}
Sama seperti yang saya katakan tadi, anda masih dapat mengganti background dengan gambar anda sendiri. Demikian juga dengan garis tepi serta perintah kode CSS lainnya.
Penerapan blockquote pada posting blog perlu anda perhatikan sebagai berikut. Agar blockquote dapat berfungsi di posting blog, maka anda harus menambahkan kode </blockquote><p> di awal teks yang dipertegas dan tutup dengan kode </p></blockquote>. Misalnya seperti ini :
<blockquote><p>Tulis di sini teks yang akan di blockquote</p></blockquote>
Membuat Blockquote Cara Kedua
Oke, sekarang kita coba cara yang kedua dengan menambahkan kode CSS blockquote pada template anda.
1. Login ke blogger dengan ID anda
2. Tuju Layout
3. Pada tab menu pilih Edit HTML
4. Centang kotak kecil Expand Template Widget
5. Cari kode ]]></b:skin>
6. Tambahkan kode berikut di atas kode ]]></b:skin>
blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}
7. Klik tombol Save Template
8. Selesai
Encode / Decode HTML Entities Click here
0 komentar:
Post a Comment