Image adding Alexa Widget in Blogger

Continuing the previous article about alexa rank, now I would like to tell about more detail about adding alexa widget in blog. This posting is special for those who are still confused to add alexa widget not for advance bloggers because it won’t be useful

Before reading the main topic that is about steps to add alexa widget in blog you had better know the advantages you will get if you add alexa in your blog. Ok, in my previous posting Kang Rohman told that one of the ways to increase alexa rank is by adding alexa widget in our web or blog.

As we know that alexa rank will make a ranking based on the numbers of visitors to our blog or web, more visitor better alexa rank. How can alexa know the visitor numbers of the web or blog? Alexa will know it based on computers which have installed alexa toolbar. But not all people install alexa browser in their internet browser? That’s why there is another alternative for blog or web owners. They can add alexa widget in their blog or web in order to get the accurate data about the visitors who come to our blog or web. By adding the alexa widget in the blog or web, them alexa machine will know accurately how many visitors and page views in our blog or web.

From the reasons above, Kang Rohman suggests you to add alexa widget in every blog if you want to get better rank. Well, is it clear enough? I think that it is clear enough why we need to add alexa widget in our blog or web.

Now, If you want to add alexa widget in your blog or web but you are confused, just follow the following steps;

1^st Step

1. Click here to go to alexa website
2. Type your blog URL in available column. Example: kolom-tutorial.blogspot.com (without http://), then click “Build Widget”.
   
   

   

3. 
   

   There 3 types and sizes you can choose, copy the code next to the images and paste in notepad or other text editor. Save the code in your computer.

2^nd Step

1. Log in into blogger with your ID
2. Click Layout
3. Click Page Element
4. Click Add a Gadget
5. Click Plus sign plus (+) next to HTML/JavaScript.
   
   

   

6. 
   

   Paste the code you have saved in notepad into the column shown or available

7. 
   

   Click Save button.

8. 
   

   Move the element you just made into the place you want.

9. 
   

   Don’t forget to click save button located on the right.

10. 
    

    Finish

Hopefully that after adding alexa widget in your blog, alexa rank of your blog or website will be better (the smaller, the better)

Alexa rank is also really quick in updating so the result can be seen in a few days. One important thing in increasing alexa is by trying to increase the number of visitors into your web or blog

Good Luck!!!

Image 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)

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

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'/>
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'> 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></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 <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> </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. Still if you have problem then please contact me through contact form.

Image Submit Blogs and Blog RSS Feeds

Submit Blogs and Blog RSS Feeds
Blog Digger - submit your rss feed for your blog
ReadABlog - submit your blog
Blogarama - submit your blog
BlogStreet - blog submissions
Globe of Blogs - submit your rss feed for you blog
Kmax Blog Links - blog submission
BlogSearchEngine - submit rss feeds for web logs


BlogHop - submit feeds for blogs
EatonWeb - submit feed for online blogs
PopDex - feed sumbission for web blogs
Blo.gs - blog submissions
BlogCensus - submit your rss feed for your blog
BlogTree - blog submission
BlogStreet - rss feed submission for blog
BritBlog - blog submission
BlogLines - submit your blog to the directory
Australian Blog Directory - submit your blog
BoingBoing - submit blogs for review
RootBlog - enter the URL of a RSS feed you want to added to the database.
Weblog Directory - submit blog to directory
BlogoSphere EcoSystems - add your weblog
Blogz - add your blog
BlogWatcher - submit the url of your web log
BlogMatcher - submit your blog url
BlogPulse - automated trend discovery system for blogs
BlogCatalog - The Ultimate Blog Directory - Search For Blogs
Blogdir - spanish blog community
Blogs R Us - add feed
Blogs By City - add your blog!
FeedMap - submit a blog!
BlogSearch - submit blogs
BlogSweet - blog feed submission.
BlogFlux - blog feed submission.
Blogtastic - blog feed submission.
Blog Introduction - submit blogs.
Finding Blog - blog submissions
Bulletize - blog submissions
BlogTopSites - blog submissions
Blog Fuse- blog submissions
Blogion- blog submissions
AddUrlBlog- add blogs
Blogbib- add blogs
BOTW Blog- add blogs
Blog Directory Submit- add blogs
BlogTopSites- add blogs (they will provide required code that must be inserted in your website, in order for blogtopsites to rank your blog)
iBlogBusiness - add business blogs only
BlogSiteZone - manually add blogs to directory.
BlogTopList - adds blogs to directories.
BlogBurst - adds blogs to directories.
Podcast Submissions
Podcasting Station - submit podcasts
Podcast Submission Directory - submit podcasts

Image Submit RSS Feeds

Submit RSS Feeds

the following sites allowing you to submit RSS feeds:

Consider RSS Submit to automate submissions!

RSS Feeds
RSS Network - submit RSS feeds & select category

Syndic8 - submit RSS feeds

DayPop - post your RSS feed or blog

Feedster - submit your RSS feed

Rocket News - post your RSS feed

Technorati - submit your RSS feed to be pinged

Userland - submit rss feeds

Postami - submit rss feeds

Finance Investing Feeds - Only submit finance or investment related feeds.

Security Protection Feeds - Submit only security or protection related feeds RSS feeds select appropriate category.

Realty Feeds - Submit only home related RSS feeds. Be sure to select the appropriate category.

Medical Feeds - Submit feeds related to medical care or health.

Religious Podcasts - Submit only podcasts that relate to religion, sermon or spiritual beliefs.

Sports Feeds - Submit sports related RSS feeds and podcasts.

Political Feeds - Submit political feeds and podcasts.

Government Feeds - Submit feeds ONLY from government agencies. Feeds from both Local and federal governments are accepted.

Educational Feeds - Submit feeds and podcasts related to education.

2RSS - submit rss and assign category (on bottom)

NewsMob - submit rss news feeds

RocketInfo - submit your rss content and feed

Edu RSS - harvests only feeds dealing with educational technology and related issues. All feeds are reviewed before being added to the list.

Sourceforge.net- submit News using XML

Complete RSS - enter the url(s) of the feeds you wish to add to the directory.

Feeds.com.br - add rss feeds

Memigo - submit a news link to memigo

BulkFeeds - submit an rss feed

Ping-O-Matic - rss feed submissions (pings site)

Yenra - submit RSS news feed

easyRSS - gives you a direct access to the content you are interested in.

NewsXS - submit rss feeds

FeedFarm - all submitted feeds are reviewed

FastBuzz - submit feeds

Search4RSS - submit RSS feeds

DeskFeeds - rss feed and blog submissions

Terrar - rss feed submissions

The Feed Spot - submit feeds

StepNewz - submit rss news feeds

RSS Verzeichnis - German feed submissions

4Guys from Rolla - submit feeds

DevASP - add feed listing

FuzzySoftware - submit XML listings

ASP Index - submit RSS feeds

SourceForge - submit news feeds

Feed Directory - submit RSS feeds in the feed directory.

FeedBeagle - submit feeds (scroll down)

FeedPlex - submit feeds

Feeds4All - submit RSS feeds

Plazoo - submit RSS feeds

Newzfire - submit RSS feeds

Feed24 - RSS feed submissions

Shas3 - Submit RSS feeds select appropriate category

FeedCat - Submit RSS feeds select appropriate category

RSS Clipping - add RSS urls

Read A Feed - add RSS urls

Loomia - add RSS feeds

Feeds2Read - add your RSS feeds

Feedzie - add your RSS feeds

RSS Portal - add your RSS feeds

RSS Feed 4U - add your RSS feeds

StepNewz - suggest RSS feeds

StepNewz - suggest RSS feeds

JordoMedia - suggest RSS feeds

RSS Mad - add an RSS feed (on bottom right side)

FeedBomb - Navigate category and suggest a feed.

nFeeds - Submit RSS feeds only.

Auto Feeds - Submit automotive feeds only.

News Goblin - Submit automotive feeds only.

Wordum - Submit automotive feeds only

FeedSee - Submit feeds using keyword searches.

Submit Feeds - RSS submission feeds

Feedooyoo - Submit RSS feeds

Science Port - Add RSS feeds

FeedAge - Submit RSS feeds

GoldenFeed - Submit RSS feeds

RSSMicro - Submit RSS feeds

Octora RSS Feeds - Submit RSS feeds

FeedFury - Submit RSS feeds

RSSMotron - Submit RSS feeds

FindRSS - Submit RSS feeds

FeedBase - Submit RSS feeds

RSSMotron - Submit RSS feeds

MoreNews.be - Submit RSS feeds

Day Time News - Submit RSS feeds

FeedGod - suggest a feed (on the right)

RSSBuffet - submit an RSS feed

SolarWarp- submit an RSS feed

Feedest - submit a feed

RSSMicro - submit a feed

FeedBees.com - submit an RSS Feed

RSS Mountain - submit RSS

FeedSee - human edited RSS submissions

RSSSpan - Feeds Directory Search.

FeedNuts - Feeds Directory Search.

Videocast Feeds

Videocasting Station - Submit RSS feeds

Regional Feeds

RSS Feeds.be - Beligian RSS feeds. (no obvious way to submit feeds)

RSS Nachrichten.de - German RSS feed directory.
RSS feeds Israel - Israeli RSS feeds

Spanish Feeds - Spanish RSS feeds

Japanese Feeds - Japanese RSS feeds

Submission Tools

FeedPark - submit RSS feeds automated submission helper

FeedShot - fee based feed submission

SubmitEmNow - addon for feed submissions

Feed Validator

RSS Feed Validator - desktop feed validator.

Podcast Submissions

Submit PODCASTS

Image Create CSS popup Image Viewer in Blogger

The image is small in the webpage but seen bigger when you hower the image.Isn't it interesting?Yes.Bloganol brings you the greatest image hack.This popup image viewer is good for those blogger who like to place more images in their blog posts but wants less area to be occupied and wants image seen clear.
Demo: Hover the following thumbnail Images with your Mouse Pointer.If it doesn't work then visit this demo page link.

Simply beautiful

.
So real, it's unreal. Or is it?
Installation of this widget is not so hard. First of all copy the following CSS code to the head section of your blog.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

And the second and Last step is to copy the following html codes and paste it to your blog either while posting or in your sidebar adding a new page Element.

<a class="thumbnail" href="#thumb"><img src="Image Url"

width="100px" height="66px" border="0" /><span><img src="Image Url"

/><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url"

width="100px" height="66px" border="0" /><span><img src="Image Url"

/><br />So real, it's unreal. Or is it?</span></a>

In the above code replace Image Url with your Image Url .

Image Sidebar with rectangular Border and Round Header

 

Hey friends I have brought a cool sidebar hack which makes your blogs sidebar looks like Woork and Bloggerbuster Sidebar.
First of all Goto Blogger's Edit Html Page (Sign in->Dashboard->Layout->Edit HTML).After that Paste the Following code Between <head> and </head> Tags in that Page.If you find the Code with .sidebar h2 { then replace that whole code .

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

This code is for the Original Minima with Sidebar 220px which gives style to Sidebar Title.The Image used is of 220X10 size. If you have got Sidebar more than this then Make a picture Like this or Edit This to the width equal to your Sidebar.Then Upload that Image to Image host like Photobucket,Imageshack and replace the above Image Url with that Uploaded Image Url.


Now the second and the Last Step.Paste the following code with the above code in your Template.

.sidebar .widget-content {
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
}
.sidebar .widget {
margin: 0 0 20px 0;
padding: 0;
}

This code gives style to Sidebar Content.After you complete this tep Save your Template and see the result.If you like this post then please link love us .This helps us to do more good works in future.

Image Hide Posts count in Labels Widget

 

It is very easy to hide posts count in your labels widget.First of all sign in to blogger.After that goto Layout and then Edit HTML page.Now Expand Widget Templates by Checking on "Expand Widget Templates" and Find the following code.

<span dir="ltr">(<data:label.count>)</data:label.count></span>

All you have to do now is delete that code.Mission Accomplished!

Image A blogger hack to increase your Feedburner 's Feedcount

Established blogs like ReadWriteWeb and Techcrunch proudly show a Feedburner chicklet that displays the sites popularity. But beware – since people are more likely to subscribe to a site with a bigger amount of readers, some sites manipulate the counter.

Every once and a while co-editor Patrick and I stumble on a shady looking website with a ton of readers. That made us wonder whether Feedburner is hackable. I’ve sacrificed my personal blog for a hacking experiment and the result; faking your subscriber count IS possible!

We found an easy way to hack Feedburner (Not the obvious hack that simply steals a chicklet from a popular site). Looking at the subscriber count at some sites, we’re not the first ones who found out, but we are the first ones to write it down. All it takes is an OPML file, a Netvibes Universe, and a good night’s sleep.

EDIT: While the hack still works, I am happy to tell you that Google and Netvibes are working on a solution to the problem. Steve Olechowski, co-founder Feedburner mailed me and said: “These things happen occasionally and are usually fixed in a couple of days”, he added that the feedburner counts do not influence advertisement measurement. Franck Mahon from Netvibes said: “We are working on a fix to filter out in the reporting the duplicates while still allowing people to add several instances of the widget to their startpage.” When things get fixed, it would be interesting to see the differences on some sites.

How to manipulate your Feedburner subscribers in two minutes

all right

Image Show Entrecard Recent Droppers

Showing Entrecard recent Droppers is also like showing Recent Posts and Recent Comments in your blog or is More easier than that.learn how to show recent Entrecard droppers in your blog.
Step 1:Sign in into your Entrecard Account.
Step 2:Right Click the RSS icon at Top Right then Click " Copy Link location".

Step 3:Sign in into Blogger
Step 4:Goto Blogger layout Section.
Step 5:Click on Add a new Gadget.After that a pop-up window will appear and Then Click Feed.
Step 6:Now Paste your Feed URl obtained from Step 2 there.
Step 7:Now change the Feed Title if you like and then Click Save.

Image Show Top Entrecard Droppers in Blogger

Step 1
Sign in into your Entrecard Account.

Step 2
After that Goto statistics Page.

Step 3
Copy Feed Location from small Feed Logo at Statistics Page.

Step 4
After that Add a new Page Element in blogger Then Click Feed.

Step 5
Paste Your Feed Address there and Click continue.

Step 6
Here you will see the Top Droppers List.Change the Title and Click Save.

After you complete the above steps Preview your blog and You will see the Top Entrecard droppers most in the last 30 days.

Image Show Technorati blog Reactions link below each posts

Many people know Technorati Link Count Widget as Technorati view Blog Reactions Link,whatever It is same.When some people Links on your post Technorati tracks the Links and makes it possible to display the links with the help of this Widget.

In another sense it is also a blogger hack that helps you display the number of reactions of Links associated that that post.In the Original Technorati Code you can provide only one Link and it shows the reactions only for that Link otherwise you should have to paste the code in each and every post.
To put Link Count Widget on your blog Goto blogger Edit Html Page and Expand Template Widget.This Link seems Good when it is placed with comments count Link.For that search for <span class='post-labels'> .............</span> and Paste the following Just after that Code.

| <script src='http://embed.technorati.com/linkcount' type='text/javascript'/>
<a class='tr-linkcount' expr:href='&quot;http://technorati.com/search/&quot; + data:post.url ' id='technauthority' style='background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) no-repeat; background-position:right; padding-right:20px;' target='_blank'>View blog reactions</a>

Here data:post.url Explains the Link of the Individual post.
Once you set up this Code in your blog the code will automatically detect the number of Reactions for that post and automatically shows the number of Reactions..

Image A blogger hack for Creating numbered Page navigation in Blogger

Most said page navigation menu in the bottom of the page can appear only in Wordpress blogs. But Now here is a blogger hack which will help you to show Page Navigation Menu in bottom of the page ( see screenshot ) . you can Add this Page Navigation hack to your blogger template either by inserting script to your template by editing or you can add it as a widget . In this post I will write only how to add this Page navigation menu by editing template code.

I have used a background image for this Page Navigation hack. If you want to show this without the background image just remove the background image url .
Let us start :
Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.
Step 2 : search this line ]]></b:skin> and add this CSS code above that line.
CSS CODE WITH IMAGE :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
}

It must look like this :

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Now Add This script just below the </b:section> .

&lt;script type=&quot;text/javascript&quot;&gt;
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
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!=&#39;&#39;){
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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
fFlag++;
}
if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){
if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;
if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html =&#39;&#39;;
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
<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>

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.
That's it now we have added Page Navigation menu hack to our blog successfully .
That CSS code will suit almost all templates. Please don't remove the credit link.
I hope all of you will like this Page Navigation blogger hack . If you have any doubts please ask in comment section . Comments are most welcome , please give me your feedback about this blogger Hack.
You can also add this Page navigation hack in the another method : Widget style.

Image A blogger hack to show related Posts below Each blogger Posts

to show Related Posts below each Post in Blogger blogs.This hack helps to generate internal blog Traffic and more page Views.

There are Altogether three methods for showing Related posts below each post in Blogger.Among them I am going to do is Method no 3 which is the easiest and More reliable.To Learn to show related posts in Blogger Follow the simple Steps below.

Before you start any Blogger Hack Please Backup your Blogger Template
First of all Goto Blogger Edit Html Page,Expand Widget Templates and Paste the Following Code just above </head> in your blogger Template.

<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>

Now in second Step Search for <p><data:post.body/></p> and Replace it with the Following Code.

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

After you Complete the above steps Save your blogger Template and see the hack working.

Image Install Syntax Highlighter for better code Viewing in Blogger

Syntax highlighter is a tool developed by Google Code that help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.
Is is simple to install syntax highlighter for your blog.First Download Syntax Highlighter into Your Computer.After that Extract the Files and Upload it to Your Google Pages Account.

Now in second step Login Into Blogger -> Goto Edit Html Page and Paste the following code between <head> and </head> Tags in your Template.

<link href='http://GOOGLEPAGES USERNAME.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushPython.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushVb.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushXml.js' type='text/javascript'/>
<script src='http://GOOGLEPAGES USERNAME.googlepages.com/shBrushRuby.js' type='text/javascript'/>

In the above Code Replace GOOGLEPAGES USERNAME with your Googlepages username where you have Uploaded the Files.
In the Third step Paste the following Code just before </body> Tag in your Template.

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

After you Complete the above steps Save your Template.Now you have to ways to implement Highlighter style in your Blog post Codes.
By Using <pre> and </pre> Tags.
While Creating or Editing your Blog Posts write the codes between <pre> and </pre> with name Code and Style c-sharp as in the following Example.

<pre name="code" class="c-sharp">
The Code Goes Here......
</pre>

Second is by Using Text area.
Use the Text Area as given in the following Example.

<textarea name="code" class="c#" cols="60" rows="10">
... The code Goes here ...
</textarea>

Thats all about this Blogger hack.

Image How to create section to add Gadgets in your header section?

Creating a section in blog header lets you add gadgets in your blog below and above your blog header.It is much more easy to create a section to add gadgets below and above your blog header.Follow the simple tutorials below and know how to create it.
Search for the code with id='header' in the code section of your blog without expanding widget templates.The block of code looks like this.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bloganol Sample Blog (Header)' type='Header'/>
</b:section>
</div>

Now change showaddelement='no' to showaddelement='Yes' and maxwidgets='5' like below.Here maxwidgets='5' means you can add maximum 5 widgets in your header section.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Bloganol Sample Blog (Header)' type='Header'/>
</b:section>
</div>

After you finish this save your Template.Here are the snapshots related to this hack.
Before:

 

 

 

 

 

After

:

 

 

 

 

 

thanx

Image Show Commentators Photo inside comments in Blogger

This hack helps you show the photo of the commentator embedded on the left side of the comment or below the commentator's name.I have also performed this hack in my blog.Now whenever Blogger users comment in my blog with their Blogger Profile then their photo will be obviously shown in the left side of their comment just like below.

Isn't it great?It has got many features like:It attracts more users to Comment on your blog,Makes your blog professional looking and the comments seem easy to manage.It is not so hard to perform this hack in your blog.For that you must follow the following tutorial.
First of all copy the following code and Paste it in your blog Just above </head> tag.

<script src='http://bloganolutilities.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Now in Second step search for the following Block of code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

After you Find searching the whole block of code,select the Codes and replace it with the following block of codes.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<div class='commentphoto' style='float:left;margin:5px;'/>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

After you replace the code Save your the Template and see the photos of your Commentators.Enjoy.

Image how can - Comment numbering in Blogger

Last day when I was converting a wordpress theme into Blogger I saw the comment numbering in the wordpress theme and I tried to show the Comment numbering in that Blogger Theme.So I searched the hack to show comment numbering and Finally found that hack in randomness.

It was not so hard to show comment numbering in Blogger.It is just like showing commentators photo inside comments in Blogger.So I have brought this hack to you.Just follow the tutorial below.
Goto Blogger Edit Html page , Expand Widget Templates and Search for the Following block of codes.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Now in second step , replace the above block of codes with the following block of codes.

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

Now in last Step you need to style the numbering.For that add the following codes just above ]]></b:skin>: in your Template.

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}
/*since the numbers are actually links, we need to force the color properties*/
.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

After you complete the above steps,Save the Template and see the comment numbering in your blog.If yu got any problem then let us know about it.

Image Give style to your Blog Link Titles

NiceTitle is a relatively simple script that creates a div-container that pops up when a link (with the title attribute is hovered. This script shows the title of the link plus the URL links redirect to when the links are hovered.
How to Set Up this Script?

---

Setting up this script is also same like adding other codes in Blogger.You just need to Paste the CSS plus JavaScript code in your blog Code Section.To setup this script in your blog Just follow the simple steps below.
1. Download nicetitle.js and Upload it to your Googlepages account.
2. After that Goto Edit Html Page from your Blogger Dashboard after you Log in to your Blogger Account.
3. After that add the following lines of code just before </head> in your Template.

<script type="text/javascript" src="nicetitle.js"></script>

4. Next step is you should add style to this Script.For that Add the following block of codes just above ]]</b:skin> in your Template.

div.nicetitle {
background-color: #A38531;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
padding: 4px;
position: absolute; top: 0; left: 0;
text-align: left;
width: 25em;
z-index: 20;
}
div.nicetitle p {
margin: 0;
padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
}

After you complete the above steps Save your Template and don't forget to use Title in your Links.If you have any questions then simply tell us about it either by Commenting or Contacting us.

Share this post :

Image some tips to drive traffic to your blog or website

If you started a blog and you want to make some future,you need to concentrate on your traffic in the start,rather than getting your friends to click on the ads.But how to make people come to your website,read it and come again.Analysing and detailing it will take almost a year.Here by im posting some quick tips for the new bloggers.
Content :You post even just one post a day,it should have content which has quality.Its better to have single good post than 10 bad ones.viewers always appreciate the pages with good content.You should make your best effort in getting them back to your site again.Make your posts conversational, pithy and topical. Keep them short and stick to one topic per post.Write often and regularly so that both readers and search engines visit your blog more often.
Search Engines : one of the best sources of traffic if you make your site well organised.Come up with nice keywording and you will get good page ranking .The more is your page rank the more the ad provide want to pay to you.Make sure your blog URL has got very good keyword in its title.Use submission sites to submit your URL in all the search engines like google,yahoo..Dont forget to submit your feed in RSS directories.There are sites which has submission directory links in bulk.Go there and submit your feed URL.use feedstats to attract users like the feedburner chicklet i have in my subscribe box.
Signature : post your blog address in the signature in your email making the users know your presence in the web.Go to each and every place where you find a lot of surfers like forums,social networks,community discussion and write your link over there.Write your link in the comments of the most famous blogs.But remember that Google dont count this as a linkback to your site.
Email subscription : Dont forget to give a link of subscribe to updates through email on your blog.
Social bookmarking: Add a link of submit my site to digg,redditt,blinklist,buzz it and ....at the end of each article your write like i have on my blog.Submit your articles to these sites to get best traffic.
Backlinking : Try to contact authors of good blogs and request them for backlinks.It should nt look to them that you are begging,Write a letter like this"I have something interesting for you on my webpage.If you find my site or blog interesting,give me a link o my site on your webpage"
I hope these tips might had helped you to a good extent.Dont forget ot post your comments and anyother additions

Share this post :