home

You know it has been announced that Star Ratings are enabled for Blogger , on Blogger Draft Blog , but probably you realized that this new feature of blogger doesn not work on custom blogger xml templates , but you should that God because there is GosuBlogger to explain how to fix this problem =P ,

Do not worry , its easier than you think , i investigated star rating codes and understood the way it works , heres explaning :

Go to edit HTML and expand widgets , and find the lines below ,

<!-- feed links -->
<b:include name='feedLinks'/>

After finding the codes above , add the codes below after these codes , here the codes you should add :

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

~~~~~~~~~~~~~~~~~~

We have added the codes which let star rating system work , Now we will ad star rating codes !

Since star-rating system may not fit the place where date and total comments are showed , we will add this feature after posts .

Now find the codes below ,

<data:post.body/>

And add these codes after the line above ,

<br>
<br>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor'
expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>

if you want to show star rating on the left , put the codes above between the codes below ,

<div style="float: left;">

</div>

if you want to show star rating on the right , put the codes above between the codes below

<div style="float: right;">

</div>

if you want to show star rating on the center , put the codes above between the codes below

<center>

</center>

Thats all , preview your template and save . Do not forget to subscribe my feeds and feel free to ask any question

I do not if its been posted before but i wanted to share this blogger trick with you guys , as you know you cannot show more than 3 ads on a page and most of us love to add ads inside of posts since this placement generates much money to us ,but if you want to use this placement you have to show 3 posts on your main page to show 3 ads after every ads . Lets break this limitation in a legal way.


What i meant saying "post pages" ? page for single post , Like this
http://www.gosublogger.com/2008/06/blogger-ajax-template-angelic.html
When you click the link you will go to page of Angelic Theme.

1. I guess ,we better add expandable posts hack to our template , a lot of people asked me how to do this trick , heres simple explanation ;
   
   --->Expand html , and find as "post.body" and add the codes below after that line.
   
   

   
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div style='float:right'>
   <a expr:href='data:post.url'>Read More...</a>
   </div>
   </b:if>

   
   
   --->After this step add the codes below , before </head> tag
   
   

   
   <style>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   span.fullpost {display:inline;}
   <b:else/>
   span.fullpost {display:none;}
   </b:if>
   </style>

   
   
   
   ---> Now , when typing something , type full post between <span class="fullpost"> HERE</span> , and summarize before this code , do not forget , you will add span tags manually :)
   
   
   
2. Now we will add codes for ad trick to our blogger xml template,
   
   ---> Find post.body again and add the codes before of after that line , depending on your desire about the place you want to put ads , i added the ads to before posts , when you check it you will realize it.
   
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>

   
   

   Ad Code Here

   
   

   </b:if>

   
   
   
   --->If you're adding adsense , chitika or ads from other networks , be sure to convert codes for blogger from here.
   
   
   
   

I also use this trick , go to my main page , click Read More button ,and you will see and that you dont see on main page :) Hope you understand it , learning arabic made my english worse , sorry guys . Thanks for subscribing my feeds :) , do not hesisate to ask any question

Title's and meta tag's effect on serp is incredible , so what can we do to improve serp and seo for blogger blogs? The codes below will display the name of a particular entry without bringing the name of the blog in first position and this will affect our serp since titles are important for google spiders.Here're the codes :

• Goto Edit Html and find the codes below
  

  <title> <data:blog.pageTitle/> </ title>

• And change with this
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title> <data:blog.pageTitle/> </title> </b:if>

• and save .

Thats all , now wait for results :)

A friend of mine wanted to know how to add RSS subscription messages under the posts like mine , i saw this messages on BlogOhBlog.com and i wanted to do the same , here how to do it.

If you want a rss subscription message same as mine, go to edit html , expand your widgets and , copy and paste the codes below after this line <p><data:post.body/></p>

<br/>
<br/>
<div style='padding:5px; border:1px solid #999999; background-color:#efc954; margin-top:1px;'><img align='left' src='http://sdf789zzxx.googlepages.com/rss_tekil.png'/>If you enjoyed this post,<a href='YOUR-FEED-URL-GOES-HERE'><b> make sure you subscribe to my RSS feed! </b></a></div>

Tips

1. You had better host this image on your googlepages,photobucket or imageshack account to prevent bandwith from exceeding.
2. You can change border color and background color also the message and image align , thats why i coloured changable lines.
3. Before saving template , preview it , if you like it then save it . This trick will not cause any problem in your blogger template.
4. This can be used in blogger classic templates and blogger xml templates.
5. Do not hesisate to ask question :)
   

Thanks!

Want a better comment form for your blogs hosted by Blogger ? Disqus is the right place for you , also Disqus edits your template and adds this new web 2.0 comment form automatically , just follow the instructions below.

1. Go to Disqus.com and register for free.
2. After registered click get started and enter your blog url
3. Click next and chose Blogger platform
4. From your Blogger account, go to Template > Edit HTML and select "Download Full Template"
5. Now upload your template to disqus and chose right settings depend on your preference

1. NOW Go to Settings > Comments and change the Comments Default for Posts to New Posts Do Not Have Comments

After finishing this steps Disqus will show you modified codes of your template , copy codes and paste your Edit HTML section on blogger , do not worry its safe and you wont lose anythin from your template.

Sample Form :


Thats all.

Super Lady Amanda has created popular posts widget for blogger , you can add this widget to your blogger , fill the form below and click costumize and then click add to blog.


Thanks Amanda for bringing us such a great widget

Hi! I have good news to tell you nice people , i have found how to add sliding sidebar menu to blogger xml templates , im sure you're going to boost your ads and referral income with this amazing blogger widget , you know what to do , click Read More button to read rest of this article!


Check Demo of This blogger widget ( look right sidebar of template )

Before telling you how to use this blogger widget i want to tell what can you do with this blogger widget :

• You can put a referral images to get revenue from your visitors.
• You can add image or text ads.
• You can add page elements.

Features of Widget :

• Can be added to right or left side of your template
  
• It slides down as your visitors scroll down their mouse
• Can easily be added to blogger xml templates

Adding Widget :

• Go to Edit HTML from your blogger dashboard
• Leave widgets NOT expanded
• And add the codes shown in red like this :

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}


]]></b:skin>

<script src='http://goasou.googlepages.com/smenu.js' type='text/javascript'/>

</head>

Adding Sidebar Div :

• Now add the codes shown in red like this :
• If you want to show sliding bar on left change the "right" text in blue , to left.
  

<div class='wireframemenu' id='staticmenu' style='right: 10px; top: 20px'> <b:section id='slidingbar' showaddelement='yes'/> </div>
</body>
</html>

Result :


Demo :

• Here.
  

Do not forget to subscribe for latest articles!

Hey guys, today we will add docking boxes hack for blogger using some CSS and javascript codes before adding this feature you can check demos of this hack on featherlight blogger template and cooking blogger template , i tested this blogger widget on 2 different platforms which are Firefox and Internet Explorer and hack works well , adding this feature to blogger is as easy as posting an article all you need to do is ;

1. Go to edit html from your dashboard
2. Leave widgets NOT expanded
3. Find the lines below and paste code :

Find the code below and paste this css codes , ABOVE THE CODE

paste codes here

]]></b:skin>

1. Now we need to paste javascript codes below this line

]]></b:skin>

paste codes here

Now find your widgets , there must be a line above your widgets like this :

<b:section class='main' id='main' showaddelement='yes'>

Now change class='main' with class='dbx-box'



Refresh your page and test it , if it does not work try to change class='dbx-box' TO class='dbx-group'

Thats all .

Do not forget to subscribe for latest articles!

A loyal reader of mine whose name is Iraz ( a weird turkish name =P ) and who is English teacher ( once upon a time it was my dream ) wanted me to explain how to summarize blog posts , Dear Iraz if you follow the steps below , you will be able to summarize your blog posts , Thanks for reading me .

Step 1. Search for "post-header-line" to find this portion of code in your template and add the lines in red as shown.

 <div class='post-header-line-1'/>

 <div class='post-body'>

   <b:if cond='data:blog.pageType == "item"'>
       <style>.fullpost{display:inline;}</style>
       <p><data:post.body/></p>
    <b:else/>
       <style>.fullpost{display:none;}</style>

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

      <a expr:href='data:post.url'>Read More......</a>
    </b:if>

   <div style='clear: both;'/> <!-- clear for photos floats -->
 </div>

Step 2. Goto Settings->Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. Follow the format and only summary will show up in your main page. Please note that you also need to divide your old posts like this (atleast the ones showing up in main page) into summary and full portions by editing them.

Thanks hackosphere for codes.

Do not forget to subscribe for latest articles!

Hey guys , today i will tell you how to put ads between comments post , if you have a blog that gets a lot of comments per a posts this trick will make your earnings more than before , with this trick you will be able to put adsense ads ( i dont recommend adsense for this trick) , chitika emalls ads , and affiliate banners or links , follow the instructions below to understand how to put ads between comment posts :

1. Go to HTML tab in your template layout.
2. Backup your template.
3. Tick the box of "Expand the widgets".
4. Find this code (shown in Red) in your template :

<p><data:comment.body/></p>

5.Paste your ad code under the code above :

<p><data:comment.body/></p>
Your_Ad_Code_Here

Do not forget to subscribe for latest articles!

In previous article i have told you how to add recent posts and recent comments to blogger blog , now i will tell you how to add more " recents " to your blogger blogs , if you visit my blog frequently , probably you have noticed the newbies on sidebar which are " Recent Templates " and "Recent Hacks " , i created these bars creating feeds for each category and with the help of Jackbook's recent comments and recent posts script we will be able to show more than 5 posts on our feeds. Follow the steps to do the same :

1.Go to your template
2.Add new widget
3.Chose HTML / javascript
4.Paste the codes below

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<h2>RECENT Templates</h2>
<script src="http://beta.blogger.com/feeds/YOUR-BLOG-ID/posts/full/-/LABEL-NAME?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script>

How to adapt your blogger variables to codes :

1.For blog id click here after finding your blog id change it with YOUR-BLOG-ID on code
2.For label name , click the label you want to show the posts under that label and copy the line shown in bold from your browser

http://www.gosublogger.com/search/label/Blogger%20Templates

now paste it to LABEL-NAME on code

3.To change the numbers of posts which will be shown change the number on the line shown in bold

var numposts = 10;

thats all!


Do not forget to subscribe for latest articles!

Unfortunately there are no default recent comments and recent post widget on blogger , but thanks to developers we can recent posts and recent comments widget to blogger , simply click the buttons below , and add recent comments and recent posts widget to your blogger blog , but do not forget to change this url with your own blog url :

http://YourBlogNameHere.blogspot.com

Heres the recent posts and recent comments

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script><script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <h2>RECENT COMMENTS</h2> <script src="http://YourBlogNameHere.blogspot.com/feeds/comments/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script>

<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script><script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <h2>RECENT POSTS</h2> <script src="http://YourBlogNameHere.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script>

Do not forget to subscribe for latest articles!

Hey guys now i will share a simple but useful hack for blogger , i will show you how to slide labels on your post footer,if you add a lot of labels for a post for Search Engine optimization , it will mess your footer up but we also know that this is necessary for seo , so how to add unlimited categories to a post without messing up a blogger template , post footer . Here is the solution :

Demo of this blogger hack ( check post footer )

How to apply this hack :

1. Go to HTML tab in your template layout.
2. Backup your template.
3. Tick the box of "Expand the widgets".
4. Search this line "<b:if cond='data:post.labels'>" in your codes
5.After finding code , add the codes below , above this line "<b:if cond='data:post.labels'>"


<marquee style="border:black 2px solid" onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=11">


You can change border color to different colors that suit your template color.

6.Now we need to put end tag code under this line "</b:if>"

Marquee end tag code :

</marquee>

7.Codes must look like this :

click image to enlarge



8.Preview your template checking your post footers.
9.Save and Done!


Do not forget to subscribe for latest articles!

This is a hack i use for gosublogger , the numbers next to labels disturb me and makes my blog look more amateur , there is not such a stupid feature in wordpress , after struggling with blogger codes i learned how to make label counter invisible , just follow the steps below if you interested in ;

1. Go to HTML tab in your template layout.
2. Backup your template.
3. Tick the box of "Expand the widgets".
4. Search As "Label1" in your codes
5.After finding code , delete the code shown in red.

<b:widget id='Label1' locked='false' title='Etiketler' type='Label'>

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>

</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6.Test it.
7.If Ok, save and done!


Do not forget to subscribe for latest articles!

Long time no post about blogger hacks today i will share a hack Purple Moggy found , after applying this hack to blogger , your visitors will be able to follow the recent updates of a certain category instead of full posts.Just follow the steps below

1. Go to HTML tab in your template layout.
2. Backup your template.
3. Tick the box of "Expand the widgets".
4. Find this code (shown in Red) in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='"http://beta.blogger.com/feeds/YOURBLOGID/posts/full/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
<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>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Add the above code colored in Blue in the specified place.
6. Change YOURBLOGID (Shown in bold) to Your own Blog ID.
7. Save your template and Its Done.

What is Blog ID?Just visit the Blog ID link in step 6 and follow instructions to find your blog ID.

Note:You must have the label widget in your template.
If you have any Problems,I am Here.
If you like this trick,then please link back to my blog:)
[Thanks Purple Moggy for the code]

You may have heard of blog losts on blogger , my friend's 2 blogger blogs was deleted without a reason , to prevent this awful occasion i will give you 3 tips to backup your blogspot blogs, with these ways you will be able back your blogger blogs up , so even though your blog is deleted you will be able to set up a new blogger and copy the articles from deleted blogs.

• BloggerBackup : With this application , you can back up your blogger blogs from desktop , this software backs up all your blog data ( blog posts , blog comments ) from blogger to a xml file on your desktop.You can backup your posts one by one or all in one.

• BloggerBackUpOnline : As you can understand from its name it backs up your blogger blogs on line , since its online backup , there may be data loss , as a solution to this probability i advice you to export datas from your dashboard to desktop weekly.

• BlogBackUpR : This is another online back up tool ,works like bloggerbackuponline .

I guess the useful and the safe one is BloggerBackup software , because online backup tools are not greater than blogger and there may also data loss.I hope we do not have to use this tools.

Did you know that you can add Top Commentators widget for blogger blogs? Probably you did not , but you can add top commentators widget like wordpress blogs.Do not worry its really easy to use this widget , all you need is to ;

• Go to your blogger dashboard
  
• then Page Elements
• click add page element
• chose html / java
• and copy the javascript below
  

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FYOURBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>

Most of us saw error pages while using blogger , Blogger always says same thing to solve problem , but nobody helps and nothing works , as i experinced a lot of blogger errors yesterday i found the ways to solve these three blogger errors.

When blogger cannot do the thing we want blogger to do such as posting articles , saving a new blogger xml template, blogger show a page saying ;

We're sorry, but we were unable to complete your request.

When reporting this error to Blogger Support or on the Blogger Help
Group, please:

* Describe what you were doing when you got this error.
* Provide the following error code and additional information.

bX-4smx9i
Additional information
blogID: 0000000000000000
host: www.blogger.com
uri: /html

This information will help us to track down your specific problem and
fix it! We apologize for the inconvenience.

It want us to share our problem on Blogger Groups , when you check blogger groups you will see that most bloggers questions remain unanswered which means that you cannot solve your problem on Blogger Groups.So what to do? If its not "technical" problem , there is a solution almost works on every blogger error which is deleting cookies.Yesterday i couldn't anything on blogger since it showed errors frequently,and i wanted help from google employers on Blogger Group . But they didn't answered . So i tried to delete my cookies and it worked.So the cure for blogger errors is deleting cookies and restarting browser.

On yesterday's post we learned how to change browser title and template header title ,how to show comments and posts with post body code . Today i will tell you how to show recent posts and archive on our classic blogger template.

Step 4 : Showing Recent Posts on Classic Blogger Template

I will give you a simple code and you need to add this code between <ul> and </ul> tags . There must 2 r 4 <ul> tags , chose the one where you like to show your recent posts and delete all the "li" codes between ul and /ul tags and paste the code below ;

<BloggerPreviousItems> <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li> </BloggerPreviousItems>

Now we added recent posts section to our template.

Step 5 : Showing Archive on Classic Blogger Template

Now find another tag starts with ul and ends with /ul ,delete the li codes and paste the codes below ;

<MainOrArchivePage> <ul> <BloggerArchives> <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li> </BloggerArchives> </ul> </MainOrArchivePage>

done!

Step 5 : Adding Other Things ( Ads,Stats,Entrecard etc.) to Classic Blogger Template

Do the same things i told you below and finally add your code.Save and publish

Step 6 : Editing Footer on Classic Blogger Template

Tag for footer always labelled as div id = footer find this link and add your anchor link text .

Thats all! Now go to free css template sources ,download the one you like and start converting it to Blogger Template.If you need help please let me know.Thanks

Non-English letters? Yes,letters like "ö" "ç" "ş" "ü" "ğ" ,the languages that use these letters are german,french,dutch,turkish and more.. i will tell you how you can get a blogger name including these letters below.Before reading this article please subscribe my feeds if you think my articles are useful.Thanks.

• Before going to Blogger dot com go to this link.
• Type the name you want use which includes non-english letters.( our example is français )
• Click "Çevir" Button
  
• And get the ASCII code of "Ç"
• Now go to blogger dot com.
• Type ASCII code
• Check availablitiy.
• If available continue.

Done! Check français.blogspot.com

Or type français.blogspot.com to your browser