✔ Cara Menciptakan Blockquote (Catatan) Menyerupai Blog Arlina Design

Cara Membuat BlockQuote (Catatan) Seperti Blog Arlina Design - BlockQuote merupakan sebuah fitur yang terdapat pada blog yang pada awalnya dipakai untuk menandai atau menciptakan sebuah kutipan menyerupai pada kutipan kata-kata, tumpuan sumber, atau untuk mempertegas sebuah isi goresan pena tertentu bahwa bab ini penting.

Tetapi seiringnya perkembangan di dunia internet khususnya blogging, penggunaan block quote dikala ini sudah mengalami perubahan, mulai dari bentuk atau style yang lebih moder dengan desain flat, bahkan blockquote dikala 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 aku temukan di blog Arlina Design. Jika teman pernah berkunjung ke blog arlinadzgn.com niscaya teman 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, dikala ini banyak blogger memakai 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 arahan di bawah ini dan tempatkan sempurna di atas arahan atau sebelum </head>

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

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

.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 yakni arahan warna background blockquote
#fff adalah arahan warna teks pada blockquote

Pada beberapa template, blockquote mungkin dibentuk sebagai style tersendiri dari template tersebut dan kemungkinan cara menempatkan pribadi arahan blockquote menyerupai di atas tidak akan bekerja. Untuk mengatasi hal tersebut, berikut langkah-langkahnya.

Carilah arahan .post-body blockquote atau arahan blockquote dengan memakai fitur find atau CTRL + F.

kode blockquote bawaan template

Setelah ditemukan hapus struktur arahan tersebut kemudian ganti dengan arahan blockquote di atas.

kode blockquote sesudah di edit

Simpan Tema / Template

Untuk penggunaan blockquote sama menyerupai ingin menunjukkan tanda quote / catatan pada teks di postingan yaitu dengan milih tanda kutip dua ( " ) di sajian postingan.

Kurang lebih menyerupai itulah cara terbaru menciptakan efek blockquote atau catatan ala blog Arlina Design (arlinadzgn.com). Selamat mencoba dan biar bermanfaat.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: