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/AVvXsEiXkgzrTLta0Le_Mliu78NkoSuodnETyG1UBNo7tQrmkGSR8lwdVQg1F77TYpcFu28-FSYl-bq2gYkJ0GPE1Vu3OYuRhQawb5DHzRXguMdweTfoCEzmrVHxMT7CBl5cBIJz6MIWfyJjyfUC/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/AVvXsEgGgH29kAOxfBvXbU6p2csssInpTJdN0EMdrTpwOJ4UuZyA8FHa4mH_pnycLQJaI-cAVy3coCa_pGCETjv8PEcJ5dg2hGrta55Bjl1bJCxFNLa5zgxA5A0MjPlRkTeouleX3M1Ao7VPYOXL/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/AVvXsEgqtkp_Kx-tPjOo8q88jaenvzBz8MGKR9eUuIoGtOj3zq8xaISn0-skaPSeWGTGnBoHoawo_Lc2RGB8qT6Y7ex-KEbSx1HbtiYca-B9yHJFRlzaDr-ym8gQ2tf5AVeu5aN23zYsYClGNcOv/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/AVvXsEgtNkablF3sBKqPLckWYbirgdvQP2w6IJVUvfVOm8GQkM7cVhNnVSl6ujjSMO-SUKqG469zgLGgE-kTRhsXqf69OvUAvCIa9fxQmXyVySbn6_5FtZ8B_po7Ifk6Qd9l7uKH79uUmqgZu58F/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/AVvXsEgqtkp_Kx-tPjOo8q88jaenvzBz8MGKR9eUuIoGtOj3zq8xaISn0-skaPSeWGTGnBoHoawo_Lc2RGB8qT6Y7ex-KEbSx1HbtiYca-B9yHJFRlzaDr-ym8gQ2tf5AVeu5aN23zYsYClGNcOv/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/AVvXsEgtNkablF3sBKqPLckWYbirgdvQP2w6IJVUvfVOm8GQkM7cVhNnVSl6ujjSMO-SUKqG469zgLGgE-kTRhsXqf69OvUAvCIa9fxQmXyVySbn6_5FtZ8B_po7Ifk6Qd9l7uKH79uUmqgZu58F/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/AVvXsEj4ocPKtOHoUMarc6l3vsLQUX4xzZmMBjMDisCVFgPschCPIuHU7H2c1WJw3T0eUgZgXpdEz2RdUmbOPBwUpOXrzlUMzt4hFd27lsTT5hNyQSHNWa8BL2FTGcKyjon5CBmGSEvGkgqoADl9/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/AVvXsEjKVT0n5u9ZxH8Ih_SOVUig4qXb22M4FUsgo4BIsVX63sR0Om9Z0xwgeAJO7lHQSc3fmwvYerz2QgoNIj7emRJVk45tAc8t4oKgrzSv-IMFn0DLjE8zH3aMmKjkEN4X9BlIM7aZnFTw9Idq/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/AVvXsEjtUU-GRvKIwj7Z8sEID36cmerV9EsqQTOkTe-zUCjiSazNzLvUe1sbeIyMexxUMIn9b5fQdk4vMLRorI3NPRXULG4U8I8A5SOB7IErZhQ45JskiZ1zPSH0mLcCvCoCERlPD7e_bD3-fV35/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/AVvXsEj2E0Lp9BfM9fE-wPElA_fdoBagiQuOnmqgfPS8R1zkjxByp7ZKDPkBe0QsTMBjWo_DfsPsTEy3j1TpvUPMDNrWCpjtCgdwmW-PnfFa2s1TUJRg0qinPZADD_JXkF5H3_Sow88v_GKqZpM_/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/AVvXsEjy1s0XSF85niA8cZQT1CjTpj2Hdp_z-Gj0AFm4PR81bJTQi8HvrJUN-AjyEWcoPxqmG0_Tekv1xfnsB-nmVBi4N0w3Pr7drOw8SSwJKPbqKd83Dr-oz52KL2lqZEplGHrxpn_YdVpstze8/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/AVvXsEgbRNjFmZrx-PnnEgEOCNjajUuL24ca90zhwpIlA23sp9sxGNGygCZZUd_VwfuVkvlCXF_-W9XCq7cqiGHq12QS4pU_UxIjygXc1EkpdcffVzA9c1rb6wRo0MQioeQ2ynHcJQXFkyTh4MvM/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/AVvXsEj7690VkA9nrc-S4PVPW2YtwHmz4-_E1CytSah6uSQ0sbDEvjgSzlvwoYWOeG2i3wJT8i2t1GZAls0wZ7Sg0Dau0FUeriHMkC1MGd6XnFz12NCE3L3Ei84ov7f-kNheQN2i_qxzpA-npLfI/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/AVvXsEi2Q6dqDmKV-3yHM6ljTABMRY8SlDzrW_ix-i0f1XJngVWKUNgrG0zHLcb6e72u89XvhTUhzVud26iOMPov_LXeLdvqiSfP6KHDRxrgltgl0B0bpn3XZ3KpsFd00fzIlNzcgeIijzPaNIAj/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/AVvXsEglgK3SMNOcZ-ePLE-24DcmSubPG6koG22LzPcDqQNKdbaN_OrhbWUbv6pwievSHF6QbnGdGCa8RCfb_Dz5aPbihTT9Qla9niAW7KM66Y34t2r5V0JGeDTMho6ANWwmM4z3JH4QWnchfNL1/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/AVvXsEiILLG7BXiHEtbWyyY3f09AZzIkXQ01wHgRgxbCGqiwSWifCSs-jd651UOG5yVLyCRhhYRq6kgiVL9T5Crowp85j0bc84XB4tRBdAkoGYJhZ-Jx7bym84ojQM4CFUwWIBTGbDHWdMYe01oH/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/AVvXsEh3xPRbYu_3DMuQOJai9VZpJdKv3jtQCCix9j645eXfwvmxF1Fo4-81mGGl-jyUoLuARWZxgbqtK2jBz0MtAQHBGmplqUXtEck1UPhrauqsIYP5iVMJonpJgqmYHCnC06lxF7Ht9ZNoVJ-_/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/AVvXsEg6ymSa9CHRxOQmPGOYXjTuBT67vqsIazKKqp8NkDxVZNYCBO4gEKDpkun_RjSy1QGMsbTUxScdcworz7j6R46Pb4tiU1P5-g4urJTyGYZS8ubatX4Woz51zbFAwp1H30AmRPBYl4XE2Ovw/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/AVvXsEiXkgzrTLta0Le_Mliu78NkoSuodnETyG1UBNo7tQrmkGSR8lwdVQg1F77TYpcFu28-FSYl-bq2gYkJ0GPE1Vu3OYuRhQawb5DHzRXguMdweTfoCEzmrVHxMT7CBl5cBIJz6MIWfyJjyfUC/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/AVvXsEiXkgzrTLta0Le_Mliu78NkoSuodnETyG1UBNo7tQrmkGSR8lwdVQg1F77TYpcFu28-FSYl-bq2gYkJ0GPE1Vu3OYuRhQawb5DHzRXguMdweTfoCEzmrVHxMT7CBl5cBIJz6MIWfyJjyfUC/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