Code 1:
.post blockquote {
margin : 0 20px; padding: 60px 30px 40px 20px;
background: #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjceGAB-Cp-IZQQiZndZcXmGU2VS7qj2pOKVewsjkWBw0pGUYu7xfuVjTcTM3fyfdxTmWwAzmXy9lFW3g-sOcy0nLYEmfPrq8AcIp1_pncMsYyM04ZeoSpeeQAY8CdiNWcWPtsBD5x88R8/s400/owl.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;
}
IMAGE
Code 2:
.post blockquote {
margin : 0 20px; padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDEWz-N5Y6PA-cYtqoR5FyoQqEn8oB7f7emQDq5DXhZMsJzhZwWtffExbh5uvV8wMfDRyX9NVXqE8A7AEGt5OZp4kkDVI-dySRV8eASYPGXeypxroCuYjb9Aet9iJqdow664Sz5oFdB8/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;
}
IMAGE
Code 3:
.post blockquote {
margin : 0 20px; padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZn68F3bxriA5unCIkn_d6s24JTLpJaeMd9RBvgeUiK9FvYwVvUi3-J79RQtBXHsXueg41B6cfra5_3CNmBtM7Ez-WvwarCbZjF8oZZhPxBvjiL-BjYSy8vwZ_lC9O8Wcil65wUOQxlt0/s1600/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;
}
IMAGE
Code 4:
.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlRU12Sm_hd5_RZ-DCMspIHcq7nQhX4-OXW2N9eB4rycmbDhoHQLyeTGVzV-6VwindcokzGbA8qfkrVMGF25Qr59FaPvGa2Y5KIsjQBLsJyhwbGfgyoZUc-5ZqtsYmR0Wi_KbqWQCL9M/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;
}
IMAGE
Code 5:
.post blockquote {
margin : 0 20px; padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY75DXXHfdwSQMS5mB_r1Bnd0R4HtS9_UghTV_X8Z0n-GZZZPWqEHSy7LlttcXutTBdUAdntpgSxc_9LNokKHEgAJr6vTmpK4-Egs2Mm141TZ8s9e1ribvaeOOkOuZKS5aAQaZydBFmi0/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000; border: 1px solid #DDD;
}
.post blockquote p {
margin: 0; padding-top:10px;
}
IMAGE
Code 6:
.post blockquote {
margin : 0 20px; padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFw9ZEzmsLdWBwWlJN9kY4E6qc0ueAs_qFCrQsMfX6iu1nnQ1sA-FFOTBtrYZPSgmaoGrnNlasuh7cF6sMRq8Tnsg7rsrPCaPN8B79q_KB6SrW4yMD6bcdjPvpQg607ATPgRgxG1rsPI/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0; padding-top:10px;
}
IMAGE
Code 7:
.post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3um79cc5I4nNjo4oTdmiU-I6HQkK8Z1ykT8hR6QmVDHT2R3yeKHka4IpeYSRTefuyyBpDS7p1dZD6hoOfVqK3TYrsJfuPAuL7ydi8zM66ezFo4jcJyRF2Jd7jjIvQKlcl9R_md4_SI_XL/s1600/quote.png") 5% no-repeat #FFF8DD;
}
IMAGE
Code 8:
.post blockquote {
padding-left:30px;
padding-right:5px;
background:url(http://www.darkfalltournament.com/images/blockquote.png) no-repeat 0 .0em;
color:#444;
font-style:italic;
text-align:left;
margin:1em 20px;
}
IMAGE
Code 9:
.post blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
IMAGE
Code 10:
blockquote{width: 90%;background:#FFF; padding:5px 15px; margin:5px; color:#555; border:1px solid #C1C1AE; line-height:150%; font-size:12px;border: 1px solid #eee;
-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
IMAGE
Cara menambahkan blockquote pada template adalah sebagai berikut :
Login pada dashboard blogger anda.
- Pilih Rancangan > Edit HTML, centang Expand widget template.
- Carilah kode ]]></b:skin> pada template anda.
- Copy kode css blockquote diatas dan paste tepat diatas kode ]]></b:skin>.
- Terakhir save template anda.









Tidak ada komentar on "Cara Membuat Blockquote Paling Keren"