Blogger Sidebar Başlıklarını Renklendirme

Merhaba arkadaslar bilirsiniz ki blogger son günlerde hızlı gelisiyor ve yenilikler ortaya cıkıyor. Daha önceden bu blogda kullandığımız eklenti olan rengarenk sidebar baslıkları oldukca ilgi gördü ve isteyenler oldu. Bugün tekarar denemek icin kullandım ve paylasmanın vakti geldi dedim. Ben size hemen ne yapacağınızı anlatayım. birde demosunu alttaki resimden siz bakabilirsiniz. 
                         Demosunu 

gördük simdi yenilenen blogger sablonumuzun anlatımıyla kodları temamıza ekleyelim.
1- Blogger > Sablon > HTML Düzenle
2- CTRL - F Yardımıyla temamızdan <b:skin>...</b:skin> kodunu buluyoruz ve 3 noktaya tıklıyoruz.
3- Karsımıza css kodları gelecek daha sonra asağıdaki verdiğim kodları oraya biryere ekliyoruz.

#HTML1 h2{color:#a5a5a5; border-bottom:2px solid #b3b3b3; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_7gEtjKDfU4_TY305uDaRzStspILOsAbuGK_qDilBdhLYokrW6sJ45yaBaUTdgACojNprCqMqshxDoxcNRuZeEdiB0Ufpn_ypGazYlXjFNe2s-eUmxt5hg-kS4UAUDoQUO258vHjDLGk/s1600/griblok-ilkay.png);}

#HTML2 h2{color:#d278b2; border-bottom:2px solid #d278b2; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjainXYWSUVaENCDCB5PbY7o7htTwcGCicz_X8hAbMl2R67bvQ0QPlZR_WV4cGQM63oaKDHg1yxMIZ80Feu6W30QVYpPZf0Ofz2JzLvpRj9E-guPctgxkB-tG0stjMNQSyJ9CSueBXeW7I/s1600/pembeblok-ilkay.png);}

#HTML3 h2{color:#b6b688; border-bottom:2px solid #b6b688; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13QdD-wDIT_UhaKSz9S1MJE5bMkIrTbCTUJ4Xds_RhAD5yW0Ar96ARUTihwnkcqpUTfKUbFSPMiLrnfjTVq86ObDeAXthb42r7hDFhbr6w4mPuukBVimmG94hTHf6AkFh3ZiYZ0b6Efk/s1600/sariblok-ilkay.png);}

#HTML3 h2{color:#569ab2; border-bottom:2px solid #71b5cd; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC3_Q56ev8nz_Bvu6ILTgYr5tbO5_CrzyRDW9XYSHKz5sJcwwE2T4NJGMWGf9NeQrSAg2yNEjw-eGergCzS0qm6b7NjnIgVlZGDo-Y5Aat0wKT-TId5IbPeaaW48ScIfvMxo9NTe_EIcE/s1600/maviblok-ilkay.png);}

#HTML4 h2{color:#dc9461; border-bottom:2px solid #ecb998; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyNC5sWf0GNbDOKzjKlqTlK4f69oz_KT7OQi9XOV_gQyCvxy5ooso9SbYw16W_lXOro9xY3grt1t0Xb6xGL0xONYIJv6hWAetlcRvzV3MPDzb2trx7gWjbQKChIKnyyFKthz234Jel0To/s1600/turuncublok-ilkay.png);}

#HTML5 h2{color:#999999; border-bottom:2px solid #999999; background-image:url();}.post-content img {background-color:#fff;border:1px solid #ddd;border-radius:3px;margin-top:5px;padding:3px}

Kodlarda gördüğünüz HTML1, HTML2, HTML3 gibi gibi yazan bölümlere ise sidebardaki widgetlerinizin kodlarını ekliyorsunuz, bunu nasıl öğrenirim diyorsanız, Sablon düzenleme bölümünde Widget'a Atlayazıyor oraya tıklayıp öğrenebilirsiniz.