Cara membuat Blockquote keren di Postingan Blog


Cara membuat blockquote keren di postingan Blog. Blockquote merupakan sebuah tag untuk menandai kalimat yang sekiranya sangat penting, agar lebih memberikan kesan penekanan terhadap pembaca bahwa kalimat tersebut merupakan kalimat yang penting. Secara sederhananya blockquote merupakan tanda kutip 2 (dua) yang sudah di sediakan oleh pihak blog itu sendiri.

Penggunaan blocquote juga sangatlah mudah, Anda hanya tinggal block kata atau kalimat yang di anggap penting kemudian klik tanda blockuote (“ ”) yang terdapat pada menu bar.

Penggunaan blockquote akan menambah kenyamana terhadap pembaca dan good looking post. Dengan blockquote postingan yang menarik dan rapih, tentunya akan lebih enak di baca, sehingga membuat pengunjung betah untuk berlama-lama membaca artikel tersebut. Selain dari itu penggunaan blocquote dapat memberikan efek beda pada halaman postingan yang lebih keren.

Sebenarnya template yang Anda gunakan sudah di lengkapi dengan blockquote sendiri. Namun biasanya blocquote default kurang enak untuk di pandang. Maka dari itu pada kesempatan kali ini saya akan memberikan tutorial cara membuat blockquote di blog.

Pada artikel tutorial karli ini saya akan membagikan cara membuat blockquote di blog yang mirip dengan punya Arlina Design. Dengan tampilan yang menurut saya bagus dan keren.

Artikel ini saya buat ketika saya mau membuat blockquote untuk web blog saya ini. Kebetulan template blog saya ini juga merupakan template blog premium Arlina Design, sehingga sangat cocok jika saya membuat blockquote dengan tampilan mirip blog mba Arlina. Jika anda tetarik juga dengan template hasil buatan tangan Arlina yang saya pakai ini Anda bisa mengunjunginya pada artikel ini Template blog Arlina Design Responsive dan SEO 

alt="cara membuat blockquote di blog"

Cara membuat blockquote keren di postingan Blog

Cara membuat blockquote di blog sangatlah mudah, karena kita hanya mengganti kode tampilan dari css nya saja dari blockquote default template yang di gunakan. Kode css blocquote yang saya berikan ini juga kebetulan sudah responsive.

Agar hasil yang bisa bejalan lancar, silahkan simak langkah-langkah cara membuat blockquote di blog berikut ini:

Karena pada penggunaan blockquote ini menggunakan font awesome, silahkan telebih dahulu anda pasang font awesome berikut ini sebelum kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Pada beberapa template, mungkin sudah di beri style oleh pembuatnya. Jika memang sudah di style terlebih dahulu silahkan Anda cari kodenya. Untuk mempermudah pencarian pada edit template  tekan ctrl + f, kemudiaan pada kolom pencarian silahkan ketikan .post-body blockquote kemudian tekan enter. Jika tidak ketemu coba isikan .post blockquote atau blockquote saja. Dibawah ini merupakan style blockquote default bawaan template yang saya pakai.

alt="cara membuat blockquote pada blog"

Jika sudah ketemu silahkan Anda hapus kode default tersebut, lalu ganti dengan kode style blockquote di bawah ini.

.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);}

Jika sudah silahkan save theme atau simpan template. Dan apabila berhasil maka tampilan akan berubah seperti gambar di bawah ini.

alt="cara membuat blockquote pada blog"

Ok. Itu saja tutorial yang bisa saya share untuk kali ini tentang cara membuat blockquote di blog, jika ada yang kurang paham atau kesulitan silahkan untuk meninggalkan komentar di kolom komentar yang sudah tersedia. Semoga postingan ini bermanfaat, apabila ada kata-kata yang berantakan dalam memberikan tutorial kali ini saya mohon maaf. Terimakasih  

Comments