Tips Blogger | Membuat Blockquote Sederhana Di Blog

W

idget Blockquote berfungsi untuk memberikan tanda khusus (highlight) atau kesan penting suatu bagian kalimat atau gambar di dalam artikel postingan Blog. Dengan Blockquote ini sobat dapat menandai dan membedakan tampilan bagian postingan yang ingin ditonjolkan dengan memberi warna bingkai yang berbeda dengan bagian lainnya sehingga pengunjung Blog dapat dengan cepat dan mudah melihat poin-poin penting dari artikel postingan yang dibacanya.

Memang sih, tanpa Blockquote pun kita sudah dapat membedakan bagian-bagian yang ingin ditonjolkan di Blog yakni dengan cara membedakan jenis font, warna font dan ketebalan font. Namun bagi sobat yang ingin artikel Blog nya tampil beda dan menarik, silahkan coba Blockquote ini.

Cara menampilkan Blockquote cukup mudah,silahkan ikuti cara-cara di bawah ini:



1). Login dulu ke akun Blogger sobat

2). Kemudian Masuk Rancangan >> Edit HTML dan beri tanda contreng pada kotak Expand Template Widget

3). Back up dulu template Blog sobat dengan cara klik pada pilihan Download Template Lengkap.

4). Cari dan temukan kode ]]></b:skin> ( Gunakan fungsi search pada Browser dengan menekan tombol F3 di Keyboard)

5). Setelah ketemu kemudian langsung ganti dengan kode di bawah ini ;

.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 2px solid #848484;border-bottom: 2px solid #848484;border-left: 2px solid#848484;border-right: 2px solid #848484;}
]]></b:skin>

6). Sobat dapat mengganti kode-kode warna dari tampilan Blockquote nantinya dengan cara merubah kode-kode yang berwarna merah di atas sesuka hati.Untuk mendapatkan kode-kode warna HTML sobat bisa melihatnya disini!

7). Terakhir klik tombol simpan.

8). Nah untuk menampilkan Blockquote di dalam artikel postingan, pada saat menulis entri baru pilih mode EDIT HTML, kemudian tambahkan kode <p class="alert"> sebelum kalimat atau paragraf yang akan dijadikan Blockquote, dan di bagian akhirnya jangan lupa tambahkan kode </p>.

9). Contoh Blockquote dapat dilihat seperti di atas! Selamat mencoba, semoga berhasil.

Artikel Terkait:

Languages :