cara mempercantik tampilan blockquote

Mempercantik Blockquote pada halaman blog buat para bloger sangatlah penting, sebab pemakaian sistem Blockquote pada halaman blog termasuk sering digunakan untuk postingan artikel pada sebuah halaman blog. Apa bila dalam sebuah artikel postingan kita menyematkan suatu pesan ataupun hal penting, ada baiknya kita memakai sistem [ " atau tanda kutip dua atau yang paling sering disebutkan dengan Blockquote ] Sistem titik dua atau Blockquote berpungsi untuk memisahkan satu pesan ataupun suatu tulisan yang diperhitungkan memiliki makna yang paling penting dari artikel yang telah dituliskan, maka tentunya sang author pasti memakai sistem Blockquote ini. Pada tutorial kali ini saya hanya merubah atau mengedit kode CSS nya untuk mempercantik tampilan Blockquote pada halaman blog.

Demo

Ini adalah tampilan DEMO Blockquote pada sistem modivikasi CSS

Cara mempergunakan Blockquote

1. Dalam membuat suatu postingan artikel tentunya dalam setiap baris artikel tersebut anda menyematkan berupa suatu pesan atau kode yang merupakan hal penting yang perlu disimak atau diketahui pengunjung blog anda, jadi ada suatu batas pemisah agar para pengunjung blog anda lebih cepat melihat suatu pesan atau kode yang telah diberi tanda kutib dua atau Blockquote.
2. Pada saat anda menulisa suatu artikel tentu pada halaman menu atas anda dapat melihat suatu tanda ( " ) atau ( Quote ) atau yang biasa dengan Blockquote.
3. Silahkan select suatu tulisan atau kode pada artikel yang anda tulis.
4. Setelah anda select silahkan klik tanda ( " ) atau ( Quote ) agar memunculkan tampilan Blockquote pada saat artikel itu dibuka. lihat contoh penulisan dibawah ini.
   
   <blockquote>
   Ini adalah tulisan yang telah di blockquote atau silahkan isi kode ataupun suatu pesan yang penting didalam blockquote.
   </blockquote>
   
   
5. Tulisan warna merah pada kode penulisan diatas adalah penulisan blockquote yang benar pada HTML.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Blockquote
By : Rivai Silaban | Blog Design
Update : 24 Agustus 2013
******************************************/
blockquote {font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
font-weight: 500;
padding:10px 10px 10px 15px;
border-left: solid 15px #0A53AD;
border-top: dashed #0066FF 1px;
border-bottom: dashed #0066FF 1px;
border-right: dashed #0066FF 1px;
background-color: #EBEBEB;
text-shadow: 1px 2px 0.5px #999;
}
blockquote:hover {
box-shadow:0px 0 5px #999;
border-left: solid 15px #333;
text-shadow: none;
color: #990000;
border-color: #333333;
}/*** Blog Design CSS and ***/

Kesimpulan

Silahkan edit CSSnya sesuai dengan tampilan thems halaman blog anda, agar lebih sesuai pada penulisan artikel postingan.

Blockquote dapat anda manfaatkan untuk berbagai kebutuhan dalam menuliskan suatu hal penting agar lebih berbeda dengan baris artikel lainnya. CSS diatas valid CSS 3 jadi untuk template yang menganut CSS 3 kode diatas tidak akan mempengaruhi template anda, dan CSS tergolong ringan. Buat para teman teman yang mengalami masalah dalam pemasangan silahkan share bersama saya pada form komentar dibawah atau silahkan kontak saya melalui fasilitas di blog ini.

Mempercantik tampilan Blockquote halaman blog
24 Agustus 2013
By : Admin Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:58 PM