9 macam style Blockquote

MACAM-MACAM BLOCKQUOTE

Sebelum saya membuat Artikel ini Mungkin sobat sudah tertidur dan Bermimpi yang indah Dialam sana,Waktu sekarang sudah menunjukkan jam 02.00 tapi mata ini blom bisa tertutup gara gara Cuman mau nyelesaiin Postingan Blockquote yang kagak guna ini… heheheheheheeh.

Sedikit saya Jelaskan kembali tentang Blockuote, Blockquote merupakan tag yang yang di gunakan Di dalam HTML untuk menulis kutipan Teks,dengan menggunakan perintah atau tag Blockquote maka Browser akan menampilkan Teks yang menjorok kedalam.Dibawah ini saya sudah menyediakan 9 model Blockquote dengan berbagai macam2 gaya/style. Bagi sobat yang tertarik Di sedot aja… hehehehehe

Langkah2 penerapan Blockquote:

1. Masuk ke blogger anda
2. Masuk ke menu template kemudian
3. Edit HTML dan lanjutkan dengan mencentang expand widget template
4. Kemudian Cari kode .post blockquote {…………} Dan ganti dengan salah satu kode di bawah ini.
5. jika sobat tidak menemukan .post blockquote pada Tempalate anda,Copy salah satu kode di bawah ini tepat di atas ]]></b:skin>

STYLE 01

.post blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

STYLE 02

.post blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

STYLE 03

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

STYLE 04

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglvfmPIRM0jF7hovQQkpatFdIiqaXlmItbvPtb-yEL3MEkf8loyr0Al5PZNDfDCuhbGjhCOUpH1GjdR049eLctwEJW9hyphenhyphensdxmMKnivpIiBo7W21vpaSqUDf_-hFxhiFLLJT3Wb1X7Bmb0/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 05

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

STYLE 06

.post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUiV020_Yh_h7hWNZf4JcOES-IWpge48rEK4QdBjRYzxruMkWYSlxsvweRKLIBw6I1HyEAm4XBr_h5Q4fgff2FaoQ1Mbuetl65cvcQLYRuJIBmr10IPXTNG49R-LaVGW0PFgjaRohvQM/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVea1osjcH6_A-BlgV8BdUedDf5zI4q4ignXzB3WgST3-9ohDPOoZ8_McQ6sc-KvyTSwh9tTw-oUkUJZ0BCFgC9-SDdqOpdD13aPVep3cVJBmKctiZjClJCjKvgJb-NTE6hGeXfpkL8tY/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

STYLE 07

.post blockquote { background:#c5c5c5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4g6Hu6UJAVguB28wznTM49IGCkunugrfwWrI5JtA6rPV9uQnGR7dmmAk2WxEUnTrQ7zED_9-JUIONHA9xP6VJPXMF9ueHm8L0h19iJw1s-ZKsHPAx7w8-dSk8Hl9RWsz_pu7tB0Lflz2/s320/blockquote.png)no-repeat top left; padding:10px 20px 10px 45px; font-style:italic; border:1px solid #000000;}

STYLE 08

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/AVvXsEic-V5SVmaIZ5HTBiIcVpAbhlzKjeeZMz76NxlRN-_dlUfREW3d81gBne1y8vFWmqQw4MNe5A83_oldeCNC9oyjL09QPM0U-e884ooq6Ih-c2rW6G20d8TvmVIsAle-WdCBv5uE2wFtX-pr/s1600/quote.png") 5% no-repeat #FFF8DD; }

STYLE 09

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}

• Jika anda sudah Memilih salah satunya simpan Template anda.

Untuk langkah penerapannya pada postingan,Lakukan pemanggilan dengan cara menggunakan tag <blockquote> ..........isi konten anda di sini.......  </blockquote> seperti contoh di bawah ini :

<blockquote>Blockquote merupakan tag yang yang di gunakan Di dalam HTML untuk menulis kutipan Teks,dengan menggunakan perintah atau tag Blockquote maka Browser akan menampilkan Teks yang menjorok kedalam.Dibawah ini saya sudah menyediakan 9 model Blockquote dengan berbagai macam2 gaya/style. Bagi sobat yang tertarik Di sedot aja… hehehehehe
</blocquote>

Sekian.. semoga Bermanfaat Buat kawan-kawan.