8/13/12

Mengganti Background Blockquote di Blog


Bagi blogger yang kurang puas dengan tampilan blockquote atau kutipan dalam postingan blog atau web bawaannya  atau ingin tampil beda, kita bisa merubahnya dengan mudah kok seperti yang saya lakukan malam ini secara iseng Mengganti Background Blockquote di Blog ini.

Setelah kemarin saya publish postingan , malam ini sepulang taraweh iseng2 saya buka  account google adsense , waah lumayan banyak yang klik. Ini mungkin barokah dari postingan saya minggu lalu tentang  Klik Google Adsense , tambah semangat , langsung buka   ( WLW ) untuk berbagi info lagi dalam tutorial blog tentang  Cara Mengganti Background Blockquote di Blog. Begitu ceritanya soob..

Langsung saja ke Cara Mengganti Background Blockquote di blog adalah sebagai berikut :

  1. Log in ke account sobat di blogger.com, lalu Klik tanda panah dan pilih Template
  2. Ada baiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan, lalu klik Download full template.
  3. Klik tanda x untuk kembali ke menu template
  4. Selanjutnya plih Edit HTML  --> klik Proceed atau Lanjutkan proses
  5. Centang pada Expand Widget Templates
  6. Cari kode .post blockquote {  untuk memudahkan mencarinya gunakan Ctrl +F
  7. Saya tidak tahu dalam blog sobat, tapi dalam blog ini tampilannya seperti ini :

Model 1 :  (Kode asli bawaan template )

.post blockquote {
background: #E8E8E8;
    margin: 0 25px 15px;
    padding: 10px 20px 0 15px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}


Tampilannya seperti ini :Model 2 ( Warna background diganti plus  ditambah fungsi scroll ), kodenya jadi seperti ini

.post blockquote{overflow:auto;
max-height:200px; width:85%;
margin-left:30px;
   padding:5px 5px 5px 10px;
background:#e0ffff;
border:#017b19 solid 1px;
   border-left:#f906fc solid 10px;
}

Tampilannya seperti ini :

Model 3 ( Dengan fungsi scroll plus background gambar )

.post blockquote { overflow:auto;
max-height:200px; width:85%;
   margin-left:30px;
   padding:5px 5px 5px 10px;
   background:#f2fbf4 url(https://sites.google.com/site/saungwebsite/js/Blockquote%20bg.jpg) no-repeat right bottom;
   border:#017b19 solid 1px;
   border-left:#f906fc solid 10px;

Tampilannya seperti ini :  

Model 4 : L:ink gambarnya :  https://sites.google.com/site/saungwebsite/js/saungBg01.jpg

Perhatikan kode diatas :

  1. overflow:auto; max-height:200px; width:85%;  Ini adalah fungsi scroll, silahkan sesuaikan height dan widthnya sesuai selera
  2. background:#f2fbf4  : Background warna dari blockquote, silahkan ganti warnanya sesuai selera
  3. url(https://sites.google.com/site/saungwebsite/js/Blockquote%20bg.jpg) ; Link gambar
  4. border-left:#f906fc  : Warna dari border sebelah kiri

demikian yang saya lakukan dalam Mengganti Background Blockquote di Blog.ini. Selamat mencoba semoga sukses.


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Mengganti Background Blockquote di Blog, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

51 comments:

  1. makasih sharingnya y mas... kebetulan saya lagi mau ganti backgroun nih...

    ReplyDelete
  2. aikh,,tampilannya jadi manis yah,hehehe
    oya cara membuat menu navigasi horizontal yang ad sub menunya kaya agan itu gimana?

    ReplyDelete
  3. makasih banyak atas semua info nya gan,,,,,,,,

    ReplyDelete
  4. Sebelumnya, saya mohon izin berkomentar, saya tidak ingin jujur tentang komentar saya, karena sebenarnya saya ingin berkomentar kalo artikelnya sangat bagus .... semangat dan tingkatkan terus ya..
    :)

    ReplyDelete
  5. Mantap,, rate terbaik dah buat blog nya , terutama buat postingan yang ini ...
    salam blogger.

    ReplyDelete
  6. Halah lupa blog yang satunya belum diganti bg nya nih..

    ReplyDelete
  7. saya belom pernah nyoba yang beginian,,,thanks ya atas tutorialnya

    ReplyDelete
  8. Wah lupa nih belum pasang backgroung kayak gini

    ReplyDelete
  9. mantep nih gan infonya
    langsung aja saya coba ya

    ReplyDelete
  10. wish,,,namabah ilmu baru deh hari ini,,,, trims,,,

    ReplyDelete
  11. Salam.. kunjungan pertama soree salam kenal semua

    ReplyDelete
  12. awesome gan bermanfaat banget ini ilmunya

    ReplyDelete
  13. wah mantap banget nih, tips nya. sangat bermanfaat mas. patut di coba nih. :)

    ReplyDelete
  14. ooo.... begini caranya...
    siip deh.. akhirnya tau juga.. hihi
    makasih ya... :D

    ReplyDelete
  15. makasih ya shringnya.. sangat bermanfaat bagi saya yang masih newbie,,

    ReplyDelete
  16. makasih tips dan triknya, sangat berguna dan memecaah masalah nih buat aku,

    ReplyDelete
  17. thx infonya, saya sudah terapkan ke blog saya. Jika berminat, kunjungi balik ke
    http://jonarendra.blogspot.com

    ReplyDelete
  18. Memang yang namanya modif-modif tampilan blog itu gampang sekali kalau kita tau CSS dan HTML. Seppph!!

    ReplyDelete
  19. langsung dipraktekkin.



    Kunbal ya sob ke gubukku

    ReplyDelete
  20. @FREE DOWNLOAD SEDUCE ME AND OTHER SEX GAMES ADULT 18+ FOR PC FULL VERSION LATEST VERSION COMPRESSED 18+ DOWNLOAD FROM HERE-->>>> www.icoregames.blogspot.com

    ReplyDelete
  21. makasih info cara mengganti backgroundnya... yang ingin kami tanyakan bagaimana cara mengganti blogspot.com jadi blogspot.de, semoga terjawab. maksih

    ReplyDelete
  22. makasih info cara mengganti backgroundnya... yang ingin kami tanyakan bagaimana cara mengganti blogspot.com jadi blogspot.de, semoga terjawab. maksih

    ReplyDelete
  23. makasih info cara mengganti backgroundnya... yang ingin kami tanyakan bagaimana cara mengganti blogspot.com jadi blogspot.de, semoga terjawab. maksih

    ReplyDelete
  24. mantep masbroo infonya keren banget... maksih banyak nih.

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger