Cara Mudah Membuat BlockQuote ala Arlina Design terbaru 2017

BlockQuote apa si itu blockquote, jadi BlockQuote adalah kutipan tulisan penting yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Tujuannya adalah untuk mempertegas isi tulisan ataupun teks yang dianggap penting yang berada di area BlocQuote.
Lalu mengapa ala Arlina Design, ya seperti kita tau beliau adalah web Design dan web Developer yang membuat kita terkagum kagum atas karya - karya design nya yang mengikuti jaman sekarang yaitu Flat Design.
Jika sobat sering main ke Blognya Arlina Design, pasti sobat sering menjumpai BlockQuote yang warna biru dan ada tulisan Catatan lalu bloknya warna biru dan di pojok kanan bawah ada logo Speaker.

Contohnya seperti ini. . .

Untuk itu yang perlu di perhatikan apakah blog sobat sudah memliki custom BlockQuote sendiri atau masih standart, baik disini mari kita kupas tuntas sob.

Disini mimin menggunakan template dari Alina Design yang sudah ter custom BlockQuote tidak seperti di atas, sekarang mimin ingin merubahnya seperti diatas:
1. Masuk Template lalu Edit HTML

2. Klik di Box Codenya lalu tekan CTRL dan huruf F tulis "blockquote" cari seperti dibawah ini:

3. Hapus bagian yg mimin kasih pembatas seperti di atas
4. Ganti dengan kode di bawah ini:

 blockquote{background:#5194e5;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
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:#5194e5}
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)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important}  

5. Selanjutnya Save dan lihat hasilnya.
6. Untuk sobat yang templatenya berbeda dan sudah di custom BlockQuotenya silahkan cari sendiri di Edit HTML template.

7. Dan buat yang belum di Custom Templatenya bisa menambahkan code diatas sebelum </style> atau ]]></b:skin>

8. Selamat mencoba sob. Gudlak.

====================================
Oke gan kelar tugas mimin membantu agan :)
Baca juga Tutorial Blogger lainnya sob disini jika ada kesulitan sobat juga bisa hubungi kami via Contact

Sekarang saya mohon tinggalkan jejak di komentar ya sob, agar blog ini terus berdiri membantu sobat semua dalam tutorial-tutorial selanjutnya. Terima kasih.