Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Blockquote Black Redble di Blog

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.

Berlangganan artikel via email

13 Response to "Membuat Blockquote Black Redble di Blog"

info yang bagus nih... izin pasang kawan

Balas

wew...keren mas, ijin praktek yah?
buru2 mau berangkat nih....hahaha

Balas

hem..
Macem tu yah?
Mau nyoba tapi takut salah, deg degan aku kalo main HTML..

Pengalaman template pernah 'hancur'

Balas

wah keren nih sangar coco buat tema Dark Blog, terimakasih banyak mas sudah berbagi.

Balas

bagus sob... ijin copy scriptnya ya sob..mau nyoba langsung nih..hehehe..

#Kunjungan perdana sobat. Followsukses !!

Balas

boleh dicoba.. :) .

Balas
avatar
Anonymous

Keren mas.. warna hitam adalah warna favorit... langsung di praktekkan.. biar tambah macth dg templatenya.. hehehe...

Balas

wahhh baru tahu saya bang tips ini....makasih bang tutor hebatnya

Balas

jadi lebih menarik ya bang pake pake redble

Balas

Maksih Om Infonya... bisa langsung dipraktekin nih...

Balas

wah sangar sekali sobat, ini memang mantap dan mesti digunakan
terima kasih banyak sobat atas tutorialnya yang sangat berguna dan bermanfaat
sekali lagi terima kasih

Balas

artikel yg bagus, mampir jg gan ke blog ane.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Blockquote Black Redble di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode