15.36.00
Rincian menambahkan blockquote untuk blog Anda dan situs yang diberikan dalam pelaksanaan dan bagian kustomisasi.
Blockquote With a Fancy Border and Owl Image
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVujJaWWJ0FOhaVf6-s8J6MjFyStIu2WDcVpfpdSI9eBWP579qjsG_6BlnKpkJOu25_jhACkPwzqXzueHT0zLEmg93sceR9iGToclQpvYbrci6jgwcy2xnX7j1TYMlFGO2Q1SbN4s5co/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;
}
Blockquote With a Purple Corner Label and Border At Bottom
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYFFwj1OadrmOxYpH2y6UL6NX2DWs6D80y-A9gsE8cqdoPUb3E4ys0_5han3Ra7_azoENPZoU0c8Fl7cVEYI1PcJUumCyvZKNsdBerA-0qMl0zSuzxrQ1p0d7goCIobXdJlKotb-V__U/s400/angular-purple.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;
}
Jigsaw Blockquote With An Image At Right Corner
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Wrn4eKBehUjjxjYulexSxU_0S086gSSvVmUpXOa97l9Cuu9xCTsXRr4TYzMR9zcwRkeQg4Kg4sABzujim9iYBs6eyckjoRnTR-CHzjjnilKyjZ6rRxPIyB7_c7vo0xdPt7ow9p1k0J8/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquotes With Classic Left Borders
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCELJb_nNCUcYshV81J6uPJAaZajeMTMwIsNJN8RUbiJ7fwr05r28JNeu3O4TxE43O_80V_B6ZQ0qRxMClBEsUL7TgvdDnMf3RX15T2CqEvGz0kM_051xRHfiNBa1LFFnlbCfCyhtslk/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;
}
Blockquote Stylization
.blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx8_BxmfMpYv0_aYQ_jO3CDQQt6SkQzlg3eGmunNVfxrRkG353580O7DyyIXdL6zIfuuZhGupg-TonGHuw7V3xqqPlbsyYurmmMAfsbfCXgSkUlSIrSn3F2zBiWKmYaGKygOb94L_gLac/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;
}
Blockquote With A Brown Corner Label
.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfj1LaamDpfEJ7RDuzNqB9lHzxhis2_8HJeaMJ_20C4aSrYJn72mow18u1zT-36S_35T_L7Xf_RbViv5UGZdIyGtAS1aZLsxk56BYgiwRMbnmp8r0LO6uCRxGEiZIJOEgs17WqpzRT8o/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;
}
Blockquotes With Inverted Commas
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavqaUIMZvveJ1fzxSDL279mQzW8fCq1LClYFEEtJskTnxlmTKuK6RGdiVP3q1PODrQlOHo3IQyPd4I2JJgwdgqAqSD7AAwrDIY5PKBhfyiPz9-tvVjFGi4butAlFPaheGNfQsHkhtLAc/s400/comma-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kbLck5Gi8M1ZUZWDHbjnRco2Rwg1OaS6a5XlUsfEZ8ImRcN_OAtfRkaTs_X22z5vbZw49RuojSCLmoXnmLEsuBhp5QP_EsAPpK3flMnTvN2y-hjZfih-Clksd7bIM6fiyuiuSPscK6I/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqVKqj-8zfpMk3BpWdFHVOtEgADj4PT9rOPdF0wq19rSrl0SOP2jcCVi_bdik0a1UiCMS8wmtvgGD2omcaCbDyjIkkzObNpSmEAzdbE0dio7pNDZK16rfHY1ecpenoAEsuSPsVzXvdlI/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbzKBfBfaH7Mdds-VBljFhEVV5sF4QAh8mtztHaYYxiUqv1f9BMbQHgd-YTDAI5L6XcpfJlfcaE7Meqaype6un4ll-jjSumgFDeXzxYhRTkoAkquNoDVFO0X3EsjHP-R88PQ1hz0-y5w/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote
.post blockquote {
font:bold italic .9em "comic sans ms", Tahoma, sans-serif;
padding-top: 25px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8OpjLEu4v0sJpS2Fl3CsTflRxGimIjZsFtuIurWezn2ffltkIOBAx_GTjT28OU6tfzEpsKTF0F_PzLpZI1ym7e4kzfjGMSzeUfJXtGerPxNmuqd6wWzLzO4taTEsLut39Ls20CRA6pk/s400/left.gif) no-repeat top left;
text-indent: 65px;
color:#6299E4;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Nvs66LZIjfXFh4UHjE9k-6j1SQNgEoearIU__EEh88VGxRFffJqCuSo5vRjrrn77FtKSC8REAqWWAo49rcgPXsBs0FIpOef3hBqQ9ogsE2r0zqF4f8sxR74RoPOhW6gXFKP6Ssv1eR4/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote
.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/AVvXsEgyI4LRvcx37C8HDAm3X6RZqhAUOzphN94sm_H-ENTVpAbHp5zR5X8R6vWm6LpZ10djlWzjCim63J8RTsJVRuai18gF9PXfJOdPvS8hJJilFDCdlOsTedBfXuX396L2bk6zrwpO5O6wxJQ/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/AVvXsEi4LqLbGTwYJF2eP1rEYRwDJLmRB3YMx67N-Mduko_Fm5jkIopSxcVi6fuJrbSzwPg57FVonwfikpcqo4j8RAraqlZ-zcWSPk8ilIFjnMZqiTM5cPcoiSCGKYr2S9qBhLHnjvV_CiR-hIM/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote With Well Aligned Image At Top
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-D5hbWmrltYZX00Que4ktz4ELv_GzdMz6VdpbPs7XBYvcc9oxyDGJQO8cOW9DTZiwCeFCSc_4OmDPUruZwzCDbExjOdZTQVkvxl2yUy0mkb3cMg4aA4Qe57Kd01AgkPNavgCU7KjQQqs/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote With Canopy Style Image At Top and Bottom
.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYct-xm7IKcdzw_FPv-hh4IJZ-WTi72DBGgGoNO9_a1BDshfOPzxnBTG7e3u5NkzmDWeaZ_r5lnWOw4N_Kt8TfJA7bi5phkvzpA8wrM92mrDa1_joSnG-Zf1sld5f4Ul1aehAUPkrZIyE/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}
.post blockquote div{
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuaZkyUY6i5emQV-Ws5gVjOoyCGf9iYoBvp06yoFmYynVv400m1vb9FboOlvKhbOhFJLyFTVyxzNxePpiqYMG6VUg_pMt_FfZ9wbXbhMZlLMsgZnr9KdAmididC0xXOH4_w6LfwN7AvZ8/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Box Style Blockquote Surrounded By Borders
.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SlNnmHSEYApZrL7TEjl75PcauLuqzKmd1b55ZwKqfPjUwdnq2wdn4ihBH_RLlv79e6WhC2ofZNRZYBdOhtcvqQDdKzBXpQxs35Wihp0ekG-HjjZ5NndJ84PuMvsbP62L3uKoAZGjWIM/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
The Monkey Man Blockquote!!!
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVkEfG20kfLwTj0zvnQhWvD5i5OAQ1p8Gd4zUUd7Gc_DKqPCX68ZMujRqsbJyOeJGlghXfKSHGihOMGsI1ycvCq2hqeQ9yVizy_3RJy6NppyRf1UB3xEkA5J-FOem_9AyAdwMakB3J38/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}
.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMLgiT4JygerbE71Fx_TrGxYCca8e74kUjdC4E3gN6EPLvBKyECrk3Yp9K5IN8IGRT7seISQNHdoE-D4JwEsaY_hmjpQ-2VXp2vOIO2O6TZkzQdHB9OSvvXlXiOhafpDqyRRhyphenhyphenf4cm4I/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
Langkahnya sebagai berikut :
1. Buka Blogger > Layout > Edit HTML
2. Backup template anda.
3. Cari kode ]]></b:skin> dan masukkan tepat di atas ]]></b:skin>
Contohnya dibawah ini. Bisa diganti dengan CSS diatas
Masukkan diposting anda kode dibawah ini
.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
<blockquote><div>Tulisan Kamu</div></blockquote>
[source]
Tidak ada komentar
Posting Komentar