Attractive Orange Page Navigation For Blogger

Attractive Orange Page Navigation For Blogger

 

Its A Beautiful Attractive Page Navigation Widget As We Set it own Blogger.

Today's post is about beautiful page navigation widget for blogger. Hope you know what a page navigation widget is.If you are not familiar with the widget see the image given below for reference.

Hope now you understood what a page navigation widget is. Almost 99.9% of blogs in the internet use this widget. This is one of the most popular and most used widget in the blogspot. Navigation widget helps your visitors to navigate between the different pages in your blogger blog. This is very important and also a recommended widget. Adding this widget can make your blog more user friendly and attractive.

The main feature of the widget I am going to explain is its design. Its attractive and also fast loading, as a result of which your blog gets loaded faster. Moreover this widget is SEO friendly. The preview of the widget is same as the image given above. To add this to your blog follow the steps given below.

Step To Add Orange Numbred Page Navigation Widget Into Blogger.

1. Login To Your Blogger And Go To Design Section
2. Then Click On Edit/Html
3. Now search for </body> and place the below codes before it.

 <style type="text/css">
        .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
        .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPVnlH4vz56RWONQUWdX2y06E2zuBCsAZvoep3MWLn4weGYe154wqy0SiryiGJCKXdp6WSxOBFI8T_yjJC_tsFCkl4FICBN-4zAm-PaV4HAj8Q6bJA5DkDRg9thjV8Ebw-yb7mRQ9eYFK/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
        .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
        .showpageOf{float:left;padding-top : 6px;}
        .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28kDMj3oggyGGF40yMkl3jl-zGLbn5IK9qrPbDr9FkRHEj84o7xgLoIm4YAgB9FMqysAD1drDYPvnQUxTndPo416PPjcLSUmA-rN3GI39gQHtlLf5q6m0oizrpi0LVsgc3EAAWIqMMsGw/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
        .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28kDMj3oggyGGF40yMkl3jl-zGLbn5IK9qrPbDr9FkRHEj84o7xgLoIm4YAgB9FMqysAD1drDYPvnQUxTndPo416PPjcLSUmA-rN3GI39gQHtlLf5q6m0oizrpi0LVsgc3EAAWIqMMsGw/) no-repeat 0 100%;color : #fff;}
        .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28kDMj3oggyGGF40yMkl3jl-zGLbn5IK9qrPbDr9FkRHEj84o7xgLoIm4YAgB9FMqysAD1drDYPvnQUxTndPo416PPjcLSUmA-rN3GI39gQHtlLf5q6m0oizrpi0LVsgc3EAAWIqMMsGw/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
        .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
    </style>
    <script style='text/javascript'>
    var pageCount=5;
    var displayPageNum=1;
    var upPageWord="Previous";
    var downPageWord="Next";
    </script>
    <script type='text/javascript' src="http://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>

Customization 

 Note: #var pageCount=5; ~ Number of posts per page

Save Template and Preview your Blog

Done...