Cara Membuat Quote Klasik di Posting Blog
Cara membuat Quote Klasik di Posting Blog. Hi Sobat, pada kesempatan kali ini cariduit-dot akan berbagi cara membuat blockquote/blok kutipan klasik di postingan blog. Blok Kutipan ini merupakan salah satu elemen yang penting pada postingan blog, karena postingan blog tersebut akan terlihat lebih friendly, lebih elegan, dan tentunya akan lebih menarik perhatian para pengunjung blog/web. Blok kutipan ini biasanya terletak diawal kutipan, yang diberi tanda kutip buka (open quote) dan pada bagian akhir diberi tanda kutip tutup (close-quote).
Fungsi dari blockquote itu sendiri salah satunya ialah untuk mempercantik tampilan postingan artikel, menarik perhatian pengunjung, sehingga pengunjung blog tidak merasa bosan melihatnya. Lalu sebagai bentuk penekanan pada bagian kalimat-kalimat tertentu yang dirasa sangat penting
Sebelumnya saya bertanya di forum Blogger Indonesia bagaimana cara membuatnya, dan al hamdulillah teman di grup ada yang memberikan postingan yang sangat bagus sekali tentang cara membuat quote blog ini. Karena bagi blogger pemula tentunya pasti bingung bagaimana cara membuatnya. Namun tidak ada salahnya cara ini kembali saya posting, setelah saya mencobanya dan berhasil.
Sebetulnya banyak sekali jenis-jenis tampilan blok quote yang lebih menarik, namun kali ini saya hanya berbagi blokquote yang dari segi tampilan lebih simpel dan lebih klasik, karena tampilan ini sudah umum dipakai termasuk dari template Evo Magz karya Mas Sugeng ini.
Ok sobat, lebih jelasnya bagimana cara membuat blockquote klasik di posting blog, langkah-langkanya sebagai berikut:
1. Login ke akun blogger.com dengan akun google sobat
2. Setelah masuk dashboard, klik menu template, lalu klik edit HTML
3. Selanjutnya cari blockquote dengan CTRL + F, setelah ketemu inilah tampilan kodenya:
4. Setelah itu copy kode blockquote dibawah ini, dan pastekan di blockquote bawaan template sebelumnya. Lihat kode diatas yang dilingkari. Lalu simpan template.
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
Gambar:
5. Langkah selanjutnya, untuk menerapkan blockquote pada postingan, Silahkan sobat membuat postingan/artikel, caranya blok postingan yang penting dan klik tanda Quote diatas, ini contohnya:
6. Setelah selesai membuat postingan, dan membuat blockquotenya, maka seperti biasa sobat klik publikasikan, lalu lihat hasilnya. Maka kalimat-kalimat yang penting sudah diberi quote.
Demikianlah langkah-langkah cara membuat quote klasik di posting blog, terima kasih atas kunjungannya, selamat mencoba semoga berhasil dan bermanfaat.
wah keren juga ie gan ...bisa membuat gaya blog kita klasik
ReplyDeletekereb gan ane baru tau itu hahaha
ReplyDeletewahhmantapgan keren.nih :D ane ijin coba boleh?
ReplyDeletesangat bermanfaat sekali sob
ReplyDeletekalau kayak gini bikin berat gak gan?
ReplyDeleteWah ilmu yang sangat bermanfat buat sobat blogger gan.makasih ya gan infonya jangan lupa kunjungan balik gan
ReplyDeleteIzin nyoba ya gan,,semoga berhasil terimakasih
ReplyDeleteAlhamdulillah sering saya gunakan cari ini, kalau ada kalimat yang perlu diperlihatkan secara unggul supaya terlihat jelas dan seperti hadits, kata mutiara atau kata motivasi. Umumnya sudah diterapkan, makasih mas.
ReplyDeletewah menarik nih infonya tapi kita musti uprek uprek teplet ya mas..?
ReplyDeleteUnik dan menarik nih Quotenya pas banget kalo diterapin juga diblog saya :D
ReplyDeleteyhx tutornya gan
Tutorialnya baguss gan, dan quotenya juga menarik. tapi saya lebih suka pakai yang biasa-biasa saja. Terimakasih gan
ReplyDeletewah ini nih yang saya cari, karna saya suka bingung mau bikin quote gmna caranya sob,, thx banyak sob tuk tutorial lengkapnya, ijin sedotttt :)
ReplyDeletewah ini nih yang saya cari, karna saya suka bingung mau bikin quote gmna caranya sob,, thx banyak sob tuk tutorial lengkapnya, ijin sedotttt :)
ReplyDeleteTidak hanya membuat menjadi lebih menarik saja tapi quote berfungsi sebagai resume dari bacaan sebelumnya. Kan ada tuh org yg baca tiba2 di paragraf tengah2 dan bingung ini bacaan apa nah quote ini yg membantu pembaca menemukan inti dari bacaan sebelumnya
ReplyDeletePerlu diterapkan ke blog omtopik.com juga ini, makasih om ilmunya sangat membantu ,, :-)
ReplyDeleteThanks gan, triknya. Ada rencana mau saya terapkan di salah satu template blog saya nih..
ReplyDeletewahhh, baru tau ni gan, makasih infonya ya, bakal ane praktekin ke blog ane
ReplyDeleteOh jadi gitu caranya buat quote ya bang, thanks ya word di ane
ReplyDelete