Advance Numbered Page Navigation ब्लॉगर पर

Numbered Page Navigation विजेट जो कि वर्डप्रेस के लिए उपलब्ध है ब्लॉगर के लिए भी उसकी बहुत माँग है। बहुत से ब्लॉगर के अनुरोध पर मैं एक बिलकुल हल्का CSS बेस्ड Numberred Page Navigation आपको अपने ब्लॉग पर लगाने के लिए दे रहा हूँ। इसको लगाने के लिए आपको अपने ब्लॉग के टेम्पलेट में मामूली बदलाव करने होंगे और तैयार हो जायेगा आपके ब्लॉगर ब्लॉग के लिए Numberred Page Navigation। जिससे आपका ब्लॉग और भी अधिक आकर्षक दिखने लगेगा।

इसे अपने ब्लॉग पर लगाना

1. ब्लॉगर डैशबोर्ड पर जायें
2. परिवर्तन के लिए अपने ब्लॉग को चुनकर Template पर क्लिक करें
3. अब EDIT HTML को चुनकर Proceed पर क्लिक करें
4. ]]></b:skin> की खोज Template में करें और उसके ऊपर नीचे दिया गया यह CSS कोड पेस्ट कर दें। CSS कोड में उचित परिवर्तन करके आप इसे विभिन्न रंगों में प्राप्त कर सकते हैं

/*  techprevue.blogspot.com Page Navigation
---------------------------------------------- */

.showpageArea a {
  text-decoration:underline;
  -moz-border-radius:7px 7px 7px 7px; 
  -webkit-border-radius:7px 7px 7px 7px;
}
.showpageNum a {
  text-decoration:none;
  border: 1px dashed #ffffff;
  margin:0 3px;
  padding:3px;
}
.showpageNum a:hover {
  border: 1px solid #ffffff;
  background-color:#789834;
}
.showpagePoint {
  color:#ffffff;
  text-decoration:none;
  border: 1px solid #ffffff;
  background: #789834;
  margin:0 3px;
  padding:3px;
  -moz-border-radius:7px 7px 7px 7px; 
  -webkit-border-radius:7px 7px 7px 7px;
}
.showpageOf {
  color:#ffffff;
  text-decoration:none;
  padding:3px;
  margin: 0 3px 0 0;
}

.showpage a {
  text-decoration:none;
  border: 1px dashed #ffffff;
  padding:3px;
}
.showpage a:hover {
  text-decoration:none;
  background-color:#789834;
  color:#993000;
}
.showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#ffffff;
}

6. अब Template में </body> की खोज करें और इसके ऊपर यह नीचे दिया गया XML कोड पेस्ट कर दें

<!-- techprevue.blogspot.com Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://sites.google.com/site/techprevue/home/blogger-page-navi.v1.1.js' type='text/javascript'/>
</b:if>
</b:if>
</b:if>
<!-- techprevue.blogspot.com Page Navigation Ends -->

7. और अब अपने Template का प्रिव्यू देखकर यदि कोई error न दिखा रहा हो तो इसे SAVE कर लें
8. यदि आपको नेविगेशन के दौरान अगले पेज पर कम या अधिक पोस्टें प्रदर्शित करनी हैं तो XML कोड में pageCount=5 में 5 को मनचाही संख्या से बदल देना होगा।

नोट. यदि आपके blog पर जावास्क्रिप्ट देर से खुले तो इससे बचने के लिए इसे Download करके ख़ुदके DropBox पर होस्ट कर लें। इसकी अधिक जानकारी के लिए यहाँ क्लिक करें।