Membuat Blockquote Black Redble di Blog

Membuat Blockquote Black Redble di Blog – setiap blog pasti tentunya sudah tersedia fasilitas blockquote default blogger untuk membuat teks box atau bisa dikatakan sebagai kotak area untuk memisahkan teks agar terlihat berbeda tampilan apabila teks tersebut merupakan bagian isi konten yang penting.

Selain itu fungsi dari blockquote juga berguna untuk meletakkan seperti kode script HTML, CSS, jQuery, dll terutama pada blog tutorial yang menyertakan teks berjenis script. Pada blog yang mengulas tentang artikel islami juga bisa menggunakan fungsi blockquote untuk meletakan sebagian konten semisal terdapat tulisan atau himbauan yang mengungkapkan inti dari konten tersebut, misalkan saja seperti kalimat dalil, huruf arab, dll. Dari bentuk Blockquote Black Redble ini sendiri juga sangat sederhana, tidak banyak menggunakan kode CSS untuk memasang kedalam template blog. Berikut adalah cara Membuat Blockquote Black Redble di Blog dengan tampilan sederhana dan minimalis:

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

blockquote {
margin: 1em 3em;
padding: .5em 1em;
color: white;
border-left: 7px solid #ff0000;
background-color: #000000;
box-shadow: 1px 1px 6px 1px #ff0000;
}
blockquote p { margin: 0; }

5. Simpan Template.

Untuk memanggil kode tersebut kedalam postingan cukup hanya dengan cara block bagian teks yang ingin ditampilkan didalam blockquote, kemudian klik “Quote” yang terdapat pada panel atas kolom posting blog, selanjutnya untuk melihat hasilnya silahkan klik “Pratinjau”. Maka akan tampak hasil dari blockquote seperti dibawah ini:

Apabila warna background, border dan font dari blockquote ini kurang sesuai, silahkan bisa anda sesuaikan sendiri dengan mengubah pada bagian:

• color: white;
• border-left: 7px solid #ff0000;
• background-color: #000000;
• box-shadow: 1px 1px 6px 1px #ff0000;

Keterangan:

• White adalah warna font, silahkan sesuaikan.
• 7px dan #ff0000 adalah tebal dan warna border sebelah kiri blockquote, silahkan sesuaikan.
• Untuk merubah warna merah pada luar kotak, silahkan ganti #ff0000 pada box-shadow dengan warna lain yang di inginkan.

Sebagai Contoh:

Misalkan saja untuk merubah warna font menjadi hijau terang maka yang perlu diganti adalah “white” dirubah menjadi “lime” sedangkan pada box-shadow saya ubah warnanya menjadi #3d85c6, maka akan tampak hasil seperti pada blockquote ini. Untuk lebih lanjut silahkan bisa dicoba sendiri dengan merubah warna lain sesuai selera masing-masing.

Ini hanyalah tutorial sederhana untuk cara Membuat Blockquote Black Redble di Blog, apabila lebih menginkan hasil yang lebih maksimal selanjutnya anda bisa mengembangkan ataupun mencoba untuk membuat agar memperoleh hasil yang lebih bagus dan tentunya terlihat cantik.