home

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!

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]

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>

From the first dates of blogger,it has been tried to improve both by blogger workers and blogger users,and there occured some cool widgets and hacks for bloggers using javascript,css html and flash.Personally,i do not prefer hacks,i like pure default blogger templates with light colors,because dark colors on screen tires your eyes and you cannot read anything long.Anyway thinking that most of bloggers like blogger hacks,tips and tricks i wanted to create a post and share a bunch of hack sites with you all.

Hackosphere : You will find a lot of blogger hack for your blog,this is among the ones i like."Click read more" text to realize what i like.

Phydeaux3 : He is famous for his blogger tag cloud hack,his recent blogger calendar hack is also pretty cool.For more great blogger hacks check his homepage.

Hoctro : Unfortunately,i have just discovered this blog,i have been looking for articles which explains how to create a blogger blogspot template and i have found what i been looking for on hoctro.Anyway hoctro is another source of great blogger hacks.

Beautifulbeta : He's been blogging for 2 years and he created useful widgets one of which is aorta.Aorta is really great widget if you have a lot of media stuff on web.For detailed information and other blogger hacks check his homepage.

Blogger-Hacked : As far as i understand from his posts he has lots of things to do and thats why he cant update his posts but anyway he still has good blogger hacks.just visit.

Stubborn-Fanatic : Another busy blogger,he has some useful articles.

BlogFresh : His last post date : Sunday, June 10, 2007 ,but you can find useful blogger hack articles.

BloggerUniversity : This is frequenly updated great blog,it has a sweet author called annie,you shoudl subscribe her feeds,really best hack blog ever.

PurpleMoggy : This is one of the best blog that gives blogger hacks tips.You will change your blog completely when you see the hacks on this blog.

Blogger Hacks WiKi : WiKipedia of blogger hacks.you will like this wiki too.

You have a blogger account with a good name like apple.blogspot.com or something like this,or you have a high ranked blogger blog and somebody want to buy this blog from you.Since you use gmail or adsense you cant give your account information but dont worry there is another option which is quite safe! Follow the steps below

Step 1 : Log in to your blogger acount and then ;
-Click the settings of the blog you want to sell
-Click "permissions" tab and ;


Step 2 : Type the e-mail adress of the purchaser and click invite


Step 3 : An invite mail will be sent to purchaser , when he clicks the invation link in the mail he is going to see the blog he wants to buy on his blogger dasboard

Step 4 : Now the owner of blog must give him "Admin Features" on "permission" tab.

Step 5 : Purchaser will see the settings link on blogger dashboard,he must click settings and then permissions now he will see 2 admins on permissions tab, as soon as he deletes the old owner of blog he will be the new owner of that blog.And the blog will be deleted from old owners blogger account and he will never be able to reach the blog he sold.

Any questions?

For search engine optimzation (SEO) after your URL , TITLE is the second most important criteria,if you know this but you dont know how to change title of blogger beta templates check the codes below ;

Go To : Blogger Dashboard and then Edit HTML

You looots of codes but the at the top is important for us

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


Delete the codes above and change with

<title xml:lang='en'> YOUR TITLE </title>

Thats ALL!