Home » , » Cara Mudah Membuat Blockquote di Blog

Cara Mudah Membuat Blockquote di Blog

Redi Apri Handoko | 19.17 | 0 comments
Sudahkah anda pernah mendengar istilah blockquote....Blockquote adalah penekanan sebuah kalimat/pernyataan yang kita ingin buat sehingga terkesan "penting" kepada pembaca. Blockquote juga dapat berisi kutipan dari sebuah sumber yang ingin ditampilkan lebih jelas. Jika sobat memiliki blog yang berisi tentang tutorial blogging maka sudah sewajibnya sobat membuat blockquote untuk menghighlight kode atau script sehingga terlihat lebih menarik dan mudah untuk dibaca. Untuk itu saya akan memberikan trik kepada sobat bagaimana memodifikasi blockquote pada blog sobat serta cara menerapkan blockquote pada posting sobat.

1. Login ke blogger.
2. Pilih Rancangan -- edit HTML
3. Cari kode ini ]]></b:skin>
4. Letakkan salah satu kode dibawah ini sebelum kode diatas

Blockquote 1.
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}
Hasilnya seperti dibawah ini:
Contoh Blockquote 1.
Blockquote 2.
.post blockquote {
background-color: #FFFFFF;
border-left: 10px solid #8A2908;
border-right: 10px solid #8A2908;
margin: 1em 3em;
padding: .5em 1em;
font-size: 12px;
Hasilnya seperti dibawah ini:
Contoh Blockquote 2.

Blockquote 3.
.post blockquote {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : Courier, Arial, Verdana;
line-height:1.6;
background: url('http://3.bp.blogspot.com/-XHc6bsXTMvw/T47faFP2o_I/AAAAAAAADEk/k-icLJmzFz4/s400/w2b_codeicon.gif') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.post blockquote li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}
Hasilnya seperti dibawah ini:
Contoh Blockquote 3.

5. Simpan template sobat

Untuk membuat blockquote pada posting sobat jangan lupa untuk menyertakan kode seperti dibawah ini pada tulisan atau script yang ingin dihighlight:

<blockquote>
Masukkan tulisan atau script disini
</blockquote>

Selamat mencoba, dan good luck!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Cara Mudah Membuat Blockquote di Blog Di posting oleh Redi A.H pada 8 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google