Memperindah tulisan yang kita buat akan menjadi indah bila diberi Kutipan atau Blockquote.Tentunya orang yang melihatpun menjadi segan untuk membacanya,sehingga orang pun menjadi tertarik setiapa apa yang kita tulis.
Disini saya ingin memberikan sedikit Tutorial Cara Membuat Blockquote Indah Dan Cantik.Saya akan memberikan 14 Contoh dengan Blockquote Terindah.
Mungkin sebenarnya masih banyak lagi tapi gak apalah saya kasih 14 saja.Lihat caranya dibawah ini
- Login Ke Blogger
- Elemen Laman => Edit HTML
- Download Template Lengkap (Untuk berjaga - jaga)
- Cari Kode . post blockquote hapus kode tersebut. Pada sebagian template kode terlihat seperti ini,
.post-body blockquote { line-height:1.3em; }
Atau
.post blockquote{ ..............}
Ingat setiap kode berbeda beda jadi carilah kode yang mirip mirip gituan!!!
- Kemudian cari kode ]]</b:skin>.Paste Kode Blockquote tepat di atas ]]></ b: skin>, paste kode salah satu Blockquote favorit Anda. Saya memberikan contoh kode seperti kode kode dibawah ini.
1.
Kode Blockquote
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8hQQzcdJtwcj0ZWk3IW6uixOGIOqyG6Shmtt34L5H9G_kifPfjipg1nsUvC8KqWRSjjAr6d6pLPxC3hppkukT-eIWLBcYhEX-KV02ErfrKQRa7ZlW3dtam2JD0LA5eM5giYSnksGxMcI/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;
}
2.
Kode Blockquote
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaMBUGleG5eY5CNaiAOJmtIlfnNs9WqhPhnSZessalqND9UAIPiA1nDe7oBMIC7op1ujgs7EClrrsUrOkuThHAYCobtT7bEgbym0mxDlKQVj9c3ZzH2Gc9eViJ3qc5MNZcJghm0hWvp4/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;
}
3.
Kode Blockquote
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdhhDxXLGGgE-vqbLVoFktZgkGlw2EUUW7R_7lmhr8WqET7ERLJKaW84z-V7ZZBUvGo4BEIlj5yzm8521BJ1ILnjxp_8-yeuSFBphz-c8Yu4Z6f1Zx-3FoeyW8S3kRONv94NIGKQz6rTM/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.
Kode Blockquote
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipbbfoSulGA0WcqM10-bZod5QmACACP85fjMapir7YgkYPRJDKZTHtGUlGsl0iSKmD6_qgN06BvpNgm65qlixD8d6ty4VXMUo2843cSqHxIqkYW5ot7jLiaxTTDSnnJkknxBQh-Zm_Kiw/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;
}
5.
Kode Blockquote
blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOBKOaMm_1BxGFM3MJmddmtG5YvHSdmxXQ2UK0Sdvgqd-y8Ya2SYjQ7J90EF2FeZep2CRarAWp083pICV2jov2X-5I_HDtt7Dda4wFJyaO7-k_8F0ehYH7b8GfQ-ynbV2d0rflwQQvY8/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;
}
6.
Kode Blockquote
.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnUUQzTYe9YFW1ZI_9OY12VshZYgpkKXptXW6pxOoYLCoQ1RdWTE4caJRMMy3uV-DHYMb9WLeH-QEEZallaHhHk23kk9r_CyTyZiLEypWf_CguKIcDGjtq7RNFIJ7gLZDvozedg0StNrA/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;
}
7.
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi898XxmxyutCiQ8tVx90VvsjVwpyFdA4LBUQvbfLJkmbPkvtdjon9CFF5l6Zfk9OcowqAUU2EtkC799WRct2KCzBQ9oI-LOTNG7yMYp69REJnDPuYmhxQjf5mIquVmGRkrtq1fsTmMyhI/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/AVvXsEg66DAX2tHHf8GuU8fg9p-CvktBU06JiLrMoIB_iBUrRChKwdpqogzUFZ-Dz61cB7w57C5UNpeH-l64SqGbTd1P6eg23rQ2UhszdQOujv7j2sDbFnm-3Zhvk7qRWR9tf--pKiosYY08g3w/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
8.
Kode Blockquote
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSOxQaqfigjaSuAYj-VjsrK2_A8g2ClN0WMP7TrTQRIpEW5PcckQ4mF1aJ3OZW2aPr1YzsbCmBZLm4cznpn-aU_PkqKGpiyte2BtxjQlSJcsutsXrrotzU08oxwS5ohnD6xzGg1lg5Rng/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/AVvXsEgxFdzVpRvFnn-1zSZ8IOhcjIf6LndikLiLo0mgJRHb6uVNGYnsb0uBil3c-t9keTx8rZY2aT8nYKDcF96EfYu1YmWihp0hmtUPG0TDF1OXcygHX-yvfUu7YqvifTx-btGU0W34PgDGFRA/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
9.
Kode 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/AVvXsEg_Cdu5j5QVIl62BE3Bgk_f3R2qG71hKbrXeKPTDaNIzyMVHzj7fmplvTqpTLpHUK5Cw9FWcjRFkgQTYCzCSQ2fbBIti5YvmSgcJME6MCmClK2T_ptxlX6SHu8sDUxcz3mx8tW80lSdoKo/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/AVvXsEhIrtKvyRqccitLOlSygO8BjJv80H50QAt_EdLofNquEwzdWfDIIDbTFUmeFKN7N3tVsCYVLg3IoTpn12YknrsEyizppAbo7d9bk08XaN_I0qRrTBN7ItVlSRcrihNpXxnQ1rR4XfioiHE/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
10
Kode 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/AVvXsEg2fmf8J7q9l-SfKUqAofTFKd9NOdS3qQM1UhiqDEsKQcNxGOpsCVvdyrC7XWigRK5BA7_-YCuj4OP6zByBqXY-nAmDqFv5Smwd__qPhJ2hoK5zI-a6zsa8QGTuTc7wX5xt7AV0_ed3zYY/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/AVvXsEjLhp_b38zUIXFmCla2NFHyBGzCjif7vtR4E4JELUxIC4DEcBaB7qdR2sjC4ajpyHoymD4T2KhH5fdx3xZX7u3xHZsB0abREC3icCwCeoVHxP_kaS5neejF5k85yh5y06fDpao3Xdonqfo/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
11.
Kode Blockquote
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuDsY-rAz2tt-qc6E73Ia3Csk2B1u_2jyyfpOa9muw-g-TUbzzw_epi9NwNato2mP3Sz2oXFZ5Cn-p044PKqZvwWtdPWg2tbCwYpbIG_q92ULUpvEPFt-MbTAigaJ8SEzRSMlz2HUn0Ag/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;
}
12.
Kode Blockquote
.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmh1L6IkXyQN3he6Ei_iIf4E4khF6dmZd1ElbsrYEAttpGYUUSooQqihQxuIJ7DiamJ3peWKv_D_I-Wayknw8GYSzn8QUs8mviZFxYQYCxqVP4E8DU0XxbKQqAbyx_5r94BvAiEWZLZ8/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/AVvXsEhIv5wmdVCskc_rdiRh4MSfn3EM9bjed0aal_f7AvGpjybE2yoHX_n6tMfbWfretVpdWYSN4fW7x1N48TvQ_iR1xoRNEpDtRTNdgBs8BoThn2h0Q4Eg7h0Lt-JA88snYstEMCKZ7Cc-iw4/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
13.
Kode Blockquote
.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4FH9SSLyf-D3bvGOWtG5fteohcVudh8WGle5_MP93XSVXgdxsWpF9P7kBxa7Qharw-gk95rVrsK66wJJbMB-BKM21l5eWtcjkLA9B_254SZEY0iR5Sxmnh51UVKaLiKalBaOTpyllwps/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;
}
14.
Kode Blockquote
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOX04LrBtSe8e9P_H_gj8jo5eJQDX-xkjD5r9G8SMbwcbmxz0WIYgcQEZk1pcZkKs1JZEz_CiNBsdPPCn-mGC5gq_Hf4U-pD_0O8Lex-EoevPIBc34Fh2_AnTZzz3r5kVHAdz-mDgOTvc/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/AVvXsEjbtqEPS3ok-hUNyRPtz9z6BsjvN5y48PHUrEP9NEAsHecPRDfnWXh7P2rd6-alKIdItjnhhmkUFfXr0YCcs8tNZ_E0WlT3Jd0mNS9ueKrs_nB7iVP_SpMN9WBwZ3tPctsM52JtriFXjYU/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
Semoga Tutorial ini bemanfaat untuk kalian semua
Ditunggu Komentarnya
5.png)
