Kode Membuat Blockquote Keren

by Error Shinobi
Blockquote adalah kalimat berisi kutipan dari suatu sumber yang di blok pada satu kotak. Blockquote bisa digunakan jika suatu kalimat atau paragraf dianggap penting atau bisa juga merupakan penekanan.


Ini ada sedikit model Blockquote yang Keren untuk Blogger.
Semoga Bermanfaat... ^_^

Code 1:
.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;
}

.blockquote p {
margin: 0; padding-top:10px;
}

Code 2:
.post blockquote {
margin : 0 20px; padding: 70px 20px 20px 40px;
background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/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;
}

Code 3:
.post blockquote {
margin : 0 20px; padding: 10px 20px 25px 20px;
background : #9FCFFF url(http://1.bp.blogspot.com/-Htz3jfbcSXM/TbEp4OcNKII/AAAAAAAAAew/Qmrl3_Gm1KQ/s1600/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;
}

Code 4:
.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;
}

Code 5:
.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;
}

Code 6:
.post blockquote {
margin : 0 20px; padding: 20px 60px 80px 20px;
background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/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;
}

Code 7:
.post blockquote {
margin : 0 20px; padding: 70px 20px 30px 20px;
background : #E7E5DC url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/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;
}

Code 8:
.post blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10; padding: 0 20px 0 50px;
background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD;
}

Code 9:
.post blockquote {
padding-left:30px;
padding-right:5px;
background:url(http://www.darkfalltournament.com/images/blockquote.png) no-repeat 0 .0em;
color:#444;
font-style:italic;
text-align:left;
margin:1em 20px;
}

Code 10:
.post blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Code 11:
blockquote{width: 90%;background:#FFF; padding:5px 15px; margin:5px; color:#555; border:1px solid #C1C1AE; line-height:150%; font-size:12px;border: 1px solid #eee;
-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

95 komentar:

Bisnis Online Blog mengatakan...

bisa di gunakan ke blogspot tidak gan?atau hanya untuk alamat web yang berbayar?

anisayu mengatakan...

wah codenya banyak amat, mumet aku hehehe ga telaten tp bagus juga ilmunya mantab... :)

Danu Akbar mengatakan...

Saran, lebih bagus kalo dikasih penjelasan per codenya. Misalkan CSS:

margin, adalah.... untuk...
align, adalah... untuk...

Error Shinobi mengatakan...

@Bisnis Online Blog : ini emang kode utk blogspot bro...

@anisayu : thank's.. saya aja tadi waktu posting, bingung juga!! :D

@Danu Akbar : lbh bnyak kode lagi dunk bro.. entar di salah satu postingan, saia bahas tentang margin n' align nya... thank's sarannya bro..

Musa Khairul Umam mengatakan...

Mantep nih om,bisa pilih salah satu

Bayu Aldi Yansyah mengatakan...

boleh nih di coba. . yang no 10 aja ahh , , kayaknya cocok sama blogku ,, :)
thanks yak mas udah share :)

ismiaprial mengatakan...

wawwww, kereeeeen.Nnti saya coba. Thank U very much for the tips. I'm from Canada. Are U Indonesian? :D

apakah ini itu mengatakan...

keren sob, bikinan sendiri ni.. posting tutorial css lebih banyak ya, ane mau belajar ni :p

Farixsantips mengatakan...

Contohnya gak terlalu kelihatan bro

BagiBagiBlog mengatakan...

Wuuiih,,, Model Blockquotnya KEREEEN2 BGT,,, Lengkap Macem2 lagi...MANTAAFF Boss!!!
Bisa dipake buat REFERENSI tuh Boss!!
Ijin KLIK +1 yach Boss... MAKASI!!!

LaNo HTC mengatakan...

Alhamdullilah ya saya dapat ilmu kembali dari blog ya Shinobi..mkasih ya infonya sob..

AbduGreen mengatakan...

Wah mantab ini... Makasih sob.. ilmunya keren,,,,

bikinhoki mengatakan...

bagus-bagus mas blockquote design-nya.

Bangjal Dua Tiga mengatakan...

Waahh ini mah keren banget gan..hehe

Error Shinobi mengatakan...

@Musa Khairul Umam : thank's oom.. tinggal dipilih..dipilih.. :)

@Bayu Aldi Yansyah : masama !! iaa cocok banget tu' ...

@ismiaprial : u'r welcome... No.. ! i'am from Sidney ... :P

Error Shinobi mengatakan...

@apakah ini itu : thank's.. siip dha' !! ditunggu aja aksi saya... hha :P

@Farixsantips : masa ga kelihatan bro.. padahal pict nya dah gede tu'...

@BagiBagiBlog : siip boss.. thank's +1 nya boss... si boss emang paling baek de'.. :)

Error Shinobi mengatakan...

@LaNo HTC & @AbduGreen : u'r welcome ... !!

@bikinhoki & @Bangjal Dua Tiga : thank's yaaCh...

Ghoeszt-X mengatakan...

Penting banget ini bagi kita para blogger gan
saya paling suka dengan nomer 11 yang ada bayangannya itu
nice post dan ijin bookmarks dulu..!!!

Rama88 mengatakan...

ahhahaha,, saya telat gagal pertamax lagi dah,,, masih bingung ane sob tentang css,, masih belajar,, hiks,, thx infonya sob,,

Redva Kaurvaki mengatakan...

wah... perlu dicoba nih buat blog saya... :)

Liandri eko mengatakan...

wah bgus ne sob tapi ane kurang paham ne psang dmn? :D

sudah bkin GA baru y , mantap moga yg ini gx di banned lg.

KL balasan 5

Farixsantips mengatakan...

Oalah yang itu toh, kirain.

Cek Info mengatakan...

ad yg lebih unik lg?

SHUDAI AJLANI (dot) COM mengatakan...

Wah keren nih, udah saya ctrl+d B)

Blogermie mengatakan...

Kode yang ke 8 kayanya sesuai untuk blog ane gan,hehehe. oh ya, caranya meng-undo label yang terhapus gimana ya om, apa gak bisa di cancel? tanpa sengaja sebanyak 28 artikel tutorial blog ke-delete semua pas mau ganti label..payah nih saya :(
kira2 ada pencerahan?..tuoooloong saia

Bengkel Bangun mengatakan...

Keren kawan, ijin pakai untuk blog saya.

Dayerz mengatakan...

Bagus2 gan blockquote, ntar ane coba di blog ane.

Dhani mengatakan...

yang keren yg nomor dua tuh asyikk hehe..

Reza Saputra mengatakan...

bookmark bookmark :D

Rama88 mengatakan...

mampir lagi ahhh,, BW sekalian koment,, hhehehhe..

BlogS of Hariyanto mengatakan...

kunjungan pagi akhir pekan sambil membaca artikel yang menarik hati :) terimakasih sobat sudah berbagi informasi

A-NX mengatakan...

izin sob....
q mau nyoba yg code 10, cz cocok ama blog q ,hehe :D

Devanoby mengatakan...

wihh, mantep bener gan block quote nya.. :D
salam kenal ya, agan shinobi.. :D

Error Shinobi mengatakan...

@Ghoeszt-X :
iaa bro.. thank's yaaCh ... !!

@Rama88 :
lain kali lagi pertamax sobb.. ini saya juga gy belajar sobb... !!

@Redva Kaurvaki :
silahkan bro...

Error Shinobi mengatakan...

@Liandri eko :
pasangnya di bagian post body sobb.. !! iaa sobb.. moga ini ga dibanned lagi ma gugel.. amieen !!

@Farixsantips :
emang dikira apa sobb.. dikira makanan yaaCh.. :P

@Cek Info :
lihat muka saya aja kalo mau yg unik lagi ...

Error Shinobi mengatakan...

@SHUDAI AJLAN : thank's yaaCh...

@Blogermie : kog bisa terhapus bro.. kan cuma ganti label aja... kayaknya udah ga bisa di undo tu'... tapi coba cari gugel bro.. sapa tau ada triknya...

@Bengkel Bangun @Dayerz : thank's.. silahkan sobat..

Error Shinobi mengatakan...

@Rama88 : oke sobb.. jgn lupa ngasih kiss dunk.. :D

@BlogS of Hariyanto : u'r welcome.. thank's...

@A-NX : silahkan sobb.. :)

@Devanoby : thnak's.. salam kenal juga bro devanoby... :)

Kopiah Putih mengatakan...

Bagus2 ya blocquote-nya!
Saya coba ntar.
Jangan diotak-atik ya gan postingannya!
Buat referensi..

Ismiaprial mengatakan...

39th comment :D

Se Avancee mengatakan...

Kereen2 soob.. blockquote nya..
mau liat2 kode css nya .. :)

Error Shinobi mengatakan...

@Kopiah Putih : siip bro.. thank's yaaCh...

@Ismiaprial : 41th comment... hha :D

@Se Avancee : thank's you....

isalgames.com mengatakan...

waoo keren2 yah bro, bisa dicoba nih....
thanks banget bro, sangat bermanfaat...

blog bebas mengatakan...

boleh juga nii gan, ta coba dlu aah ! makasih gan.

Dode-XP mengatakan...

izin coba gan, koment back ya :)

Error Shinobi mengatakan...

@isalgames.com : u'r welcome bro.. silahkan dicoba.. !!

@blog bebas : silahkan bro.. thank's..

@Dode-XP : siip.. ke tkp nee.. !!

Raindra mengatakan...

Mantap sob izin coba :)

Ariefinity blog mengatakan...

bagus bro info nya :D

webmdmk mengatakan...

Kunjungan silaturahmi di shinobi-blog..
Makasih sahabat atas berbagi ilmunya nih..kapan-kapan bisa dipraktekkan dalam postingan...

abufarras mengatakan...

Belum pernah menggunakan blockquote sob...bisa dipakai referensi nih biar tampilan postingannya kelihatan berbeda gitu

ane mengatakan...

wow, keren2 sob

Liandri eko mengatakan...

buat nampilin di artikel?

sekalian kasih KL5

tamannya-hati mengatakan...

Keren-keren blockquote-nya sob....jadi kepengin nih

Error Shinobi mengatakan...

@Raindra : silahkan bro...

@Ariefinity blog : thank's...

@webmdmk : thank's juga udah berkunjung silaturahim bro.. :)

Error Shinobi mengatakan...

@abufarras : iaa.. sobb.. dicoba aja.. !!

@ane : thank's bro..

@Liandri eko : iaaa sobb.. :)

@tamannya-hati : buat aja kalo kepengen sobb... :)

Hayat Doang mengatakan...

ada ga gan yang quote nya dipinggir kanan gitu gan, kaya naro adsense di artikel sebelah kanan gitu, ane nyarinya ampe pusing
hahahahah

Dimas Satrio mengatakan...

bagus2 semua mas

Cek Info mengatakan...

wkwkwk, muka ente :p

wahahaha :D

Liandri eko mengatakan...

datang berkunjung ngisi celengan5

Rahman Al Firous mengatakan...

KL balik sukses :D

Ijin ambil kode CSSnya ya sob...buat bikin Tutorial

Rahman Al Firous mengatakan...

nih dh jadi sob ->Blockquote Hover Thanks ya..buat kodenya...tenang aja ane kasih sumbernya kok

Error Shinobi mengatakan...

@Hayat Doang : maksudnya gimana tu bro?? ..iklan dlm artikel yach?? ato gimana nih??? :D

@Dimas Satrio : thank's mas bro..

@Cek Info : iaa dunk.. selagi unik.. imoet lagi ... :D

Error Shinobi mengatakan...

@Liandri eko : segera ke tkp.. buat nabung juga sobb..

@Rahman Al Firous : siip... keren sobb, jadinya... !!

topjer mengatakan...

wow,, kerennnnnn.. (pura2 baru tau XD)

Error Shinobi mengatakan...

@topjer :
thank's... pura'' nda tau padahal memang nggak tau... hhe :D

saryadinilan mengatakan...

kodenya banyak pusinnnnnnng bro,love,peace and gaul.

Ijal Fauzi mengatakan...

saya lebih suka otak-atik sendiri CSS untuk blockquote nya :D bagus juga infonya buat yg butuh

Crazy Maniac mengatakan...

thanks infonya gan. sangat bermanfaaat. :D
http://belajarkomputer77.blogspot.com/

Error Shinobi mengatakan...

@saryadinilan : jgn diambil smuanya bro.. satu aja.. :)

@Ijal Fauzi : iaa bro.. itu juga diatas msh bisa di otak atik ... thank's yaaCh...

@Crazy Maniac : u'r welcome bro... :)

rougerdeluffy mengatakan...

bagus juga triknya, tapi apa bermanfaat

Error Shinobi mengatakan...

@rougerdeluffy :
manfaat nggak manfaat.. tetap ngaruh sobb.. selain buat percantik halaman postingan.. jg berfungsi sebagai penekanan paca pembaca.. agar mereka tau kalo kalimat dlm blockquote itu penting.. :)

ajurNA mengatakan...

Keren sob, tapi masih belum nafsu otak atik html nih, saya bookmark dulu aja deh besok baru diplototin llagi. hehehe

Error Shinobi mengatakan...

@ajurNA : siip bro.. thank's yaaCh... :)

TituitBom mengatakan...

ane pakai satu ya gan.. hehehehe

XOOM mengatakan...

Kayaknya yang nomer 11 itu bagus juga sob, oiya, q doakan aja cepet kesampaian punya sony tablet kalo memang pengen beli. tq

Error Shinobi mengatakan...

@TituitBom : silahkan bro.. dgn senang hati.. :)
@XOOM : thank's banget bro...

Bali Hotels mengatakan...

Keeerreeeen tips nya boss :)

Sanur Beach Hotel mengatakan...

Nice Post :)

sepatu mengatakan...

gokil gan keren bgt ya,dicoba ah

Error Shinobi mengatakan...

@Bali Hotels & @Sanur Beach Hotel : thengkyu ... :)

@sepatu : silahkan dicoba bro...

Tips Agar Orang Memberikan Link ke Blog Anda mengatakan...

Mendapatkan link ke blog orang lain tidaklah mudah, terlebih lagi blog/web orang tersebut memiliki PR di atas 3. Namun Bila Anda ingin menerapkan SEO (Search Engine Optimization)....

blockquote-dengan-hover mengatakan...

ckckck....makin rame aja nih posting :D

Rezki Ji mengatakan...

mantappp gan tutor.nya :D

Cek Info mengatakan...

pret :p

Error Shinobi mengatakan...

@Tips Agar Orang Memberikan Link ke Blog Anda :
thank's dah mampir... :)
@blockquote-dengan-hover : bisa aja nih bro.. :)
@Rezki Ji : thank's...
@Cek Info : preet apaan ??? :P

Mbah Qopet mengatakan...

@Admin : Cek Info tuh lgi mencret...dri kemaren pratt--preett..terus :P

Error Shinobi mengatakan...

@Mbah Qopet : lupa minum obat kali dia... :D

Bayu Aldi Yansyah mengatakan...

ijin ambil mas yang no 10 :)

Error Shinobi mengatakan...

@Bayu Aldi Yansyah : silahkan mas.. :)

earth-inside mengatakan...

wah ane g tau naruh yang mau ditulis tu dimananya..
gimana sob? cara pembuatannya
thanks

Error Shinobi mengatakan...

@earth-inside : naruh apaan nih sobb ??? kodenya atau pada saat mau nulis nih sobb ????

earth-inside mengatakan...

kata2 yang ingin kita tulis tu di taruh di bagian kode yang mana sob? sesudah atau sebelum kode? gitu..
maklum masih newbie sob, hhahaa

Error Shinobi mengatakan...

@earth-inside : kode diatas disimpan di edit template bro.. dipasang di bagian post body ... trus kalo mau nulis.. tinggal klik aja tulisan blockqoute ... :)

earth-inside mengatakan...

ok, thanks bro
akan ane coba

Error Shinobi mengatakan...

@earth-inside : sama-sama .. moga berhasil bro .. :)

.: Cavalier_Juhik :. mengatakan...

Langkah masangnya gimana gan ?????

Posting Komentar