Quantcast
Channel: Djangkaru Bumi
Viewing all articles
Browse latest Browse all 1371

Cara Mempercantik Blockquote

$
0
0
Cara Mempercantik Blockquote

Cara Mempercantik Blockquote. Sebenarnya blogspot sudah menyediakan model blockquote tapi masih berlatar belakang warna putih. Sehingga terasa kurang menarik dan kurang cantik. Fungsi dari blockquote pada umumnya adalah untuk memberikan penegasan atas kalimat yang ingin disampaikan. Dengan memberi warna background pada model blockquote pastinya akan memberikan nuansa yang berbeda. Cara penggunaanya, blok kalimat yang akan di qoute selanjutnya tekan tombol quote, lihat gambar dibawah ini.

Cara Mempercantik Blockquote

Yuk kita simak , Cara mempercantik blockquote pada template :
  1.  Login pada dashboard blogger Sahabat.
  2.  Pilih Template dan Klik Edit HTML .
  3. Template Carilah kode ]]></b:skin>
  4. Copy salah satu kode CSS blockquote dan paste tepat diatas kode ]]></b:skin> jika tidak berfungsi kodenya, cari kode yang berawalan ]]> .
  5. Kemudian Klik Save template.
Dibawah ini berbagai contoh kode CSS blockquote dan Hasil Gambarnya  :

Kode Blogckquote 01 :

Cara Mempercantik Blockquote
efek disentuh cursore
.post blockquote { color: #000000; border: 1px dashed #a8f184; background: #FEECEC; border-radius: 5px; border-right: 8px solid #fffe92; border-left: 8px solid #fffe92; padding: 5px; }
.post blockquote:hover { color: #b8b8b7; border: 1px dashed #ff99aa; background: #fffe86; border-radius: 15px; border-right: 15px groove #F9FFBA; border-right-width: 10px; border-right-style: groove; border-right-color: #fffe86; border-left: 15px groove #F9FFBA; border-left-width: 15px; border-left-style: groove; border-left-color: #ff3a84; -webkit-transition: 3s; background-image:url(http://1.bp.blogspot.com/-J5HsF0DWaWw/UiDHaHNRlfI/AAAAAAAAIJw/OuPPqOMqETs/s1600/Djangkaru+Bumi+Semut.gif) ; background-repeat:no-repeat; background-position:bottom right; }
.post blockquote p { margin: .75em 0; }
Kode Blogckquote 02 :

Cara Mempercantik Blockquote
.post blockquote {font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;
padding-top: 25px;margin: 5px;background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5kCZUGZI/AAAAAAAACP8/UEMNYwjmokk/s400/left.gif) no-repeat top left;
text-indent: 65px;color:#6299E4; }
.post blockquote div {display: block;background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb52LlPk-I/AAAAAAAACRE/_MC7HQLGIng/s400/right.gif) no-repeat bottom right;padding-bottom:30px;} .post blockquote p {margin: 0;padding-top:10px;}
Kode Blogckquote 03 :

Cara Mempercantik Blockquote
.post blockquote { background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/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; }
Kode Blogckquote 04 :

Cara Mempercantik Blockquote
.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }
Kode Blogckquote 05 :

Cara Mempercantik Blockquote
.post blockquote {font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left;text-indent: 65px;}
.post blockquote div { display: block; background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;}
.post blockquote p {margin: 0; padding-top:10px;}
Kode Blogckquote 05 : 
Cara Mempercantik Blockquote
 .post blockquote { font: italic 1em  "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uuhF2EI/AAAAAAAACO8/ExPvCZGUHo0/s400/comma2-left.gif) no-repeat top left; text-indent:65px;}
.post blockquote div {display: block;background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4u1vdKCI/AAAAAAAACPE/cwFfUwwT-ds/s400/comma2-right.gif) no-repeat bottom right;padding-bottom:10px;}
.post blockquote p {margin: 0; padding-top:10px; }

Kode Blogckquote 06 : 
 
Cara Mempercantik Blockquote
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding: 20px; }
Kode Blogckquote 07 : 

Cara Mempercantik Blockquote
.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/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; }
.post blockquote p { margin: 0; padding-top:10px; }
Kode Blogckquote 08 : 

.post blockquote {background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;border-color: #D7E8F0;border-style: solid;border-width: 1px 1px 1px 20px;color: #004276;font-family: Consolas, "Courier New", Courier, mono, serif;font-size: 13px;line-height: 16px;margin:10px 0 10px 10px;overflow: visible;padding: 28px 10px 10px;width:80%; }
.post blockquote:hover {background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0}
.post blockquote p {margin:.75em 5;background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;padding:20px;background-position:bottom right;}
Kode Blogckquote 09 :

Cara Mempercantik Blockquote
.post blockquote {font-style:italic; color:#333; margin: 1em 3em; padding: 1em;
background:#80FFFE url(http://3.bp.blogspot.com/-vk1MK_-n_Q4/UiCRI6R_G_I/AAAAAAAAIHw/1oLLb27-BqI/s1600/Djangkaru+Bumi+Biru.jpg) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em;}
.post blockquote p { margin: 0; padding-top: 10px;}
Kode Blogckquote 10 :

Cara Mempercantik Blockquote
.post blockquote{box-shadow: #ccc 4px 4px 4px;background-image: url(http://3.bp.blogspot.com/-vk1MK_-n_Q4/UiCRI6R_G_I/AAAAAAAAIHw/1oLLb27-BqI/s1600/Djangkaru+Bumi+Biru.jpg);background-position: 0% 0%;
background-repeat: no-repeat repeat;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;border-color: #ccc ;border-style: solid;border-top-left-radius: 6px;border-top-right-radius: 6px;border-width: 1px;color: black;font-family: Consolas, 'Courier New', Monaco, Courier, monospace;line-height: 18px;margin: 15px 20px;overflow: hidden;padding: 10px 20px 10px 45px;}
.post blockquote p:first-letter{margin:0.75em 0}
.post blockquote p:first-line{font-variant:small-caps; margin:0.75em 0}
Kode Blogckquote 11 : 

Cara Mempercantik Blockquote
.post blockquote {background:#f5f8fa url(http://3.bp.blogspot.com/-K-HAH14XeWY/UiCXO20jkWI/AAAAAAAAIIk/x8XEwzZ4wr4/s1600/blockquote+djangkarubumi.png) no-repeat scroll 0 0;border-color: #D7E8F0;border-style: solid;border-width: 1px 1px 1px 20px;color: #004276;font-family: Consolas, "Courier New", Courier, mono, serif;font-size: 13px;line-height: 16px;margin:10px 0 10px 10px;overflow: visible;padding: 28px 10px 10px;width:80%; }
.post blockquote:hover {background:#FFFFFF url(http://3.bp.blogspot.com/-K-HAH14XeWY/UiCXO20jkWI/AAAAAAAAIIk/x8XEwzZ4wr4/s1600/blockquote+djangkarubumi.png) no-repeat scroll 0 0}
Kode blockquote 12 :

.post blockquote { margin: 10px 10px 10px 20px; padding: 10px 15px 10px 15px; line-height: 1.6em; color: #000000; background: #e0ffff; border: 2px solid #4aa02c; border-left: 20px solid #4aa02c }

Rubahlah serta antur background, font text dan kode warnanya supaya bisa memiliki ciri khas beda. Sesuaikan dengan selera serta karakter blog Sahabat. Sekarang Blockquote Sahabat akan tampak lebih cantik. Cukup sekian semoga Cara Mempercantik Blockquote bisa bermanfaat. Terimakasih atas kunjungannya. Salam sukses !


♥♥DjB♥♥


Viewing all articles
Browse latest Browse all 1371

Trending Articles