Manipulasi Blockquote Dengan CSS - HP Yitno Manipulasi Blockquote Dengan CSS - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Manipulasi Blockquote Dengan CSS

Cascading Style Sheet - Seolah nggak pernah ada habisnya untuk dibahas. Secara hanya dengan mengetahui perintah dan fungsi css saja, kita sudah bisa berkreasi dengan itu. Contoh sederhananya adalah pembuatan template yang unik namun masih tetap memiliki kecepatan loading yang cepat. Saya yakin template yang seperti ini tidak akan pernah terwujud jika seorang web designer tak mengerti dasar-dasar css.

Tutorial saya kali ini akan membahas bagaimana cara memanipulasi blockquote dengan css supaya tampilannya terlihat indah dan menarik. Blockquote sendiri adalah sebuah kutipan yang berasal dari sumber tertentu dan patut menjadi perhatian para pembaca. Posisinya berada di tengah-tengah artikel dan sedikit menjorok ke dalam. Sekarang ini pemakaiannya tidak hanya sebatas itu saja. Para pembuat tutorial seperti saya juga sering memanfaatkannya sebagai pengganti tag division (mengapit sebuah kode script)

Ada dua metode yang akan saya berikan yaitu dengan merubah template dan tanpa merubah template. Jika memakai teknik merubah template, maka seluruh blockquote yang ada dalam situs kamu akan berubah secara otomatis sesuai kode css yang kalian sisipkan. Jadi sahabat tidak akan kerepotan memasukkan kode css lagi nantinya. Sedangkan jika menggunakan cara kedua, sahabat perlu memasukkan kode css setiap hendak menggunakannya. Kelebihannya adalah kita bisa membuatnya berbeda-beda antara postingan yang satu dengan yang lainnya.

Berikut cara menyisipkan cascading style sheet dalam blockquote:
1. Dengan merubah template
a. Login ke dashboard blogger
b. Pilih template dan klik edit html
c. Cari kode ]]></b:skin> dengan bantuan CTRL+F
d. Masukkan kode css berikut ini tepat diatasnya
blockquote {border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;}
e. Simpan template

Cara penggunaannya:
Silahkan anda membuat postingan seperti biasanya. Kemudian block paragraf yang akan dijadikan blockquote. Setelah itu tekan icon (") yang berada diatas lalu terbitkan postingan.

2. Tanpa merubah template
a. Login ke dashboard blogger
b. Buat artikel seperti biasa
c. Block paragraf yang akan dijadikan blockquote
d. Klik icon (") yang berada diatas
cara mudah membuat blockquote
e. Rubah mode compose ke mode html
f. Sisipkan kode css ini ke dalam tag blockquote.
style="background: white; border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;"
g. Ubah mode html ke mode compose
h. Publish artikel

Keseluruhan kode css kedua akan seperti ini:
<blockquote class="tr_bq" style="background: white; border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;">...</blockquote>

Keterangan CSS:
border-left : 5px solid #D9DDD6  (border sebelah kiri)
font-family : helvetica  (jenis huruf)
font-size    : 14px  (ukuran huruf)
font-style   : italic  (bentuk tulisan miring)
line-height  : 1.4em  (lebar baris)
margin       : 0px  (jarak border dengan garis tepi)
padding     : 0px 5px 0px 10px  (jarak tulisan dengan border)
text-align   : justify  (tulisan rata kanan dan kiri)
background : white  (warna background)

Hasil penggunaan kode css diatas akan tampak seperti ini:
Memperoleh penghasilan lewat blog sebenernya tidak begitu sulit selama kita tahu caranya. Masalahnya tidak semua orang rela membagi ilmunya secara gratis. Tapi disini - saya akan menunjukkan cara-cara menghasilkan uang lewat internet dengan gratis. Caranya dapat anda baca disini.
SHARE :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
15 Komentar untuk "Manipulasi Blockquote Dengan CSS"

Seorang blogger hendaknya perlu mengetahui kode dasar css. Karena secara tidak langsung kita bermain dengannya. Tidak wajib sih, tapi sangat membantu untuk penampilan situs kita.

bisa diganti warna-warni yah, seemakin berwarna lah artikel kita haha :D

jadi lebih keren ya mas, tampilan blockquote nya

klo yg kaya' gini mesti butuh ke-teliti-an

saya jarang menggunakan blockquote mas, nanti akan saya coba mas di blog saya :D

Jadi lebih terlihat bagus blockquote nya mas..lagi nyari-nyari juga yang cocok ini. Masib bawaan template soalnya punya saya

boleh saya coba nanti ya mas .. :)

o..begitu to cara buat blockquote, baru tahu saya..bisa dicoba nih..

Saya lumayan sering pakai blockquote, tapi ya nggak pernah dimacem-macemin. Catet dulu ya mas Yitno. Makasih ilmunya.

blockquote di blog saya kebetulan masih default mas, bisa lah saya ikuti tutorialnya

binguuung..
tapi jarang pake blockquote sih..
wkwk

Betul betul mas ^_^ dimana ada kemauan disitu ada jalan :) betul betul betul?

Coba ah, siapa tahu blockquote gue lebih keren XD

oh , maksudnya ini mempercantik tamilan blockquote ya gan, .
kalo aku milih yang edit template gan . karena cuma sekali untuk selamanya , he he
kalo yag kedua terlalu ribet , .tapi keuntungannya yaitu tampilan blockquote di setiap artikel bisa dibikin berbeda, .
nice share. .

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top