Cara Membuat Blockquote Keren Di Blog

Cara Membuat Blockquote Keren Di Blog | Hai sob...... Pada kesempatan kali ini kita akan memahas tutorial kali ini berbeda pada sebelumnya. kita akan memasang Cara Membuat Blockquote Keren Di Blog. pastinya kalian tahukan blockquote itu apa ? blockquote atau quote berguna untuk memasukkan kode kode html, atau untuk kata kata kutipan dan masih banyak yg lain untuk kegunaan yg lain.

Biasanya kalau blockquote biasanyakan nggak ada istimewanya dan terlalu standar. untuk itu saya akan beberapa blockquote yang mantap ni hehehe.pastinya gampang untuk diterapin seperti di bawah ini :

Blockquote Dengan Border dan Gambar Burung Hantu

Kode Blockquote adalah :

blockquote { 

margin : 0 20px; 

padding: 60px 30px 40px 20px; 

background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhygqK5d7IySNoMCumzfgAVi2PwKfSm1uuSjUL-74taYJdpwofI5HGGvqHavQ3q8CJag8h6m40nYiDvUYXnOB2uXMkqLr8JOw-eANBa7RTpvvP7jQLFs3g9-JQrEhrhq2x0s8cmogJpobk/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 kanan kiri atas dan border di bawah dengan warna ungu :

Kode Blockquote adalah :

.post blockquote { 
margin : 0 20px; 
padding: 70px 20px 20px 40px; 
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJaUxMbHNnYNAB5irJaYmJN72SC-3_WR5D6NmJPBs7x-LI6ZtHCWo-ojPVHVWjkMv3ONhlRwxa2scNTN0GaXJCA_Bb3LHFLYXARPOm_Rs3yN2XbxNtpj0hRGUVwKC7b5xBQBQVyohBvjk/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 adalah :

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzre6hSghSB8INF04XmAkZ0ZTYj2MQmWb8neNBRz4ls4Bn8j8h38HRps77bPsW-7ligdglua6XpVNkW66MHwCG7YCUd3YH06IAHoYinvUCww2WzNOZ89MgYa-cM8WXA2rdCG7TuMVUEk/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 si samping kiri

Kode Blockquote adalah :

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

Blockquote yang lainnya :

Kode Blockquote adalah :

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEZ8wIA54kDd5J0TItHohXupC3dk8nec6yWbf1WXvHMOTr9QXksBa84G4kufyqfy3EVb506FWtK5GhYjcIKEwQZjUAt-oLDtSkX2IybOEzx5ENHyy1ipH-cUOukP99B8yFzj5S7pqbyY/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 kode terbaik 

Kode Blockquote adalah :

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

 Blockquote dengan lima jari tangan :

Kode Blockquote adalah :

.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/AVvXsEg75Uvno_93isVeUoPDa-UG9z8Jk3n0KwKtwEFYYMGHg26YG1a8Y84IOj-W4iWH4T3YMK642i2o5AEJz26KzvSz2mC95Qloz0IRl55_OfKPU3m4wk0Lhr75ykYHlFxRCC8hTUQg5XWdLVY/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/AVvXsEiOjZ34swuyBMhaLB1WVrIPS1pwYf8TafuvvKAPRAyhWdNHdfkedlqc99sW-_jGR-yyZ32CgdFxBIB_6Xp4gwyB409bgpvJUmUoCE8DQXDRrGkZfvuQmNuJlkPk5wVt3nPQvia0QmwcmS8/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 adalah :

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

Kode Blockquote adalah :

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

Blockquote dengan kotak di keliling dengan border

Kode Blockquote adalah :

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

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVWuaw1u7e2us05xwsvvGNlivuQnn908VKZoK0M0twtf9iu50VSVCU477QC87220eC3bPVfjJ_tPec88rh8h0Oc_2e3mbzF1j5EIbxkYBmbAqJmzc_IOXsuK_-_zKDDLyDSRb8Qkbwttk/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/AVvXsEi0ZceplghGO1gNRI8NFgNwK42PyLv9LvdBLBDSDeXXyLxTq0Q2dnZ13UeqoO7TbfpsEytQzl4NQZQT4l4oWGuFOrdlL5q3o2-SGuRFMDm6m49QqAeMm8rDe2SWPwTMh07brmenLXBRM1o/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}

--------------------------------------------------------------------------------------------

Cara Memasang kode blockquote di dalam blog :

• Masuk ke blog kalian
• Klik menu ''Template''
• Pilih ''Edit HTML''
• Cari kode ]]></bskin> , Gunakan tombol (CTRL+F ) untuk mempermudah pencarian
• Setelah ketemu taruhlah salah kode di atas yg sudah di pilih dan taruhlah di atas kode ]]></bskin>
• Simpan Template

-----------------------------------------------------------------------------------------

Cara Menerapkan di dalam artikel :

• Klik ''Entri Baru''
• blok kode atau kutipan yang ingin di blockquote dan klik quote yang bergambar seperti kutip 

Dan Demikianlah Artiel tentang Cara Membuat Blockquote Keren Di Blog semoga bermanfaat. bagi kalian semua. kasih pendapat tentang blockquote cantik di atas, dengan berkomentar di kolom di bawah ini !

Keep Blogging