Cara Modifikasi Tampilan Blockquote Menjadi Lebih Keren

Setelah kemarin membahas tentang cara membuat dan memasang syntax highlighter di postingan blog, maka pada kesempatan kali ini saya ingin membahas tentang cara modifikasi tampilan blockquote agar lebih menarik. Jika di lihat sepintas mungkin hampir sama tampilan blockquote dengan syntax highlighter. Dan untuk kegunaan serta fungsinya pun juga sama saja sebenarnya tergantung dari penulis.

Namun pada fitur blockquote ini sebenarnya memliki fungsi untuk kalimat kutipan, mempertegas isi tulisan tersebut, atau untuk menggaris bawahi sebuah kalimat penting agar mudah dipahami oleh pembacanya. Atau istilah dengan kata lain, ada penekanan khusus pada kalimat yang diblock di fitur blockquote ini. Sehingga dibuat berbeda dari kalimat lainya.

Namun meskipun begitu, blockquote ini sebenarnya bisa diisi atau dipakai untuk keperluan apa saja tergantung pada penulis artikel. Fitur blockquote ini selain untuk kalimat kutipan, masih banyak lagi fungsi lainya seperti meletakkan kode-kode javascript, css, html, dan lain-lain ketika kita sedang membuat artikel seputar tutorial blog.

Fitur blockquote ini telah tersedia pada menu editor postingan diblogger, jadi kita tidak perlu lagi membuatnya. Beda dengan syntax highlighter! Hanya saja, tampilan blockquote default blogger ini biasanya standar sehingga banyak para blogger memodifikasinya lagi. Mengubah tampilan blockquote ini dengan beragam gaya dengan cara mengganti atau menambahkan Css blockquote didalam template blog.

Nah pada kesempatan yang baik kali ini saya akan berbagi sebuah tutorial, yakni cara untuk modifikasi tampilan blockquote menjadi lebih keren dan menarik. Adapun untuk caranya mari simak terus artikel ini sampai selesai.

Cara Modifikasi Tampilan Blockquote Agar Lebih Keren Dan Menarik

Cara modifikasi tampilan blockquote agar menjadi lebih keren dan menarik di postingan blog, caranya pun sangatlah mudah. Mari ikuti panduan dan step step yang akan saya uraikan seperti di bawah ini teman teman.

Yang pertama silahkan anda Masuk dulu pada akun Blogger anda masing masing
Selanjutnya Pilih menu tema lalu klik icon segitiga yang mengarah kebawah
Disini anda bisa langsung pilih menu Edit HTML atau pilih Cadangkan tema, jika anda pilih cadangkan, ini tujuanya untuk berjaga jaga akan terjadinya kerusakan pada template blog anda
Kemudian didalam menu Editor HTML template, cari kode ]]></b:skin> Setelah kode di temukan. Langkah selanjutnya letakkan salah satu kode css berikut diatas kode ]]></b:skin> lalu klik simpan

Berikut adalah kode Css yang bisa anda coba, untuk memodifikasi tampilan blockquote agar lebih menarik dan keren pada postingan blog Anda.

Contoh Tampilan Blockquote 1

Kode Css Tampilan Blockquote 1

.post-body blockquote {font:normal 16px roboto, arial, san-serif;
    text-align: justify;line-height:1.3em;
    background: #6591c2;
    position: relative;
    display: block;
    padding: 55px 20px 20px;
    color: #fff;
    margin: 10px 0;
    border-radius: 3px;
}
.post-body blockquote:before {
    position: absolute;
    content: 'WARNING :';
    background: rgba(255,255,255,1);
    right: 3px;
    left: 3px;
    top: 3px;
    padding: 5px 20px;
    display: block;
    font:normal bold 16px arial,san-serif;
    border-radius: 3px 3px 0 0;
    color: #6591c2;

}
.post-body blockquote:after {
    position: absolute;
    content: '\f027';
    right: 10px;
    bottom: 5px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 160%;
    color: rgba(255,255,255,.6);
}

Contoh Tampilan Blockquote 2

Kode Css Tampilan Blockquote 2


.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}

Contoh Tampilan Blockquote 3

Kode Css Tampilan Blockquote 3


blockquote{display:block;background:#fff;padding:25px 15px 10px;margin:20px 0;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2em;color:#666;text-align:justify;border-left:15px solid #555;border-right:2px solid #555;box-shadow:2px 2px 15px #ccc} blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:100px;font-weight:bold;color:#999;position:absolute;left:10px;top:15px;text-shadow:2px 2px 0 #ccc} blockquote::after{content:""} blockquote a{text-decoration:none;color:#ffa133} blockquote a:hover{color:#333} blockquote em{font-style:italic} blockquote p{margin:0!important} blockquote cite{color:#999;font-size:14px;display:block;margin-top:5px;} blockquote cite:before{content:"\2014 \2009";}

Dari ketiga Kode Css beserta contoh screnshot diatas, tidak semuanya ya yang harus di pasang di dalam template blog. Silahkan anda pilih salah satu yang mana yang anda kehendaki.

Ketiga kode Css di atas sudah lulus dari uji coba yang saya lakukan di beberapa template blog, Dan hasilnya seperti CONTOH screnshot gambar diatas. Jika tidak ada kesalahan dalam pemasangan pasti work juga di template blog sobat semua.

Kode Css diatas juga masih bisa dimodifikasi lagi kalau anda kurang suka dengan warnanya, silahkan sobat kreasikan lagi dan selamat nencoba ya semoga berhasil. Namun jika diantara anda ada yang mengalami masalah dalam pemasangan kode css diatas. Silahkan tinggalkan komentar anda diakhir artikel ini.