8 style Blockquote blogger keren

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 gaptek32.

Langkah pertama masuk pada blogger yang ingin sobat pasang blockquote, pada layar dashboard pilih Edit HTML lanjutkan 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/AVvXsEhm-djFwJXdMUhQN20R19aBhlel-oIRYOrFDjbE_ejUGD8qbbMPch0Wt7OwyI-r-I4eQu3rodGW_tEBN09YGQ_A5xNmTPgioJ2GmABD30RU7yhcQgMIS5laZrYyeT9HGQlZt4_YTHvs8Yk/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/AVvXsEhooUEUFK-Gnknrhz1XHSHP-0PERkMf1ye-bJ1Gi433g-H3P43eOcrKaEZKwsR-tKIWfq-zf1P0M-7wCgdtNQk9sUvqvoN0L9TodAXDG-A2xDppqbYekWRkN0N41dN2nxjFYYfb8J350Eg/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/AVvXsEjo8hrLXnVgyyNj0S_76FQQKMYvqbItiz4qkEDNH7YC6fh1NZnS3nB0L9IU79X45Of7hLk9gXkrn7wKI0yBWlYtu4tPG19IhEl4Zkme2kdEpmQTD_QyMS8k5X1oLdtwCz8HKUkFeocJ8B96/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 gaptek32 ini dapat membantu sobat yang sedang memperindah postingan blognya dengan blockquote.

Terkait dengan ini

5 komentar:

  1. wah.. langsung saya coba gan.. artikelnya keren :)

    BalasHapus
    Balasan
    1. ngga apa-apa sob, makasih, artikel punya juragan juga keren-keren :)

      Hapus
  2. Keren tapi bingung piliha yg mana yg akan digunakan :)

    thanks ya sob

    BalasHapus
  3. blockquote nya keren2 semua.....di coba dulu ahhhh
    salam kenal sob!

    http://www.netterku.com

    BalasHapus

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML