Seberapa sering anda dalam sehari mengunjungi blog atau bahasa kerennya blogwalking. Dan pernahkan anda melihat blog dengan tampilan cantik berupa artikel yang dikombinasikan warna-warna tertentu dalam bentuk kotak di halaman postingan. Jika anda belum tahu itu dinamakan blockquote yaitu penggalan kata/kalimat yang memiliki makna khusus bisa juga berupa script.
Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus. Namun pada prakteknya, ada juga yang menggunakan blockquote untuk menuliskan tag HTML, kode CSS atau script pada artikel-artikel tips blogging. Membuat blockquote yang bagus dan keren tentu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat . Biasanya dalam tiap template bawaan blogger sudah disertakan kode blockquote ini, namun jika tidak tersedia anda pun dapat membuat atau menambahkan blockquote secara manual. Saya pun sudah memodifikasi blockquote yang ada pada template Thesis ini, dan contoh tampilannya dapat sobat lihat pada postingan saya sebelum ini Kamus Istilah Blogger Yang Wajib Dibaca.
Letak kode blockquote dalam template biasanya ditandai dengan kode .post blockquote { atau kode .post-body blockquote {. Dibawah ini ada beberapa contoh blockquote berikut kode css-nya yang dapat sobat tempatkan pada template blog anda.
Kode blockquote 1 :
.post blockquote {
margin: 1em 3em; padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; } blockquote p { margin: 0; }
Kode blockquote 2 :
.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
}
Kode blockquote 3 :
.post blockquote { background:#c5c5c5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSyWQjnVyUq4yo1dlvQdzW6AFMA_1AsManEzfol2sd7RncNSKkTywbpxhHKj5fUk5Ki-jxupxldiOgiDkXkNELoIgIecKU7h-k6bEMHu-yEHLCpCOhP2ShdEakW58ox-bGbhp8Ud8hxHq/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}
Kode blockquote 4 :
.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: 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;
Kode blockquote 5 :
.post blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapizpJAANistse7R1QxdGVW3Eu-XycOZHUJ788dOnvhr4IRzBsuA7-UO2CZ0hjiw6Wd0kr4n14c8nmpuMXJIdyjxxO7Ax4nEOjCBaGeXhjaYecRhvlnkdQ9CEF5E1Ame9nmbPI6Xf_Vo/s1600/comma-side-orange1.gif) ;
background-position:; background-repeat:repeat-y;
margin: 0 20px; padding: 20px 20px 10px 45px;
font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; }
.post blockquote p { margin: 0; padding-top: 10px; }
Cara menambahkan blockquote pada template adalah sebagai berikut :
1. Login pada dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode ]]></b:skin> pada template anda.
4. Copy kode css blockquote diatas dan paste tepat diatas kode ]]></b:skin>.
5. Save template anda.
Untuk cara membuat blockquote pada postingan sangat mudah, cara manualnya adalah teks yang dikutip harus diapit dengan kode blockquote pembuka <blockquote> dan kode blockquote penutup </blockquote>. Trus kalo mau yang otomatis, pada saat berada dalam panel postingan blogger tinggal diblok saja teks yang mau dijadikan blockquote kemudian klik simbol quotation atau tanda petik, maka teks yang dijadikan blockquote akan di-indentasi (menjorok kedalam) secara otomatis.
Nah dari beberapa contoh blockquote tadi, sobat pun dapat mencoba berkreasi dengan merubah warna background, jenis huruf atau mungkin sobat ingin membuat background gambar sendiri ? Boleh saja, karena dengan mencoba-coba sendiri akan membuat pemahaman kita jadi lebih mantap lagi. Semoga tips cara membuat blockquote ini bermanfaat dan selamat mencoba.
Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus. Namun pada prakteknya, ada juga yang menggunakan blockquote untuk menuliskan tag HTML, kode CSS atau script pada artikel-artikel tips blogging. Membuat blockquote yang bagus dan keren tentu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat . Biasanya dalam tiap template bawaan blogger sudah disertakan kode blockquote ini, namun jika tidak tersedia anda pun dapat membuat atau menambahkan blockquote secara manual. Saya pun sudah memodifikasi blockquote yang ada pada template Thesis ini, dan contoh tampilannya dapat sobat lihat pada postingan saya sebelum ini Kamus Istilah Blogger Yang Wajib Dibaca.
Letak kode blockquote dalam template biasanya ditandai dengan kode .post blockquote { atau kode .post-body blockquote {. Dibawah ini ada beberapa contoh blockquote berikut kode css-nya yang dapat sobat tempatkan pada template blog anda.
Kode blockquote 1 :
.post blockquote {
margin: 1em 3em; padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; } blockquote p { margin: 0; }
Kode blockquote 2 :
.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
}
Kode blockquote 3 :
.post blockquote { background:#c5c5c5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSyWQjnVyUq4yo1dlvQdzW6AFMA_1AsManEzfol2sd7RncNSKkTywbpxhHKj5fUk5Ki-jxupxldiOgiDkXkNELoIgIecKU7h-k6bEMHu-yEHLCpCOhP2ShdEakW58ox-bGbhp8Ud8hxHq/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}
Kode blockquote 4 :
.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: 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;
Kode blockquote 5 :
.post blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapizpJAANistse7R1QxdGVW3Eu-XycOZHUJ788dOnvhr4IRzBsuA7-UO2CZ0hjiw6Wd0kr4n14c8nmpuMXJIdyjxxO7Ax4nEOjCBaGeXhjaYecRhvlnkdQ9CEF5E1Ame9nmbPI6Xf_Vo/s1600/comma-side-orange1.gif) ;
background-position:; background-repeat:repeat-y;
margin: 0 20px; padding: 20px 20px 10px 45px;
font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; }
.post blockquote p { margin: 0; padding-top: 10px; }
Cara menambahkan blockquote pada template adalah sebagai berikut :
1. Login pada dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode ]]></b:skin> pada template anda.
4. Copy kode css blockquote diatas dan paste tepat diatas kode ]]></b:skin>.
5. Save template anda.
Untuk cara membuat blockquote pada postingan sangat mudah, cara manualnya adalah teks yang dikutip harus diapit dengan kode blockquote pembuka <blockquote> dan kode blockquote penutup </blockquote>. Trus kalo mau yang otomatis, pada saat berada dalam panel postingan blogger tinggal diblok saja teks yang mau dijadikan blockquote kemudian klik simbol quotation atau tanda petik, maka teks yang dijadikan blockquote akan di-indentasi (menjorok kedalam) secara otomatis.
Nah dari beberapa contoh blockquote tadi, sobat pun dapat mencoba berkreasi dengan merubah warna background, jenis huruf atau mungkin sobat ingin membuat background gambar sendiri ? Boleh saja, karena dengan mencoba-coba sendiri akan membuat pemahaman kita jadi lebih mantap lagi. Semoga tips cara membuat blockquote ini bermanfaat dan selamat mencoba.
Dapatkan berbagai informasi menarik dengan mengunjungi link yang ada dalam blog ini mulai dari bisnis online, lowongan kerja, tips blogging dll. Pilih berdasarkan kategori yang anda minati lalu masukkan kata kuncinya dan klik cari informasi sekarang
Blog ini tidak memiliki kerja sama dengan pihak manapun semua hasil yang didapatkan berasal dari kerja keras penulis mengoptimalkan blog secara berkala. Anda bisa siapapun juga bisa asal ada usaha
Kekayaan sesungguhnya adalah ilmu yang terus di kembangkan tidak pernah bosan belajar hal baru terlebih ilmu itu bermanfaat bagi orang lain. Percayalah ilmu yang anda bagi kepada mereka sampai kapanpun tidak pernah berkurang justru semakin bertambah.
Tidak ada komentar:
Posting Komentar