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/AVvXsEj7xhyphenhyphenM_y-wLCuLKU5xQW0j5CWXUh8MfYXj0cmGqG63lREcbHRKSgjOzNPshhJLAiqDLaqgDCF_IJMsZKDsNdFHMTPdVemfX33Juf06cpBsnlNjB1p2nZ3IRySWsrv09GCmah40YXmk1Eg3/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/AVvXsEgtaZnFImZ8Dbx8H0NICTilre1i4qSXACCIukaA3ss8EIluIY4hWxaP8qPnH1pc5suKMx0qF2v1rWYP-nIbyA38OQu1tm5dDlZfcMOGHKA_wk4qyaGENbU5uwY5fcnk7Hw-M2cGgMgVIOVs/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/AVvXsEiw3oW_DPrYLJ7t41kb2SOCZ4SD7SElWKllYTuBydgbK0Cy4c3gilcBkaWZi0Ca7S2TgsCPjBHfFDPB1vF1nRPqxXxArwpXczk01QIhvZ5pfZwLA4ZlCvH10weqz9FwYw7T9fbNWzKNUCyd/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/AVvXsEgITvL1vDVyjKgcjL9EYkuUmlGv78DtLQkZCxfEv2BZvSl_sVw_uYqkhPNH7TtsgwdwctbNeFnUsLawE_PmtM4ObYmqs5EWhHAA3svcjjZGIDGhrI_XkCojfmHBRjddGxDUmrIRbNBo_pG7/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/AVvXsEiw3oW_DPrYLJ7t41kb2SOCZ4SD7SElWKllYTuBydgbK0Cy4c3gilcBkaWZi0Ca7S2TgsCPjBHfFDPB1vF1nRPqxXxArwpXczk01QIhvZ5pfZwLA4ZlCvH10weqz9FwYw7T9fbNWzKNUCyd/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/AVvXsEgITvL1vDVyjKgcjL9EYkuUmlGv78DtLQkZCxfEv2BZvSl_sVw_uYqkhPNH7TtsgwdwctbNeFnUsLawE_PmtM4ObYmqs5EWhHAA3svcjjZGIDGhrI_XkCojfmHBRjddGxDUmrIRbNBo_pG7/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/AVvXsEgN6_h6QIxr2Q-VmaM3IXE1z6J09MmmDYRHHLiEXt31I7c5_H0oriBxdgcG8bcSAn6BEGXITmJzM3Vd-h7SQNngmSapWeJ6eDqGfSjH61Y-0LMp9PqlOyq4LV8ON72wJ86XzFFL7UGEgSxq/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/AVvXsEg6DuTWpD6jbHX-eKMJ3kx4GJHRLZouez3w6D_3Imey1KJwmQBG_LaUr7awEaeHop3DmZUainIuicJKydHOg-2OGOUgXVVuJIhyre3RFG6mnDw_ToZTMHE06Al1v25dlrBruGvb7gppg72-/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/AVvXsEhmI_fx9T6QOuQMrcZZ9N_RsxbHmULCW86i87YoWFswbkUL99HTZ3y4HM4oW9zSXiswTC7JdtE8884nzfxzu4ecMXHo7T13ETwyFmaKqVUg9wFhmuOrvIj5pmBXeNCPZpVXbL8MCJQZGhMv/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/AVvXsEjjwPdBTiV1gRVFWcLa6e8oT0Yt8t_9PqfVsoMVi4qNqWFksqrtjrJZb5uVyiSQfYIS0wM8h9MsdEug7Xrov0tOM2ux3pA4deuFt7lXwjzvs7dTx-TBtfnbm7FimpqNhYGHEash5Kyn9YWr/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/AVvXsEitLak3piWBAiXMFGKhh-lapsVlZUbJMqLNfrGF5jZ6jbtM7K__kL7UHKBQP1J6Av9Chb0iaLIHPNjWTWF1kSHSL02SUx7U2_KZES41hWwOU8ldElQVwWu4a3fCjYTQMsrmhBhIuJ3HCBHB/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/AVvXsEhrBKMnBiigJHy7FW85cT8VwLsRdm5LCj0IWFyAfBx8ldkyA4Kj0IB_L0Ze-pCHbpSdPhyD0w8QN-xJx2Eh_S8sYyoo6XZPDKsSFMmrjgQuWGM4QrCAbIit9-A4CmwkmBzlFAtAtf3sFVko/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/AVvXsEhHLvg1oSt-wjO1yaUXTKxSRfYtlsMqn5jNXVjkcnsVTE0Zgz7lWSVj7sVSuDS6HfKbo0MjjwFo5GRy_o12a1O-cwasUwu-79UlrCu2PtxltvhwFJmsrneD_sDltwbsak2uLFpGqpKnay4t/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/AVvXsEgGsE5pkc1UZhqaDp_EBcZt_jht-wTZo6DuR7fZ-3gBj9AdaHjQgGQ9grY2dama3W8V_tteivTjCs-3FRix4eNJtdnmqAcc450V0nUi76ZdsCjj31zOiL2WYjPY-xSKLm6JKW0H4y3oMLSB/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/AVvXsEh5cjoM0cZJ7QOTH7vsWlATtYRacH2yJVCYTBFHSq8Kkl0kVKDlCl2Y2mWfc4iPfeJ7-EHTfeQlmV5mfMMn3xFJ2TQuPdTs0n4_efa-3_jPg50Ee8jSbqcGr_Q_ZCIrSwcAaUoCz0g4opVh/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/AVvXsEgRouQCYNYKWGXgDDvFXMhkVRlpuSQJ1kzL7ME9UcfCakPIH31lVFdmsPy0t5Wl5DXb8LeqarHQeWZYBoLe3wU_G2A6HfhKwjPsHSDBFN6XGLpf-P-F7FXzkIBlaBIFsV7G8N2aNeFyqbCu/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/AVvXsEgdMIT4SPGBd3VViuHdDhgAXnZtLa8vwXSvvJXIxuCkLETdWPiqjIRGUolo0_DzT1q6801mVoGHgtTfPoQM4PZMwW5un7hE9CIGOFGHHWoCZo0xt1yGNLlR4NrBdx_J_I5JEkFYdDKqbYva/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/AVvXsEjedFUwzgah3eepv8voQQAUPLvStkXn-KNrfNKNnLZQ1MuyB27PIG4Uwbev9h11l-ps3d2VT83CpHEuqi0isByWJnhRh0k15-OTtAdoWeFZiQmEL1IdEjBOZL3LGqJ91ZOLn75tyyqg7N9Y/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/AVvXsEj7xhyphenhyphenM_y-wLCuLKU5xQW0j5CWXUh8MfYXj0cmGqG63lREcbHRKSgjOzNPshhJLAiqDLaqgDCF_IJMsZKDsNdFHMTPdVemfX33Juf06cpBsnlNjB1p2nZ3IRySWsrv09GCmah40YXmk1Eg3/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/AVvXsEj7xhyphenhyphenM_y-wLCuLKU5xQW0j5CWXUh8MfYXj0cmGqG63lREcbHRKSgjOzNPshhJLAiqDLaqgDCF_IJMsZKDsNdFHMTPdVemfX33Juf06cpBsnlNjB1p2nZ3IRySWsrv09GCmah40YXmk1Eg3/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
0 Response to "12 BLOCKQUOTE DESIGN YANG CUTE UNTUK BLOGGER ATAU BLOGSPOT"
Post a Comment