Blogger için Footer 4 Sütun Widget Eklentisi

Footer 4 Sütun Widget eklentisi

Blogger eklentilerini yayınlamaya uzun bir aradan sonra paylaşımlara devam ediyoruz. Kullanıcılarının  temalarındaki eksiklerden bir tanesi de  footer alanında ki widgetler dir bu yazımızda  en kolay şekilde bu eklentiyi eklemeyi göstereceğiz.


İlk olarak Kumanda Paneli + Şablon + HTML'yi düzenle kısmından aşağıdaki kodu Ctrl+F yardımı ile bulunuz. 


]]></b:skin>

Aşağıdaki kodu yukarıda ki bulduğunuz kodun bir satır üstüne ekleyiniz.


#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 950px; border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 24%; text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; }

Hemen sonrasında aşağıdaki kodu aaratıp bulun.


</body>  

 Yukarda ki bulduğunuz kodun bi satır üstüne aşağıdaki kodu ekleyiniz.

<div id='lower'><div id='lower-wrapper'> <div id='lowerbar-wrapper'><b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section> </div><div id='lowerbar-wrapper'><b:section class='lowerbar' id='lowerbar2' preferred='yes'> </b:section> </div><div id='lowerbar-wrapper'><b:section class='lowerbar' id='lowerbar3' preferred='yes'> </b:section> </div><div id='lowerbar-wrapper'><b:section class='lowerbar' id='lowerbar4' preferred='yes'> </b:section> </div><div style='clear: both;'/></div></div>

Bütün işlemleri doğru yaptıysanız eksiksiz  eklenti  çalışır vaziyette olacaktır.

Eklentiyi  kurmakta zorluk çekenler için görsel olarak anlatım için video