Blogger Archives - Page 10 of 10

Category: Blogger

Fixed Side Menu For Blogger

Fixed side menu for blogger blogspot or some says it as fixed slide in menu for blogger as was seen only in wordpress but now can be used in bloggers also.As you could see it in my blog i have side menu that moves together with you scroll movement up and down on my blog.I am sharing this with you because many of my readers were asking how to make it as they liked it much and wanted to add it to there blogs so if you liked side menu in my blog you can go further to install it in your blog too.For Demo Of Side Menu Visit for Here:-Blogger Widgets

First Download these two files to your computer.
ssm.js
ssmItems.js

Now open the ssmItems.js file in notepad
After opening it in notepad you will see the codes like written below.

<!–

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor=”black”;
menuIsStatic=”yes”; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily=”verdana”;
hdrFontSize=”2″;
hdrFontColor=”white”;
hdrBGColor=”#170088″;
hdrAlign=”left”;
hdrVAlign=”center”;
hdrHeight=”15″;
linkFontFamily=”Verdana”;
linkFontSize=”2″;
linkBGColor=”white”;
linkOverBGColor=”#FFFF99″;
linkTarget=”_top”;
linkAlign=”Left”;
barBGColor=”#444444″;
barFontFamily=”Verdana”;
barFontSize=”2″;
barFontColor=”white”;
barVAlign=”center”;
barWidth=20; // no quotes!!
barText=”SIDE MENU”; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[…]=[name, link, target, colspan, endrow?] – leave ‘link’ and ‘target’ blank to make a header
ssmItems[0]=[“MENU”] //create header
ssmItems[1]=[“Home“, “http://riteshsanap4u.blogspot.com“, “”]
ssmItems[2]=[“Blogger Widgets“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“,””]
ssmItems[3]=[“Blogger Hacks“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “”]
ssmItems[4]=[“Blogger Tutorials“, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “_new”]
ssmItems[5]=[“Grab This Menu Here”, “http://riteshsanap4u.blogspot.com/search/label/Tutorials“, “”]
ssmItems[6]=[“Contact“, “http://riteshsanap4u.blogspot.com/“, “”]

ssmItems[7]=[“FAQ“, “#nogo“, “”, 1, “no”] //create two column row
ssmItems[8]=[“Email“, “#nogo“, “”,1]

ssmItems[9]=[“External Links”, “”, “”] //create header
ssmItems[10]=[“Online Jobs“, “#“, “”]
ssmItems[11]=[“Funny Blog“, “#“, “”]
ssmItems[12]=[“Earn Money“, “#“, “”]

buildMenu();

//–>

Now just edit the the links in red in codes to place your own link which you want to display and text in blue which you want to show up the title for that link.

After editing all these links just save the file.
Now upload both files ssm.js and ssmItems.js to your own server.

Now GO To LAYOUT > EDIT HTML
and find the </head> tag and place the below codes before it.

<!–SLIDE MENU–>
<style type=’text/css’>
<!–
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//–>
</style>
<SCRIPT SRC=’http://riteshsanap4u.googlepages.com/ssm.js‘ language=’JavaScript1.2’>
//Dynamic-FX slide in menu v6.5 (By maXimus,
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC=’http://riteshsanap4u.googlepages.com/ssmItems.js‘ language=’JavaScript1.2’/>
<!–SLIDE MENU END–>

And don’t forget to change the links in red above with the links of yours where ssm.js and ssmItems.js file is uploaded to your own server.

And now SAVE It.

Yup you have just Done now. View your blog. If you have any problem please write below in comments i will help you out.I think you will enjoy this widget for sure.

Add Button ‘Save Blogger Post As Pdf’ Blogger

How to add ‘save As Pdf Button’ in each blogger post of your blogger so as the readers can save your post in pdf format which they like.This tool will really help your readers in saving your post they like.I am vey happy to post this button as i m sure my readers will like this for sure as is very useful.After this post i will post an trick ‘how to save any blogger all posts as pdf too’ i.e to download all bloggers posts of any blog in pdf format.

How to add ‘save As Pdf Button’ ?

<data:post.body/>

If you are using Read More Hack you will find above code twice so use second code.

Add the below codes after the above codes

<script type="text/javascript">
</script>
<script src="http://web2pdf.freepdfconvert.com/pdfbutton.js" type="text/javascript">
</script>

Preview it.If its work fine.Save your template.

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.