Jenis blockquote untuk blog, PURJIANTO.WEB.ID sangatta Kutai Timur – Blockquote atau “kutipan” dalam blog bermaksud untuk membedakan antara tulisan dan kutipan agar si pembaca tahu maksud dari si penulis, dalam fitur entri postingan pada blog memang sudah disediakan, akan tetapi untuk memperindah tampilan pada postingan sebagian blogger menambahkan CSS agar lebih elegan ketika dipandang oleh si pembaca.
Sebelumnya saya sudah memposting juga Cara memasang artikel terkait di dalam postingan supaya setiap label yang ada di blog kita masuk kedalam postingan dan tentu kita tidak perlu CoPas judul dan URL lalu kita masukkan ke dalam postingan blog kita.
Jenis blockquote untuk blog
Disini saya akan memberikan blockquote yang bisa langsung kalian pakai pada blog kalian.
Macam blockquote untuk blog
.post-body blockquote {………}
.post blockquote {………}
# Blockquote 1
Code blockquote 1
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
# Blockquote 2
Code blockquote 2
blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
# Blockquote 3
Code blockquote 3
blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: “Monotype Corsiva”, “Apple Chancery”, fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }
# Blockquote 4
Code blockquote 4
blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
# Blockquote 5
Code blockquote 5
blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
# Blockquote 6
Code blockquote 6
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://1.bp.blogspot.com/-iXhRlBNUbwk/WJ1Ero_4pII/AAAAAAAAAe8/Ovun2NDKp2AsWn2lO_2IynrXSh2b24JYQCLcB/s1600/purjianto%2B9.png) no-repeat 350px 5px; 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; }
# Blockquote 7
Code blockquote 7
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://2.bp.blogspot.com/-mOHZMdu813k/WJ1ErkwVm9I/AAAAAAAAAe4/6f4sq_lrYfgOXQkg-e_Q6zrKU2-QRN_QACLcB/s1600/purjianto.top.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; }
Code blockquote 8
.post blockquote{margin:10px;padding:7px;border:1px solid #19ABEA;border-left:10px solid #19ABEA;border-right:10px solid #19ABEA}
Untuk kalian yang ingin blockquote nya seperti blog purjianto.top ini silahkan pakai codenya di bawah ini :
.post blockquote{line-height:1.6em!important;position:relative;width:auto;padding:1.7em 1.5em;margin:20px auto;background:#f5f8fa;border:1px solid #a0d3fb;overflow:auto;color:#666;font-family:Georgia,serif;font-size:14px;border-radius:3px;display:block}
Belajar tentang dunia blogger itu sangat mudah sekali, tinggal kemauan dan ketelitian kalian saja. Memberikan informasi kepada sesama itu lah tujuan seorang blogger, dengan harapan saling belajar dan bukan menggurui seseorang.
Demikian artikel yang membahas tentang blockquote dengan kata kunci : Jenis blockquote untuk blog. Semoga bisa membantu kalian saat mau memasang blockquote di blog.
Orang bijak itu tidak harus tua, tidak harus pandai akan tetapi lebih kenilai rasa syukur kepada apa yang sudah kita miliki.