5 Cara Membuat Blockquote Keren Dengan CSS Di Blog
5 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.
5 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.
Tidak hanya masalah tampilan saja, tetapi bagaimana kotak catatan ini nantinya bersifat responsif dan support untuk tampilan dekstop dan mobile.
Apalagi seperti yang kita tau saat ini penggunaan smartphone akan lebih banyak ketimbang menggunakan dekstop, sehingga tampilan blockquote ini juga diharapkan nyaman pada tampilan ponsel.
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.
Dibawah ini ada banyak sekali style Blockquote blogger terbaru yang bisa anda coba gunakan, dan disini saya bagikan setidaknya 5 design style blockquote atau kotak catatan keren terbaik yang patut anda coba.
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 tersebut
#1.
hasilnya seperti dibawah ini:
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
#3.
blockquote{
margin:20px;
color:#272827;
background:#e2e2e2;
border-top: 2px dashed #03a506;
border-bottom: 2px dashed #03a506;
padding: 12px 7px 12px 7px
}
Adapun hasilnya seperti ini
#4.
blockquote{background:#2c4584;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:#2c4584}
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. 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
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.
Post a Comment
Silahkan berkomentar yang sopan, sesuai topik, No Spam, Centang kotak pada Notify me !