Selamat datang di: www.jual-rebanamarawis.com ( PUTRA PENDAWA )
Toko / Jual Alat Musik Online dan COD (Cash On Delivery)
Contact Person : Ahmad Royani, ST
TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)
PIN BB : 2B4A736C
Home » , , » Cara Membuat Blockquote pada Posting Blog dengan CSS

Cara Membuat Blockquote pada Posting Blog dengan CSS

Pada kesempatan kali ini saya ingin berbagi bagaimana Cara Membuat / Memodifikasi Blockquote Setiap Posting Blog Dengan CSS.

Secara umum pada sebuah tulisan Blockquote atau yang lebih dikenal dengan kutipan sebagaimana dilambangkan dengan "tanda kutip" digunakan untuk menuliskan sebuah kutipan baik untuk mengutip artikel ataupun paragraf dari sumber lainnya sebagai tambahan atau sebagai referensi pada sebuah tulisan. Tapi terkadang  blockquote juga digunakan untuk menuliskan paragraf yang ingin ditonjolkan dari paragraf lainnya seperti untuk menuliskan inti dari postingan yang dapat berupa kode html, css, javascript dan lainnya.

Sebagian besar blogger membuat blockquote dalam postingannya tersebut dengan diapit oleh tanda kutif, menggunakan huruf miring /italic, sebagai pembeda dengan pargraph lain. Pada posting kali ini akan diberikan tips cara membuat / memodifikasi blockquote agar tampak lebih menarik.

Berikut ini contoh tampilan dari blockquote yang dibuat secara otomatis dalam setiam postingan blog ini, adapun cara membuatnya adalah dengan memasukkan kode CSS ke dalam template blog
Adapun cara membuatnya adalah sebagai berikut:
  • Login ke template Blogger
  • Pilih menu template kemudian jangan lupa backup template terlebih dahulu, untuk menghindari terjadinya resiko rusaknya template blog
  • Pilih "edit HTML" dan centang kotak "expand widget template"
  • Cari kode: ]]></b:skin>
  • Copy dan paste kode berikut diatas kode ]]></b:skin>
    blockquote{overflow:hidden; width:85%;
       margin-left:30px;
       padding:5px 5px 5px 10px;
       background:#f2fbf4 url(http://i41.tinypic.com/35a8ayb.jpg) no-repeat right bottom;
       border:#017b19 solid 1px;
       border-left:#f906fc solid 10px;
  • Edit tampilan blockquote agar sesuai dengan keinginan dengan cara mengganti kode  tersebut pada template 
  • Setelah selesai, klik pratinjau terlebih dahulu, jika sudah OK, maka Save template. dan lihat hasilnya
Berikut contoh lainnya dan perhatikan perbedaannya dari contoh diatas:
blockquote {
   width:85%;
   margin-left:10px;
   padding:5px 5px 5px 10px;
   color:#0066cc;
   background:#fff url(http://i40.tinypic.com/erlch4.jpg) no-repeat left top;
   border:#364999 solid 1px;
 }
hasilnya akan tampak seperti ini
Berikut ini contoh tampilan dari blockquote yang lain jika kode yang dimasukkan ke dalam template seperti kode tersebut di atas

Adapun cara yang mudah untuk membuat blockquote pada sebuah paragraf yang terdapat pada postingan adalah dengan cara menuliskan paragraf terlebih dahulu kemudian block paragraf tersebut dengan klik dan drag kursor/maouse kemudian klik icon tanda kutip yang terletak di bagian atas post editor, sehingga Kode HTML nantinya akan otomatis diawali oleh <blockquote> dan diakhiri dengan </blockquote>

Demikian postingan kali ini mengenai tips bagaimana  Cara Membuat Blockquote pada setiap Postingan Blog secara otomatis dengan kode CSS

Tutorial Blogspot
  1. Cara Kompres CSS, HTML, JavaScript Template Blog
  2. Cara Membuat Auto Read More (otomatis) di Blog tanpa Kode Javascript 
  3. Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
  4. Cara Membuat Navigasi Breadcrumb, Pengertian dan manfaatnya bagi SEO Blog
  5. Cara Membuat Readmore Otomatis di setiap postingan Blog 
  6. Cara Membuat Share Button FB, Twitter, Google+1 Di Atas Posting/Artikel Blog.
  7. Cara Membuat Tabel di Blog dengan Kode HTML
  8. Cara Membuat Widget Share Button FB, Tweet dan Google+1 di Blog
  9. Cara Menampilkan Kode HTML dalam Postingan Blog
  10. Cara Mengganti Tampilan Kursor Mouse dengan Gambar Kustom pada Blog
  11. Cara Mengganti/Mengubah Default Icon Bullet/list di Blog
  12. Hadiah PR 2 dan Hukuman Google Sandbox sekaligus dari Google
  13. Membuat Pesan Otomatis di Akhir Postingan Blog
  14. Membuat Tabel di Blog dan Atribut HTML
  15. Mengenal Kode Tag HTML Dasar pada Web / Blog
  16. cara membuat Blog Anti Copy Paste / anti klik kanan
  17. cara membuat tulisan / teks berjalan ( marquee ) di blog
  18. cara mengcopy artikel blog anti copas (anti block dan klik kanan)
Share this article :

5 komentar:

Saung Web mengatakan...

wah kebetulan nih nemu yg lagi dicari.. .makasih tas share nya n ijin copas ya.. thanks

BLOG Agama Islam mengatakan...

terimakasih banyak ilmunya, alhamdulillah bisa saya terapkan di template blog saya.

hengki kristianto mengatakan...

bisa pengaruh loading gak ya gan ?

batavia mengatakan...

Terimakasih sharenya, keren juga gan

obat darah tinggi mengatakan...

mantap dah artikelnya

TOKO PUTRA PENDAWA

Contact Person : Ahmad Royani, ST


  • TELP/SMS: 08561452465 / 087786060415 / 085286352611 (WA)

  • PIN BB : 2B4A736C

  • Alamat : Perumahan Griya Asri Camar A - 18, Kp. Raden RT/RW: 03/07 Kel. Jati Raden Kec. Jati Sampurna Kota Bekasi Jawa Barat KP 17433
  • Klik PETA LOKASI PUTRAPENDAWA
  • Sedia Layanan Antar & bayar di tempat khusus wil Jakarta, Bogor, Depok, Tangerang dan Bekasi (Jabodetabek) dan Sekitarnya
    Terima Jasa Servis / Perbaikan
  •  
    Copyright © 2013. JUAL ALAT MUSIK MARAWIS & REBANA - All Rights Reserved
    Template Created by Mas Template Supported by jual kostum marawis & alat drum band
    Proudly powered by Blogger |