Cara membuat berbagai macam variasi blockquote di blog

Sebagaimana kita ketahui bahwasanya Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak berbeda dari tulisan yang lainnya. Oke, kali ini saya akan share dan posting ke anda tentang berbagai macam variasi blockquote di blog.

Di bawah ini ada beberapa macam  variasi blockquote berikut kode-kodenya:

Blockquote Dengan Border  dan Gambar burung hantu:













Kode blockquote:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9i1lvlDptFQt5QyIoRi5rtz2Fed0jh4w-NMEOFW5WptkRk3hpwaXeSRo65Zb5KEXIXuFc7StDxrkg7qa0VEhn2_DiZFSQCGDjwcAEQlKHAuszUdJaPtXxJXkdFssL3FxI5nQOYCATG50/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;
} 

Blockquote dengan label di pojok kiri atas dan border di bawah dengan warna ungu:














 Kode blockquote:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvAnb8ezAgp1jkJLtSLI6yzhgQL-3XQ85xdQcwr3Tn_MLH0bgC8VkOqHZhlxRmma_TOqwrHwkNM8Z96LzcfvvAFOacvPwS6sTFZwC-el0iYmMNVBcmiyiOuI4Ai2448ujlY4Q65Mc00Y/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;
}

Jigsaw (seperti gergaji ukir) Blockquote Dengan tulisan copyrighted coding Pada Pojok Kanan bawah:










  
Kode blockquote:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyz_sn4Ee6XqNHKSVm8nmu5KjVAXq3tbSVADRBBJ9e93H9GMKlBec8da1A-o_sF33RYlV5qhNmOWfKClcKR_ifVpyC0e_Es1xgWWhmq_cFppxnd_i-SE4982H1n9JZ0RjQsXfMFLaMIr0/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;
}

Blockquote dengan border klasik border di samping kiri :













  
Kode blockquote:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQ-GWypvYG8uVlzKG8wo8_-oOsB8Va9WRywjyYNHu1_Zxlij0QnviIpAwKDI9dv67kxAGlCMw7HLVb2a-N5SqnybvoYX6MZdgGrJoOPFH4_NeCdPw-ixaQ7COVIKhEfh7Mraop6PMxHw/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;
}

atau blockquote klasik lainnya:










kode blockquote:

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9NE3rvTEo5WZvuhpZ3c7mixEB1SoMzep9ytFhyphenhyphenjq5Tn6x6Aw4MDMqkCRb-jnt-EGCLp3io4myLXCIWWhI-tuQAZ9OM-RmWM0X7XpZagO09Z77a21wOd-Qm5CGWfYhHFXQcWmZHhoK2M/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;
} 

Blockquote dengan dengan Label warna di pojok kanan bawah:














 kode blockquote:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7cBUsaZ_11QyTN6EVIxKfwcBM3ryA7cS9PpjNHlv5YPQ2N73LtNGQGOXY7SWlu_wOizsSYCH-cnbXODR_jlmNhmExBQjtNdzo01RRlOHLOm0HB_v9hMAgbEanNmFI0WfM9-5TADKS2c/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;
} 

Blockquotes dengan tanda koma terbalik:











 kode blockquote: 

.post blockquote {
  font: 18px normal Tahoma, sans-serif;
  padding-top: 10px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrq9yCfGLWW0e0-yMVUdbZuFrxNWL-JvOPAyYNCaKpSPVXRqtWE1DVVg68G26SwGJNS6M1UKTsvjySkPWI_0hxnPMAr1GZDBHMtdftAESHFBjYH_0Dp9e7nJfasZHnwRfNRqieIjoJTo/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/AVvXsEhkzIDVUrRU8H6Iql7LpjxjFUzoiZLzeYyhs6MJqLtN37obL9eprj9yTmAxm4ZPr8Y0y1_xoD_1vM5ZrHJrfbcOGiwIv-uGW1IEukEcDvqlqWogn7ucmnuma9Y1jtRCYDPAtRQh42uiImY/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
} 

Atau tanda koma yang berwarna orange: 










kode blockquote: 

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

Atau variasi  dengan tanda lima jari tangan:



  







kode blockquote:

.post blockquote {
  font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
  padding-top: 25px;
  margin: 5px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOULrhUr5Y5uQQSiOke1EY2PZVLdye-NCd1LuN2lQ8SZM9RQBT3NgHhwjbrBtk6_VYbYqX-cjGPk6Pz1UMATIrIQmPVG3VxeoRQsITezlbXlK6bfBRxpRLXIUsahw6BjRnCwTQ4F4FJD8/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/AVvXsEhZ267Kko5IDu4vciojKsPCUAnATwoAjunz782ytb0xiq1XYoyFD53PT-PT5tJCvJonwhUHBe1rPGMshg1ta4Pfv46AzZWdoCg2RDSfauHRwfygJPgVeGlTTkoO2YABeeTD2B7xgWkF-7w/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}  

Blockquote dengan gambar copyrighted coding diatas: 












  

kode blockquote: 

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm35C3SqgG6PaYJtMCc2mVx3xBzNTxavUxprBNS5qJvwrFHKlHP9SHmGl1r9ItpSDH5AoaBQ2EHaPUSVfaBJnOdj7ko9JRcATC9CRPvRhTvsagniJ309Hbb24qjX4k4m9Vs1oBt9s4TFI/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
.post blockquote p {
margin: 0;
padding-top:10px;
} 

Blockquote dengan gambar Tirai  di atas dan bawah:

















kode blockquote:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXGPOZstNyS8RlWGkPrkv-HFkhpFD7I_GGASDM1N5Biefabl9J6qYoONUlH9Jc5VzM3kmtdOUXZR3dj5NM0Pdnha5kUKG0csPvY5iDIUNv9O_lE80HlkIpJ99Y5-SsXAZE4Pvp6neFaw/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/AVvXsEhdLbH1RroJhv0a6lIO0ESyyCyDIYve5TRAMYYPEbMGzEMNbmjC4vZoKapYu711ugmSxEorRzwG1JvGVDf7j3IWgunXUxKUDAUIsW0QlTWcuK2ylu06yvPvMnsVct9xRAf_1MyehS8xfVE/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
} 

  
Gaya blockquote kotak dikelilingi oleh borders:












kode blockquote: 

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFP3PYyqNKr0_8ivhcxihEhLqMi_gYzXYz60NqWA9D6hEqAgTejxEE3liR2MbpYUjV3iNJQgdPHQc-WVvQC5D7bpoiGyoIV4ALdZfZMNKsPj66N90dt03tJGYKZ8mtOUOdGepKFGRpL8/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;
}

The Monkey Man Blockquote :















kode blockquote:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMw0HOvK-fAtQQ-nUjpRpMYgt3GSMZmWqqpLwTpMFCbclrQ9VDDWkpSNfrHRCC07nk5YYDAXaFIERIIe50fJI5CmOXIr66hWwb9J9xf5oRFct0Jbd7ykgJzGIat8zJNUjp-DEzsUrRXQ/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBuNwSddfs3aRpxkCxjk3OI6ySWgkMrLMvaT_uxBaEiixw2ZWMh5xWJcmEs50h9ff66xNkJ0DgSVOf8_c5cahHkLFv6KYI0BliDPKaKE9rhY9aDiRh0JKvGH_20t8LPKeafvAKWK_ZOY/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
} 

Penerapan dan penyesuiannya di blog: 

Sekarang Untuk menambahkan Salah satu blockquotes keren dan unik untuk blog Anda, lakukan hal berikut:

• Pertama masuk ke akun blogger kita.
• Klik fitur rancangan.
• Klik edit HTML.
• Cari kode blockquote misalnya .post-body blockquote { line-height:1.3em; }atau .post blockquote{...........}dalam kode HTML template blog kita tersebut.
• Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
• Klik simpan template.

 Semoga bermanfa'at...