Blogger Hacks Archives - Page 5 of 6

Tag: Blogger Hacks

Add Three New Widgets At The Bottom or Header Of Blogger/Blogspot Blog

You would have seen many new modified blogger templates with additional 3 widgets at the bottom (footer) of the blog, and they are very useful for bloggers, as you can place widgets like Recent posts, Recent comments, Top posts and Top commentators etc in these widgets.
It is very important to add these widgets in a blog, as when readers finish reading the post, they may immediately leave the blog if no other interesting article is found. Moreover these widgets help new visitors to understand the blog’s main content.

So if these widgets are not present in your blog, then follow these steps to add them yourself :

First log in to Blogger.com
Go to Layout -> Click on Edit HTML tab

Now search (CTRL+F) for these code line:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

REPLACE the entire red line in the above code, with this new code:

<div id=’footer-column-container’>
<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>

Now PREVIEW the template, and if no errors are displayed, then carry on:

Find this code:

]]></b:skin>

Then immediately BEFORE / ABOVE it, paste these lines:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Save the template, go to “Page Elements”, and add content to the three new widgets !

For Adding this Hack Below Header Use Just Find For :

<div id=’Header-wrapper’>
<b:section class=’header’ id=’header’/>
</div>

And Similarly Like How to add Footer Add It Header

How to display or show comment-author’s profile image in Blogger/BlogSpot blogs

Here’s another useful tip for those bloggers, who are continuously trying to transform their free BlogSpot blogs into a pro-blog.
Through this hack, within 10 minutes you can start showing the images of commentators/comment-authors in your blog.

See the image below; how it will look after tweaking the HTML default code

To do so, first of all log in to Blogger
Now go to Layout, then click on Edit HTML tab.
Now Download the present template as a back up
Then click on “Expand widget templates“

Now search (CTRL+F) this

</head>

Immediately BEFORE IT, paste this:

<!–COMMENT-AUTHOR-PICTURE-STARTS–><script src=’http://dsai.588.googlepages.com/blogger_comment_author_photos.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
addLoadEventundefinedfunctionundefined){showCommentPhotosundefined’commentphoto’,’comment-author’, 1);});
//]]>
</script><!–COMMENT-AUTHOR-PICTURE-STOPS–>

NOW see this code below:

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>
<div class=’commentphoto’ style=’float:right;’/>
<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>
<div style=’clear:both;’/>
</b:loop>
</dl>

In the code above YOU HAVE TO INSERT code lines shown in BLUE and BOLDED
And the red ones, are those which you can use as markers, BEFORE whom you have to paste the blue code lines.

You can change the position of pictures or images from Right to Light, by changing it in the first blue line in the code above…
Now whenever, people use their gmail or openid account to comment, then their pictures will be displayed alongside the comments !<>

How To Show/Hide Text Using JavaScript Toggle Method

Show/Hide

For this method there are two steps, one is to add a code to the template <Head> </Head> region, so that you can use this anywhere [in posts, as well as widgets]

Then the second part of the code has to wherever you want to display text / images in this way.

First Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>

Second Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>

here’s the method to add this hack two times in your blog !

Once you have done the process described above, do this:

Third Step:
Log in to Blogger, go to “Layout”, click on “Edit HTML” tab.
Now find for this code: </Head>

Then immediately BEFORE this code, paste this:

<script language=”javascript”>
function toggle2() {
var ele = document.getElementById(“toggleText”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
text.innerHTML = “hide”;
}
}
</script>

Fourth Step:
Now wherever you want to show this type of text, add code like this:

<a href=”javascript:toggle2();” id=”displayText”>Show/Hide</a>
<div id=”toggleText” style=”display: none;”>This is Hidden Text</div>

Similarly you can add any number of times, by changing the code in red to toggle3(), toggle4() etc.
But if you add it many times, then it may slow down your blog !

Add Your Sign Below All Posts In Blogger / BlogSpot Blogs

If you are using Blogger, and want to show your signature below all the posts, then you can do this in two possible ways: either add it in an HTML/JavaScript widget with the image of your signature or you can directly edit the HTML template of your blog. The second approach is recommended, as the first one may increase the loading time of blog.

In both the methods, first step is common and important, i.e. to get an image of your signature,.For this, either you can
– draw it and scan it, or
– draw it in MS paint / Adobe Photoshop or any other image editing software and save it, or
– (Recommended) Use MyLiveSignature, and type the letters (use capital letters wherever required), and continue: select font, size and color for the sign. Save / download the image.

Now upload it to either Pages.Google.com or GigaImage.com or HotLinkFiles.com, to get direct link of the image(your sign).
You will get a link like this:

http://ANY_WEBSITE.com/images/MY_SIGN.jpg

Now put that link in this code:

<img src="YOUR_DIRECT_LINK_HERE" />

Replace the code in RED color with the direct link of your sign image.

This is the second step, which has two choices (second one is recommended):

1. Adding the sign to HTML/JavaScript widget:

Log in to Blogger, go to Layout, click on Add a Gadget -> HTML/JavaScript type.
Now copy the above code and paste it here. Save the widget, then drag & drop it below the blog posts widget.

2. Adding the sign to the blog’s template.

Log in to Blogger, go to Layout, click on “Edit HTML” tab and click the radio button “Expand Widget Templates“,and find (CTRL+F) this code:

<data:post.body>

And immediately BELOW this, add the above code. And save the template.
That’s it…

It will be displayed like this:

Embed Text Resizing Widget To Increase or Decrease The Font Size

As you know, that some visitors prefer reading in small text size while others prefer larger, depending on their eye power, screen resolution, and monitor distance. So for those visitors, you can place a convenient widget to increase/decrease the font size easily.

Look the example below:
Change Text Size

+ + + + +
Or this one:

Change Text Size:

Small
Medium
Large
Larger
Largest

If you want to use any of the abve widgets, use this code:

Change Text Size<br/>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’.5em'”><span style=”font-size: xx-small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1em'”><span style=”font-size: x-small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1.5em'”><span style=”font-size: small;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2em'”><span style=”font-size: large;”>+</span></a> <a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2.5em'”><span style=”font-size: x-large;”>+</span></a>

And to use the second one, use this code:

Change Text Size<br/>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’.5em'”><span style=”font-size: xx-small;”>Small</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1em'”><span style=”font-size: x-small;”>Medium</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’1.5em'”><span style=”font-size: small;”>Large</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2em'”><span style=”font-size: large;”>Larger</span></a>
<a href=”javascript:void(0);” onclick=”javascript:body.style.fontSize=’2.5em'”><span style=”font-size: x-large;”>Largest</span></a>

If you want you can add this by HTML/JAVASCRIPT

or If you Want to appear this in the post than
Goto Layout > Edit HTML

And check Expand Widget Box

and search for <data:post.body/>

Then If you want it to appear on the top paste the code above <data:post.body/>

If you want it to appear on the bottom paste the code down the <data:post.body/>

And At Last Save It Over Enjoy !

ASCII Text Generator

Before blogging, I used to upload files on RapidShare and earn points with it to get premium account. It was really a great job to earn for my pocket money.

If you are a RapidShare uploader, you might have seen the ReadMe files where users write their website’s name in different styles. Here is a JavaScript code with which you can create your own beautiful ASCII text easily.

Description: “With
this wizard, you can generate your own ASCII (a.k.a. plain text) logo for your
web site. These logos are ideal if you want a catchy page header but don’t want
to have to deal with the loading time of an image or an ActiveX object.”

Important: If
you intend on putting your text logo in a standard html document, surround it
with opening and closing <PRE> tags to avoid common distortions.

Example:

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.

Logo Text:	Logo Style:
	Preview Text Style