Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, August 24, 2013

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:58 PM

3 comments :

  1. Horass lae... :)

    saya ada pertanyaan sedikit nih, saya dibingungkan sedikit tentang blockquote ini,
    berikut linknya : http://3.bp.blogspot.com/-JYT29TkE35o/Uk-fw_GnhOI/AAAAAAAAAcA/TMwdxF7FtnI/s1600/ssss.gif

    gambar blockquote pertama tuh acak2 susunan codingnya ngak rapi,
    tapi yang kedua tertata rapi kebawah.

    ada trik lain dari Lae biar rapi seperti dibawah.

    terimakasih

    ReplyDelete
    Replies
    1. makasih atas pertanyaannya lae..
      coba lae lihat bagian CSS blockquote nya lihat code
      " text-align: left; " bila tidak ada silahkan buat, mungkin codenya pada template lae menjadi " text-align: justify; " sehingga dia merata kiri kanan penulisan codenya.

      Delete
  2. Keren Banget perlu di coba nih gan heheheh

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog