Di bawah ini ada beberapa macam variasi blockquote berikut kode-kodenya :
Blockquote Dengan Border dan Gambar burung hantu
Kode blockquote:
blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFBQ2uXfjyPqCEKO2d8BrrmGlOR-BqWlpdOmVdc2fKR34DSYFIg6V4MajGbQJ3HD0RMBw6wV_Z4Ilb02iVHu6YKx8w-qprUgAIcFEg2aEByUytaqvrbuv8poEYWw7w-OlLMp6k81yzSE/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;
}
Blockquote dengan label di pojok kiri atas dan border di bawah dengan warna ungu
Kode blockquote:
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAxSApKRkzlOn8x-svD_9j1gJzLL1bMjTYWbyNS-0TUvpHs_GuvWFq1hGWxHFSBl2jinssfHCwRNAgZRdTKx4miUWAdbcOAf0_Pv_bcp9FBDdoF1FPwbRDbEs6GMSi5RvwZ0YFptYXXc/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;
}
Jigsaw (seperti gergaji ukir) Blockquote Dengan tulisan copyrighted coding Pada Pojok Kanan bawah
Kode blockquote:
.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSzwxUjITIL_q4XPzSO7TwPInmONJcDMUmjFidjEjrYLSlDXS8WAFPboES7i-1RC2FfbAKishPdFoCZbaUR5DVnXG0u8nCMBVs0xueM21K2PX0DzcBwPnDQYyFXiiYPXeDtaWKk5_CH0/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 dengan border klasik border di samping kiri
Kode blockquote:
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggs0xvAzU_wypa3eAdBedP9KRFPlhTmi4b1eXE4_SXYjQsxmHsJTZO_3kyvWWWiyVNLMhcLytdJRZwB2BtcGigstwr8Ls80QOir0XExeFwYMzSIwI_RI4RoGkxTaQ_6BwCbjeM1NLNM1s/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;
}
Atau blockquote klasik lainnya
kode blockquote:
blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNmiKGsVjLchaEqe-vz0hjTeVuc2OZjtI_FvJ9lHw6oSo95Q2grIqoBJQXxcFZIyVCc12e6F_8yL5nsXYNd-9FRmPRt6UFZ5yjAGt0g0atTDNc7X8q4X2CkqttJN6EIp_NAm08YBwG41A/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 dengan dengan Label warna di pojok kanan bawah
kode blockquote:
.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3jG9T0gkFTJpGgktJdJq5T60EIitat9QaBp6HOFJUc54VM0h-r8MEbhk5s48OGpauFhEXCKr09kFt9EBbtLM8HyYIdFbPYIFNLCzHcDmwBSJqonzEEXa1yf9ahiEkHpI08aEi0_V1pM/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;
}
Blockquotes dengan tanda koma terbalik
kode blockquote:
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMMCZtND7H5ckXC-PznC_9NJodItoutiWthhuvnPWUh4NRhL1rN7gDpAWfqm8pKifrJTlsFtMdXRiGNCTMkBk88Yqq2_DRj1aYWxqOwZjPdNQGSPE2LBnCc33EQwbvBn9RhTcOn6OBqI/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/AVvXsEg2WeYTz56rA4Uz6A03la62M2GcvbLUMwvUFKld0wdL0Sg4z2PPirXRj4G-GrIzcU6JqnpbmVISG4KI93eK4aInbo1Z6dH4gsIhshWpN9qMcUR2r1p4I-Dsdx8LxJPWyDimUELPaymIE_8/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Atau tanda koma yang berwarna orange
kode blockquote:
.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXiyb9tlP1Nogt7r_Tg68TtWONKoFLEnznylrDq8uuL1_PX2lah8oAYrVtGvjXvROtXjMIDCgQJ6AdKbmF8jamazZcKgVskKREETZdFMdwCZWrcC46gb387JQ22CkbzWWzE5U5U2VHX8/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCz07Wi9l3e4Hu1Ib9bAcGU8n_jhk4mdIqxovepw8yd_Ca3yxgWN2tdp4ADo0S7NmmXrq8F3v0xnHdtgsNiWp4rJ80XeZiXJj0jh36O3TdfGb7xL6b5rCCZND3ux9-uRg-V45KZR0GKHU/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Atau variasi dengan tanda lima jari tangan
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/AVvXsEhTR_az7nGVqkaFjeQ5b_wRuURQcn93KsDVo3Q4GCeb83LyGeJS2ZZDvAcRQG3tIg8Vta51r28PfUE12vCIdYniQvG64puE0AEh5uKeyHzjgDFnYYP7-Mreai1PjC_VQTytEsdp0Rcu5QQ/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/AVvXsEjrQ0JDZ6b-saM6b7gDygQbL5-UdGOLNEXEl5p4S8yLqYgf2-GCR2sIV3u3Go8LVMqcnJfHl23lQwMdu3xnWi8Ez0owmzbp0007GMv96DgHgK1kRq1BSt6U1XEIyaYiJgJFtP_3QU9ZFYM/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Blockquote dengan gambar copyrighted coding diatas
kode blockquote:
.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtDX6HympXPlkmrit-SaNtcdbQRwKQ6g0GAafNDISKvlgg7CrZmsLnGPDlZ5rZa9CQEQYK_-M-2FoOCqZ775RaVm3BgfFHA2Vm4oZggSkOsfraLuNIpUzpnON4x0ue1j95oSKBaRnv4I/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 dengan gambar Tirai di atas dan bawah
kode blockquote:
.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4AfgPuMj4R_5pxE7qb95C5XYu6c1JwEw5Fdv5z_FpV4QTYjybadvzQVh-0I2FX09BCKVQ8cYy9cX_0EegjyULsBlUTHr7PQPZVmAikd9j3mRFx18bV_KEKic9GkXSFjkIUbQI33HBCs0/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}
.post blockquote div{
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq84bLivIxDogVHgE3CTRGBlpEwlYklNfDPbcp87VwFo2uV7Nsj69QifIgGU63531YwMse2r4s2EeeTTe76BAMFfK_5ryhoP7ZvQxAXzNZhr2uSxoOGUTBuYvn_INyNSLfbf672_GsSzc/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}
Gaya blockquote kotak dikelilingi oleh borders :
kode blockquote:
.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiavvS2HjWfERj60hSgqFPuvMKu8krNNdh_D1ZdJ1SMwwHNKPgTL0fQeg-_oLhOnzVNYGilqYuUl3TMy30TPjIvgopPajqPUYiCFX7t_kCx6OgdwVRWJxJEFpwOdVbP-HxQa3vy2LQ6Sb4/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;
}
The Monkey Man Blockquote
kode blockquote:
.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWsbdcIaY4E-6owZYYOlpKjBaIIPSeB_6aaTCcB5LicV7YXlusInMEoQ6HOx6IWSxntf13wRqz69iw4S8dvfsy44v4wvDSJLwX5mtAWFUWZ9AXeUesBZYE-ecvURnw8yPGNZuFp1Z6g8/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/AVvXsEhXm2U7TDpp6kK3gn6-z4sFQjTV1nZWXFOyoY70bb3S3ARuXjOB2jMdlpafEERKxSgp4MnGEvydm64lLY6zpthyR-sIr2vmm0zljLjE0Jbfmx5W3cwtsyXoWb5lCjiNHDQR0lcgCFV9suQ/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}
.post blockquote p {
margin: 0;
padding: 20px;
}
Penerapan dan penyesuiannya di blog :
Sekarang Untuk menambahkan Salah satu blockquotes keren dan unik untuk blog Anda, lakukan hal berikut:
- Pertama masuk ke akun blogger kita.
- Klik fitur rancangan.
- Klik edit HTML.
- Cari kode blockquote misalnya .post-body blockquote { line-height:1.3em; }atau .post blockquote{...........}dalam kode HTML template blog kita tersebut.
- Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
- Klik simpan template.
Keterangan :
- Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.
- Selalu biasakan untuk download template blog kita terlebih dahulu sebelum melakukan edit, untuk back up sebagai antisipasi saat kita mengalami kegagalan sewaktu proses editing berlangsung.
Semoga bermanfa'at...
Ditulis Oleh : friend of the night ~ Bloger
Sobat sedang membaca artikel tentang Cara Membuat Berbagai Macam Variasi Blockquote di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste dengan menggunakan Ctrl C dan menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment