10 Cara Menciptakan Blockquote Keren Di Blog Dengan Tampilan Menarik
Lalu dalam bentuk apa Blockquote itu sanggup ditampilkan?
Ada banyak cara sepanjang sanggup tampak mencolok. Bisa dengan proteksi tanda kutip, abjad besar, abjad tebal, abjad miring, dengan warna, dengan background, dengan kotak dan masih banyak lagi tergantung kreativitas anda sendiri. Namun yang paling banyak dipakai para blogger lainnya ialah dengan membukus kutipan penting tersebut menggunakan kode script. Tentu hal ini sanggup menciptakan pengunjung nyaman dan good looking terhadap konten kita. Jika Blockquote Postingan di buat dengan tampilan yang menarik dan keren pastinya lezat untuk dibaca dan ini sanggup memberi efek beda pada halaman artikel kita. Nah kemudian bagaimana cara membuatnya dan memasangnya diblog? yuk lihat tutorialnya dibawah ini
Cara Mamasang Kotak Catatan/Blockquote Keren di Blog
Ada banyak cara sepanjang sanggup tampak mencolok. Bisa dengan proteksi tanda kutip, abjad besar, abjad tebal, abjad miring, dengan warna, dengan background, dengan kotak dan masih banyak lagi tergantung kreativitas anda sendiri. Namun yang paling banyak dipakai para blogger lainnya ialah dengan membukus kutipan penting tersebut menggunakan kode script. Tentu hal ini sanggup menciptakan pengunjung nyaman dan good looking terhadap konten kita. Jika Blockquote Postingan di buat dengan tampilan yang menarik dan keren pastinya lezat untuk dibaca dan ini sanggup memberi efek beda pada halaman artikel kita. Nah kemudian bagaimana cara membuatnya dan memasangnya diblog? yuk lihat tutorialnya dibawah ini
Cara Mamasang Kotak Catatan/Blockquote Keren di Blog
1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode ]]></b:skin>
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> . Disini saya menyediakan beberapa style yang sanggup Anda pilih sesuka hati atau sesuai selera, dan Jika sudah terdapat kode Blockquote di template silahkan Anda ganti dengan beberapa style kode Blockquote di bawah ini.
5. Jika sudah di pasang di template silahkan nanti Anda Simpan atau Save Template Anda, dan kemudian lihat hasilnya.
Style 1
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify; /*Borders - (Optional)*/ border-left: 15px solid #c76c0c; border-right: 2px solid #c76c0c; /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote a{ text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c; } blockquote a:hover{ color: #666; } blockquote em{ font-style: italic; } Style 2
body { margin:0; font-family:Droid Serif; background:#fafafa; line-height:1.5; cursor:default; } section { box-shadow:0 2px 5px rgba(0,0,0,0.2); background:#fff; width:60%; margin:100px auto; padding:50px; } blockquote { text-align:center; font-size:20px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; position:relative; quotes: "\201C""\201D""\2018""\2019"; } blockquote:after { color:#ccc; font-family:Source Sans Pro; content: open-quote; font-size:80px; position:absolute; left:50%; bottom:calc(100% - 20px); background:#fff; height:55px; width: 55px; line-height:normal; text-align:center; transform:translateX(-50%); } blockquote p { padding:20px; } Style 3
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyzBhl_ppMYv5PJAeTT8oOZDQa7lpKllNnluu6ocd9wqj47rP01xA6ySCbPMOlfSLX_MZeOzS4uQJwMO4NSV9E7ByQDBPugnhvq7WyWRg3uI5jx_b26HpTpk-3vC9CH6kQFKZvqU9CgA/s400/angular-purple.gif) no-repeat top left; 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 4
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic); .post blockquote{ font-size: 1.4em; width:60%; margin:50px auto; font-family:Open Sans; font-style:italic; color: #555555; padding:1.2em 30px 1.2em 75px; border-left:8px solid #78C0A8 ; line-height:1.6; position: relative; background:#EDEDED; } blockquote::before{ font-family:Arial; content: "\201C"; color:#78C0A8; font-size:4em; position: absolute; left: 10px; top:-10px; } blockquote::after{ content: ''; } blockquote span{ display:block; color:#333333; font-style: normal; font-weight: bold; margin-top:1em; } Style 5 
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxXlC3Gf0IuMq1dETmlChuXq2MWdOxEe6Y7k87-LdHvmeCtu6sRWtPYbtFMcO7PA3BfUqXyB2p0O8e-QdInW02sQ2PlennyMq7EPREg9aFH-igXaTp0X_aqC73FN6Aa5Ap599DkTVXww/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoRU-Makz5ZOOxENdpk2rG1-y5x6NkuKHcnsbfwFrcmzDVQGMFWUUsD8t7bh2VmBQfGv_6Dbjl8DOgPWge-tprvDQYRIOYDyR7QBLNKT0O-ryppdfAZJgHX7DE3z09RmO7Pe4-vSB9UM/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; } Style 6
.post-body blockquote {text-align: left;background: #1b9a62;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;} .post-body blockquote:before {position: absolute;content: 'Catatan';background: #0b6e3e;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;} .post-body blockquote:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;} Style 7
/* CSS blockquote */ .post blockquote {position: relative;font-family: monospace;margin: 30px auto;padding: 30px 20px 17px 50px;line-height: 30px;color: #6a5f49;text-shadow: 0 1px 1px white;background-color: #f2f6c1;background-image: -webkit-radial-gradient(center, cover, rgba(245, 126, 137, 0.6) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);border: 1px solid #c3baaa;border-color: rgba(195, 186, 170, 0.9);box-sizing: border-box;box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);} .blockquote:before, .blockquote3:after {content: '';position: absolute;top: 0;bottom: 0;} .blockquote:before {left: 28px;width: 5px;border: solid #efcfad;border-color: rgba(239, 207, 173, 0.9);border-width: 0 2px;} .blockquote:after {z-index: -1;left: 0;right: 0;background: rgba(242, 246, 193, 0.9);border: 1px solid rgba(170, 157, 134, 0.7);-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);-ms-transform: rotate(2deg);-o-transform: rotate(2deg);transform: rotate(2deg);} .quote-by {display: block;padding-right: 10px;text-align: right;font-size: 13px;font-style: italic;color: #84775c;} Style 8
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXs9alQNpgQVDAOt3snPQoH6lC5BCTO8r4TpFgFHe_vPQ8P1giGuUh9_kn8aDiTIPfnjVwcxc-uq1JPYahjOxcHHdpkJ9t8BYKZLYYI5zyaoBl6p9smL_E0anLyIDe6u7rNSVIZaUw1tc/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 9
/* CSS blockquote */ .post blockquote{position: relative;font-family: monospace;display:block;font-size: 15px;line-height: 1.2;color: #666;border: solid 1px #98A81B; background: #F5F6E8;padding: 28px 60px;} .blockquote::before{content: "\201C"; background-color: #FFF;border-radius: 50%;width: 75px;height:75px;font-size: 60px;font-weight: bold;color: #98A81B;text-align: center;line-height: 93px;position: absolute;left: -30px;top: -30px;} .blockquote::after{content: "";} Style 10
/*Blockquote Catatan*/ .post-body blockquote { text-align: left; background: #6591c2; position: relative; display: block; padding: 55px 20px 20px; color: #fff; margin: 10px 0; border-radius: 3px; } .post-body 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: #6591c2; } .post-body 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); } Cara Memasang Blockquote di Postingan Blog
Lalu buat atau cari artikel yang ingin tulisannya dibuat Blockquote
Jika sudah ada atau kata yang ingin di buat Blockquote, maka disini Anda tinggal block semua goresan pena yang ingin di bungkus dengan Blockquote dengan cara mengklik icon tanda kutip "
Nah disini pembukusannya telah selesai, terakhir Anda tinggal mempublikasikannya
Sampai disini dulu tutorial kita kali ini, jikalau ada yang ingin Anda tanyakan atau yang tidak Anda pahami silahkan komentar dibawah ini terima kasih
