Sebagian dari kita pasti sudah tau apa itu blockquote. Yups, seperti gambar di bawah, gambar tersebut adalah blockquote yang comel-comel. Blockquote dimaksukan untuk memperjelas tulisan atau mempertegas tulisan pada artikel kita..selamat mencuba.. Hasilnya anda boleh lihat di sini
Langka-langkahnya sebagai berikut:
1. Login Blogger seperti biasa.
2. Klik Buka Daftar Entri (disamping tombol Lihat Blog) -> Template -> Edit HTML -> Lanjutkan
3. Selanjutnya cari (tekan Ctrl + F) ]]></b:skin>
4. Klo udah ketemu, tinggal pilih salah satu kode dibawah ini, letakkan di atas code " ]]></b:skin>"
nih contoh script sama gambarnya:
Blockquote Design 1
Kode Untuk Blockquote Design 1
.post blockquote {margin : 0 20px;padding: 20px 60px 80px 20px;background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrUiGgPVXJrcWbTfMW7hTW7gql_wTjBtOJLtJbSNslUgi4KQDxCvZv7oOhM9f5xUH6vUTcksJk3cx_1QAeRxZJ3QrN76ziP-n66RRa1TTZxrM8tsM4WDO1LaWhaKptrzUJNAHQRoP9_9/s1600/rb+style+01.png) no-repeat bottom right;font: 18px normal Tahoma, sans-serif;color : #000;border: 1px solid #DDD;}.post blockquote p {margin: 0;padding-top:10px;}
Blockquote Design 2
Kode Untuk Blockquote Design 2
.post blockquote {margin : 0 20px;padding: 70px 20px 20px 40px;background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNJLyJSoqtNh5tI89VWaOe0OudQDVQZ0_zJdDrGSKKTxCGHidTEj86fiFlko8r4OkF6ANbNIOyK4aSttphKb92casi3Yj6VFhb7nSYgE7Y8GMXAoERHW3oXXEq7GIHeHQ77Xt_3_tqmQYP/s1600/rb+style+02.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;}
Blockquote Design 3
Kode Untuk Blockquote Design 3
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Xe2uhlnERwiCh2WLVuEVL5urlzro_S8_fvtWcRgwFQjITDizsuHL5jRt5icYVoE6wiFXa09PcMxSte836uxoTXNHW8DHYxTNv3mcQz_sFuFRJIyT-6MsBHTrtvCcNzWU87Da7t77wqAz/s1600/rb+style+04.png) no-repeat top; font: bold 1em "comic sans ms", Helvetica, verdana; color : #666; }
.post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjBFCAaEDRwxHwBRF4KDocW5iD6CuZSD3ZO_AIC20CP6UTQL2MLwLQ7sJn4s37cAAOmDXlyqhrPDYNptyB8ITtmeXsc9ojOvRCS8Kujd1jiqY2HFl67WE2RYi88KC64sELRK0PmDMMPyB/s1600/rb+style+04..png) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding: 20px; }
Blockquote Design 4
Kode Untuk Blockquote Design 4
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Xe2uhlnERwiCh2WLVuEVL5urlzro_S8_fvtWcRgwFQjITDizsuHL5jRt5icYVoE6wiFXa09PcMxSte836uxoTXNHW8DHYxTNv3mcQz_sFuFRJIyT-6MsBHTrtvCcNzWU87Da7t77wqAz/s1600/rb+style+04.png) no-repeat top; font: bold 1em "comic sans ms", Helvetica, verdana; color : #666; }
.post blockquote div{ background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjBFCAaEDRwxHwBRF4KDocW5iD6CuZSD3ZO_AIC20CP6UTQL2MLwLQ7sJn4s37cAAOmDXlyqhrPDYNptyB8ITtmeXsc9ojOvRCS8Kujd1jiqY2HFl67WE2RYi88KC64sELRK0PmDMMPyB/s1600/rb+style+04..png) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding: 20px; }
Blockquote Design 5
Kode Untuk Blockquote Design 5
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFYcWa73sBjX7gx_OxV7Al4kwd7PTpef-KmFCrTypxPKxjwlroG7iMoC-XMjhxtHrZZCUme-v1J5j0yLLWbAG4g6sh2wcqbrO9AtILazWOBmMVX07C8yBbVZvLkqGjd-RzuS5e9q2vf5z/s320/rb+style+05.png) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #000; }
.post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRz2XcI3rTSYN0ja4PY0c91PUWRMMdQKjiF5mOo8vpmd-smUX68Fb8LS1ZTQDNOyJOjYMudHaIFhT7SxY4xkg-NzynZzYaSo1IMUwn5IMMt0blmUBr_klMPzhfQz-uJecgTXSkTg2EvEU/s320/rb+style+05...png) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding-top:10px; }
Blockquote Design 6
Kode Untuk Blockquote Design 6
.post blockquote { font:bold italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdSb5F6gw9KjgKdB0LxkX2Dx9A3UN3wKA8Jdr8hyyo1MW8-LiSUvSU9CAnAZVa2IUVjhfZEtgTAIu3OPnZa-tzQPL8O5aDjG56cJVqSeAUwZSeXqzbRdXS0EEkRbRcVFeoRxT7oguwlSu/s1600/rb+style+06.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzbnqaL_riemMmjqpQt73RdIPOAdWwy1soIFRWvxw1HiT3MH66-lps7yXxwgm99H_TZxUU8sg625_IGgVIt4q-cjoEWmUmEPfrGto9rJSwM1d6xqfVV5emxHB9SXS3XCehViLDfvQmLSn/s1600/rb+style+06..gif) no-repeat bottom right; padding-bottom:30px; }
.post blockquote p { margin: 0; padding-top:10px; }
Blockquote Design 7
Kode Untuk Blockquote Design 7
.post blockquote {font: bold italic 1em "comic sans ms", Tahoma, sans-serif;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/AVvXsEiGeEjis9MdIB11yxXbRXPAzGo6RZnFvlzfqEcO2TQyZQV6SY2DF-bT9ZuG0Rc5r5ny97EnzJITXeu6ZPAsBmCNW1WCWI-6x9iokQlAR06YkX3L08oHYYDvV4taPaPFv9bqx0gD_sxLjN-b/s1600/rb+style+07.png) 5% no-repeat #FFF8DD; }
Blockquote Design 8
Kode Untuk Blockquote Design 8
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3XqZKEj0fMUXtNfNbTmwiCE8y4r7VWQfIx-fIFqk7_z5MDr8H6xPqfhqKgF0UNNWMkJznWcao1MjfSU4CI-ES5zd6nn8RsKBE9yi9ujuBCoFcDzukhZcWRVxyNmku_DjMwLRw3zoxIkZJ/s320/rb+style+08.gif) ; background-position:;background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: bold 1.1em "comic sans ms", arial, Helvetica,verdana, Georgia; } .post blockquote p { margin: 0;padding-top: 10px; }
Blockquote Design 9
Kode Untuk Blockquote Design 9
.post blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-koqdNOUUlXx8flXz7HaRovZJn4gEwqqfiBaU5cT5FKJzhQ60ZyZDl7XHx6TsgcueKsKNS_YJK4I5-dSkkMxh00CZMwSkzB2Xmtq9ttfYvmlhrE9BcSEsCk2ojOn-47pv_dM7azrycNZ4/s1600/rb+style+09.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; -moz-border-radius: 15px; border-radius: 15px; color:#C7CACF;font: bold 1.1em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }
Blockquote Design 10
Kode Untuk Blockquote Design 10
.post blockquote { font: bold italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEbB1Fl2adT0QArVbM-ztBioRv9EhwJvAAy-uygeabnzvFhxVNu7T9h-WrIf5cbqqcEjybGWwge-H9aLOEvKtFUzzxVHp8GN2O_yyEigpuZIBp6IWtavfEEywyf-ujKqN-MjJsioyryDR/s1600/rb+style+10.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSIYKEBAvcSXOCZl8q6AdrrGNmm28g9fuGszAPsVQhzrvZTf7aU28Hf_x2hIYnWxtAI_e-S94nu95wBOv2Z_3at6QnjLKrz2ZF7CgWPvGnYnW1eswvjvY8_XU5b9BJRDcVjD95dmYE_Yt/s1600/rb+style+10..gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }
Blockquote Design 11
Kode Untuk Blockquote Design 11
.post blockquote { font: bold italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJe4xCW5qCz1BBqJPYUSv4JDu9mm2IoQMmVVFh7lGLLoylcQ8KwT7MNx54x9adMVhEB_OV-4RivSvZ-DomNr65Gt15HGNPTLMB1KPwiqGxAdlWoBagwvMhupFHFukNa0YDR453NAW_pmZ/s1600/rb+style+11.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuh_nOAHfxOC3nAcrHmboCSYEoW3ph5cFnhdKZAFp6Q1Zai4CcXyIJpWgBrajtA8P_8DMoMwykfmDc0iX2gNxrA6fSIS8Wbdg6woHApP7YpR2uBslYGlU38-rzuUAbbjCu0fYX0xkRAm9/s1600/rb+style+11..gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }
Blockquote Design 12
Kode Untuk Blockquote Design 12
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Za3A8goBkseQHlCXiKd4almg103XWcFxAibQ5kFPOsCmemPMF2cB3Qr0cpz93xEZCjnmXQYQhPxHoNRGr80mecufG0y3KhrWV1-gPwIJS3pZC7ffIMPzx7nAfze1mLHbva2d5UxVbmLe/s1600/rb+style+12.png) no-repeat right bottom; font: bold 1.0em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; }
.post blockquote p { margin: 0; padding-top:10px; }
Untuk penjelasan dasar dari kode-kode tersebut, saya akan mengambil contoh kode pada blockquote design no 1
.post blockquote {
margin : 0 20px;padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrUiGgPVXJrcWbTfMW7hTW7gql_wTjBtOJLtJbSNslUgi4KQDxCvZv7oOhM9f5xUH6vUTcksJk3cx_1QAeRxZJ3QrN76ziP-n66RRa1TTZxrM8tsM4WDO1LaWhaKptrzUJNAHQRoP9_9/s1600/rb+style+01.png) no-repeat bottom right;
font: 18px normal Tahoma, sans-serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
margin : 0 20px;padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvrUiGgPVXJrcWbTfMW7hTW7gql_wTjBtOJLtJbSNslUgi4KQDxCvZv7oOhM9f5xUH6vUTcksJk3cx_1QAeRxZJ3QrN76ziP-n66RRa1TTZxrM8tsM4WDO1LaWhaKptrzUJNAHQRoP9_9/s1600/rb+style+01.png) no-repeat bottom right;
font: 18px normal Tahoma, sans-serif;
color : #000;
border: 1px solid #DDD;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
*Pada tulisan yang berlabel kuning, itu merupakan jarak antara text dengan pinggir blockquote border. Urutannya 20px 60px 80px 20px : Atas Kanan Bawah Kiri
*Pada tulisan yang berlabel biru muda adalah warna background blockquote
*Pada tulisan yang berlabel merah adalah url dari gambar backroung blockquote, untuk melihat gambarnya ketikan alamat tersebut pada address bar.
*Pada tulisan yang berlabel hijau adalah besar tulisan, dan jenis font yang dipakai.
Sumber: komputersiamri
