2 Cara Membuat Blockquote Keren Dengan CSS Di Blog


2 Cara Membuat Blockquote Keren Dengan CSS Di Blog - Mungkin bagi anda yang sudah terjun di dunia blogger yang tentunya sangat identik dengan kegiatan tulis menulis tentunya sudah tidak asing lagi dengan yang namanya Blockquote.

Blockquote biasanya digunakan untuk menandai sebuah kutipan/ catatan atau info penting seperti kutipan kalimat  berupa teks biasa, HTML, CSS, Javascript dan yang lainnya pada sebuah postingan blog.
2 Cara Membuat Blockquote Keren Dengan CSS Di Blog
2 Cara Membuat Blockquote Keren Dengan CSS Di Blog

Blockquote berfungsi sebagai penandaan terhadap sebuah poin penting yang tidak boleh terlewatkan dalam sebuah postingan. Disamping itu dengan adanya blockquote biasanya bisa memberikan kesan blog menjadi lebih profesional pada sebuah postingan yang kita buat.

Dengan adanya blockquote ini maka pengunjung akan senantiasa dengan mudah bisa menemukan dan melihat point penting yang mesti mereka dapatkan dalam sebuah artikel tersebut.

Biasanya setiap template blog secara default pasti sudah menyediakan fitur blockquote tersebut, tetapi terkadang kita kurang puas dengan tampilannya yang kurang enak dilihat.

Nah disini kita sebenarnya bisa memodifikasi sedemikian rupa tampilan blockquote pada blog yang kita miliki sehingga enak dilihat dan terkesan memiliki tampilan yang lebih profesional.

Baca juga:

Cara Membuat Blockquote Keren Dengan CSS Di Blog

Langsung saja berikut ini saya akan menjelaskan bagaimana cara membuat blockquote keren di blog yang bisa anda design sendiri langsung melalui menu edit HTML.

1. Pertama silahkan anda Log In pada akaun blogger anda
2. Selanjutnya klik Tema lalu Edit HTML
3. Selanjutnya silahkan anda cari tekan CTRL + F lalu cari ]]></b:skin>
4. Selanjutnya silahkan anda Copy Paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut

#1.
blockquote{background: #f5f5f5;border-left:5px solid #4C6C81;margin: 10px;padding:10px;font-size: 16px;color: #575757;;text-align:left}
 hasilnya seperti dibawah ini:
2 Cara Membuat Blockquote Keren Dengan CSS Di Blog
#2
blockquote{margin:25px 15px;padding:10px 20px;line-height:26px;border-left:5px solid #1fa67a;background-color:#f5f6cc;background-image: -webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);}
hasilnya nanti akan seperti yang saya gunakan dibawah ini:
blockquote{margin:25px 15px;padding:10px 20px;line-height:26px;border-left:5px solid #1fa67a;background-color:#f5f6cc;background-image: -webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),-webkit-repeating-linear-gradient(top,transparent 0%,transparent 24px,rgba(239,207,173,0.7) 24px,rgba(239,207,173,0.7) 25px);}
Silahkan anda pilih salah satu tampilan blockquote diatas sesuai dengan keinginan anda

5. Terakhir silahkan anda klik Simpan pada template anda

Perlu anda ketahui, anda jug bisa memodifikasi sendiri tampilan blockquote tersebut sesuai dengan keinginan anda, seperti mengubah warna, tulisan/ huruf dan juga background nya.

Cara Menggunakan Blockquote Pada Postingan Blog

Mungkin hal ini sudah semuanya tau, tetapi apabila ada yang belum paham menggunakan, langsung saja ikuti langkah berikut ini:
1. Setelah anda membuat postingan, tentukan di bagian mana anda ingin membuat blockquote tersebut.
2. Selanjutnya klik Quote
2 Cara Membuat Blockquote Keren Dengan CSS Di Blog
3. Tuliskan seperti biasa apa yang ingin anda buat didalam quote tersebut
5. Hasilnya nanti akan terlihat setelah artikel anda diterbitkan

Penutup: Itulah Cara Membuat Blockquote Keren Dengan CSS Di Blog yang bisa saya bagikan pada kesempatan kali ini, dimana dengan menggunakan blockuote tersebut tentunya akan bisa membuat postinagn anda menjadi lebih rapi, profesional dan tentunya akan membaut pembaca lebih mudah menemukan hal penting yang mereka inginkan.
bm

Hanya seorang manusia biasa yang ingin berbagi pengalaman dan mencoba hal - hal baru.

Post a Comment

silahkan berikan komentar anda dan saran terbaik untuk kemajuan blog ini.