Di artikel kali ini saya akan membagikan cara membuat blockquote yang style nya mirip blog punya mbak arlina design. Artikel ini saya buat karena beberapa saat yang lalu saya sempat mendengar ada yang mencari cara membuat blockquote seperti punya blog arlina design.
Tentu saja desain blockquote ini terlihat bagus dan keren. Dengan warna flat dan kombinasi font awesome, blockquote ini menjadi enak dipandang.
Sebenarnya dari beberapa template arlina design sudah disediakan blockquote yang mirip dengan blognya, tetapi belum terdapat icon sound font awesome.
Untuk itu saya akan memberitahu cara membuatnya. Blockquote ini juga sudah responsive.
Agar hasil bisa berjalan dengan lancar, silahkan simak dengan teliti cara dibawah ini.
Cara membuat blockquote ala arlina design
Karena cara ini menggunakan font awesome, untuk yang belum memasang font awesome silahkan pasang kode berikut sebelum </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>Copy dan pastekan kode dibawah ini sebelum </style> atau ]]></b:skin>
.post-body blockquote{background:#6591c2;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px;}
.post-body blockquote::before {position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#6591c2;}
blockquote::before, blockquote::after, q::before, q::after {background: transparent;}
.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);}
Pada beberapa template, mungkin blockquote sudah diberi style oleh pembuatnya.
Jika blockquote pada blog sudah distyle silahkan pada edit template cari stylenya.
Caranya, pada edit template tekan ctrl+f lalu pada kolom pencarian silahkan isikan .post-body blockquote lalu enter.(jika tidak ada silahkan cari .post blockquote atau blockquote saja}
Jika sudah ketemu hapus kode .post-body blockquote{.......} atau .post blockquote{....} lalu ganti dengan kode diatas tadi.
Untuk cara pemanggilan
silahkan buat postingan dan pilih salah satu metode berikut
Mode Compose:
klik gambar seperti petik dua yang ada di toolbar blogger. Lalu isi dengan tulisan yang anda inginkan.
Mode HTML:
Tulis kode seperti berikut.
Kemudian isi sesuai keinginan anda.
<blockquote class="tr_bq">
Isi text </blockquote>
Untuk menyakinkan anda silahkan lihat demo dengan mengeklik tombol result dibawah ini.