Blogger Hacks Archives - Page 6 of 6

Tag: Blogger Hacks

How to change Blogger Template without deleting widgets ?

One of the Major Problem Blogger users have is whenever they try to change their templates , They will loss their widgets even if they take backup of their template. After Changing their template , they need to add widgets again manually. It’s really annoying and time consuming process.

Is there any way to Backup our Widgets ?

yes . We can backup our widgets before changing our template.

How to backup Blogger Widgets ?

It’s really simple guys , before changing template search your widgets code without putting check in expand widgets box.

Select the widget code as shown in the image below.

Now save the widget codes shown in between yellow box to notepad. Copy and Paste all your widget codes.

After doing this Upload your New Template . After uploading you will get a message like this

At This stage don’t click Confirm & save tab. Rather search for the following code <b:widget id=”‘ , Now paste the widget codes you have saved immediately above or below the code in yellow

After adding the widget codes save your template.
That’s it ! Now you will have all widgets that you used in your previous blogger template.

How This works ?

Blogger will keep the widget content on their database with unique widget id.

I hope this hack will be very useful to you guys. Tell me your suggestions in our comment form , If you have any doubts ask there I will help you.

Peek-A-Boo Widget for Blogger

Peek-A-Boo widgets are useful when the widget content is too long. You can hide the content of the widget and let your visitors click on the widget title to show the content of that particular widget. This will make your sidebar short and sweet.

I’ve seen Peek-A-Boo widgets in certain blogs, but it lacked visitor attraction. I wanted to add certain effects to these widgets to make it more attractive. For eg: the way in which the content is shown and hidden. So I did some research in the net and came to know about the toggle effect. Yes, we can use toggle effects to make the sidebar widgets Peek-A-Boo.

Follow the steps given below to make your sidebar widgets Peek-A-Boo.

Add the javascript given below to the <head> section of your template.

<script src=’http://deepakpensieve.googlepages.com/prototype.js’ type=’text/javascript’></script>
<script src=’http://deepakpensieve.googlepages.com/scriptaculous.js?load=effects’ type=’text/javascript’></script>

The above javascripts are Prototype and Scriptaculous. If you’ve already added it to your template while applying some other hack then no need to add it now.

Add the code given below to the CSS area in your template, just above ]]></b:skin>:.

.collapsible {
cursor: pointer;
}

You might be having lot of widgets in your blog. Any widget can be made Peek-A-Boo. The method is the same for all widgets. But for explanation I’ll be using the Link List widget. The widget must be there in your blog to apply this hack. So if you haven’t added the widget then go and add the widget and come back.

Find the portion of code given below.

<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Add the codes highlighted in red at the right places as shown below.

<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’collapsible’ onclick=’new Effect.toggle(“linklist”, “blind”);’><data:title/></h2>
</b:if>
<div class=’widget-content’ id=’linklist’ style=’display:none’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Save Template.

As I said earlier, any widget can be made Peek-A-Boo. Method is the same as mentioned above. The only thing that changes is id. id must be unique. No other widgets must be having same id as another widget. ie: In this tutorial I used “linklist” as id. No other widgets must be having the same id name as “linklist”.

Try it on your blog and tell me how good it is. Do contact me if you have any doubt. You can also contact me if you’re confused and stuck in the middle of the hack. Leave your comments and URL of your blog so that I’ll be able to know who all are using this hack. It will also help the visitors to check how the hack is working in various blogs.

Install Loading page status in Blogspot

Bored waiting for your blog page have opened? If so, you need to have the status of page loading or loading page status in your blog. You may think we use difficult code , No ! However, this form of animation from just a picture, so is very simple and easy instalation too. You can make your blog looking more interesting.

You just prepare a animation picture in .GIF format. You can use the service from preloading image generator like Ajaxload or Preloader, after that follow this tutorial carefully

1. We need a Javascript code like this :

var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById(“loading”).style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility=”hidden”;}
else if (ns6||ie4) ld.display=”none”;
}

Then copy that code to notepad and save as name as pageloader.txt. Then Upload it to your own server.

2. Upload your .GIF image in Photobucket, Google Pages, or Geocities
3. After you upload the JS code and image , go to Edit HTML ( you dont need expad template widget ) and changes the <body> code with <body onLoad=’init()’>
4. Then put this code after <body onLoad=’init()’> code

<body onLoad=’init()’>
<div id=’loading’ style=’position:absolute; width:100%; text-align:center; top:600px;’>
<img border=’0′ src=’http://image URL/pic.gif’/></div>
<script src=’http://JS code URL/pageloader.txt’ type=’text/javascript’/>

5. And save your work !

Now, you must try the animation is work or not, If it work well, the image will stop move when the browser doesn’t work or stop loading. Loading stopped and animation too.

If you have any question, you can leave comment here . Happy Blogging

How to add back to top button

If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?

If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?

Go to Edit the HTML directly to your blog template and add the following code before </body> code :

<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;right:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>

that’s it and save your work !

You can change the position of the button to the right or left to change the part of this script like this :

<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;left:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>

Or you can changes the picture and destination URL. like ads link .

<a href=’http://url destination’ style=’display:scroll;position: fixed; bottom:5px;let:5px;’ title=’Back to Top’><img src=’http://your.image.location’/></a>

You can edited the button with your imagination. Happy Blogging!

Update

Make Your Large Or Changing Like My Blog Has

Note: You required Two Images If You Want To Make Image Larger Then You Required one large and same small image.

If you want changing image then you required Two different images.

Go to Dashboard > Layout > Edit HTML

Search For </head> . Before </head>

Add This Code :

<script type=’text/javascript’>
function mouseOver()
{
document.getElementById("b1").src="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg"
}
function mouseOut()
{
document.getElementById("b1").src="http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg"
}
</script>

Then Go To Bottom Of Your Blog And Add This Code :

<a href=’#’ onmouseout=’mouseOut()’ onmouseover=’mouseOver()’ style=’display:scroll;position:fixed;bottom:5px;right:5px;’>
<img alt=’Back To Top’ border=’0′ id=’b1′ src=’http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg’/></a>

Replace The : http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg

With Your Image You Need When There Is no Mouse On It

And Replace :
http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg

With The link Of The Image You Required When There Is mouse On The Image

Add, Edit or Delete Labels In Blogger / BlogSpot Blogs

Your blog must be having more than one labels or categories, and when a visitor visits your blog from search engines like Google or Yahoo, then most probably he/she will land on a specific page/post of your blog. And if the reader likes the post, he/she will definitely search for similar topics on the blog, and this is exactly where, labels and categories will help the visitor. But again, the number and names of the labels are very important.

May be, initially you would not have given enough importance to these labels. And now when you realized the importance, you may find tens and hundreds of posts in your blog with improper labels, which need to be edited, or you may even want to delete some of the labels you have already added, or you may want to add some new labels to your previous posts.

Blogger does help you to do this quite easily, but I still think that they should make it even more better !
Anyways here’s how you can edit, add or delete labels in Blogger.
Log in to Blogger, in the Posting section, click on Edit Posts.

See the highlighted regions in the image above.
As soon as you click on Edit posts, you will see all posts written by you (select posts per page as 300 in the right corner of the page).

1. Now to delete any label, click on “Select All“. Then in the drop down menu “Labels action“, under “Remove label” option you will see the list of all labels, click on the one, you want to remove for ever.

2. To add a label, select all the posts, you want to add the label. Then in the drop down menu “Labels action“, under “Apply label” option click on New label…. Finally enter the name of the new label.

3. And in case you want to edit a label, unfortunately there’s no direct option given by Blogger.
So do this, firstly in the list of labels column, present at the left side of the page, click on the label you want to edit. Now only those posts are displayed which have this label. Now add a temporary label to these posts. Then delete the label, you want to edit. Now click on the temporary label in the labels list. Now add the new label. Then finally delete the temporary label.