Cara mudah membuat Blockquote keren di Blog

-

Cara mudah membuat Blockquote keren di Blog


Blockquote atau catatan di blog kita berfungsi untuk membuat penekanan pada satu atau beberapa kalimat dan atau frasa agar pembaca tidak melewatkan inti artikel. Fitur Blockquote sebenarnya sudah tertanam di semua template/tema blog. Blockquote biasanya akan terlihat berbeda dari kalimat yang ada dalam artikel blog. Bisa berupa kalimat tercetak miring, berhuruf tebal dan berbeda dengan huruf dalam artikel yang tidak di blockquote dan mempunyai background warna yang tidak sama dengan isi artikel. Hal ini bermaksud supaya kalimat yang kita quote menarik perhatian pembaca dan tidak sampai terlewat dan yang paling penting, pembaca tidak sampai terlewat untuk membaca kalimat yang kita quote.

Cara mudah membuat blockquote keren di blog.

Secara umum, blockquote biasanya tertulis .post-body blockquote {....} atau .post blockquote {....} tergantung template yang digunakan. Dimana titik-titik diatas melambangkan gaya/style blockquote.
  • Yang pertama tentu saja masuk ke dashboard blogger, klik theme lalu edit HTML.
  • Geser kursor ke kotak HTML theme cari kode yang berwarna latar jingga diatas. Agar lebih mudah tekan CTRL+F untuk mencarinya.
  • Copy salah satu kode blockquote dibawah ini menurut selera masing-masing dan paste diantara tanda {......} setelah tulisan blockquote.
  • Sebelum mengedit blockquote, jangan lupa backup dulu tema untuk jaga-jaga.

style 1

kode HTML :
background:#fcf4ca;position:relative;margin:15px 0;border-left:3px solid #c69f73;font-weight:400;padding:12px 15px;color:#77735c;box-shadow:3px 3px rgba(0,0,0,0.1);}
*:focus {outline:0!important;

style 2



kode HTML :
background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px

style 3



kode HTML :
margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em;

style 4
kode HTML :
margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px;

style 5
kode HTML :
margin : 0 20px; padding: 20px 20px 20px 20px; background : #E4EAFE; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px;

style 6

kode HTML :
margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQp6lnHvSnjHf4vJjQxF12eyEgOxeX09ruZOccgstALfgGblK3rYqHgwHF5mDMUdYpVXY9J34mkuyBxnzJ3MQ_a3YnwcttaVylhlbD6DKSbQsM_3-P0OO3Xvrr4r4y0hur8d8HNkD06k/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px;

style 7
kode HTML :
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhKUeKGnnJOIKGmZaJdnYz90PYW1k_p2792DG5w4zK_eJI2wdBu3P3S-RqtP3ekJy5QRB0Kta29LqVLIJqWnkf6HTcT0x0vyIq2P5t9uPtRZY-zFml674wNg6nTVfaXRZf-MZ43ukBdBg/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px;

style 8
kode HTML :
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9igfBEXWaSwWmoUY4JZr326W_UoZKW7-Pb1mjYaP149JynLAMId45iJZlHNNX8WpONt-q4CpQxG2X4ZmNNzBWHG0XqUNCxjDH6eaMdY6d0fTOpds81HCqYOJz8vI21u6jZs4_lQClzU0/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px;

style 9
kode HTML :
font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj158xwD0Qu9rN21tDtPcbsSWjrgzL0iPSj42hYhtIfPh5uWek7CMExZ3P2YcHwawiBiVeDuuNqmpSa5u_S5aRx88UuSepTPS4cm2OvRUpUbQ1YC9NdCdjfU2jYtS_AludX92SwIpkb2Ec/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2mS2NdZlunsSxKwMazHAd_t231lmtW4rUWgmPVOivq5Zh6sFxjDyS4OlzizAu4tVg4a5rZcGWlxHwiAVw213hK3iIQ5uPHpPCol7EhjPVjHoCxKFLzHUtxReJE3a1N5ejSTmd5goACA/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px;

style 10
kode HTML :
background-color: transparent; border-top: 3px double#DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%;

style 11
kode HTML :
font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6mVy_X6T2hcsdkKszc0OCsiUyX9tDAtAaQMaEjmAy5X3xG5MO9lNGwg4HQPsJSSXNXP_qjWu7u0a6gYJ6qBagGLjQkZm4MwyciZz-4zirJX4Bsl8JQTiFW-VkLLph797XJZQCXjtFaSo/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR3dSJeVhePRYuBA2eJBBk6B8-SpgoixCwlIik7Xzy22xaKe1TZvE2fgE6KzXcDD-4Eg1sY3uMOoYnB0nDONuhxx21TRIekZjTfbwvCK00nkpgPHVLa-JDvDJy4DnF7jKFqu9goB0e234/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px;

style 12 dengan fungsi scroll disisi kiri


kode HTML :
max-height:300px; overflow:auto;background:#030303; font-style:Normal; color:#BDBDBD; border:1px solid #030303; margin:10px; padding:10px 10px 10px 20px

Sekian artikel Cara mudah membuat blockquote keren di blog. Semoga bermanfaat bagi anda. Sampai jumpa di artikel selanjutnya. Bila ada keluhan atau yang lain, kita bahas bersama di kolom komentar.

Komentar

Posting Komentar

Postingan populer dari blog ini

Manfaat Daun Singkong

-
Gambar
 Singkong merupakan makanan pokok rakyat Indonesia setelah nasi. Daun nya juga memiliki beragam manfaat. Selain untuk sayuran dan lalapan, daun singkong ternyata juga bisa dibuat jadi tepung untuk bahan baku pembuatan kue dan biskuit Masyarakat Indonesia pasti sudah tidak asing lagi dengan daun singkong. Daun singkong biasnya terdapat dalam sajian khas masakan Padang. Maka jangan heran bila daun singkong selalu ada di manapun rumah makan masakan Padang berada pasti menyediakan daun singkong sebagai pelengkap menu utama. Cara menanamnya sangat mudah. Cukup dengan menancapkan batang nya di tanah, lalu batang dan daun nya akan tumbuh dengan lebat. Bila sudah berumur 8 bulan, singkong sudah siap dipanen. Tapi siapa sangka, kalau daun singkong yang memiliki bentuk pipih memanjang ternyata memiliki banyak manfaat bagi kesehatan manusia. Tanaman singkong memiliki yang nama latin  manihot esculenta ini pertama kali dikenl di Amerika Selatan dan kemudian dibudidayakan dan di...
Read More »

Review: Evercoss Winner T A74A, HP Android murah 600ribuan dengan spesifikasi lumayan

-
Gambar
Kali ini saya mencoba untuk me-review hp saya sendiri, Evercoss Winner T A74A. Smartphone Android murah meriah seharga 600ribuan dari vendor lokal, Evercoss. Review ini bukan pesanan vendor, distributor atau pihak manapun yang berkepentingan. Kelengkapan pembelian antara lain HP,charger,kabel USB,earphone,buku panduan dan lembar garansi . Desain dan Antar Muka (UI) Dengan desain yang sederhana, bezel yang lebar dan berbahan plastik menampakkan kesan hp murmer (murah meriah). Dengan bentang layar 4" berjenis TFT 16 juta warna dengan resolusi WVGA (480x800) dan kerapatan pixel 225ppi membuat layar tampak buram. Dibawah sinar matahari langsung, membaca sms menjadi sesuatu yang sulit karena layar masih berjenis TFT. Syukurlah evercoss membenamkan layar A74A ini dengan teknologi Hard Glass Screen. Jadi layar cukup tahan goresan dan benturan. Evercoss mengeluarkan ponsel ini dengan 2 varian OS android. Ada yang KITKAT dan Lolipop. Kebetulan ponsel saya versi Lo...
Read More »

CASHTREE: Aplikasi Android Penghasil Pulsa

-
Gambar
Bila anda sering online dengan wi-fi dan menggunakan Android sebagai gad g et utama untuk berselancar di dunia maya, tak ada salahnya mencoba aplikasi yang satu ini. Aplikasi Cashtree, aplikasi android penghasil pulsa nomor satu di Indonesia. Aplikasi yang diluncurkan kira kira 2 tahun yang lalu ini sudah diunduh oleh 8 juta pemakai smartphone android di Indonesia. Aplikasi ini dirilis pertama kali di Korea Selatan. Aplikasi yang dikembangkan oleh VITI ( Value in Technology Pte Ltd ) ini cukup memikat banyak pemakai android di Indonesia termasuk saya, ☺. Cashtree termasuk jenis aplikasi  mobile advertising platform bagi pengembang dan  mobile reward app bagi pengguna. Cashtree hadir di Indonesia tak lama setelah rilis di Korsel. Indonesia menjadi pasar potensial Cashtree mengingat jumlah penduduk Indonesia yang menggunakan ponsel sebagai piranti utama ber internet yang terus bertambah, tumbuh dengn sangat pesat. Berikut review Cashtreee: Pulsa Hadiah Gratis Apli...
Read More »