Tutorial | Tukar Blockquote Simple


Blockquote comel tak sesuai dengan template? Jangan risau aku nak share beberapa blockquote yang simple, tapi nampak macam profesional gitchew, hahaha. So apa pun template hangpa boleh guna yang ini.

Caranya 
Blogger dashboard > Template > Edit HTML > Ctrl+F cari  </head>
Paste code blockquote pilihan korang SEBELUM/ATAS </head>

Blockquote 1
Code:
<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;
}
</style>
Blockquote 2
Code :
<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>
Blockquote 3
Code:
  <style>
   .post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;
    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;
    display: block;
    height: 25px;
    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }
    </style>
Blockquote 4
Code :
<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>
Sumber
https://shoutersclub.blogspot.my/2015/03/customize-blockquote-style-in-blogger-and-wordpress.html
Previous
Next Post »

4 Comments

Click here for Comments
Unni Anje
admin
11/13/2016 4:34 AM ×

wah lengkap ngn code!! terbaik la mai

Reply
avatar
11/13/2016 7:03 PM ×

Terbaiklah sharing ilmu..

Reply
avatar
1/22/2017 11:38 PM ×

Terbaik la.. memang dah lama cari tutorial ni.. Terima kasih sebab kongsi :)

Reply
avatar

Tinggalkan pendapat/nota/surat cinta/amaran/soalan pada saya. Jika soalan saya akan menjawabnya, Jika nota cinta maka saya akan melawat blog anda semula.
Komen berbaur rasist, provokasi & lucah tidak akan dipublish. ConversionConversion EmoticonEmoticon