Blog Khusus Membahas Tentang Tutorial, Tips dan Trik Seputar Blog Di BlogspotDotCom


8 Mar 2011

Membuat Blockquote Keren Di Blog

| 8 Mar 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.

Related Posts

16 komentar:

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

    BalasHapus
  2. @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
  3. lagsung di coba....
    makasih bwt infonya....
    sukses selalu.....

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

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

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

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

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

    BalasHapus
  9. 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>