Wednesday, September 22, 2010

Digital Statement Blogger Template

One of my Blog reader , requested me to convert Digital Statement wordpress theme to blogger. The wordpress theme was developed by Blog Oh Blog. This is a professional theme with lots of new features available.

Main features of this template:

  • Header with a search widget on right :
  • This is the code i have used
    <div id=’searchbox’> <form action=’/search’ id=’searchform’ method=’get’> <input class=’swap_value’ id=’s’ name=’q’ type=’text’ value=”/> <input alt=’Search’ id=’go’ src=’http://i624.photobucket.com/albums/tt327/digitalstatement/go.gif’ title=’Search’ type=’image’/> </form> </div>
    you can see this code if you check expand widgets box in layout page. If you want to show your own adsense search box then just replace this code with your adsense search box code.
  • Two navigation widget available.
  • This is the code I have used
    <div id=’nav’> <ul> <li class=’page_item’><a href=’http://techieblogger.com/’>Home</a></li> <li class=’page_item’><a href=’http://www.wordpress.org’ title=’Wordpress’>Wordpress</a></li> <li class=’page_item’><a href=’http://www.blogger.com’ title=’Blogger’>Blogger</a></li> <li class=’page_item’><a href=’http://www.techieblogger.com’ title=’Taking Blogger to Next Level’>Techie Blogger</a></li> </ul><div class=’clearfloat’/> <ul id=’cat’> <li class=’cat-item’><a href=’http://www.techieblogger.com’ title=’View all posts filed under Blockquotes’>admin</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html’ title=’Page Navigation Widget’>Numbered Page navigation</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/’ title=’View all posts filed under Lists’>Author</a></li> </ul> </div></div>
    replace all the links with your own links. If you are satisfied with just one navigation widget and want to show adsense 726×15 ad link unit then you need to edit the second navigation code with this.
    <ul id=’cat’> < —- adsense code here — > </ul>
  • Related Posts Widget with custom CSS is included in this template with print option.
  • Comments with unique CSS style and showing author comments in different style is included.
  • If you want to show your own avatar then search for this code in the edit HTML tab pge with expand widgets box checked. http://www.gravatar.com/avatar.php?gravatar_id=ef6eb8d01747fd1846efd0227517ca1c&rating=R&size=36 replace that url with your own avatar url.
  • Two Tabbed Navigation Widget is included in Sidebar. If you want to change the titles of the tabbed navigation , then search for this tag in EDIT HTML page.
  • <div class=”tabbertab” title=”Recent Post“> similarly you can change the titles of other widgets also.
  • Three column footer section is available in this template.
  • I haven’t included the featured post hack in this template , because most of the blogger users won’t use that. if you want to add that featured post widget then add the following java script above </head>

What’s Next ?

With So many new features available , hope everyone will like this template.
Download | Demo
Guys I am giving this template as free so please don’t remove the footer credits
Hope you Guys will like this template.. if you are really impressed by my hard work then please make some donations.

See you soon with a new template.
update :
if you want to remove one of the tabbed navigation Widget then do the following step.
Go to Layout page of your template and then navigate to EDIT HTML sub page. There search for the following tag
<div id=’tab’>
<div class=’tabber’>

<div class=’tabbertab’ title=’Archives’>

<b:section class=’tabber’ id=’tab1&#8242; preferred=’yes’>
<b:widget id=’BlogArchive1&#8242; locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>

</div>

<div class=’tabbertab’ title=’Categories’>

<b:section class=’tabbertab’ id=’tab2&#8242; preferred=’yes’>
<b:widget id=’Label1&#8242; locked=’false’ title=’Labels’ type=’Label’/>
</b:section>
</div>

<div class=’tabbertab’ title=’Tag Cloud’>

<b:section class=’tabbertab1&#8242; id=’tab3&#8242; preferred=’yes’/>
</div>

</div></div>
remove this whole code.
If you need any other customization let me know..

Create Compatible CSS for Firefox , IE6 , Opera , IE7 , etc

Learn How to create Compatible CSS for Various Browsers like Internet Explorer 6 , IE7 , IE8 , Opera , Firefox , etc..

Web-designers create blogger template for Hours using one particular browser say Firefox , They don’t know that the CSS code they use is compatible only for the browser they are working at present. Especially in IE6 , there are many Compatible issues.

for Example : the sidebar may appear below main content wrapper or there would be more gap between each widget , content wrapper and sidebar may overlap ,etc.

So in this Post I will tell you How to create CSS code which is compatible for almost all browsers. For this you need to have two browsers Internet Explorer 6 and Firefox .

I have chose IE6 because it is one of the most common browsers which windows have.
Incompatibility issues in IE6 and Firefox

First let’s check is our current Blogger template is compatible with all browsers or not.

For this visit this website : Browser Screen shots
Enter your Blog URL and check the images there to know How your blog looks in various Browsers.

step 2 : If you find any incompatibility issues then you need to modify your CSS code to suit browsers.

Let’s us see an Example

Generally the css we use if of this form :

#example {
float : left;
width : 170px;
margin-left : 5px;
}

In this assume that this particular div is incompatible with Internet Explorer version x.

then we need to modify the above css code as

#example {
float : left;
width : 170px;
margin-left : 5px;
}
#example {
float : left;
width : 185px;
margin-left : 3px;
}

in this first css code is for all versions of Internet Explorer and the second css code is for other browsers like firefox , opera , dillo , sea monkey , etc

but it will be confusing for you to edit.. so now we are going to add different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

After introducing Child selector command , the css code must look like this

#example {
float : left;
width : 170px;
margin-left : 5px;
}
html > body #example {
width : 185px;
margin-left : 3px;
}

in this the green colored code is for IE versions and the red Colored code is for other browsers.

So with simple child selector command we can make our css code compatible for all browsers. Every time when I create a New template , I use to check whether it is compatible with other browsers or not. And I use to change the CSS code to suit that browser.

If you are unable to modify the CSS code then please mail me your template and explain the problem , I will rectify those errors and mail you back.

Add 125 x 125 ad section to Blogger

Learn How to add an extra B:section in your Blog template and also learn to add 125×125 ad banners !

I noticed that most of my readers are asking me How to add 125 x 125 ads section in Blogger templates. We know that to add a widget we need b:section with add page elements function enabled. So in this post I will tell you how to add b:section in your Blogger template and how to add CSS code to suit that b:section.

So with this hack you can add any widget you want. And I will also make a note on Adding 125 x 125 Page Element.

Lets start :

Adding b:section to Blog sidebar :

Step 1 : Sign in to Your Blogger account and got to Layout section of your Blog. Then Navigate to Edit HTML sub tab.

Step 2 : If your template possess two Columns in Right sidebar and if you want to add an Subscription form or 125 x 125 ad section above those two columns then do this step.

 If you have a sidebar like this then add a b:section 
above the 2 columns to add more widgets


If you have a sidebar like this then add a b:section above the 2 columns to add more widgets


Search this tag or similar

<div id=’sidebar-right’> <b:section class=’sidebar-right’ id=’sidebar-right’ preferred=’yes’>


The id can be different , so please paste the following code just above the sidebar section of your Blog.

<div id=’sidebar2&#8242;>
<b:section class=’sidebar2&#8242; id=’sidebar2&#8242; preferred=’yes’>
</b:section></div>

So Now we have added the b:section code needed to add more widgets. Then we need to add css code for that b:section

#sidebar2 {
float : right;
margin-left:4px; width : 415px; background:#ffffff;
font : 11px Verdana;
}
#sidebar2 .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}

#sidebar2 .widget h2, #sidebar2 h2 {padding-left: 10px;
text-align:center;padding-left: 18px;
font: 12px/34px “Georgia”, Verdana;
text-transform: uppercase;
color: #ffffff;
background: url(“http://i263.photobucket.com/albums/ii150/mohamedrias/sidebar_title-2.gif“) repeat;font-weight:bold;

}

#sidebar2 a {
color: #969696;
font-size : 12px;
text-decoration : none;
}
#sidebar2 a:hover {
color: #969696;
text-decoration : none;
}
#sidebar2 ul {
border : medium none;
margin : 7px;
padding : 0;
}
#sidebar2 ul li {
list-style-type : none;
border-bottom : 1px dotted #87581f;
margin : 0;
background-position : 0% 100%;
padding-left : 8px;
padding-right : 10px;
line-height : 15px;
padding-top : 5px;
padding-bottom : 5px;
}
#sidebar2 ul li a {
text-decoration: none; background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/side_li_bullet.gif) no-repeat; padding:0 0 0 12px;color: #87581f;
}

please edit the text in green to suit your Blogger template.

So we have successfully added the b:section and css codings required.

Now navigate to Layout section of your blog and there you will see a new ” Add page Elements ” link just above the sidebar.

If you are planning to add 125 x 125 ad section then click add page element link. there select add HTML/ JAVASCRIPT page widget and insert the below code over there.

<div class=”sidebar-ads”>
<div class=”sidebar-banner”><a href=”#“>
<img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg “/></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#”><img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg” /></a></div>

<div class=”sidebar-banner”><a style=”text-decoration: none;” href=”#“><img border=”0&#8243; src=”http://i263.photobucket.com/albums/ii150/mohamedrias/banner_125×125.jpg” /></a></div>

<div class=”clear”></div><p><a href=”mailto:your email id” title=”Advertise Here”>Advertise Here</a></p>
</div>

After adding the code , click save widget. Then navigate to Edit HTML sub tab to add the necessary CSS code needed for this ad section

/* Sidebar – Ads */

.sidebar-ads {
float: left;
width: 410px;margin-left:5px;
margin-bottom: 5px;
}

.sidebar-banner {
padding: 5px;
float: left;
}

#sidebar2 p { background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/adsdotdot-1.gif) no-repeat center left; margin-top:5px;text-align:right;padding-right:10px;}

Edit the test in red to suit your template.

After adding the CSS code this is how it will look

 After adding the CSS code 
this is how it will look


So we have successfully added the 125 x 125 ad section.

Adding b:section below or above posts ( content)

Most wish to add two column b:section below main container ( posts ) . I will write about this hack soon. (Its a continuation of this hack )
If you guys need any help , please feel free to contact me mohamedrias1103@gmail.com . See you soon with new Blogger hacks.

Premium Quality Brownish Blogger template

Today I am Going to Publish my Fourth three column Blogger template. I hope among those Four Blogger templates this is the best one. It’s a premium quality Brownish Blogger template. This Blogger template consists so many new features. let’s see few among them

1. Twitter like news Widget or Adsense banner ad

There is a HTML / Javascript Element in the header section. You can use this widget either for displaying twitter like site updates or you can just place Adsense or Adbrite Ads.

Adding adsense ad is easy , so Now I will tell How to add the Twitter like news widget.


The CSS code required for this hack is already included in the template. So Now we just need to add the following code in the HTML widget found beside the header.

<div id=”twitter-like-news” rel=”nofollow”>

<b:if cond=”data:content == &quot;&quot;”>
<em> Site Message </em><h1>type the text you want to display here</h1>

</b:if>
<data:content/>
</data:content></div>

Change the text in red and green to suit your blogger template.

2. Top Navigation Widget

In the layout section of your blog , you can see a HTML/ Javascript widget. There you can put the links you want to display.

<ul>
<li><a href=”/“>Home</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Template“>Blogger Templates</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20widget“>Widgets</a></li>
<li><a href=”http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Hack“>Blogger Hacks</a></li>
<li><a href=”http://feeds.feedburner.com/TechnoWizard?format=xml” rel=”follow”><span style=”color: rgb(255, 102, 0);”>{Subscribe}</span></a></li></ul>

Customize the text in red and green to suit your blogger template.

3. Page Navigation widget :
The Page navigation widget in the blogger template has the css code like in my blog.
4. Three column Footer section.
This is one of the special features of this template. This template has a three column footer section in a unique style. I will write a post on this hack soon.
There is a Blog archive widget already included in the footer section. there please change the appearance of the widget to drop down menu type.
5. SEO ( search Engine Optimization ) title hack included
6. Favicon is also included , just change the image url with your own image url.
if you going to change your current blogger template with this one , then please look at this article so that you can change the template without loosing your widgets.
License: This work is done under creative commons license 3.0 . i have spent some 3 hours to create this template. So please don’t remove the footer credits.
if you guys want any modification in this template then please send your suggestion to mohamedrias1103@gmail , I can modify this template to your wish for free.
Demo : Blogger Accessories
I hope you will like this theme for sure . Very few Blog themes are there with professional look. I am sure that this theme is also one among them.
I can also convert wordpress themes to Blogger xml templates. if you are really inspired by any wordpress them
s let me know , i can convert that template to you for free.

Submit Blogger Blog Sitemap To Google Webmasters

Today I am going to tell how to add blogger blog to Google. Everyone ask Why we must submit our blog to Google , Since Google automatically indexes our Blog. But by submitting our blog sitemap to Google we can make Google to index our Blog frequently. One more question everyone ask is
“Why should we submit our Blog sitemap to Search Engines ? “
Sitemaps allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently.
So in this Post I am going to tell how to Submit our Blog url and Blog Sitemap to Google. Just follow these step by step instructions:

Step 1 : Submitting Blog url to Google.

To submit our Blog Url to Google visit this page(http://www.google.com/addurl/?continue=/addurl). There you will find a form like this ,

 Submit
 Blogger/Blogspot blog to Google Sitemaps
Fill the form and click submit.
So we have successfully added our Blog to Google. but it’s just not enough. We need to submit our Blog Sitemap to Google.
Step 2 : Now we need to add our Blogger Blog sitemap to Google Webmasters.
Why we need to submit our Blog to Google Webmasters ?
Google Webmaster provide us some useful tools which helps us to know lots of things about our site. I will explain only top 2 tools :
* Google Crawling info
- when Google Indexed our Blog.
- Broken or Invalid Urls which Google unable to crawl
* Top search queries

 Other Important Features of Google Webmasters
- with this tool we can find the top queries that drive traffic to your site and where your site is included in the top search results. This will let you learn how users are finding your site.
I hope with the small introduction you might have learned the importance of Google Webmaster. So let us see how to Add our Blog there.
We can do this in two methods. First I will tell how to do it manually
Login to Google Webmaster with your Google Account .
It will take you to Dashboard page. There you can see a box saying ” Click here to add your site” . In that box type your full blog url with http:// and click add site.

You know With Draft Blogger we can automatically submit our blog to Google Webmasters

 Submit Blogger Blog to Google 
webmasters through Darft Blogger
So draft blogger will automatically add our blog url to Google Webmasters.
step 3 :
After adding your site url , navigate to dashboard again. One the right side of your site , you will find two links ( ADD and Verify ).
Now click ” Verify ” , it will take you to new page saying

 Copy and paste the meta tag 
in your blogger template
In this select ” Add Meta Tag ” and copy and paste the code in your Blogger template. Then save your Blogger template and click verify.
step 4 : Adding Blog Sitemap to Google Webmasters
Now navigate to Dashboard again , there click add sitemap link . It will take you to a new page , There click ” Add a sitemap” . Then select ” Add General Web Sitemap” . and do as instructed.


that’s it. So we have successfully added our Blog sitemaps to Google.
Now we can see indexed stats of our Blog sitemap .

After submitting the sitemap , you will see indexed stats like these
 This is How the 
indexed stats of our sitemap will shown
If you have any trouble let me know , I will try my best to help you guys.

DailyPress – Free Blogger Template

On Last Monday itself i converted Daily Press Wordpress theme to blogger , but due to my exams I was unable to publish that on Monday.
Daily Press is a wordpress theme created by Blog Oh ! Blog .Let us see the main features of this theme
See the Screenshot of this DailyPress Blogger Template

Main Features of DailyPress :

* Search form is included in the right hand side of header.
- I have already wrote an article on ”Adding Search Form to Blogger ” .
The code for the hack is given below ( if you delete it by mistake then you can copy the code here )

<div id=’topsearch’>

<form expr:action=’data:blog.homepageUrl + &quot;search&quot;’ id=’searchform’ method=’get’ name=’searchform’>
<b:if cond=’data:title’/>
<input class=’s’ id=’s’ name=’q’ onblur=’if (this.value == &apos;&apos;) {this.value = &apos;&apos;;}’ onfocus=’if (this.value == &apos;&apos;) {this.value = &apos;&apos;;}’ type=’text’ value=”/>
<input alt=’Search’ id=’go’ src=’http://i263.photobucket.com/albums/ii150/mohamedrias/go.gif’ title=’Search’ type=’image’/>
<data:content/>
</form>

</div>
* Below Header there is a Navigation menu

In the Edit HTML page of your template search this code
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Template‘>Blogger Templates</a></li>
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20widget‘>Widgets</a></li>
<li><a href=’http://rias-techno-wizard.blogspot.com/search/label/Blogger%20Hack‘>Blogger Hacks</a></li>
<li><a href=’http://feeds.feedburner.com/TechnoWizard?format=xml‘ rel=’follow’><span style=’color: rgb(255, 102, 0);’>{Subscribe}</span></a></li>

* Three 125 x 125 ads placement widget on sidebar
DailyPress 
Blogger template by Blogger Accessories
- Use the below code to set up this widget.
<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<a href=”#” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://wpthemes.blogohblog.net/wp-content/themes/dailypress/images/ad250.gif”/></a>
<div class=”clear”></div>
<p><a href=”#” title=”Advertise Here”>Advertise Here</a></p>
please change the text in red to suit your template
* A tabbed Navigation Widget on sidebar. I will write a post on this soon.
By default i have included three titles like ” Recent Post ” , ” Recent Comments ” and ” Popular posts “. If you want to change the titles then go to layout section of your blog. then Navigate to Edit Html subtab. There search for those three titles ” Recent Post ” , Recent Comments and Popular Posts . Rplace them with the title you want.
* Social bookmarking Widget with custom CSS is also included.
* Comment form of unique style is included.
 
Comment Form with separate icons for Admin and Other People
* Related Posts Widget included and
* Page Navigation hack is also Included

Demo of this theme is available here

If you Guys need any modification or any other hack with this template , then please email me to mohamedrias1103gmail.com. I will modify this template to your wish for Free.
This week i am going to publish some excellent hacks like
1. Having Custom Layouts in Blog HomePage , Labels Page and Posts Page.
2. How to Show Author Comments in Different Style ( Author image included )
3. Rotating Ads ( can show different ads in different pages )
and few more….

Show Labels containing specific number of Posts

I have already written ” How to show only specific number of posts on Labels Page “. Today I am going to tell How to Show Only Labels with specific number of posts. This hack is very useful for those who have plenty of Labels in their Blog. It’s a very simple hack , just follow the below steps to implement this hack in your blog.
Step 1 : Login to your Blogger Account and go to Layout section of your Blog.
If you don’t have any Labels widget then add it by clicking ADD Page ELEMENT link in the Page. Then navigate to EDIT HTML subtab and Check EXPAND WIDGETS box.

Step 2 :

Now search for this Line.

<b:widget id=’Label1&#8242; locked=’false’ title=’Labels’ type=’Label’>

Now below this line , you will find this code
<b:loop values=’data:labels’ var=’label’>
<li>
<b:if cond=’data:blog.url == data:label.url’>
<data:label.name/>
<b:else/>
<a expr:href=’data:label.url’><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

Now replace the above code with the following code.
<script type=’text/javascript’>
var labelnum = 0;
<b:loop values=’data:labels’ var=’label’>
if (<data:label.count/> &gt; 2) {
document.write(&quot;<li><a expr:href=’data:label.url + “?max-results=5“‘
rel=’nofollow’><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
}
</b:loop>
</script>
It should look like this

Show only Labels with 
specific number of posts
In the above script edit the text in green to show Labels which contains more than text in Green.
for example : I have chosen number 2 , then Labels which contains more than 2 posts will be shown and other labels will be hidden.
Edit the text in red to show only specific number of posts in Labels Page.
That’s it , you have successfully implemented the “Show Labels with specific number of Posts ” hack in your blog.
If you have any problem , let me know.

Related Posts Widget For Blogger – Bugs fixed

Many of my readers are asking help to add Related Posts Widget . I was confused because i have added all the code correctly then why my friends are not getting this hack working. So i looked the templates of all those who sent me error message . All their templates are of same structure ( labels line is appearing below post , see the screenshot below)

 Related Posts 
Widget Bug

Related Posts Widget Bug
But the script i have included in the post is for those who have Label line below post title like this.

Related Posts Hack original format

Related Posts Hack original format

Bloggers with the above format are not getting this related posts hack because the script loads earlier than the Labels line. We can fix this error in Three methods.

Method One :

Login to your blogger account and navigate to Layout section of the blog. Then go to edit HTML page and check expand widgets box.

Now search this line : <div class=’post-header-line-1&#8242;/>

Now please copy and paste the code above that line.
<span class=’meta’>

<b:if cond=’data:post.labels’>
categories :
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;’ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1&#8242;> 1 <data:top.commentLabel/> &#187;<b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> &#187;</b:if></a>

</b:if>

</span>

you can customize the text in red to display as many results you want.

Now add the below CSS code above ]]></b:skin>
.meta{float:left;width:480px;padding:3px; color:#111; font-size:12px; margin-bottom:8px; line-height:20px;border-bottom:1px dotted #cccccc;}
.meta a{color:#cc0000;}
.meta a:hover{color:#000000;}

Please edit the text in red to suit your template.

After this you need to add the CSS code and javascript i provided in this post ” Related Posts Widget with custom CSS “.

Now add the script below this line <p><data:post.body/></p>

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script><div style=”display:none;”><a href=”http://www.bloggerdummies.com”>Blogger Dummies</a></div>
</div></b:if>

Thats it , now you will have related posts widget in your blog.

Method 2 :

If you follow step one then you will have two meta lines in your Blog. One below post title and one below post content. If you are happy with first method then stop or else do these steps to add related posts hack. ( don’t do both)

step 1 : First of all add the below code above </head>
<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(“http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png”) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
}
//]]>
</script>

step 2 :
Now search this text


><b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>

Now replace the above text with this code
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’> <script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/> </b:if> </b:loop>

Now scroll down still you can find ending tag for either </div> or </span> . Now paste the following script below the ending div / span tag.

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts</h2>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

That’s it now you will have related Posts hack in your blog.

Third Method :

In my Blog I am using this method . It’s very simple. First do the step 1 from method 2 . ( adding script above </head> ) .

Now add the following tag below <p><data:post.body/></p> .

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”related-posts”>
<h2>Other Recommended Posts on<div style="display:none;"> <b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop></div> </h2>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

Now you will have related posts widget of my style.
I hope one of the above method will help you to add related posts widget to your Blog.

BLOGGER TEMPLATE : FIREBUG THEME RELOADED

Firebug is actually a wordpress theme developed by Blog oh ! Blog. After getting permission from the site Author Jai , I have successfully converted that Firebug Theme to Blogger Template. I made some modifications to that theme to make that even better.

firebug Reloaded Blogger Template

firebug Reloaded Blogger Template
Firebug reloaded theme is for those who like Dark Backgrounds.

Main features of FireBug Reloaded :

* Adsense Ad 468 x 60 on header right side.

- To suit the header background , please apply these settings in adsense ad set-up.

Adsense Ad customization to suit Firebug Blogger template


Adsense Ad customization to suit Firebug Blogger template
If you want to use search form instead of Adsense Ad then Please Insert this Code in the HTML widget.
< <div id=”topsearch”>

<form id=”searchForm” action=”/search” method=”get”>
<input id=”s” class=”swap_value” value=”Enter your keywords here” name=”q” type=”text”>
<input id=”go” alt=”Search” src=”http://i286.photobucket.com/albums/ll96/themelib/firebug/go.gif” title=”Search” type=”image”>
</form>
</div>
<div class=”clear”>

</div>

* Page Navigation Menu Hack with some Bugs fixed.
Page Navigation hack for Firebug theme


Page Navigation hack for Firebug theme
* Top navigation Menu with Date calender on Right side.

* Subscription Form on Sidebar.

- To have subscription form on sidebar , please insert this code in a HTML/JAVASCRIPT widget.
<a href=”http://feeds.feedburner.com/TechnoWizard” class=”rss” rel=”alternate” type=”application/rss+xml”>Subscribe via RSS</a> | <a href=”http://feeds.feedburner.com/TechnoWizard“>Comments (RSS)</a>
<br/><br/>

<form action=”http://www.feedburner.com/fb/a/emailverify” target=”popupwindow” method=”post” onsubmit=”window.open(‘http://www.feedburner.com’, ‘popupwindow’, ’scrollbars=yes,width=550,height=520&#8242;);return true”>Or, subscribe via email: <input class=”subscribetext” name=”email” type=”text”/><input value=”http://feeds.feedburner.com/~e?ffid=1488667” name=”url” type=”hidden”/><input value=”Blogger Accessories” name=”title” type=”hidden”/><input value=”en_US” name=”loc” type=”hidden”/> <input value=”Subscribe” class=”subscribebutton” type=”submit”/></form>

Please replace the text in RED with your own links and code.
* Related posts Widget is Installed.

* Social Bookmarking Widget is also included.

- I have included Post submission links only for Top 10 Bookmarking sites. If you want to include more sites , ask in Comment form I will send the code for remaining sites also.

* Comments with Mybloglog feature enabled. I will write a post soon on this hack.

* Three 125 x 125 Ads section on sidebar.

- To enable this feature , please copy and paste the code.
<a href=”#Advertise” class=”ads”><img border=”0&#8243; alt=”Ad” src=”http://i263.photobucket.com/albums/ii150/mohamedrias/ad.gif”/></a>


I hope you will encourage me to create more templates like these.
If you guys need any Blogger Hack or modification , please tell me in comment form . I can even modify template to your wish for free.

FRAMED THREE COLUMN BLOGGER TEMPLATE

Today I am going to Introduce my third three Column Blogger Template called ” Framed Blogger Template”. I am Calling it as Framed Blogger template , because this Template has borders for each section like header , Content , sidebar , etc. Now I am testing this Blogger Template in my own Blog.
 Framed three Column Blogger template
Main features of this Framed Blogger Template :

1. On the right side of the header you can see two widgets in your Layout section ( both are locked). In Top HTML widget you can add Adsense ad or any other HTML code.

The bottom Top Menu widget is only for showing navigation links.
Adsense Ad with navigation menu 2. Author Comments in different style hack is included. 3. Page navigation Hack.
– In this framed Blogger template I am introducing my next Page Navigation widget with some bugs fixed and with a new CSS style. Now this Page Navigation widget contains links for First page and Last page.
Page Navigation Menu 4. Two sidebars on right side. ( 180px and 280px ) 5. Best adsense Placement options for higher CTR.
6. Related posts Widget is included.
7. Adsense ad 468 x 60 is placed at the bottom of the post , please replace the code with yours. ( this adsense ad will be shown only in Post pages. I will write an article on this very soon)
This work is done under Creative Commons License 3.0 , so please don’t remove the footer credits.
you can modify the script to suit your template , but you can’t redistribute any script included in this template , without my permission.
Demo of Framed Blogger template
I hope you will welcome this Blogger template and encourage me to create more templates like these.

Blogger Accessories Three Column Blogger Template

Today I am going to Publish my first Three Column Blogger Template. This Three Column Blogger Template has two sidebars on Left and Right side with Content in Center. This three column template contains valid CSS .
 Blogger Accessories three column blogger Template
Main Features of this Three Column Blogger Template.
* Adsense 468 x 60 ad on header top

*******************************

I have added two page elements in header section , so just add the adsense code or any other code to the HTML/Javascript element. Adsense Ad in Header
You can see in the image , there is a HTML widget on right side , Add Adsense ad code there.
* SEO page title Hack is also included.
* Navigation Menu is included
* Numbering Blogger Comments Hack is also included.
* Unique CSS style for Author comments is also included inorder to distinguish author comments from others.
* Display only specific number of posts in Lables Page hack included.
* Related Posts Widget is also included
* Page Navigation Menu of my CSS style.
*Comment Form is embedded below each post.

This Work is done under creative commons License 3.0
So please don’t remove the footer credits.
If you want to see the template in Action , please have a look at my own Blog because I am using this template only.
I hope all of you will welcome this new three column template. Please leave a comment so that i can modify this template further.

Adsense Video Units Ads is available for All Now – Adsense Player

Today I have got a great information to you all guys. We all know that Google Adsense is going to retire Referral ads by this end of August 2008 . Now they have several future plans , One among them is Adsense Video Units is available to all now.
Before this latest announcement , Google Adsense video units are available only to US citizens. But now they have made it available to all .

Why should we prefer Adsense Video Units ?

When compared with Adsense Text ads , Image ads and referral ads( retired ) , Adsense Video ads have Higher Cost Per Click ( CPC )and click through rates. So with Adsense Video units Ads , we can make more money now.
How To Add Google Adsense Video units Ad ? Login in this page : Youtube Adsense player . Then create Adsense Video player by changing settings and click generate code . After doing so put the code to you website.
Conclusion :
Adsense Video player is a best tool to make Money Online. So I want all Adsense users will welcome this new feature and make it grant success.

Display CSS codes and Scripts in unique Style – Blogger Post Styling hack

All of you might have noticed that in my blogger posts I use a custom CSS style to show CSS codes , Scripts and other important notes. After looking at this cool features one of my reader asked me how to do this. So I am Posting this ” Post Styling Hack for blogger to display scripts and CSS codes in unique style ” .
 Blogger Post Styling Hack

Just Follow This steps to add this ” Post Styling Hack ” to your Blog .

Step 1 :
Login to your Blogger account and navigate to Layout section . Then go to Edit Html subtab .
No Need to Check Expand Widgets Box
Step 2 : Add This CSS code above this line ]]></b:skin> .


.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
See Screenshot Below for Instructions :
Blogger Post Styling Hack
you can change the text in red to your wish to suit your Template.
Step 3 :
Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .
<div class=”codeview”>

Insert the Special code here

</div>
Don’t use id instead of class
that’s it you have add this post Styling hack to your blogger template .
 Blogger Post Styling Hack
See you soon with a new hack . please tell your suggestions to this post. It will help me to improve the standard of this hack.

Page Navigation Menu Widget for Blogger

Let us see how to add this Page Navigation Menu Widget :
Page Navigation 
Menu Widget

step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.
Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .
Step 3 : Now add this 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=5;
var displayPageNum=3;
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 += ‘&nbsp;<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;color: #000000;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=jso
n-in-script&callback=showpageCount&max-results=99999&#8243; type=”text/javascript”></script>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html”>Grab this Widget ~ Blogger Accessories</a></div>
After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot
Page Navigation Menu Widget
In the code above you can edit the lines in red to your wish .
1 : var pageCount = 5;
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 2 . In each page you can see only 2 posts .
2 : var displayPageNum = 3;
here the digit in red represents number of pages to be listed.
For example :
In my blog I have chosen 3 , then 3 pages will be shown.
Now save your template .
That’s it now we have added Page Navigation menu widget to our blog successfully .

Colorful Link Hover Hack for Blogger

Today I have come with a really interesting and cool hack . This Hack is about changing Link Hover color with a simple Script. In all Blogs or website you can see only one Link Hover Color. But Here is cool javascript to add more colors to links. Here After I will add blogger hacks to my blog so that you guys can have an idea about that hack.
I Have added this Colorful Link Hover Blogger Hack to my Blog , you can check this hack by hovering your mouse cursor through links.
Colorful Link Hover Hack

In the Image above you can see that a single link is showing nearly 10 colors on Mouse Hover.

How to Add this Colorful Link Hover hack to my Blog ?
Its really very easy . Now Let us see how to add this Colorful Link Hover Hack in Blogger.
First login to your Blog and Navigate to Layout section . There click Edit HTML subtab .
Now search this following code </head> and add the below Javascript above the head section. If you Have any doubt please refer Image below .
<script src=’http://rias.techno.wizard.googlepages.com/rainbow2.js’/>
ColorFull Link Hover - Blogger hack
That’s it we have successfully Added colorful Link Hover Hack to Blogger .
Troubleshooting :
Sometime you may not see this hack because my Google page account bandwidth may be exceeded . Please upload the javascript to your own google page account.
Featured Post :
Tomorrow I am going to write about Adding Page Navigation Hack , don’t forget to subscribe. Only few blogger blogs have this feature (Mine is also one among them ).
Thanks for reading

Add Search form to Blogger Beta Template

At first Adding search form to blogger was difficult but now Blogger Accessories has made it easier. We can add search form to blogger in three method . But in this post I am going to concentrate only on Adding custom search form . Custom search form means you can modify the search form look by adding simple CSS style.
  this is the 
screenshot of  Search Form Widget
Step 1 : Log in to your blogger template and go to Layout section .
 
Adding search Form Widget to Blogger Beta : Layout Image

Step 2 : Now click Add Page Element , in the List select Add HTML / JAVASCRIPT and paste the below code thereand save .
<form id=”searchThis” action=”/search” style=”display:inline;” method=”get”><input id=”searchBox” name=”q” type=”text”/> <input id=”searchButton” value=”Go” type=”submit”/></form>
Now see your blog , there you can see a beautiful search form widget like this ,
I hope you like this hack

Show only specific Number of posts in Labels Page – Blogger Hack

One of my Reader asked me in Comment Form ” How to Show Specific Number of Posts in Labels Page ? ” . So I am writing this Post on his request. This Hack ( Show Specific Number of Posts In Labels Page ) is very useful for Page Navigation Hack . Users who use my Page Navigation hack might have came across an error , that is When They visit Labels Page , Blogger will display all posts under that particular label although you might have mentioned in the page Navigation Widget to show only 2 , 3 or any number you specified there.

So here is an easy Hack to display only specific number of posts per page while visiting Labels. Just follow the simple steps below to implement this hack on your blogger blog.

Show Only Specific Number of Posts in Blogger Labels Pages

Show Only Specific Number of Posts in Blogger Labels Pages


Step 1 :

Users Who Have installed Labels Widget in their Blog , Please Navigate to EDIT HTML PAGE . Then put a check to Expand Widgets Box on Right Side.

Now search for this Code :

<b:widget id=’Label1‘ locked=’false’ title=’Labels’ type=’Label’>

only the Widget Id can be different , other things will be same. Now search for this code within the widget
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’>
<data:label.name/>
</a>
</b:if>
<span dir=’ltr’>(<data:label.count/>)</span>

Now replace the above code with this code .
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url + &quot;?max-results=2&quot;’>
<data:label.name/>
<span dir=’ltr’>(<data:label.count/>)</span>
</a>
</b:if>




The digit in red represents number of posts to be Shown in Single Labels Page.
Change the digit ( number ) in red to your wish .

You Can put same number you entered in Page Navigation Hack

That’s it We have successfully added ” Show Specific Number of Posts in Labels Page ” . here after your Blog Will Show only specific number of posts in Labels Page. I hope This Hack will be useful for you all. If you have any doubts or difficulties in implementing this Hack please let me Know. I will clarify them in comment form or If neccessary I will write a New post like this.

thanks for reading…….

Redirect Users From Old Domain To New Domain – Blogger Hack

Hi Guys , Today I have come with the most Wanted hack named ” Redirect Users From Old Domain To New Domain ” . This Hack is very useful for Blogger Users , because in Blogger Bx-Errors may cause your Blogger Blog unavailable for longtime. As you all know my Blog is also met with an BX-error which made my Blog unavailable for 2 months. After waiting such a longtime I decided to create a new Blog with same Domain (rias-techno-wizard.blogspot.com ). But now guys I have found a simple Script through which we can redirect Old Blog users to Our New Blog. In this Post I will tell you How to Implement This Blogger Hack ” Redirect Users to New Blog “.
 Redirect users from Old Domain To New Domain


by Blogger Accessories
Is this Hack Useful ?
Of course ” Redirect users to New Blog Domain ” hack is very useful for those who have changed their domains.

But Now I have a simple Javascript which redirects our Old Blog Users to Our New Blog.
How to Set-up this Hack ?
It’s very Simple , just follow the steps below.
Login to your Blogger account and Go to Layout section of your Old Blog . Then navigate to EDIT HTML sub tab and search this text </head> .
Now Copy and paste the following Code Below or Above that line .
<script>
//<![CDATA[
alert('Sorry For the trouble guys , I have moved my Blog to http://ezeemusic.blogspot.com . So you will be redirected to my New Blog in few seconds');

window.location.href = 'http://ezeemusic.blogspot.com';
//]]>
</script>
The text in Green will appear in the Alert Box ( Edit it to your Wish ).
The Text in Red is the destination Url . ( place your new Blog Url )
You can Also place the above code , by adding a new HTML/JAVASCRIPT page Element .
Now When users go to your old Blog they Will get this Alert Message as shown below ,
 Redirect users from Old Domain To New Domain
and they will be redirected to your New Domain in a few seconds.
I hope you will like this Hack. if you Have any Problem let me know. I am here to help you .
thanks for reading , see you soon with a new hack.

Jquery Link Scrubber Hack for Blogger

Everyone would have noticed in their Blogs that whenever you click an Link a dotted border appear around the link. The dotted Border not only appears for links but for all images , Post Titles , etc. It’s some what Annoying . After surfing internet for a while Now I have found a hack developed by Crismancich , which removes the dotted line onfocus from links.

What things We need ?
To Implement this Link Scrubber Hack we need to scripts namely ,
1. Jquery 1.2.2 .js
2. Link Scrubber Script
How to implement this Link Scrubber Blogger Hack ?
Go to Layout section of your Blog Template and then navigate to Edit HTML sub tab.
Now search for this code </head> and place the following code immediately above that line.

<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js”></script>

<script type=”text/javascript” src=”http://www.crismancich.de/jquery/plugins/linkscrubber/jquery.linkscrubber.js”></script>

or

<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js”></script>

<script> $(document).ready(function(){$(“a”).bind(“focus”,function(){if(this.blur)this.blur();});}); </script>


That’s it We have successfully added Jquery Link Scrubber Hack for Blogger.
Jquery script must be above Link Scrubber Script
If you Have any doubt please ask me , I am here to help you .
See you soon with a new hack.

Outbrain Post Rating Widget for Blogger

Today I am going to write about an interesting Post Rating widget developed by Outbrain.com . This Post Rating Widget is available for all blogging services like Wordpress.com , blogger , typepad , drupal , etc . A Similar Post rating widget is developed by draft.blogger.com and is found here at Star Rating Widget
Advantages of this Post rating Widget :
1. Know your readers opinion about the post
2. Drive More traffic ( Outbrain has a feature called Recommended Posts which is embedded within rating Widget , So outbrain users who have enabled this feature will show your post . )
3. We can also display Most Popular posts with this post Rating Widget.
How to Add This Widget to your Blogger Blog ?
It’s very simple . Visit http://www.outbrain.com and register an account ( to track traffic and details ). While registering , check this box (Yes – I want to install the outbrain widget and/or access my blog’s reports ) .
After this step , claim your blog by filling your blog Details and click continue. A new tab/ window will open and just choose your blog . outbrain will install the widget automatically.
Configuring Post Rating Widget
Sign-in to your Outbrain account and click manage Blogs tab on left side and then navigate to Setting sub-tab.

Now customize the widget to your wish. If you check ( Best Recommendations box ) you will get posts from other blogs below your Post Rating Widget like this .

If you choose Most Popular Posts box then the widget will Most rated Posts above the rating Widget.
I hope I have given you much details on Adding this Outbrain Post rating Widget for blogger. If you have any problems let me know. Very soon I will post how to add this Outbrain Post rating Widget Manually , without registering Outbrain .
Thanks for reading………..

Add Yahoo Smileys to Blogger Posts – Firefox Hack

This Blogger Hack is focused Firefox Users who want to add Yahoo Smileys to Blogger Posts. This hack don’t work for other browsers like Internet Explorer , Opera , etc .
Firefox users follow this simple steps to add Yahoo smileys to Blogger Posts :
Step 1 :
open Firefox browser and install ” Grease monkey ” by visiting Grease monkey Addon ! and restart browser .
step 2 :
After installing Grease Monkey , install this Javascript file ( just open th file , Grease monkey will install automatically ) .
step 3 : Go to Layout section of your blog and click Edit HTML subtab . Now add this CSS code above]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

that’s it we have successfully added yahoo Smileys to blogger.
See you soon with a new hack .

Navigation Menu or Drop Down Menu for Blogger

Here is an easy tutorial to add Navigation Menu or Drop Down Menu in Blogger. With this navigation Menu widget you can display most important links or categories in drop Down Menu format. This navigation Menu is very tiny and you can display as many links you want.
Let us see how to add this Navigation menu widget in Blogger :
Add navigation or drop down menu 
in blogger
Here is the Default code of Navigation menu :
<form><select name=”menu” onchange=”window.open(this.options[this.selectedIndex].value,’_blank‘)”size=1 name=menu>

<option value=0 selected> Type your Navigation Menu Title Here! </option>
<option value=” Url of your Link here “> Title of your link </option> </select></form>
in this above code , you need to edit the text in red to add links .
Look At My code below so that you can get an idea :<form><select name=”menu” onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)”size=1 name=menu>

<option>- Blogger Accessories- </option>

<!– change the links with your own –>

<option value=”http://bloggeracs.blogspot.com/2008/07/jumong-three-column-blogger-template.html”>Jumong Blogger Template</option>

<option value=”http://bloggeracs.blogspot.com/2008/07/show-date-before-each-post-in-blogger.html”>Show Date before each post</option>

<option value=”http://bloggeracs.blogspot.com/2008/07/related-posts-widget-for-blogger.html”>Related Posts Widget</option>

<option value=”http://bloggeracs.blogspot.com/2008/07/hide-navigation-bar-in-blogger.html”>Hide Navigation menu bar in blogger</option>

</select></form>
the result is :
How to Add this Navigation menu / Drop down Menu To my blog ?
It’s very simple . First edit the code according to your wish and copy the code .
* Go to Layout section of your template .
* Click Add PageElement tab in sidebar
* Select HTML/JAVASCRIPT subtab
* Paste the Navigation Menu code you copied before there and save .
that’s it now you can see a beautiful Navigation Menu in your blog.
See you soon with a new hack .