Pages

Monday, 10 September 2012

How to add columns to your blogger footer?

हामिले अर्थ शास्त्र मा पढेको हुनु पर्छ मानिस को इक्षा तथा चाहना असिमित हुन्छ तर पुरा गर्ने श्रोत तथा साधन चाही सिमित छ तर यो भ नाइ अन्य कुरा हरुमा मात्र लाग्दछ Internetमा हैन किनकी यस्मा अशिमित भन्डार छ । हाम्रो दैनिकी बनेको छ ईन्टरनेट ,फेसबूक , Twitter,ब्लगगिङ  तसर्थ ईन्टरनेट मा खोज्ने हो भने हराको बाउ पनि पनि भेट्न सकिन्छ । आज को यस पोस्ट पनि यस्ती छ किनकी हामी सबै ब्लगर को लागी के हि भिन्न गर्ने सोच त हुन्छ नै तर इख्सा पनि असिमित नै हुन्छ मैले आज तेही असिमित इक्षा बाट एउटा इक्षा पुरा गर्न सक्छु कि भन्ने लागेको छ । आज को यस पोस्ट मा तपाइ ले अरुको टेम्प्लते प्रयोग गर्नु भएको छ भने Fixed colum हुने गर्छ र तपाइले थप घट गर्न सक्नु हुन्न तर आज म Footer भन्दा तल ३ कोलुम राख्न सक्ने उपायअ bataaun  जादै छु साधरान तरिका ले तपाइले ३ Colum लाई राख्न सक्नु हुन्छ ।
यस्को मैले प्रयोग गरी सकेको भएर मात्र मैले शेयर गर्दै छु हेर्नुहोस ।
How to add a three column footer widget to your blogger template?

सधै झै पहिले आफ्नो Template को ब्यक अप लिनु होस यदी थाहा छैन भने यो पोस्ट हेर्नुहोस 
1. पहिले लागिन गर्नु होस तपाइ को ब्लगर मा
2. त्यस पछी नया मा हुनु हुन्छ भने Drop down मेनु बाट टेम्प्लेट हुँदै Edit HTML मा क्लिक गर्नुहोस यदी पुरानै Older Interface मा हुनु हुन्छ भने Dashboard हुँदै HTML  एडिट सम्म पुग्नु होस   /
4.  ]]></b:skin> कोड भेटाउनुहोस जस्को लागी Ctrl + F क्लिक गरी त्यो कोड लाई कपी गरे पेस्ट गर्नुहोस । यदी भेट्टाउन सक्नु भएन भने  Expand Widget Template मा टिक लगाउनुहोस अनि फेरी खोज्नु होस
5.यो ]]></b:skin> Tag भन्दा तल यो कोड राख्नु होस

 /* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;        width: 32%;        text-align: justify;
       font-size:100%;
       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;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}
6. यती राखी सक्नु भए पछी अब फेरी यो </body> Tag भेट्नु होस तपाइ को टेम्प्लेट मा  /
7. यो </body> Tag भन्दा तल यो कोड राख्नु होस /

 <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 style='clear: both;'/>
</div> </div>
अब तपाइले Template लाई सेभ गर्नु भन्दा अगाडी हेर्नुहोस Preview देख्नु हुनेछ अथवा Direct सेभ नै गर्दा पनि हुन्छ । 
यस को Credit  म यस लाई दिन चाहन्छु http://bigfatreality.blogspot.com
Thank you ...

3 comments:

  1. tapaile bhane jastee garda mero blog ma ta bhayar yar ke bha ko www.newsdhading.blogspot.com

    ReplyDelete
  2. ... tapaaile rakhi saknu bhaye pachhi blog ko layout maa jaanu hos ani tes maa ke ke raakhnu hunchh add garnu hos feri tapaai ko maa ta chha Footer Tab haru ek choTi hernu hos

    ReplyDelete
  3. And Janamukti marga hernuhos maile demo blog maa rakheko chhu and it success
    http://demo-samjhanakophool.blogspot.com/ tal colum dekhiyeko chha white hernuholaa

    ReplyDelete

यदी कुनै समस्या भए हामिलाई पठाउनुहोस

By Comment