Page Navigation Hack | Page Navigation Widget for Blogger

I am posting this hack for my blog readers. Many readers requested this hack and here it is;) .Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template. Just follow the simple steps, anyone can easily install this hack to the blog very easily.

Step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Gadget link there.


Step 2 : In that Add Gadget window , choose HTML / JAVASCRIPT .

Step 3 : Now add following Javascript in that window.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=4;
var displayPageNum=5;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> </div>

After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 4;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my blog I have put that value as 4 . In each page you can see only 4 posts .

2 : var displayPageNum = 6;

here the digit in red represents number of pages to be listed.

For example :

In my blog I have chosen 6 , then 6 pages will be shown.

Now save your template .
That's it now we have added Page Navigation menu widget to our blog successfully.

This article has been sourced from this link and is so credited. If you still feel that your original work is being uselessly and reproduced and spammed, Please email us at vishalgaikar@gmail.com and we will remove your article or provide an adequate teaser.

CONTINUE READING ■ ■

Download StreamLine Premium Wordpress Theme Free

It’s a 2 column wordpress theme which can be customized very easily, Featured content enabled, perfect colors and comes Widget-ready. The theme is still in beta and an updated version will be released soon.

Demo | Download StreamLine Wordpress Theme

CONTINUE READING ■ ■

Add Signature To Every Blog Post in Blogger/Blogspot !!

If u Want to Pretty Up Your Post,There Are many Things,But to Add Signature to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post! You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image.

MyLiveSignature, a free graphic signature making service that helps you to “make a signature” from 120 different fonts. The Plugin then uses the HTML code MyLiveSignature provides to feature your new graphic signature on your blog. You can add that to your blogger, or take advantage of the LiveSig WordPress Plugin to add it automatically.

Steps >>

1> Create a signature using MyLiveSignature or any other website.

2) Copy the Image URL.

3) Log in to your blogger account.

4) Go to Layout > Edit Html > Expand Widget Templates

5) Now search for the following code

<P><data:post.body/></P>

6) Paste the following code just below the <P><data:post.body/></P>

<img src="http://YOUR ANIMATED PICTURE URL" />

7) Save the template.

8) DONE. Enjoy.

If you still have problem, then ask through comments. I will reply to your comment here.

CONTINUE READING ■ ■

Blogger Introduced new feature - Geotagging!

Blogger in draft has recently announced a new feature called Geotagging or location labels which enables you to add locations to each of your post through Google Maps.It is similar to time stamps of blogger posts which help to browse using specific date/month whereas Geotag give your readers a way to browse posts near a specific location.

As per official blog of Blogger in draft

We’ve just added geotagging to the new post editor on Blogger in draft. With geotagging, you can add a location to your each of your blog posts. Just as time stamps help readers find posts from a certain date or time, geotags give your readers a way to browse posts near a specific location.

Adding a geotag to your post is easy. Log into draft.blogger.com, open the post editor, and click the add location link below the main text field.

Use the location editor to search, drag, click and zoom on a map to choose and save a location. We’ll try to label the location you choose using our reverse geocoder, which looks up a name for a point on the map. You can also edit the location name by clicking the blue location name text below the search field.

As we can see below, this feature is also integrated with Google Maps:

Link : Blogger in Draft

CONTINUE READING ■ ■

How to Add Stripe Ads to your Blog/ Blogger ??

This post is specially for Blogger / Blogspot users . Recently I was successful in creating a hack for embedding a Stripe Ad in Blogger / Blogspot .This is a very simple trick to add Stripe ads to your blog. You can see this add at my Blog too.This will helps you to keep as many as referral links or any single line information at the very top.

By using this ads >

• You can add a notice informing about latest updates

• You can post your ads and double your income and tons more !

Stripe Ad is one of the fastest growing plugin for Wordpress users , it was made by a person from Maxblogpress and you can view the stripe ad here .

Now , adding a stripe ad to the blog is pretty simple . Without an worries any user can do this if you follow the steps below :

• Go to your Dashboard and click on Edit layout .

• Now press Ctrl + F on your keyboard or manually search for </b:skin>

• Just paste this code before </b:skin>

.alert-plain {
background:#FCF9CE;
color:#111111;
padding:6px;
text-align:center;
}

• Now , search for the <body> tag and just after the <body> tag paste following code :

<div class='alert-plain'>
<center><strong>
Main Title/Text Here
</strong>
World of Vampire
<a href='http://www.worldofvampire.co.cc'>
<b>Your Text</b></a>
</center></div>

• You can make it bold , italic , whatever you want , just keep the div class same and keep changing the alignment , the text , and lots more ! Its totally customizable :)

• Now just click on Save Template and you are done !

• And the result shall be like this : Click me .

Don't you think its so simple :) , Start having fun with your stripe ads - Take it as an advertizing advantage or keep your readers updated , since it can be modified anywhere around easily , you can do this is easy steps .

Still have any problem ? Post it in the comment box and i shall be hopefully quick to reply !

CONTINUE READING ■ ■

Windows Live Messenger 2009 Final Version download

Windows live messenger final version is available for download . A lot of features are enabled in this final version of one of the most popular instant messenger.The interface and looks have been made little more glossy . And they are saying they hav fixed more than 200 bugs of the previous version

The new Messenger has more than just a chat tool, it is fun and easy to communicate to facilitate the sharing of characteristics of a perfect fusion of community-based instant messaging software, whether it is the management of documents, photo album or with friends, classmates, colleagues , To keep his family closer links are easy. off-line to install packages in addition to Live Messenger software, also added a new version of Windows Live Movie Maker, Mail with Calendar synchronization, Writer, Photo Gallery, Family Safety and Outlook Connector, and other content with a total capacity of more than 100M.

What’s new in Windows Live Messenger 2009:

# User interface has been updated, including the toasts
# Sign-in screen has been restyled
# New program/tray icon
# Updated e-mail icon showing the number of new e-mails more clearly
# Updated Group window header
# SkyDrive officially replaces sharing folders feature (Actions > View your online files)
# Expanded What’s new area shows more details (eg. complete Tweets, added pictures, etc.) and Post a note has been updated for some items
# What’s new per contact in conversation window
# You cannot choose your own signature sound any longer. You can only assign signature sounds to your contacts
# Webcam snapshot has been renamed to Webcam Picture
# Tile with moods has been renamed to Dynamic Picture
# Modify moods, videos and/or pictures of previously made Dynamic Pictures
# Change scene option added to status dropdown list
# More default Scenes
# Updated and new static/animated display pictures featuring the Messenger buddy, Morty and Daisy
# Windows 7 Jumplists
# Save pictures presented through PhotoShare (Previous photo/Next photo/Save photo)
# What’s new list options accessible through an icon next to What’s new header, or from a button in Options > LayoutTo download and install the latest Windows Live Messenger 2009,first u have to download Windows Live Installer which contains installation files for all software programs inside the Windows Live products. If you already have the old version of Windows Live Messenger installed just update the messenger

Don't forget to comment Here if you like my post

CONTINUE READING ■ ■

Download Vista Transformation Pack 9.0

Windows Vista Transformation pack is a software that will help you to convert Windows XP to look and work like Windows Vista, in the past the developers have released several versions but Vista Transformation Pack 9.0 is definitely one of the most exciting updates they have released.

The Vista Transformation Pack 9.0 consists of several new tools including:

• ViSplore – Vista Glass explorer simulator
• Vista Drive Icon - Adds free space percentage in your drive icon like Vista.
• Vista Rainbar - Lightweight Vista sidebar based on Rainmeter that even consume less resources than real Vista Sidebar.

VTP 9.0 also improves on several 3rd-party applications including:

• ViStart – Vista Start Menu which Indexes files for documents search, improved reliability and compatibilities.
• ViOrb - Improved graphic and reliability.
• TrueTransparency - Improved reliability with improved AeroStyle’s glass border.
• WinFlip - Improved stability and reliability.

Some Functionalities were also added to this version which include:

• Setup personalization - Allows customizing of Vista experience upon installation without have to access to Welcome Center.
  Windows XP Service Pack 3 compatibilities - Now you can enjoy Vista themes after installation with Windows XP Service Pack 3.
  x64 compatibilities - More secured x64 installation without getting hurt by incompatibilities.

There are several other bug fixes and improvements in VTP 9.0 and you can read the entire release notes to see what has changed in this version.

Download Vista Transformation Pack 9.0

• VTP 9.0 - Mirror 1
• VTP 9.0 – Mirror 2

[via]

CONTINUE READING ■ ■

Essential Software Tools for Blogger | Blogger Tools

If you have decide to create your first blog on Blogger. It has a simple and fine interface that takes care of many things for you. This is my suggestion to you for your first free essential must haves for your blog. Here is my round up of all the software and tools I can think of that a blogger needs. Please add any I have missed in the comments.

Blogging Software

1. WordPress
2. Drupal
3. MovableType
4. CommunityServer
5. Expression Engine

Feed Reading Software

1. Google Reader
2. BlogBridge
3. Bloglines
4. FeedDemon
5. Netvibes

Traffic and Statistics Software

1. Performancing Metrics
2. Sitemeter
3. Google Analytics
4. Stat Counter
5. FeedBurner

Editing Software

1. ScribeFire
2. LiveWriter
3. Qumana
4. Ecto
5. BlogJet

RSS to Email Distribution Services

1. FeedBurner
2. FeedBlitz
3. Aweber

Social Bookmarking Tools

1. StumbleUpon
2. Digg
3. Reddit
4. Mixx
5. Delicious

Audio/Visual Tools

1. Audacity / GarageBand
2. Flickr
3. Skitch / Snagit
4. IShowU / CamStudio
5. YouTube

Pingoat - Pinging lets dozens of blogging services know you’ve updated your site and increases traffic to your blog. Just enter your blog name and blog home page, check the blogging services you want to ping, just click ‘Submit Pings’ and in one click it pings all of them.

CONTINUE READING ■ ■

How to Show Most Viewed posts of Today | Blogger Widget

This shows all most of posts being viewed in the current day (today) only. It's very easy to install this widget in your blog, This widget will display a list of your popular articles, ranked by the number of views of the day.

How to Install this Widget >>


1) Go to blogger > Layout > Add a Gadget > HTML/JavaScript

2) Copy the Following code and paste this code in HTML/ Javascript section.

Code >>

<script type="text/javascript">

topviewstoday_limit = 10;

</script>

<script type="text/javascript" src="http://vishalgkr.googlepages.com/topviewstoday_v10.js"></script>

<br/>

<span style="gt;I got this Widget from <a href="http://dacoolhunter.blogspot.com"><b>Blogger Tips & Tricks</b></a></span>

To limit the number of displayed post, you must change number "10" with your own.

The showing time in this widget is the international time zone, not in any country.

Screenshot >>


If you want to Install "ALLTIME MOST VIEWED POSTS WIDGET" then you can Install it from HERE

CONTINUE READING ■ ■