Number Page Navigation Widget Add kare Blogger Blog me

Hello Blogger jese ki aap jante hi hoge mene blogger ki bhut si jankari share ki hai HMH.pe jo aap www.HMH.pe/Blogger par dekh sakte ho.

Blogger par blog banane ke baad ham uspe badiya post dalte hai or hamara maksad hot ahai ki jada se jada log hamare blog ko chalaye..

Hamare blog ka Design bhut hi mhatpun Hissa hai kisi visitor ko apne blog par banaye rakhne me.. BLog ka Design Responsive hona chaiye or usme jaru widget bhi add hona chaiye.. Agar koi Visitor hamare blog par aaye or usko jo bhi post padna ho wopad sake uski pasand ki uske liye Labels use kare, Search Box use kare, Popupar, Recent Post widget bhi use kare..

Ham Blog me bhale kitni hi badiya post likh kar dalde, par uska navigation aesa hona chaiye ki koi bhi usko aasani se chala sake or apne kaam ki post pad sake..

Pade:Badiya Post likhne ke 5 tarike

jese ki aapko pata hi hoga post ki koi limit nahi hai ham kisi bhi post publish kar sakte hai, par agar kisi ko hamare blog ki koi purani post padni ho to usko usko piche ke page me jane ke liye ham Number Page Navogation add karke usko aasan kar sakte hai.

Number Page Navigation ki madad se hamare blog ki post ke page ki list aajati hai, par agar ham isko use nahi karte to purani post ko padne ke liye ek-ek page piche jana hoga jo ek sahi upai nahi hai.. TO Chaliye Dekhte hai kaise Number Page Navigation ko add kare apne blog me.

[alert-announce]ye jo Number Page Navigation Widget hai ye ho sakta hai aapke blog me add ho agar aapne koi Custom Template use kiya hai apne blog me. Agar aap blogger ke basic template use karte hai to aap isko add ka.[/alert-announce]

Blogger Blog me Number Page Navigation Widget add kare

Is Widget ko apne blog me add karne ke liye hame 2 chije add karni hai

1. CSS Code add karna hai blog me
2. ek Script hai usko add karna hai template me

Note: Code ko apne Template me add karne ke phele apne template ka Backup jarur lele, agar kahi koi galti ho jati hai to aap pir se apna purana template use kar sakte hai.

CSS Code kaise add kare Blogger me

CSS Code kaise add karte hai blog me uske bare me phele hi bata chuka hu.. jaanne ke liye pade 3 taike CSS Code blogger me add karne ke.

abhi me short me bata deta hu –

Blogger Deshboard >> Template >> Edit Template >> ab CSS Code ko ]]></b:skin> ke upar dale.

Aapko jis style me apne blog me Navigation widget add karna hai uska code copy kare.

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Note: Agar aap “First” or “Last” option ko nahi dikhana chaite to ye CSS Code bhi add kare.

.firstpage, .lastpage {display: none;}

Ab CSS ka kaam to pura huaa, ab Script add karna hai.

Number Page Navigation ki script add kare

Is Script ko Template me hi add karna hai, to Template ko editor me kholne ke baad Ctrl+F daba kar </body> search kare template me.

ab Code ke upar is code ko daal kar save kare

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText =’First’;
var lastText =’Last’;
var prevText =’« Previous’;
var nextText =’Next »’;
var urlactivepage=location.href;
var home_page=”/”;
/*]]>*/
</script>
<script src=”http://hindimehelp.com/tools/WidgetCodes/page-navigation.js”/>
</b:if>
</b:if>

Is Code ko template me dalne ke baad template save karde..

Aap Chahe to is code ko edit karke apne hisab se set kar sakte hai.

Jo Script ka code hai usme ye code bhi hai

perPage: 7,
numPages: 6,
var firstText =’First‘;
var lastText =’Last‘;
var prevText =’« Previous‘;
var nextText =’Next »‘;
}

1. perPage: 7: hai uski jagha aap ek page me kitni post dikhana chate hai wo set kar sakte hai.
2. numPages: 6: Number Page Navigation Widget hai usme Number dikhte hai dusre page par jane ke liye.. abhi jo is code me set hai wo 6 hai. aap isko apne hisab se kam jada kar sakte hai.
3. ‘First‘, ‘Last‘, ‘« Previous‘, ‘Next »‘ ye jo sabd hai inki jagha aap chahe to apni pasand ke sand dal sakte hai.. Hindi me bhi.

is trha aap is widget ko apne hisab se bhi set kar sakte hai, agar isme kahi koi dikkat aati hai to comment karke aap bata sakte hai..

Ab hamare blog par agar koi aayega to wo number navigation ki madad se aasani se hamare blog ko use kar sakega..

Ye Bhi Pade: Blogspot ki Security badaye HTTPS se

Labels Post

Agar koi labels par click karke hamare blog ki post dekh raha hai to ek page par 20 post dikhegi, usko set karne ke liye ye code add kare apne template me.

Sabse Phele apne template me ye code search kare

expr:href=’data:label.url’

ab is code ki jagha niche ka code dale

expr:href=’data:label.url + “?&amp;max-results=7″‘

isme ek page par post ka number 7 hai aap isko change kar sakte hai.

Script Source: Helplogger

Ummid hai dosto aapko ye jankari upyogi lagi hogi, blogger se sambandit koi bhi sabal ho to aap comment karke puch sakte hai or blogger ki or jankari ke liye yaha click kare

Ye Post bhi pade:

• Blog ki Traffic kaise badaye
• Facebook se apne blog ki traffic kaise badaye
• Blogger Post Editor ki puri jankari