Cara Membuat Blockquote Ala Deny Listianto - Deny Listianto

March 27, 2018

Cara Membuat Blockquote Ala Deny Listianto

Ketika menulis artikel di blog terkadang ada kalimat atau tulisan yang penting sehingga membutuhkaan blok catatan atau Blockquote.

Secara default blogger sudah menyediakan fitur tersebut namun bagi sebagian blogger khususnya saya pribadi merasa blockquote yang sudah ada di blogger terlalu sederhana dan terkesan membosankan.

Cara Membuat Blockquote (Catatan) Ala Deny Listianto

Blockquote pada Sebuah artikel blog berfungsi untuk memperjelas bahwa ada kata atau kalimat yang menjadi point penting pada artikel tersebut, bisa juga kita gunakan untuk memperindah tampilan blog.

Dengan adanya blockquote juga bisa memberikan kesan profesional pada tulisan atau artikel yang kita posting di blog.

Nah, saya memodifikasinya sedikit sehingga terlihat lebih menarik dan juga enak dilihat.

Cara Membuat Blockquote (Catatan) Ala Deny Listianto


1. Login dashbord Blogger.
2. Buka menu Tema lalu Edit HTML.
3. Cari kode ]]></b:skin> atau </style>. Untuk lebih mudahnya dengan cara tekan CTRL + F Untuk mencari kode diatas.
4. Copy dan letakan kode dibawah ini sebelum ]]></b:skin> atau </style>.

/* Blockquote */
.post-body blockquote{background:#f2f5fa;color:#777;border:5px solid;border-color:#fff #fff #fff #f0f2fa;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;}
.post-body blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #cfd8dc #cfd8dc;background:#cfd8dc;display:block;width:0}
.post-body blockquote:hover:before{display:none}

5. Lalu Simpan Tema, dan coba menunakan fungsi Blockquote (Catatan) pada kalimat yang kamu anggap penting.

Jika sudah lihat hasilnya berhasil atau tidak, kalau berhasil tampilanya seperti di bawah ini.

Cara Membuat Blockquote (Catatan) Ala Deny Listianto

Bagaimana mudah bukan ? dengan menggunakan blockquote memudahkan pembaca untuk mengetahui kalimat penting dari sebuah artikel yang sedang dibacanya, selain itu artikel sobat juga lebih enak dipandang dan lebih rapi.

Semoga bermanfaat, silahkan tinggalkan sepatah dua patah kata di kolom komentar agar saya lebih bersemangat lagi membuat tutorial bermanfaat untuk sobat...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo