Cara Mudah Membuat Blockquote Ala Arlina Design

Membuat blockquote ala arlina design
Blockquote  yaitu sebuah tag yang biasa digunakan untuk mengkutip kalimat maupun kata penting di blog.  Selain itu banyak blogger yang menggunakanya untuk menampilkan suatu kode tertentu.

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.



EmoticonEmoticon