Info Toko Surya62: Modification Blockquote With CSS

Modification Blockquote With CSS

Sahabat Blogger yang berbahagia, kemarin saya telah menyampaikan info tentang "Cara Memodifikasi Blockquote di Artikel" yang selanjutnya akan saya lanjutkan tag blockquote tersebut agar lebih memperjelas, semoga.

Blockquote sebenarnya sudah terpasang pada template tapi mungkin milik Anda belum ? silahkan periksa pada template dengan cara masuk ke Dashbord Blogger >> Rancangan >> Edit HTML >> Expand Widget Template >> cari tag "blockquote", cara mencari jika Anda kesulitan silahkan gunakan keyboard dengan menekan tombol CTRL + F kemudian ketikkan blockquote dan enter. Jika ada maka segera akan ditemukan tag "blockquote" tersebut. Jika belum ada silahkan gunakan modifikasi tag "blockquote" yang saya buat dan Anda dapat menyesuaikan dengan kondisi Blog tentang warna, lebar dan tinggi "blockquote". Cara memasangnya bisa langsung di template seperti yang telah saya uraikan yang lalu tentang "Cara Memodifikasi Blockquote di Artikel".

Apabila ada kesulitan untuk memasang di template Anda silahkan pasang di widget dengan menambah widget dari menu jendela "edit laman" Blogger menu "Rancangan". Berikut ini akan saya tambahkan memodifikasi petikan pada artikel yang kita buat dengan blockquote dengan CSS yang dimodifikasi atau "Modification Blockquote With CSS". Cara memasangnya dapat di template atau di widget atau setiap kita akan posting contohnya (di daftar isi blog surya62). Untuk memasang pada setiap akan posting jika Anda menginginkan perubahan pada setiap memposting, tapi jika Anda menginginkan lebih mudah silahkan tag modifikasi CSS Blockquote ditempatkan pada menu "Setting" >> pilih "format" >> tempatkan semua perihal persiapan yang diperlukan untuk posting di sini yaitu menu "setelan" atau "setting" >> pilih "format. Untuk memudahkan silahkan perhatikan 2 gambar berikut ini pada menu format yang saya masudkan dan perhatikan pada lingkaran gambar ke dua kemudian klik simpan setelan setelah melakukan perubahan pada menu format. Gambar pertama menu bagian atas dan gambar kedua menu bagian bawah.

Sahabat Blogger, Modification Blockquote Articel With CSS yang saya maksud adalah sebagai berikut (sumber : http://imherry.blogdetik.com) tetaplah bersama saya di info toko surya62 yang selalu menemani Anda untuk mengais informasi ilmu dan pengetahuan yang bermanfaat. Berikut ini akan saya tampilkan style css blockquote dan hasil modifikasinya. style CSS blockquote di tempatkan pada widget atau template Nada sedangkan tag modifikasinya dapat ditempatkan pada menu format/setelan dan atau dibuat ketika akan memposting, pilihlah yang terbaik. Anda dapat memodifikasi posting dengan lebih leluasa. Untuk memilih warna dalam blog silahkan ke sini atau cari di daftar menu tentang membuat warna diblog.

Modifikasi 1 :

Berikut ini tag blockquote dengan menggunakan CSS yang indah dan menarik atas olahan dari blogdetik di http://imherry.blogdetik.com, bahkan jika dimodifikasi bisa untuk membuat suatu posting artikel yang tentu menarik sekali hasilnya. Silahkan periksa tag CSS berikut ini tampilan blockquote dengan CSS dan tampilan hasil modifikasi berada dibawahnya :

Adapun cara memodifikasinya sebagai berikut :

<div style="background:#eaf6ed
url(http://i44.tinypic.com/2076aet.jpg)
no-repeat right bottom;
border:#04fc38 solid 1px;
border-left:#04fc38 solid 10px;
width:85%;margin-left:30px;
padding:5px 5px 5px 10px;
color:#000000;"> Masukkan konten petikan
apa saja disini ya...!?</div>

Modifikasi 2 :

Adapun hasil modifikasinya seperti berikut ini :

<div style="background:#f9edf7
url(http://i41.tinypic.com/o6d5hs.jpg)
no-repeat right bottom;width:85%;margin-left:30px;
padding:5px 5px 5px 10px;border:#d301b7 solid 1px;
border-left:#d301b7 solid 10px;color:#000000;">
Masukkan konten kutipan disini saja dan apa saja...!
</div>

Adapun hasil modifikasi halaman daftar isi blog info toko surya62 sebagai berikut:

<div style="background:#f9edf7
url(http://i41.tinypic.com/o6d5hs.jpg)
no-repeat right bottom;width:95%;
margin:0px;padding:5px 5px 5px 10px;
border:#d301b7 solid 1px;
border-left:#d301b7 solid 15px;
color:#000000;">
Masukkan data posting Anda disini...!
</div>

Modifikasi 3

Adapun cara memodifikasinya sebagai berikut :

<div style="background:#f2fbf4
url(http://i41.tinypic.com/35a8ayb.jpg)
no-repeat right bottom;border:#017b19
solid 1px;margin-left:30px;
padding:5px 5px 5px 10px;
color:#04570a;"> Masukkan
konten petikan disini ...!</div>

Modifikasi 4:

Hasil modifikasinya sebagai berikut :

<div style="
background:#e1f2fa
url(http://i42.tinypic.com/21johfa.jpg)
no-repeat left top;
border:#04affe solid 1px;
margin-left:30px;
padding:5px 5px 5px 10px;">
color:#04570a;
Masukkan konten kutipan Anda disini
apa saja...boleh kok !
asal tidak porno!!!
</div>

Modifikasi 5 :

Adapun hasil modifikasinya sebagai berikut :

<div style="
background:#fff
url(http://i40.tinypic.com/erlch4.jpg)
no-repeat left top;
border:#364999 solid 1px;
width:85%;padding:10px 5px 5px 20px;
color:#0066cc;">
Masukkan konten petikan
Anda apa saja disini...!
</div>

Modifikasi 6 :

Adapun hasil modifikasinya sebagai berikut :

<div style="background:#e3f2e2
url(http://i44.tinypic.com/jgo0hg.jpg)
no-repeat left top;
border:#098303 solid 1px;
width:85%;margin-left:30px;
padding:5px 5px 5px 10px;
color:#04570a;">
Masukkan konten kutipan
apa saja yang penting...!
</div>

Catatan :

Sebelum Anda menerapkan semua tag yang akan dipergunakan baik CSS ataupun tag HTM modifikasi agar diedit pada notepad atau worpad Anda dan tag HTML untuk dipadatkan spasinya terutama tag URLnya.

Saya bukanlah ahli CSS untuk itu sebelum Anda melakukan modifikasi agar dipelajari masalah HTML. Marilah kita sama-sama belajar untuk kemajuan bersama, saya sudah action kapan Anda ? saya menunggu komentar Anda !?

Demikian konten info dari saya, semoga dapat memperjelas info saya yang lalu dan dapat memberikan khasanah baru bagi kita sekalian dan manfaat dunia akhirat, aamiiin. Betapa indahnya jika kita selalu berbagi. Berikan komen terbaik Anda disini dan terima kasih atas kunjungannya.