Selamat Datang di WEBSITE GURAH LENDIR - PJ LOka Gurah H Djawadi | Alamat : GIRILOYO WUKIRSARI IMOGIRI BANTUL YOGYAKARTA 55782 | Menyediakan GURAH TETES HIDUNG | KAPSUL GURAH | TEH GURAH | GURAH VAGINA dan CAIRAN PENGELUPAS KULIT. HUB : 0857 6480 8887

Cara Membuat Blockquote Dengan CSS

Sahabat yang ceria ! Anda sudah membaca artikel Google Adsense Bisa Bahasa Indonesia ?
Nah kali ini saya bicara ke bab lain yaitu bagaimana caranya membuat blockquete simak ya !
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.

Blockquete terkadang juga digunakan untuk memberi keindahan dalam menampilkan kode html pada postingan blog,didalam setiap template blogger memiliki kode blockquuote yang berbeda-beda,nah disinilah kita bisa merubah kode css blockquote agar tampilanya sesuai dengan yang kita inginkan,nih salah satu contoh gambar blockquote.



Dibawah ini ada beberapa kode css yang berbeda untuk blockquote, silahkan pilih dan terapkan sesuai yang kamu inginkan! ikuti langkah2nya sbb:

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3. Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kalau sudah ketemu ganti dengan salah satu kode dibawah ini sesuai blockquote yang kamu inginkan.
Kode css blockquote
blockquote {background: #EEE ;
width: 400px;
padding: 5px;
margin: 5px;
width: 400px;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);

}
Hasilnya akan seperti gambar dibawah ini:


Kode css 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;
}
Hasilnya akan seperti dibawah ini


Kode 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;
}

Hasilnya akan seperti dibawah ini


Kode blockquote
.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;
}
Hasilnya akan seperti dibawah ini

Kode blockquote
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;}

Hasilnya akan seperti gambar dibawah


5. Simpan template kamu.

NB:
Sekarang untuk cara penggunaan blockquotenya pada menu Posting bisa dilihat pada gambar berikut:



Blok kode atau teks yang diinginkan lalu klik Tool Menu yang ditunjuk dengan tanda panah.
Silahkan pilih sesuai yang kanu inginkan, semoga bermanfaat !

Powered by : Crystal X - Obat Keputihan

Tulisan Terkini

LOGIN FACEBOOK ANDA, KLIK SUKA PJ LOKA GURAH

Auto Backlink

GRATISSSS
AutoBacklinkGratis Free Promotion Link Free Smart Automatic Backlink Malaysia Free Backlink Services MAJLIS LINK: Do Follow Backlink Link Portal Teks TV Free Plugboard Link Banner Button Free Automatic Backlink Service Backlinks Generator Gratis Ping your blog, website, or RSS feed for Free @Submit!-FREE Promotion Backlinks Gurah Lendir Free SEO Tools Submit Your Site To The Web's Top 50 Search Engines for Free! Sonic Run: Internet Search Engine