Cara Memodif Blockquote di Artikel

Cara Memodif Blockquoate di Artikel

Blockquote merupakan cara membuat kutipan dari artikel yang dianggap penting atau memiliki arti tersendiri atau untuk menonjolkan sebuah script agar pembaca dengan mudah mempelajarinya. Pada prakteknya, ada yang menggunakan blockquote secara manual tapi juga ada yang langsung install pada templatnya, terlepas dari itu membuat blockquote yang bagus dan keren akan menarik perhatian dan tentu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat . Biasanya dalam template bawaan blogger sudah disertakan kode blockquote ini, namun jika tidak tersedia anda pun dapat membuat atau menambahkan blockquote secara manual.

Adapun contoh blockquote yang saya maksud seperti dibuat oleh sahabat saya rayhanzhampiet.blogspot.com berikut ini :

Cara membuatnya sebagai berikut :

1. Login ke Blogger Anda;
2. Masuklah ke menu dashboar Blogger Anda;
3. Klik Rancangan >> Edit Template >> Unduh Template untuk backup sebelum mengadakan perubahan;
4. Klik Expan widget template;
5. Carilah kode tag HTML berikut : ]]></b:skin, gunakan keyboard dengan menekan tombol CTRL + F untuk mencarinya;
6. Jika sudah ditemukan, silahkan copy tag HTML berikut ini dan tempatkan tepat diatas tag HTML ]]></b:skin, namun editlah terlebih dahulu di notepad atau wordpad Anda sebelum di pastekan ke template;
7. Simpan perubahan template Anda;
8. Buatlah posting dengan petikan kalimat atau petikan script HTML yang diawali <blockquote> dan diakhiri tanda </blockquote> atau dengan cara memilih kalimat yang akan di tonjolkan/menjadikan perhatian/script HTML dengan mengebloknya dan tekan tombol "Quote" yang ada diatas postingan blogger Anda;
9. Selesai membuat posting, silahkan klik terbitkan;
10. Lihatlah hasilnya.
11. Tag HTML yang dimaksud adalah seperti berikut ini :

.post blockquote {
margin: 1em 3em; padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; } blockquote p { margin: 0; }

Bagaimana cara memodifikasi blockquote tersebut diatas agar bisa tampil seperti blockquote? karena perintah 2 blockquote dalam satu template sulit diterapkan apa lagi pada template saya seperti ini harus memahami HTML 5 sehingga harus menambah ilmu tentang canvas HTML 5, untuk itu dapatlah saya berikan resep untuk memodifikasinya agar posting petikan kita tampil layaknya blockquote, caranya seperti berikut ini dan Anda dapat memodifikasi warna background atau lainnya agar tampil indah sesuai blog Anda, diantara tag div tersebutlah Anda dapat memasukkan konten yang dikehendaki:

<div style="background-color: #f6ebc1;
margin: 1em 3em;padding: .5em 1em;
border-left: 5px solid #fce27c;
color:#000000;">
Silahkan masukkan konten apa saja disini ya....?! bebas kok.... asal jangan porno !
</div>

Selanjutnya dibawah ini akan saya tayangkan beberapa modifikasi blockquote yang mugkin dapat Anda pilih sesuai dengan warna blog atau konten postingan milik Anda, semoga dapat mempercantik penampilan blog Anda.

Modifikasi 1 :

.post blockquote { margin: 10px 10px 10px 20px; padding: 10px 15px 10px 15px; line-height: 1.6em; color: #000000; background: #e0ffff; border: 2px solid #4aa02c; border-left: 20px solid #4aa02c

Hasil modifikasinya seperti berikut ini :

<div style="background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c;
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color:#000000;">
Masukkan konten petikan apa saja disini yang penting halal...!
</div>

Modifikasi 2 :

.post blockquote { background:#c5c5c5
url(http://1.bp.blogspot.com/-f_Bdt0KTjAM/ThGAdX4ICfI/ AAAAAAAAAlg/DJdwW7nkuAE/s320/blockquote.png)
no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}

Hasil modifikasinya seperti berikut ini :

<div style="background:#c5c5c5
url(http://1.bp.blogspot.com/-f_Bdt0KTjAM/ThGAdX4ICfI/
AAAAAAAAAlg/DJdwW7nkuAE/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px; font-style:italic;
margin: 1em 3em;padding: .5em 1em;
border:1px solid #000000;color:#000000;">
Masukkan konten petikan apa saja disini yang penting halal...!
</div>

Modifikasi 3 :

.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background:#ffffff url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png)
no-repeat left top;
border-left: 10px solid #666666;}

Hasil modifikasinya adalah sebagai berikut :

<div style="background:#ffffff url(http://2.bp.blogspot.com/
_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/
s1600/blockquote%2Bpelajaran%2Bblog.png)
no-repeat left top;padding:10px 20px 10px 45px;
font-style:italic;border:1px solid #000000;
color:#000000;">
Masukkan konten petikan apa saja disini yang
penting halal...!<br/></div>

Demikian konten info dari saya kali ini semoga bermanfaat bagi kita sekalian, tetaplah bersama saya di info toko surya62 dengan konten berikutnya.
Wassalamu'alaikum wa Rakhmatullahi wa Barakatuh.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.