8 style Blockquote blogger keren 8 style Blockquote blogger keren - Blog Manado - Tutorial Web Design

8 style Blockquote blogger keren

8 style Blockquote blogger keren
Share

Pada dasarnya blockquote yang kita gunakan dalam postingan blogspot tidak ada yang aneh, nah mau yang aneh dan lebih unik yuk kita telusuri bagaimana cara untuk memperindah blockquote blog  ALA blogsmanado.

Langkah pertama masuk pada blogger yang ingin sobat pasang blockquote, pada layar dashboard pilih Edit HTMLlanjutkan kemudian centang kotak pada bagian pojok atas kiri.

  • Style 1
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
  • Style 2
blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; } 
  • Style 3
blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
  • Style 4 
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwvp5774Lb6XukkA6ftI8h_RKqeORox3FO2hcPlmNm1I58qAMOhu1VxE6FDvSXJteHfigvM3xtJSbf1zD-LOJ1pTAM_Ol3KR-pKqB6vI-3Ov-UeH2tAITLcVlbGvZll8xz16oMsVdvF8/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}
  • Style 5
blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRGm7AphHkDDDiv7UndUhkPOHfcFL8PevgU1Gt9V3Qf0nG3dOGkA8FIfMObgkNioq5oPZKOJelTMbnHaWwf7nK74QQ9yHb2y042uHVfOzt-NPCKGeQ8I47hTqXnTwi_VczCiuf0BbZVfE/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; }
  • Style 6
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/AVvXsEg400JWNZgFjuHM5udwzdOVtv6Qt2dHfPI7tfwOA7OwyqFEZ-3R3ZOMh1R86tdO5YdwktSwoAjRiDcETX1dtawe9veQBGt3TlbanxULY3GgJrpbcBy-OR7KbBnM-RDoUjEzgYCBBMgK7djt/s1600/quote.png") 5% no-repeat #FFF8DD; }
  • Style 7
blockquote{ background-color: transparent; border-top: 3px double#DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }
  • Style 8
blockquote {font-family: verdana, arial, sans-serif;font-size:small;color:#FFF;line-height:140%;background-color: #333366;border: 4px dotted Olive;padding: 5px;margin-left: 15px;margin-right: 15px;width: auto}
Setelah selesai dengan pilihan blockquote, masukkan salah-satu kode yang di inginkan di atas tepat di atas  ]]></b:skin>

Semoga artikel oleh blogsmanado ini dapat membantu sobat yang sedang memperindah postingan blognya denganblockquote.

0 Response

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel