How to get Numbered Page Navigation For Blogger

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)

Page navigation is need for all blogger because it can make navigation easy for your visitors. Previous script have some weakness :

1. Maximum posts 500
2. Have to read all JSON file if post so many make your blog slow
3. Need long loop to calculate all posts (no body know this if they not read the script)

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

if you need other styles please visit this page :

Six Styles Page Navigation for Blogger

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page

only That, I hope it can work and make your blog easy to navigate, amiine...

Read More

[Turns Feed] [Web Design] 30 Browser-Based Apps for Web Designers & Developers

Web development has moved into the cloud as more engineers are working on-the-go. It just so happens that with more open source code we can build a suitable environment collaborating on projects all across the planet. Not to mention saving time on personal projects and freelance work.

Full post: 30 Browser-Based Apps for Web Designers & Developers

Read More

[Turns Feed] How to Set Text on a Circle [CSS]

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image with proper alt text, or proper feature detection which can flip out the image for this fancy technique in browsers that can handle it.

FuLL Post : How to Set Text on a Circle

Read More

True Minimalism in Web Design

In this article I want to share a few basic tips to achieve minimalism in web design. I will use a website I designed recently as an example, and then provide some other inspirational designs. It may seem really simple to design minimalist websites, and it really is. But it's not intuitive as there is a general tendency to over-embellish designs, and sometimes this is detrimental to the content. I believe simple sites tend to be more effective because you are not underestimating your users or clients, you are not trying to convince them or sell them something with shiny lights.

Full post: True Minimalism in Web Design

Read More