blog me 3 Column Footer Widget Kaise Jode

आपने शायद कई पेशेवर या व्यावसायिक ब्लॉगों में तीन COLUM FOOTER WIDGET देखे होंगे। जहां आप GADGET जोड़ सकते हैं उदाहरण के रूप में मेरे तीन स्तंभ पादलेख लें Footer लेख आगंतुकों को व्यस्त बनाते हैं और अपने ब्लॉग के अंत में उसे एक अच्छा प्रभाव देते हैं। इसमें 3 कॉलम widget शामिल हैं, जहां आप  widget की अपनी पसंद जोड़ सकते हैं। आप आसानी से तीन कॉलम फूटर widget कर सकते हैं और इसे इच्छित रूप में अनुकूलित कर सकते हैं। यदि आप थीसिस में Footer widget को जोड़ने के लिए इस ट्यूटोरियल की जांच की तुलना में blogspot का उपयोग कर रहे हैं। एक स्क्रीनशॉट देखें

निम्नलिखित FOOTER लेख जोड़ने से पहले अपने टेम्पलेट का बैकअप लें Column Footer Widget

ब्लॉगर में तीन Column Footer Widget कैसे जोड़ें 

 3 Column Footer Widget जोड़ने के लिए, इन चरणों का पालन करें

Step 1:

       Go to Blogger Dashboard >> Design >>Edit Html

Step 2:

         Backup Your Template

Step 3:

सर्च करें यह CSS कोड */]]></b:skin>

*/]]></b:skin>

 और नीचे दिए गए कोड को  */]]></b:skin>
  के ऊपर  पेस्ट करें 

#lower {
border-top: #737373 6px solid;
margin:auto;
font-family: Georgia;
width: 960px;
padding: 0px 0px 10px 0px;
background:#1f1f1f;
}
#lower a {
color: #DBDBDB;
font-family: Georgia;
}
#lower-wrapper {
margin:auto;
font-family: Georgia;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
background:#1f1f1f;
float: left;
color: #ebedee;
font-family: Georgia;
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:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: 265px;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 11px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}

Step 4:

अब   </body>  की खोज करें 

 </body>

 और नीचे दिए गए कोड को ( </body>)नीचे पेस्ट करे

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='HTML12' locked='false' title='Testing' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML5' locked='false' title='Recent Comments' type='HTML'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Top Commentators @ AmmarWeb.Tk' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Our Partners' type='HTML'/>
</b:section>
</div>

<div style='clear: both;'/></div></div>

Step 5:

अपना टेम्पलेट सहेजें अब पृष्ठ Layout > Page Elements और Widget जोड़ने शुरू करें! : :>>

Customization

आप इस पाद लेख Widget के रूप और रंगों को आसानी से अनुकूलित कर सकते हैं। मैंने ऊपर दिए गए सीएसएस कोड में महत्वपूर्ण भागों को बोल्ड किया है। अपने Three Column Footer Widget को बेहतर ढंग से व्यवस्थित करने के लिए नीचे दिए गए विवरण को ध्यान से पढ़ें।

• background: #1f1f1f; छह अंक का रंग कोड बदलने से इस विजेट का background रंग बदल जाएगा।
• width: 960px; यह विजेट की चौड़ाई है यदि आप चाहते हैं कि आप अपने ब्लॉग की चौड़ाई के अनुसार इस चौड़ाई मान समायोजित कर सकते हैं।
• background:#fff; और width: 32%; पृष्ठभूमि का रंग और तीन कॉलम की चौड़ाई है जहां विजेट जोड़ दिए जाते हैं।
• रंग: # 0084ce; यह शीर्षक शीर्षक का रंग है
• font: bold 14px Arial, Tahoma, Verdana;  फ़ॉन्ट आकार और परिवार को बदलने के लिए इसे संपादित करें
• border-bottom:3px solid #0084ce; शीर्षक शीर्षक के निचले भाग पर दिखाई देने वाली सीमा की मोटाई, शैली और रंग बदलने के लिए इसे संपादित करें

बस इतना ही

चार कॉलम पिक्टर पर एक नया ट्यूटोरियल जल्द ही इस पोस्ट का आनंद लेने के लिए पोस्ट किया जाएगा। अब तीन स्तंभ पाद विजेट जोड़ा गया है!