সরাসরি প্রধান সামগ্রীতে চলে যান

How to Add Page Navigation Widget For Blogger

Today's we provide you trick to add page navigation widget for your blogger blog. Blogger default navigation shows Older Posts and Newer Posts, many blogger want to change this into numbered Navigation. We provide you step by step guide of how to add page navigation widget in place of blogger old navigation. Older navigation is very difficult for user to navigate deeper into your blog posts so we provide you solution to change this.

Page Navigation Widget

How to Add Page Navigation Widget For Blogger

Follow below steps to How to Add Page Navigation Widget For Blogger:

Step 1

Log in into Blogger Dashboard

Step 2

Go to Layout and click on Add a Gadget link as show in below picture.

Page Navigation Widget

Step 3

Select HTML/JavaScript from list as shown in below picture.

Page Navigation Widget widget

Step 4

Choose your style and Copy/Paste below code into box:

Style 1

How to Add Page Navigation Widget For Blogger

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: #316C55;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: #F76A0C;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}.showpageOf{background: #316C55;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
</div>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/haakblog" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><script type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js' type='text/javascript'></script>

Style 2

How to Add Page Navigation Widget For Blogger

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: red;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: #000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}.showpageOf{background: red;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/haakblog" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></div><script type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js' type='text/javascript'></script>

Style 3 

How to Add Page Navigation Widget For Blogger

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: #666;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: #000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}.showpageOf{background: #666;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/haakblog" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></div><script type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js' type='text/javascript'></script>

Style 4

How to Add Page Navigation Widget For Blogger

<style>#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: #17D449;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: #000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}.showpageOf{background: #17D449;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/haakblog" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></div><script type='text/javascript'>var postperpage=7;var numshowpage=6;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js' type='text/javascript'></script>
If you have any question or update than you can contact with us any time at our E-mail support. I am always ready for fixing your css/HTML issues, For personalized help, you can HIRE ME
লেবেলসমূহ:

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন

এই ব্লগটি থেকে জনপ্রিয় পোস্টগুলি

Windows 7 & 8 এ নিন Windows 9 এর স্বাদ !!!

আজ আমি আপনারদেরকে এমন একটা সফটওয়্যার / স্কিন প্যাক এর সাথে পরিচয় করিয়ে দিব, যা আপনাদের সবারই খুব ভাল লাগবে আমি আশা করি । আমরা জানি  Windows 9 আসতে এখনো অনেক বাকি । তাই বলে কি আমরা তার স্বাদ আগে থাকেই পেতেপারি না ? যারা  Windows 7 & 8 ব্যবহার করতে করতে ক্লান্ত তাদের অবশই ভাল লাগবে । এই সফটওয়্যার টিতে Windows 9 এর সব ফিসারই পাবেন । তাহলে এর দেরি কেন, ডাউনলোড করুন আর মজা নিন !!! Windows 9 Skin Pack Here is Windows 9 , hope you like this concept and enjoy it, have fun!  Transform  Windows 8 and 7  to Windows 9 Win8:   Download Win7:  Download যারা ডাউনলোড করতে পারছেন না, তারা নিচের ছবি টি দেখুন । ধন্যবাদ ! 
৫টি মন্তব্য
আরও পড়ুন

Nokia XL এর Hands on Review

নকিয়া এনেছে একসাথে তিন মডেলের এন্ড্রয়েড। Nokia X , Nokia X+ এবং  Nokia XL এই তিনটার মধ্যে তুলনামুলক ভাবে ভাল ফিচার ও দাম হল Nokia XL এর। প্রথম বারের মত নির্ধারন করা হয়েছে ১২,৯০০ টাকা। Nokia মুলত এই ফোন গুলোকে সম্পুর্ন এন্ড্রয়েড অপারেটিং সিস্টেম বেসড করে তৈরী করে নি। Android 4.1.2 jelly bean অপারেটিং সিস্টেমের ওপেনসোর্স ভার্সন টি ব্যবহার করেছে। Nokia এই ভার্সন টির কাস্টমাইজড ভার্সন ব্যবহার করেছে Nokia XL এ। তারা এর নাম দিয়েছে Nokia X software platform 1.0 এন্ড্রয়েড ৪.১.২ জেলীবিন এর ওপেনসোর্স ভার্সন টিকে যথেষ্ট কাস্টমাইজ করে এখানে Windows phone ইউজার ইন্টারফেস দেয়া হয়েছে। তাই Nokia XL কে প্রাথমিক ভাবে Windows phone এর ইন্টারফেস এ দেখা যায়। ইউজার ইন্টারফেস Windows phone এর মত হলেও এটি আসলে Android operating system চালিত। এখানে GO Launcher অ্যাপ টি ব্যবহার করে একে Windows phone ইউজার ইন্টারফেস এর বদলে/পাশাপাশি Android এর ইউজার ইন্টারফেস পাওয়া যাবে। আমি ব্যাক্তিগত ভাবে Android operating system এর সাথে খুব বেশি পরিচিত নই। তাই এটি সকল এন্ড্রয়েড ফিচার সাপো...
৩টি মন্তব্য
আরও পড়ুন
Create Bootable USB Pen Drive for Windows 7/8/8.1 or 10 In Bangla I hope you will like this video. Please hit the like button, leave a comment below and share this video with your friends so that they can also learn how to create bootable USB pen drive. Subscribe to My Channel: https://www.youtube.com/channel/UCX0mi5jl_Ro0yO1Z1gzKd2Q Follow Me On: Facebook: https://www.facebook.com/manoshfx Google plus: https://plus.google.com/u/1/111805421577699473348 Twitter: https://twitter.com/manoshfx Instagram: https://www.instagram.com/manosh_mallick Whatsapp App: +8801911202067
একটি মন্তব্য পোস্ট করুন
আরও পড়ুন