Bagaimana Menggunakan Blockquote Pada Postingan Blog

Widgets

PopAds.net - The Best Popunder Adnetwork
Post blockquote
Pada tutorial kali ini saya ingin membahas mengenai penggunaan blockquote pada postingan blog. Blockquote sebagaimana sobat ketahui merupakan suatu kutipan yang menjadi pembeda antara satu teks dengan yang lainnya. Pada umumnya blockquote sering digunakan pada blog yang berisi tutorial yang sering menampilkan kode atau script pada postingannya. Fungsi blockquote hampir sama dengan fungsi text area yang saya posting sebelumnya. Meskipun sama, namun kustomisasi pada text area jauh lebih sedikit dibandingkan dengan blockquote dan blockquote sendiri lebih praktis digunakan dibandingkan menggunakan text area pada postingan kita.

Penambahan Blockquote Pada Postingan

Langkah Pertama :
1. Tuju ke Blogger > Layout > Edit HTML
2. Backup template sobat
3. Cari (Ctrl+F) kode berikut :
.post blockquote {-----)

4. Hapus kode berikut beserta isinya.. Bila tidak ketemu, cari kode berikut:
]]></b:skin>

5. Tepat di atasnya, tambahkan kode blockquote yang sudah sobat pilih sebelumnya.
6. Simpan template sobat, - selesai!

Langkah Kedua :
1. Untuk menerapkannya pada postingan sobat, seleksi teks yang sobat inginkan lalu klik tanda blockquote pada menu post editor sobat.

post blockquote

2. Bila sobat menemukan kode .post blockquote div {...}, maka sobat perlu menambah tag div pada teks.
3. Untuk menambahkannya, ubah mode Compose menjadi HTML pada post editor. Lalu tambahkan kode  berikut.
 <blockquote><div> Teks Sobat disini </div></blockquote>

4. Selesai, Lihat pratinjau postingan blog sobat sekarang.

Berikut kumpulan blockquote yang bisa sobat gunakan pada postingan blog sobat.

Blockquote Style 1

post blockquote

.post blockquote{color:#444444; font:14px verdana; border-radius:10px; border-bottom:5px solid #764398; border-top:1px solid #dcdcdc; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;padding:5px;}

Blockquote Style 2

post blockquote

.post blockquote{ color:#444444; font:14px verdana; border:3px dashed #3d5476; padding:5px;}

Blockquote Style 3

post blockquote

.post blockquote { color:#444444; font:14px verdana; border-left:5px dotted red; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666; }

Blockquote Style 4

post blockquote

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:3px solid green; border-top:5px solid green; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;}

Blockquote Style 5

post blockquote

.post blockquote { color:#444444; font:14px verdana; background:#dcdcdc; border-left:5px solid #222222; padding:5px; border-radius:10px; box-shadow:1px 1px 4px  #666666; -moz-box-box-shadow:1px 1px 4px  #666666; -web-kit-box-shadow:1px 1px 4px  #666666; -goog-ms-box-shadow:1px 1px 4px  #666666;}

Blockquote Style 6

post blockquote

.post blockquote { font: 14px normal verdana, sans-serif; padding-left: 38px ; margin:0 20px; background: url(http://4.bp.blogspot.com/-C0PergJnyGw/Uq3CtOqyQEI/AAAAAAAAA8Y/8SpOFW5Mdj0/s1600/blocquote+yellow.png); background-position:; background-repeat: repeat-y; text-indent: 65px; border-top: 3px solid #61380B; border-right: 3px solid #f4fa58; }
.post blockquote div { display: block; background: url(http://3.bp.blogspot.com/-cG4whMTo3Fg/Uq3Cub6uQpI/AAAAAAAAA8s/abSD38fDMm8/s1600/cop_code.png) no-repeat bottom center; padding-bottom:20px; border-bottom: 10px solid #F4FA58; margin-left: -20px }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 7

post blockquote

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(http://3.bp.blogspot.com/-GyiCjhRga0g/Uq3Cu7QXU_I/AAAAAAAAA80/T559yV8KK9Q/s1600/cop_top.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; }

Blockquote Style 8

post blockquote

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(http://2.bp.blogspot.com/-VdhjVRC3GGk/Uq3CsscTdFI/AAAAAAAAA8g/waPK2hmKTfk/s1600/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; }

Blockquote Style 9

post blockquote

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background :url(http://4.bp.blogspot.com/-aLA67jklvhU/Uq3CsylagpI/AAAAAAAAA8U/cvuIvoxlAgU/s1600/blockqute+3.png) no-repeat bottom right; font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif; color : #000; border-top: 3px ridge #000; border-left: 3px ridge #000;}
. post blockquote p { margin: 0; padding-top:1px; }

Blockquote Style 10

post blokcquote

.post blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://1.bp.blogspot.com/-U2riu6Ui5-g/Uq3D2e0An6I/AAAAAAAAA9g/VGP3eKakBs4/s1600/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; }

Blockquote Style 11

post blockquote

.post blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/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 Style 12

post blockquote

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5ama/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;

Blockquote Style 13

post blockquote

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://3.bp.blogspot.com/-lAFTLowLCvk/Uq3D0r659II/AAAAAAAAA9I/DjJlv0lUUHY/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; }

Blockquote Style 14

post blockquote

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/-rHT3w0LYpqE/Uq3D0j8cTDI/AAAAAAAAA9A/jYBCFTYOSgA/s400/comma-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(http://3.bp.blogspot.com/-3-M9kfJmGO0/Uq3D036LhAI/AAAAAAAAA9E/jrngEeD6DMM/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 15

post blockquote

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(http://4.bp.blogspot.com/-3M4gfNYqSYc/Uq3HFB1yrWI/AAAAAAAAA-U/ySzww9oxT6E/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 Style 16

post blockquote

.post blockquote { font: italic 1em  "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/-vCLGEqt27b8/Uq3HG-OzlRI/AAAAAAAAA-k/4mOidol2cmI/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(http://1.bp.blogspot.com/-RLdodw8XCzA/Uq3HHh4oMsI/AAAAAAAAA-w/dChxgawc2jo/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 17

post blockquote

.post blockquote { font: italic 1em  "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/-vCLGEqt27b8/Uq3HG-OzlRI/AAAAAAAAA-k/4mOidol2cmI/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; }
.post blockquote div { display: block; background: url(http://1.bp.blogspot.com/-RLdodw8XCzA/Uq3HHh4oMsI/AAAAAAAAA-w/dChxgawc2jo/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 18

post blockquote

.post blockquote {  margin : 0 20px; padding: 20px 20px 50px 20px; background : #ddd url(http://2.bp.blogspot.com/-32zjnrG0n7A/Uq3HCsQFLKI/AAAAAAAAA98/FkmFroIt8f0/s1600/Copyrighted+blue+blockquote.png) no-repeat left bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border-top: 2px solid #158aee; border-left: 2px solid #158aee; border-right:2px solid #158aee; border-bottom: 2px solid #158aee; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 19

post blockquote

.post blockquote { margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(http://3.bp.blogspot.com/-tCWuU6of2Xw/Uq3HA6t7_0I/AAAAAAAAA9s/XTC-vqOJ6Sw/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; }
.post blockquote div{ background : #FFF url(http://2.bp.blogspot.com/-qECq4-s8lxw/Uq3HA-sYW1I/AAAAAAAAA9w/J2Yy4Fc7RoY/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 20

post 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/-5NtmXr09L2s/Uq3HJYIxvjI/AAAAAAAAA_E/qsCM3PiEeyY/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; }
.post blockquote div { display: block; background: url(http://1.bp.blogspot.com/-Z3053IokJnQ/Uq3HKuxkHKI/AAAAAAAAA_c/cOcLp3whW5w/s400/right.gif) no-repeat bottom right; padding-bottom:30px; }
.post blockquote p { margin: 0; padding-top:10px; }

Blockquote Style 21

post blockquote

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(http://1.bp.blogspot.com/-2mCpJ3ChHCI/Uq3HDafMmaI/AAAAAAAAA-E/HLJFkIIrRiA/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; }

Blockquote Style 22

post blockquote

.post blockquote { background: #F3F3F1 url(http://3.bp.blogspot.com/-gZBJ3EBePn8/Uq3HHIyyR0I/AAAAAAAAA-o/pZXTeHYzs6o/s1600/blockquote.png) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1em Vivaldi, serif; border-right : 3px ridge #FF8000; border-bottom : 3px ridge #FF8000; border-top : 3px ridge #FF8000; border-left : 3px ridge #FF8000; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 23

post blockquote

.post-body blockquote { line-height: 1.3em; }
.post blockquote { background: #F2F1F1 url(http://3.bp.blogspot.com/-kcUv58Hc2eM/Uq3HJ5py3xI/AAAAAAAAA_Q/_7GM60Dp-9Y/s1600/note.png); background-position:; background-repeat:repeat-y; margin: 0 20px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDD; border-bottom: 1px solid #666; padding: 20px 20px 20px 50px; color:#000000; font: normal 0.9em "Consolas", "Courier New", Courier, mono, serif;; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; }
.post blockquote:hover { background: #F9F9F9 url(http://3.bp.blogspot.com/-kcUv58Hc2eM/Uq3HJ5py3xI/AAAAAAAAA_Q/_7GM60Dp-9Y/s1600/note.png); background-repeat:repeat-y; color:#000000; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 15px; }
.post blockquote p { margin: 0; padding-top: 10px; }

Blockquote Style 24

post blockquote

.post blockquote{ font-family:  Verdana,"Times New Roman",Georgia,Serif; font-size:12px; color: #333333; sdoverflow:auto; width: 400px; padding: 15px 0px 15px; padding-left:42px; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; /* overflow-x: auto; */ /* width: 99%; */ }
.post blockquote, .post blockquote:before, .post blockquote:after { background: url("http://3.bp.blogspot.com/-kcUv58Hc2eM/Uq3HJ5py3xI/AAAAAAAAA_Q/_7GM60Dp-9Y/s1600/note.png") repeat-y scroll 0 0 transparent; border-radius: 5px 5px 0 0; border: 1px solid #dcdcdc; box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2); }

Last Words

Demikian tutorial tentang Bagaimana Menggunakan Blockquote Pada Postingan Blog. Bila sobat mendapat kesulitan dalam menerapkannya pada blog sobat, jangan segan-segan untuk memberi komentar sobat di bawah. Akhir kata, kiranya artikel ini bermanfaat bagi kita semua. Salam Blogging!


lazadda

1 comment: Post Yours!Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice post, things explained in details. Thank You.

    ReplyDelete

Tukeran link


Vinspirations



DMCA.com
 

Info Blog

Recent Comments

Label

Copyright 2009  ©  Vinspirations | powered by Blogger

Template by vinspirations | Best View on Firefox