Skip to main content

How to Add Background Color to Sidebar Widget Titles


A reader has requested this tutorial to add background color to sidebar titles. By default, Blogger only allows to change the font & color of sidebar widget titles. So, I'll try to make it as simple as possible & you'll be able to change the background color from the Template Designer.

Can I Apply This Tutorial on Any Template?

Currently, you can apply this tutorial only on 'Simple' Blogger template. If you're using any other Blogger template or custom template, please be careful.
Steps!
  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. Find the following code:
       <Group description="Gadgets" selector="h2">
         <Variable name="widget.title.font" description=
    "Title Font" type="font"default=
    "normal bold 11px Arial, Tahoma, Helvetica, FreeSans, 
    sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, 
    sans-serif"/>
         <Variable name="widget.title.text.color" description="Title Color" 
    type="color" default="#000000" value="#000000"/>
         <Variable name="widget.alternate.text.color" description=
    "Alternate Color" type="color" default="#999999" value="#999999"/>
       </Group>

    REPLACE the above code with the following one:
       <Group description="Gadgets" selector="h2">
         <Variable name="widget.title.
    font" description="Title Font" type=
    "font"default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, 
    sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, 
    sans-serif"/>
         <Variable name="widget.title.text.color" description="Title Color" 
    type="color" default="#000000" value="#000000"/>
         <Variable name="widget.title.bg.color" description=
    "Title Background Color" type="color" default="#999999" value="#999999"/>
       </Group>
  8. After that, find the following code:
    h2 {
      margin: 0 0 1em 0;
    
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: uppercase;
    }

    REPLACE the above code with the following code:
    h2 {
      margin: 0 0 1em 0;
      background: $(widget.title.bg.color);
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: uppercase;
    }
  9. In this step, find this code:
    .widget .zippy {
      color: $(widget.alternate.text.color);
      text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
    }
    REPLACE the above code with the following one:
    .widget .zippy {
      text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
    }

  10. The background color of sidebar widget titles is also applied to the date above posts. So, we need to do a little more coding. Find the following code:
    .date-header span {
      background-color: $(date.header.background.color);
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }

    REPLACE the above code with the following one:
    .date-header span {
      color: $(date.header.color);
      padding: $(date.header.padding);
      letter-spacing: $(date.header.letterspacing);
      margin: $(date.header.margin);
    }
    
    h2.date-header {background:$(date.header.background.color);}

  11. Click Save template and then Close button.

  12. Blogger Save Template Close 
Buttons

Change Widget Title Background Color in Blogger Template Designer

After finishing the tutorial, you can easily change the background from Blogger Template Designer. Open 'Template Designer' & select 'Advanced' from the left. Then select 'Gadgets' and you'll see the option to change background of the sidebar widget titles.
 sumber :
http://versatility-lite-blogger-template.blogspot.com/
http://feeds2.feedburner.com/bloggerfaqs
http://www.betatemplates.com/2012/05/how-check-blogger-template-name.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+BloggerFaqs+%28Blogger+FAQs%29&utm_content=FeedBurner+user+view

Comments

Post a Comment

Popular posts from this blog

Cara mengatur custom template blogger kita

Oke kali ini saya akan mempostingkan caranya mengatur google+ pada blogger kita ...okehlah langkah-langkahnya yaitu : 1. Buka Dulu Blogger login dulu bro lewat blogger seperti biasa yang ingin kamu ikuti contoh blogavel 2.setelah masuk akun blogger kamu selanjutnya kamu klik Template terus klik Customize kayak gambar dibawah ini 3. maka selanjutnya klik Templates lalu pilih jenis templatenya setelah itu klik Apply to blog terus view blog . kayak gambar dibawah ini 4. lalu selanjutnya atur warna backgroung blog kamu ikuti langkah-langkah tanda panah seperti gambar dibawah ini: 5. lalu selanjutnya atur adjust widths dengan cara mengeser scroll horisontal blog kamu ikuti langkah-langkah tanda panah seperti gambar dibawah ini: 6. lalu selanjutnya atur Layout blog kamu ikuti langkah-langkah tanda panah seperti gambar dibawah ini:   7. lalu selanjutnya atur Advanced blog kamu ikuti langkah-langkah tanda panah seperti gambar dibawah ini:

Karlina Supelli

Artikel biografi tokoh yang masih hidup ini tidak memiliki referensi atau sumber. Bantulah untuk menambahkan referensi atau sumber terpercaya. Hal-hal mengenai tokoh yang masih hidup tetapi tidak memiliki referensi atau sumber yang memadai harus segera dihapus. Temukan sumber: (Karlina Supelli – berita, buku, cendekia) Karlina Rohima Supelli atau lebih dikenal sebagai Karlina Supelli (lahir di Jakarta, 15 Januari 1958; umur 54 tahun) adalah salah satu filsuf perempuan Indonesia. Karlina menempuh pendidikan sarjananya di bidang astronomi, ITB. Karlina memiliki minat yang dalam terhadap fisika, matematika dan metafisika. Selain itu ia juga memiliki perhatian akan isu-isu kemanusiaan. Pada 19 Februari 1998, ia memimpin demonstrasi bersama Aktivis Suara Ibu Peduli menuntut turunnya harga susu. Karier akademisinya selanjutnya dicurahkan untuk Ilmu Filsafat. Karlina memperolah gelar Doktor dari Universitas Indonesia dengan Disertasi: Wajah-Wajah Alam Semesta, Suatu Kosmologi Empiris K

Dr. Handrawan Nadesul

Dr. Handrawan Nadesul (lahir di Karawang, Jawa Barat, 31 Desember 1948; umur 63 tahun) adalah seorang dokter, penyair, dan penulis di Indonesia. Ia juga menulis artikel, opini kesehatan, dan menjadi narasumber untuk media  bagi masalah-masalah kesehatan dan juga menulis puisi. Karya-karyanya telah dimuat dan diterbitkan di media massa nasional sejak tahun 1968. Dr. Handrawan menjadi penulis sejak tahun 1972  dan sejak itu banyak menulis artikel opini, kolom di sejumlah media cetak. Lebih dari 1.500 artikel ditulis sampai 2008, 74 judul buku kesehatan, dan seminar kesehatan untuk awam di sejumlah kota besar. Di Bogor pada tahun 1981 dia sempat membentuk Dokter Kecil yang beranggotakan 400-an murid SD yang berprestasi di sekolah masing-masing, dan juga menggerakkan kader Pembangunan Kesehatan Masyarakat Desa (PKMD) di tingkat kelurahan. Ia bercita-cita menulis artikel kesehatan dan buku untuk mencerdaskan rakyat dan mengangkat derajat kesehatan ketika status kesehatan sebagian raky