Contoh Blockquote Indah dan Cantik | Aneka Ragam Bentuk Blockquote Keren | Percantik Penampilan Postingan dengan Blockquote CSS. Blockquote atau Kutipan, 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.
Tutorial Cara Membuat Blockquote Indah Dan Cantik, Contoh dengan Blockquote Terindah.
bila anda penasaran silahkan baca : Cara Pasang Blockquote Cool
Mungkin sebenarnya masih banyak lagi tapi ini udah lumayan. 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/AVvXsEjCcEiPlkK92zaAFZwCaPPN6oaCHmvOMQTx06U2nVuMAG4mPMe5busalulUS_y0wMol6L-kUemAlMOv38Z-mOFl53Sk13xzwr6LgSL_PxpxX2i5L1wHj8ZLJYGEVA80JfYnUFcsKhElP68/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: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZFkDqUXsNSjlwJyTXJ6K-X8Fz_ut1pTRr1N0h4XS90wydZrxiH5KBvlngk9rb1dfS7QdrpDcnlboGuwLZyROULITG8lKMh92hViC4lyotT095wr-SyLx4rDAk2uS63j2cPhUipblsWUQ/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;
}
-------------------------------------------------
3.
Kode Blockquote
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioLGFrsIqmAwdEcWV_Tm6ZMNTaSTF2GjZlga8OMa_fHE15l5IiODxB0FlaMGwHFib-vi37b5HQe-E4gOpmkm4QMFx0MAubZB-MTIC6HwEyM97p-dDPAp_9fzpshyphenhyphenKUsnUU1PnsUD2s5tE/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;
}
---------------------------------------------
4.
Kode Blockquote
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04lBBdmvjq9UDsb1hVLONEXQKoTwleRW1feHQZ-qDLXyz9TYEhdc5gHzYTGtnTOyPMLWCCAOq8q5awe4SpfOuBqrOBBNKLv0uqUsQJa62FpZR7oxje7wOwx51kh_7C99ltfiaaRL5X9A/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/AVvXsEi3cWLDJut9FxL2wg7ifDJDAfSwqMUdmqPTwIzzhOyJDLdmMZJYsk0MWXzD8eWO3agy6k2jW-CQzvKKAdk6-or2Ieac9H795synV6TleGYkRk7bZL7EblYyPsFRhuHi09ZttjUzhs2Q_PI/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
---------------------------------------------------------
5.
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/AVvXsEiZfoj5q9OBVAH85dlywAvDfgxT-UCdzzUy2DwS2k3MIhESc3jBB-rXLyNVmsV6moUuaBJr1SU1Z2AsR6IvOyFdDv4OObzJCI7eA0HLLlox0AJHAyGFkNyPk2xxdnkXijAPRsHKZD6f_ho/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/AVvXsEhCmZuqGb6OLiMpyShjZjeG3_Vk9UsR2XktoGON6Y58cf_S-W5siuSWg499uShZupp3q4-gbCzL25hqKcUw73kvNgwjlixxX-t3VOB7czciK7QnKnWlw6SEP4rieiEvahEF1um16-u_iqY/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
------------------------------------------------------
6.
Kode Blockquote
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir46-Vk8a_PRaL_fL-rzcw7-DKLrVpS_imfSzd6plGjWbyABdriiUdFys8myt8IvBLGwFvWSoC8YurCEsYjDRaIO5Ab8IqFtEm09Y07KQzTgmnI2eB5eVvga7KvsPK8lBzmos0W4mjDhg/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/AVvXsEiE_YgypmUL5QGRjgQ6cZEysEeLfQjU0E_5G-GXlDGars4nnFUUzNm-v6V-ohZXZf5XliPnS5_x8C0iT1-Goe2Zd12HLMHx8LiNQksSA_ZihicbE7MQI2dad1ejMuvAnB_obD0uUW0Sywc/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
-------------------------------------------------
Artikel Fafan Suka, postingan ini tentang Contoh Blockquote Indah dan Cantik
Backlink here..
{ 0 komentar... Views All / Send Comment! }
Posting Komentar