Cara Merubah BlokQuote Di Blog
Blockquote merupakan sebuah kotak yang membingkai tulisan
tertentu yang menunjukan kalau tulisan itu merupakan sebuah tulisan
penting yang perlu mendapat perhatian dari pembaca untuk mendapatkan
inti dari bacaan secara keseluruhan. Berbicara mengenai blockquote,
kita kadang merasa bosan dengan tampilan blockquote default yang hanya
itu-itu saja. So, adakah cara untuk membuat variasi blockquote dalam
blog kita ini? Ya, tentu saja ada. Dengan variasi blockquote yang
lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan
memahami inti bacaan kita, tetapi juga akan memberikan daya tarik
tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk
kemudian mengamati dan membacanya.
Cara otomatis.
Cara otomatis dalam membuat blockquote ini memungkinkan kita untuk tidak
lagi harus memasukan kode-kode HTML untuk menampilkan blockquote saat
kita membuat postingan blog, karena saat kita mengklik ikon
blockquote akan secara otomatis muncul model blockquote yang kita
inginkan.
Cara membuatnya adalah sebagai berikut ;
Pertama masuk ke akun Blogger kita.
Klik fitur Rancangan.
Klik edit HTML.
Cari kode blockquote dalam kode HTML template blog kita tersebut.
.post-body blockquote {
Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
Klik simpan template.
Keterangan :
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.
Bentuk 1.
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
Contoh hasil tampilannya
Tips Trik Blog | Dan Cara Buat WebsiteBentuk 2.
Contoh hasil tampilannya.blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
Tips Trik Blog | Dan Cara Buat Website
Bentuk 3.
blockquote
{ margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; }
blockquote p:first-letter { float: left; margin: .2em .3em .1em 0;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size:
220%; font-weight: bold; } blockquote p:first-line { font-variant:
small-caps; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 4.
blockquote
{ background-color: #666; color:#fff; padding: 15px; margin: 1em
40px; -moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px; -moz-border-radius-topright:
15px; -webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius:
15px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 5.
blockquote
{ margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr38Xz1YcYkqAWt_Ofg-nO-rfbtYHU9PzF-cL6Hu3gveyM39nAW4ETYbgbqUiMLWPLHay1IhIgCM7mjOJHAJmp_iwNyBhPcM8FYgpKVVALQm-56zXr5MqxJHxdC2pBM8v2c-bYaqQwJds/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 6.
.post
blockquote { margin : 0 20px; padding: 70px 20px 20px 40px;
background : #E4EAFE
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit19gwrc9fdJggF0ZN93MrcA_zQWcsxsHlxUrG8lkT9sO_LAxS94vH17yXAh_z-ONIo4bgADfoPhClfa0ZXDHoEatjfX6B9ttLhh5nvJXikPEWLMmX0zoZmbLgJ3rOqkNgVvHba_8zMrc/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; }
Contoh hasil tampilannya.
Bentuk 7.
.post
blockquote { margin : 0 20px; padding: 10px 20px 25px 20px;
background : #9FCFFF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc66DssnIUuwRiHs0FBTNMGIzuMqeiNvSTLJfvQMBYAJ3glOjYmxTthMiHytTT55RdwI7OubR2egUzIq1-43WVgkSFXs5eb4GhjXnlcLPeGdn7MaU78utucEhKIR4jl_HZCXl7YlzdxDE/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 8.
.post
blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJVKTJIwhhu_emiCRwYHifxk5zXvhw1uw2e-UO6Mj2w38Z_qsaB0CbaC9ksdkOiHxfF0dGSB12SAAL1gb2brjyn0uh5yzKTY-WjpYpb0yKcnlNxiRxz7XtxDLbYd1N78uJceN_tnf5ig/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 9.
blockquote
{ background: #484B52
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIQd6DTNpP00te_-R5Dzvuq9OzL1deUj2KJOIMXUlvI-cl2G3uKh43qvbY8uLHLJrKdDOD_EOj91UqStaCKJxbpP9OpopJlo5DrO18w0SW4Yj1Y8cgkDT2dyoK5dR2ug68xs6LI3UjeE0/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 10.
.post
blockquote { margin : 0 20px; padding: 20px 60px 80px 20px;
background : #FEE4E3
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg-V9FxFTZI-djZ3oCTWWFif0iszE0Wd8-keCdp8A1lxjEAW3m_coUsN-i3HxEdbJnDxEA-NKN44YqU-1CtOjGQfR_FppJmq-Umv6nVLEbzjBlNB4qBwYDyzacXJEMl5U1copUiCKS-LY/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 11.
.post
blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px;
margin: 5px; background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFruwgvQid1374M0Ab9PwcaP56UgpFBwcZ17giGEH7qVh20dzwEOZLma9Ve1vIDqRlngPWvba6z5Re2qrrs-VOPDqHiRd8GtVbcDLjyjXhvWCKgJeGLMEf6Ckfd5ejM2Y1PbEuYS5u_do/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/AVvXsEgpzIiNzqcrxhsSJWW96efk1HGg_xPfK4twJHyhyXGLoiIaVquAJQZYqkOuGt_J48hrhXhsIG9J673CbdLaCYNk3XuJUJYUQhL_dlVf_kQfE924wdMEdefjysmShmgMXafwVzMWs99hOgo/s400/comma-right.gif)
no-repeat bottom right; padding-bottom:10px; } .post blockquote p {
margin: 0; padding-top:10px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 12.
.post
blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px;
margin: 5px; background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzcRHtj5JinDqkn4TwSd_RipVQoAYJe8QB2IyxWFm77wuv9H6GLKQkLLVlb5DPPIjjw83ACpA97a9PYMnEAMK19KJkZkUbEAsC98l-wLjBcbGOoZVQ-BkjJXW57sM8fSOzPHKCKBs538/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/AVvXsEhfgMK2q1dqTBPJ8xtpSA8XJTFuXIndr1pWq7XXLx8TfNwXxrb1dxtaQMZ-S7SJ5FxP5PXLGAA9ParDIsP15QqtCYGIJ9As2DZsU1wo0lHmRkZKht-2Ub0mwprLfaUMEMN0udTJcEMqeUg/s400/comma1-right.gif)
no-repeat bottom right; padding-bottom:10px; } .post blockquote p {
margin: 0; padding-top:10px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 13.
.post
blockquote { margin : 0 20px; padding: 70px 20px 20px 20px;
background : #E7E5DC
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABauHwM_1Oc4H-8WppdT5b6t850fIfFflJQH-Tv_4Wv45_PU-NmC3x8Dar2eAoj9cFFIafMjdzuSizwkbtqEE1yXDZ0dbMWhuqfNQJHWFwyVlnj2zAChPsEKK6hXfIoYRDDd47SIH41s/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; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 14.
.post
blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background
: #FFF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihr8ABi-RpbqFRxzEe6WHOF4XjcytsSb_amG7O-hzKQvewDwtdW91iIw1tYAsb3GPWuWVbrBTGeZwcggA4TbMNZmBm3c0eskgCn27O3E6T9OecESgaGchE09pRnjzylQ1TtjuepQy7mDs/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/AVvXsEgczD9nRaVNcXsqdk5jA8jHrl48ng7lKPLZDiKt2Wxn-HEMz3ZXPkcbHnTxoBugezSRUBshAw9doEIjj9A5QOMGGvyGIuVMQeT6Q5mcF2Ajcwo_AwxLX03jmIBXNKCKj3YHSQMyWbGHmgw/s1600/BLOCK1-BOTTOM.gif)
no-repeat bottom; padding-bottom: 50px; } .post blockquote p {
margin: 0; padding-top:10px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 15.
.post
blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background :
#E6F1FA
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJ2WbJkWdsn1ocUzerW3r-0hZrkxXgrfrLgnLEMFPMFJhZx-kRkn_LUrsf4E7B9uKjaNzg4IuMvRarP9-g_tYAMh_7cFv-h53pRTTKO5lRKqwgQCi_QLm2oo43ILIeG23UaPoY6nkjhU/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/AVvXsEg2QAD22V0Tqsew2qKSae5CdVclQD3WNy9z9bb_lq4ekMnb6ESC6zts7a5M9sJvlTZVj2c0MkBPkIWjq9TFl4IWPBzlnnUjQb7ufD7PKa24scQcQZCMHg1nu6mz7Y43BwPbzD6j8RXTX2Y/s400/head-bottom3.gif)
no-repeat bottom; padding-bottom: 50px; } .post blockquote p {
margin: 0; padding: 20px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 16.
blockquote
{ background-position:-10px -7px; border: 1px dashed #FFC600; margin:
20px 10; padding: 0 20px 0 50px; background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNzcd5KpvjknNYTBOYTVVA9V6gJrqYRJEzRVzuSJjtA9QPU1xWV37FTq8g6oB4k8id28IDUMA7VTqEQ39PTtzp8fq9wc9dPxRc8-z1nYPzgviKLxOa299aMw1VEb0wiEh6ZVEGHJRXErVA/s1600/quote.png")
5% no-repeat #FFF8DD; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 17.
blockquote{
background-color: transparent; border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique;
font-size: 1em; margin-left: 5%; margin-right: 5%; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 18.
blockquote
{ background-color: #666; color: #fff; font-weight: bold; padding:
10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 19.
blockquote
{-moz-border-radius-bottomright: 30px; -moz-border-radius-topright:
30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95);
padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 20.
blockquote
{-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft:
30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11);
padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 21.
blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 22.
blockquote
{-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8;
border: 5px ridge rgb(224, 213, 130); padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 23.
blockquote
{-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8;
border: 5px double rgb(206, 212, 36); padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Bentuk 24.
blockquote
{-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8;
border: 5px groove rgb(248, 250, 187); padding: 10px;}
Contoh hasil tampilannya.
Tips Trik Blog | Dan Cara Buat Website
Cara manual.
Cara ini tidak membutuhkan penggantian kode HTML template blog, tetapi kita hanya perlu untuk memasukan kode HTML blockquote yang kita inginkan setiap kali kita membuat sebuah postingan. Caranya adalah saat kita membuat postingan sebuah blog, jangan menuliskan blockquotenya di bagian compose. Akan tetapi, tuliskan blockquote tersebut beserta kode HTML untuk menampilkannya pada bagian edit HTML (letaknya tepat di sebelah kiri bagian compose).
Adapun kode HTML yang perlu kita masukan untuk menampilkan blockquotenya yaitu ;
<blockquote
style=" Masukkan kode HTML blockquote yang ingin kita tampilkan di
sini "> Masukkan tulisan yang akan kita jadikan blockquote di sini
</blockquote>
0 komentar:
Posting Komentar