Tuesday, September 28, 2010

Add a Floating Back–To-Top button

If your blog has lengthy posts, then this back-to-top button is a must for you too. I have added this on Techie Vinayak because sometimes the codes of a widget makes the post longer, so in order to come back to top of the blog will be easy with these buttons. I have got 3 designs with me with their codes. Here we go with the first one:-

hodge_podge-hodge_podge_icons-hodge_podge-left_arrow.ico-32x32[4]

Here’s the code of this button:-

<!--BACK-TO-TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-48x484.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-32x324.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/hodge_podge-hodge_podge_icons-hodge_podge-left_arrowico-32x324.png'"/></a>

<!--BACK-TO-TOP-STOPS—>

Now, lets move on to the second button:-

Up1Blue[4] Here’s the code:-

<!--BACK-TO-TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue4.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue9.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/Up1Blue9.png'"/></a>

<!--BACK-TO-TOP-STOPS—>

Last, but not the least. Here’s the third button:-

2[4] Here’s the code:-

<!--BACK-TO-TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/24.png'" src="http://i521.photobucket.com/albums/w331/Vinnutter/back-to-top-small-14.png" onmouseout="this.src='http://i521.photobucket.com/albums/w331/Vinnutter/back-to-top-small-14.png'"/></a>

<!--BACK-TO-TOP-STOPS—>

That’s it. So, try it out. It will make your blog more good.

Tuesday, September 21, 2010

Stop writing about your problems..Start solving problems

Surfers become readers only when you provide them with what they expect. If you keep blogging about your doubts and problems on the blogosphere or the internet, those people would really hate to come back to your blog. So start blogging about solutions for the problems you know. Start from the grass root level and then step onto conflicting and great subjects. Thus the surfers become your readers as they earn something visiting your blog.

Hope this tip would help you improve your blog...Keep blogging...

Saturday, September 11, 2010

Add Numbered Page Navigation

Numbered Page Navigation is a must for every blog. Well, my blog doesn’t has much pages so the readers can use the Older Posts button at the bottom of the page but if your blog has many pages and the reader wants to access the 12th page. He would not like to keep clicking the Older Posts button again and again so there is a huge need of Numbered Page Navigation in a blog. Here is a screenshot of how it looks:-
 tvv

Follow the steps below in order to get the numbered page navigation:-

1. Go to your blogger dashboard—> Design—> Edit Html.

2. Find(ctrl+f) ]]></b:skin> and add the code given below BEFORE the ]]></b:skin> code.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

3. Now find the </body> code and add the below code just BEFORE it.

<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;

var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){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">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

You can edit two codes in the second html which you have to paste before </body>.
1 : var pageCount=5;
*where 5 is the the number of post that apppear in another page you will visit.
2: var displayPageNum=2;
*This code determines the number of additional page navigation numbers that will be displayed on the page.

So, try it out on your blog and tell me the result by commenting.

Monday, September 6, 2010

Make Your Blog More Better

As you know, Techie Vinayak’s main motive is to make YOUR blog better. And as I have tried both wordpress.org and blogger.com I know that wordpress.org definitely makes your blog look more good. Here are some advantages of a Wordpress blog than a free blog:-
  • You can customize your blog’s design with own premium themes.
  • You can enrich your blog’s features with thousands of free third party plugins.
  • Your own your blog content and backup is available.
  • You are free to put advertisements on your blog.
  • You can enhance your blog SEO (Search Engine Optimization) easily with plugins.
wpwh-giveaway-530x200
Don’t you think that you should now shift your blog to WordPress. Oh…you need a domain, a web hosting :-( and you don’t want to spend your money at that. But now don’t take tension about that because WPWebHost will be taking care of all that.

WHATS THE PRIZE?

1 year Rookie Plan with FREE domain name (1GB space | 5GB/mo bandwidth)

HOW TO WIN?

  1. Blog about this contest and link back to this post. You could take a banner here and insert to your post.
  2. Get 7 comments for your post. (Trackback isn’t counted)
  3. Submit your blog post URL through comment below, along with your name and valid email address in the provided fields.
  4. Yippee! You have just won a FREE WordPress hosting plan + a domain name. We will email you further steps to claim the prize within 2 weeks.

TERMS AND CONDITIONS

  • Every participant is entitled to only one prize.
  • This giveaway ends on 30 Sep 2010.
  • WPWebHost reserves the right to amend or revise the terms and conditions of this promotion without prior notice.
  • WPWebHost has the right to disqualify any participation which does not fulfill the requirements.
So take my advice and participate in this contest. Here is the link - Self-Host Your Blog Giveaway: Win FREE Self-Hosted WordPress Hosting + Domain Name