2 Cara Membuat Blockquote Keren Dengan CSS Di Blog
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 |
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 Simbol Ceklis (√) Secara Otomatis Di Setiap Postingan Blog
- Cara Membuat Tombol Download Keren Di Postingan Blog
- Cara Membuat Link Hidup Di Komentar Blog Dengan Mudah
- Cara Menambahkan Icon Di Menu Blog 100% Work
- Cara Membuat Sitemap Blogger Dengan Mudah
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:
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
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.
seconds.
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !