MEMBUAT TYPE BLOCKQUOTE DI BLOG MENGGUNAKAN CSS

Blockquote digunakan untuk menampilkan teks yang berbeda tertentu dari lain untuk menangkap mata pembaca. Hal ini digunakan untuk menunjukkan pesan khusus atau ide penulis. Pada teknik blog mereka

menggunakan blockquote untuk menunjukkan spesial Trik dan Tips. Dalam tutorial ini saya akan menunjukkan Anda untuk menyesuaikan blockquote di blogger menggunakan beberapa Html & CSS sederhana​​. Blockquote ini dapat disesuaikan sesuai tata letak blog Anda. Jadi mari kita mulai.
1 Pergi ke Blogger> Tata Letak> Edit Html
2 Cari .post blockquote dan menghapusnya bersama dengan kejadian lainnya.
3 Untuk beberapa blogger template kode yang mungkin terlihat seperti di bawah ini.
blockquote post-body {// Beberapa Kode}
OR
.post blockquote {// Beberapa Kode}
4.Jika Anda tidak dapat menemukan kode diatas maka jangan khawatir dan menindaklanjuti dengan langkah-langkah di bawah ini.
5. Sekarang mencari ]]> </ b: skin> 
6 Paste kode di bawah ini tepat di atas]]> </ b: skin>

/*mybloggersworld.com*/
blockquote {
background: #B9DFF1;
margin: 0 10px;
padding: 20px;
color:#333;
border-radius:15px;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}
blockquote p {
margin: 0;
}


7. Simpan Template dan selesai.


Bagaimana menggunakannya :

1 Pertama menulis pesan atau teks yang ingin ditampilkan dalam blockquote. 
2 Sekarang pilih teks (menggunakan mouse)  
3.Kemudian Klik pada blockquote sebagai ditunjukkan di bawah ini.

Menyesuaikan Blockquote Kode Untuk Sesuaikan Template Blog Anda 

Kode di atas mungkin tidak cocok atau terlihat baik pada blog Anda. Dalam rangka untuk membuat kode ini sesuai dengan template blog Anda mengubah kode berikut. 
Ubah # B9DFF1 untuk mengubah latar belakang blockquote tersebut. 
Ubah # 333 untuk mengubah teks blockquote 

Menambah atau mengurangi 15px untuk mengubah kurva blockquote

BLOCKQUOTE STYLE TYPE 2

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKPcrVjYT7NzXMkXMavSqbPnP2YFS2hHXICC86pbwqvMzM2yu-HxFEPM8im0JYPBpMUXUIMZaZR6ScvUjMlR44BBig9Uf4nvtF5GaqvK-_cXHAWgDVgtU-qIeoGhs92494oAOOPIB68c/s1600/paper1.png) repeat-y scroll 0 0 transparent;
/**mybloggersworld.com**/
border-radius: 5px;
margin: 10px;
padding: 20px 10px 15px 50;
line-height: 1.6em;
font-family:'Fondamento', cursive, sans-serif;
font-size:15px;
}

BLOCKQUOTE STYLE TYPE 3

blockquote {
  font: normal Tahoma, sans-serif;
  line-height:1.6em;
  font-size:18px;
  padding:10px;
  padding-top: 24px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4uGUjoZF3Bkjm4fbSQkNccMPX_fLpMylQjitX2_Ji4pBZuBqDIefTcqvyDtu-YAuDOv2sIzLSbXRFP3DGXdK-KUT1YeZ8uEMRBTxmMr8r8YKLU9lbMPQgbwjuOPM0WAfKoBpkOnsV1eQ/s1600/examplequote.gif);
 /**mybloggersworld.com**/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
  }

BLOCKQUOTE STYLE TYPE 4

blockquote {
background: #81c136;
margin: 0 12px;
padding: 18px;
border-radius:20px;
font: bold 1em  'Freckle Face', cursive;
/**mybloggersworld.com**/
color: #384924;
line-height: 1.6em;
box-shadow: 5px 5px 12px #e3e3e3;
}

BLOCKQUOTE STYLE TYPE 5


blockquote {
background: white;
margin: 0 10px;
padding: 20px;
color:#999;
font-family:cursive, sans-serif;
/**mybloggersworld.com**/
line-height: 1.6em;
border-left:2px dashed #ce6100;
border-right:2px dashed #ce6100;
}

JANGAN LUPA UNTUK MENYIMPAN TEMPLATE ANDA TERLEBIH DAHULU