Membuat Blockquote Keren Di Blog

Viyan Pradita Selasa, Maret 08, 2011

Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar


Contoh tampilannya seperti di bawah ini :
Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :
  • Login ke akun Blogger Sobat
  • Masuk Tata Letak
  • Edit HTML
  • Beri centang pada "Expand template widget"
  • BackUp template sobat dulu, dengan cara klik "download template lengkap"
  • Cari kode Berikut : .post blockquote {
  • Berilah imbuhan, sehingga kodenya jadi seperti berikut :
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}
  • Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat.

Ditulis Oleh :

Artikel Membuat Blockquote Keren Di Blog ini dipublish pada hari: Selasa, Maret 08, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

19 komentar
Terjun Ke Kolom Komentar

  1. koq g ada di template qw y???

    BalasHapus
  2. Biasanya kode dibedakan pada "." dan "#" kalau tidak cari aja kata "blockquote"

    BalasHapus
  3. @Leo Onix: Silahkan sob, oia untuk hasilnya saya rasa lebih menarik dan bagus, coz ne teamplate baru aq ganti. tp untuk script blockquote masih tetep. Thanks

    BalasHapus
  4. lagsung di coba....
    makasih bwt infonya....
    sukses selalu.....

    BalasHapus
  5. @Samuel Harlas Yoga W: Ok, makasih sob, salam kenal :)

    BalasHapus
  6. wah ternyata postingny kak viyan, ad yg kayak gini yah. ane cari kmana2 haha;))

    BalasHapus
  7. nice ..
    http://begiloguide.blogspot.com/

    BalasHapus
  8. keren infonya bang..
    mampir2 ya bang..

    BalasHapus
  9. keren gan
    mampir gan http://kehin.blogspot.com/

    BalasHapus
  10. wuih ...
    keren kang, mantab

    BalasHapus
  11. makasih tutorialnya :D,ini yg ane cari gan

    BalasHapus
  12. wah makasih sob infonya bagus dan mantap...ane coba pasaang ah..semoga berhassil

    BalasHapus
  13. Wow kereenn... Makasih tutorialnya sob! :-bd

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers