Cara Membuat BlockQuote (Catatan) Seperti Blog Arlina Design

cara modifikasi blockquote ala arlinadzgn.com
Cara Membuat BlockQuote (Catatan) Seperti Blog Arlina Design - BlockQuote merupakan sebuah fitur yang terdapat pada blog yang pada awalnya digunakan untuk menandai atau membuat sebuah kutipan seperti pada kutipan kata-kata, rujukan sumber, atau untuk mempertegas sebuah isi tulisan tertentu bahwa bagian ini penting.

Tetapi seiringnya perkembangan di dunia internet khususnya blogging, penggunaan block quote saat ini sudah mengalami perubahan, mulai dari bentuk atau style yang lebih moder dengan desain flat, bahkan blockquote saat ini selain berfungsi sebagai tanda kutipan juga untuk menambahkan sebuah keterangan di dalam postingan artikel.

Perubahan bentuk style dan desain pada block quote pertama kali saya temukan di blog Arlina Design. Jika sobat pernah berkunjung ke blog arlinadzgn.com pasti sobat pernah lihat bentuk blockquote yang terdapat di blog tersebut berbentuk catatan dengan warna dan style flat.

Modifikasi blocqoute tersebut terlihat lebih elegan dan modern dengan bentuk style catatan flat, saat ini banyak blogger menggunakan fitur blockqoute bukan hanya untuk keperluan tanda pengutipan statment atau kata kutipan saja, melainkan penggunaannya untuk penegasan atau keterangan dari isi postingan.


Membuat BlockQuote (catatan) ala blog Arlina Design

Masuk dashboard blogger > Tema > Edit HTML 

Salin kode di bawah ini dan tempatkan tepat di atas kode atau sebelum </head>

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

Selanjutnya salin kode di bawah ini dan tempatkan sebelum kode </style> atau ]]></b:skin>

CSS
.post-body blockquote{background:#4285f4;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);}

Keterangan: 
#4285f4 adalah kode warna background blockquote
#fff adalah kode warna teks pada blockquote

Pada beberapa template, blockquote mungkin dibuat sebagai style tersendiri dari template tersebut dan kemungkinan cara menempatkan langsung kode blockquote seperti di atas tidak akan bekerja. Untuk mengatasi hal tersebut, berikut langkah-langkahnya.


Carilah kode .post-body blockquote atau kode blockquote dengan menggunakan fitur find atau CTRL + F.

kode blockquote bawaan template

Setelah ditemukan hapus struktur kode tersebut lalu ganti dengan kode blockquote di atas.

kode blockquote setelah di edit

Simpan Tema / Template

Untuk penggunaan blockquote sama seperti ingin memberikan tanda quote / catatan pada teks di postingan yaitu dengan milih tanda kutip dua ( " ) di menu postingan.

Kurang lebih seperti itulah cara terbaru membuat efek blockquote atau catatan ala blog Arlina Design (arlinadzgn.com). Selamat mencoba dan semoga bermanfaat.
Komentar