Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger

Advertisemen

Cara Membuat Blockquote Untuk Bingkai HTML Di Blogger | Ada banyak cara untuk kita membuat Frame di blog yang di khususkan setiap menulis script HTML / JS. Apalagi untuk blog yang bertema tutorial blog atau web design, beberapa script yang bisa di pakai ada seperti di bawah ini :

Taruh diatas ]]></b:skin>

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
line-height:1.6;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUlB7p3W6L5ObXTy9eiJELDNhtCaorv0kNBA02V5ib0iLkmPuyMBXH_iZ3mf2DeaMl4f2pp39A52WVBzvlYuq4an_rUDgcScBoVhKUPntBwFiLO-i7z8j_L-jfzWm6lo8_R9TBgU-vPJm/') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}

Script diatas harus kita panggil, dan jadinya seperti ini :

<div class="codeview">
<!-- Letakkan kode anda disini -->
</div>

Cara pertama diatas bukanlah blockquote. Lalu bagaimana jika dengan blockquote ?

1. Ke Edit HTML, cari kode .post blockquote ATAU .post blockquote{

Kurang lebih bentuknya seperti ini :

.post blockquote {
    padding-left: 10px;
    border-left: 5px solid #666;
        color: #666;
font-style:italic;
}
.post blockquote p {
  margin:.75em 0;
}

2. Hapus kode yang ada di  .post blockquote / .post blockquote{

3. Letakkan kode blockquote di atas ]]></b:skin

4. Simpan.

Blockquote yang bisa di pakai menjadi frame HTML, seperti di bawah ini :
1. Scanned Code Blue

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaybdhZEPcTJddQpYFkZeOnWCL7NK8C9LHu77yWR2Gc7z6T-tGe9-gAgN1q8RzYYlWcywr17JddNyLtGArPcYC8iStA-L0Lsmv93C8CFcM-1VTGnG5kFNU8mQCVtFc2MvoHKfiGPO_LaI/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;
}

 2. Scanned Code Red

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

3. Copyrighted Coding Blue

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DFROJ5Q9jZY77_UxbebcHSR5JTndxOSuFJ43Y8NlbRxIQSKSKvPIL_Cr0WU43y1wz5mfOYnISh1lHp8YXWSWpVEAbQS9UqBwbfB7deIS4nsEYgTW_ONSqzabLqe-L1yxKAipD1fhuwI/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;
}

4. Copyrighted Coding Red

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZ9-5mbd-HJfPvhfM8KzmcXJPYy4ftu2sZMYDQsXZc1lZtl5SXmAe2r1pPQ0EoAIWTaEpxGSwuoldX9T6uMY1gdRBI5QmMe_3nyoolYB_9aMsShrkyNmm1WkOIiE6yzbbDNMws_6L_24/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;
}

5. Copyrighted Coding Start

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8ap3ycEvh3aVpsyHAD9usXWbq-dC4S1w4lC38bzyR-lxw5jn-U8EYru_K8qkACSSobsEiu85OmsDKKZd_vE8GIZ8ML4dkD2a7RDPyLVTolTXqp9WCXwaVWWRdolALSoPxewL9rP6yTY/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/AVvXsEjf4aysRIwcpnKi2847FmXPq9qsBu82fkaA4f2Dh0lFJ-rYdRpypoZI-wGuztkuZJyBda5Zo27wFi5g2bkwheGZaJ6HStgndn2wmxEsNpcl6xINaZiAGR2nJWOGDocONlPkL6E8rEAg1FQ/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

6. Copyrighted Coding Orange

 .post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TB_pMARPSGDE_ygZJVxykdYsLmcF_y0sVbu_9tPI7fg79tUzxC23_thodlbEv6ybFGKAY-GvqOYnzyC6zK1Q2TP9zgh-54QD-lS2kfwT2hFJMER8KxSIuSjFXsuDD3wSz1fDbPaPQfA/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;
}

Bisa dipilih mana yang akan anda pasang sebagai bingkai HTML. :D

Advertisemen

 Tutorial