Blogpowered: Blogger Hacks

Showing posts with label Blogger Hacks. Show all posts

Blogger Hacks: Using an image as link for Expandable post hack

Here's an alternative link for the Expandable Post hack ( Summarized Post ). Instead of the "read more" link, you can use an image if you want to make it more visible. If you haven't implemented the Summarized post hack yet, you can apply it by following the instructions here. I prefer using an image cause it adds color to the overall design of your blog.

So here are the simple steps to follow on changing your "read more hyperlink" into an image.

1. First is to have your image or button as link for the summarized post. I recommend to make your button in Adobe Photoshop. I'll post ready to use "Read more..." buttons in the next update.

2. Go to edit HTML under layout tab.

3. Check the "expand widget templates" box

4. Search for the Read more line or the text you used as link for the summarized post

5. Replace it with this code:

<img src='IMAGE/BUTTON URL'/>

7. Preview your template.

8. Save.

Blogger Hacks: Add addthis button to your blog

The AddThis button spreads your content across the Web by making it easier for your visitors to bookmark and share it with other people, again…and again…and again. This simple yet powerful button is very easy to install and provides valuable Analytics about the bookmarking and sharing activity of your users. AddThis helps your visitors create a buzz for your site and increase its popularity and ranking.(www.addthis.com)

This very cool button is very powerful for boomarking and sharing your valuable posts with other people in the internet.

Adding Addthis button on the bottom of your posts:

1. Go to Edit HTML under layout and tick the "Expand Widgets box"

2. Search for the follwing line:

&ltdiv class='post-footer'>

or

&ltdata:post.body/>

NOTE:
If you have chosen the first code,
the add this button will be above the post body items( Scroll down and see where my addthis button is placed)

If you have chosen the 2nd code,
the addthis button will be at the bottom left part and directly beneath the post.

3. Simply add this Addthis code after this line. Done!

Blogger Hacks: Tag Cloud or Label Cloud for blogger

One of my readers was asking me about the tag cloud and label cloud. These feature is originally from wordpress but the good news is, We can also do it on Blogger! Cool isn't it? :D The original idea of this hack was from Phydeaux3. Really appreciated this hack. Thanks Phydeaux3 for making this hack possible. Hence, I made the instructions step-by-step, more simpler and precise so that new bloggers would understand and do it well.

Note: For this hack to work, you should already have installed Labels Widget( Blogger feature) and labeled posts.

Steps on making a Tag Cloud/ Label Cloud

1. Before anything else, Make a Back-up of your template. Download the full template in edit HTML under layout tab.

2. Go to Edit HTML and DON'T tick the "Expand widgets" box.

3. Locate this closing tag(1):

]]></b:skin>

4. Copy the code number 1 HERE and paste it BEFORE the closing tag(1).

5. We're going to place another code. Locate the closing tag(2):

</head>

6. Copy the code number 2 HERE and paste it BEFORE the closing tag(2).

Then the Widget itself. Locate the line below:
Note: If you can't find the code below, maybe you haven't installed the labels widget.

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

7. Copy the code number 3 HERE and REPLACE THE LINE ABOVE:

Preview your template and see if your Label widget in vertical alignment become expanded like words inside a cloud. Then, you've made it!

If you encounter an error, maybe you missed or deleted something.
Upload the backup template and try starting all over again.

Label Cloud Settings

You can adjust the settings of your Label Cloud. The color, the sizes, you can change it! Depends upon you. If you want to blend it to your background image, your header or the template in whole. If you wish to do so follow the instructions below.

Locate this lines in "Edit HTML"

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

(If you can still remember, this is the Label Cloud code 2)

Explanation:

var cloudMin = 1;

The default setting is one. This means that it show ALL labels. If you put a number GREATER than one. Let's say you put 2, only 2 labels will be show on your cloud.

var maxFontSize
var maxColor

These 2 variable has something to do with the MOST NUMBERED LABELS USED or MOST NUMBERED ENTRIES. The values input in maxColor is in RGB format meaning ( 0 red, 0 green and 255 blue - based on the default setting).

var minFontSize
var minColor

This time, with the LEAST NUMBERERED LABELS USED. Very related on the explanation above.

varIcShowCount

The default setting is false meaning you dont want to show the number of entries in that label or tag. Otherwise, change false to true.

Blogger Hacks: Hide blog title and description

Blog title and description is very important in every blog. Search engines when indexing your blog use the title and description tags. But sometimes, there is a need of hiding them especially when you are using a header image. So here are two ways in doing this.

1st Option
This option is only applicable if your going to put a solid header image that will completely hide your title and description.

1. Go to "Page Elements" under the layout tab.

2. Click "Edit" on the title page element usually found BELOW the navbar page element on the top.

3. Upload your header image if haven't done it already and click on the radio button "behind title and description" under placement.

4. Save changes and view your blog.
Note: If this option doesn't work for you. You may use the 2nd option below.

2nd Option

1. Go to edit HTML under Layout and locate the following code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
display:none; /*<---Hiding blog title and description*/
}

2. Insert the line colored in red as seen above.

3. Save Template. Done!

Blogger Hacks: Deleting the Older and Newer posts link text

If you don't where this links are located, they are usually at the bottom part of the post. If you have enough links in your sidebar or somewhere in your blog you can delete this if you want. To completely delete this follow this simple steps below.

Steps in Deleting the Older and Newer posts link text:

1. Go to edit HTML under layout tab and tick the "Expand Widgets template" box.

2. Locate the code below and simple delete it.

<b:include name='nextprev'/>

3. Done! :D

Blogger Hacks: Changing "Older and Newer Posts" link text

This links are usually seen on the bottom part of the page. This is an alternative link for readers to navigate to all of your posts unless you don't have widgets linking you to your other posts. You may want to change it to an attention getter link for them to see your valuable posts and your hardwork that is not seen in the home page. So here's how to do it.

Steps in Changing "Older and Newer Posts" link text

1. Download you template(for backup) in edit HTML under layout tab.

2. Now that your in Edit HTML, tick the "Expand Widget box".

A.Changing the Older Posts link text:

A.1. Locate this code below:

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/>
</a></span></b:if>

A.2. Notice that i highlighted a code in red. Replace it with your chosen text. Done :D

B.hanging the newer posts link text:

B.1. Locate this code below:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/>
</a>

B.2 Like step number 2 above, change the code highlighted in red with your chosen text. :D

3. Preview and see if there is an error and changes. :D If you encounter an error go back to the line you have edited and see if you have deleted some angle brackets ( > , < )
If you really fix the error, just upload the template(backup) and try to follow again the steps above. :D

Blogger Hacks: Changing the name "Labels" in your posts

Labels in posts usually located under each of your posts. There is a way of changing its name if you like other terms like categories or tags. If you wish to change it, i'll show you to do it.

Steps in changing the name labels below each posts:

1. First is to download your template. Download Full template in edit HTML under layout tab.

2. Tick the "Expand Widget templates" box.

3. Locate the code below:

<data:postLabelsLabel/>

3. Delete this line and replace with your chosen text.

Done!

Blogger Hacks: New blogger comments hack

Recently, i found a site that provides a blogger comments hack like wordpress. That is www.disqus.com. Disqus makes your comments more interactive for readers and easier to manage for you — all while connecting your community with other blogs. This makes your posts much easier to comment on. So if your confused with blogs offering comment hacks but you can't fully understand well, why not try this third-party commenting system.

Just 3 steps to follow:

1. Go to discuss.com and make an account.

2. Click on get started

3. And follow the instruction disqus will give you. :D

Bloggar Hacks: Get rid of uppercase headings

Blogger makes your post footer, blog footer, profile widget and header text turn out in uppercase letters by default. If you don't want this setting, there is simple solution for this.

This post is somewhat similar to my previous post about removing borders - How to remove borders.

1. Simply search for the line:

text-transform:uppercase;

2. Simply delete the line or you may want to change uppercase into lowercase if you want.

Blogger Hacks: Adding background image to sidebar titles

If you have already read my post about putting background color on your sidebar - Adding background color to sidebar, You may also want to put a background image on sidebar titles that will blend to your header image or your template in whole. This technique will make your sidebar titles more readable and recognizable.

So here's how to do it. :D

1. First is to make your own image which measures 200px wide and 100px in height.
(I recommend Photoshop for doing this but if you dont have this software, you may want to download a software similar to Photoshop - Gimp )

Samples:
1.Gradient Effect
2.Solid Color

2.Upload it in your hosting website of your choice.(Photobucket(Recommended), Imageshack and etc)

3.Locate this line in your edit html box.

.sidebar h2 {
background:
url(http://bp3.blogger.com/_xn2gmPb9TfM/R5SF7ODdQbI/AAAAAAAAA
wY/NR6uYhiytks/s320/sidebar _bg.gif) no-repeat center left;
margin:0;
padding:.2em 0;
}

4. Be sure to replace the URL i posted above with your background image.
Note:The statement “no-repeat center left” ensures that the background image appears only to the left of the heading, and does not repeat across the whole width.

Blogger Hacks: Adding background color to sidebar

Many of us blogger believes that its useful to separate the sidebar from the body of blog posts. This helps draw attention and gives emphasis to the primary content of your blog. In my opinion, the simplest way to achieve this is to add a different background color to your sidebar. This technique is very similar to that of adding background color to the body of your blog.

1.To get started, locate this section of this code in the <:b:skin>: section.

#sidebar -wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Note:If you cannot find this exact code on your template, search #sidebar-wrapper instead.

2.To put a color on your sidebar, simply add this line colored in red. You can change the hex color values of your choice. I just used #ffffcc as an example.

#sidebar -wrapper {
background: #ffffcc;
margin -$endSide: 2%;
width: 25%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Or if you just want your sidebar background to be transparent. Just delete the line in red color.

Blogger Hacks: How to add 3 Column Footer

Want to add widgets but you lack space in your sidebar? This hack will help provide more valuable space for blog widgets. An example of this is this blog. Try going back to front page and go to the bottom part. You'll see my widgets compressed all in one footer. This gives more pleasing look unlike putting all this widgets to one sidebar.

So here's how to do it.

1. Go to page elements and move all the widgets to your sidebar. This is temporary just to ensure you won't lose your widgets in your footer.

2. Make a back up of your template. To do this, download full template in Edit HTML under layout tab.

3. Search this tag:

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

4. Then will replace the tag colored in RED above with this code below:

<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;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<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>

5. After this, search for the closing tag "</b:skin>"

6. Before this tag, copy and paste the code below:

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

.footer-column {
padding: 10px;
}

7.You can now save your template. The style in these lines of code ensure that the footer column don't slide beneath each other in the layout of your template.

If you have already viewed my blog, you can see a horizontal line in the footer. The purpose of this is to make a distinction between the footer columns and the wide selection beneath. You can change the color of this horizontal if you wish.

<hr align='center' color='#5d5d54' width='90%'/>

Change the hex color values of your choice.

You can also delete the horizontal line by just deleting the whole line.

Blogger Hacks:How to remove borders in header

There is a simple hack to remove borders in your header image. Borderless headers will make your blog clean and will help blend your header well with your template. So here's how to do it.

Removing borders form image:

1. Go to edit HTML under layout tab.

2. Search for the this line: #header

3. Change the value of border to 0.

#header {

margin:5px;
border:0px;
text-align:center;
color:#000000;

}

Done!

Blogger Hacks:How to hide the Blogger Nav Bar

Are you bothered when you and other people open your blog and see blogger navigation bar on your site? There is a way of hiding or removing it. I don't know if it is legal because
it's like removing a copyright without permission. Do this at your own risk.

Removing the Navbar:

1. Go to edit HTML under Layout tab.

2. Search for the tag </b:skin>

3. And before this tag. Paste the following code.

#navbar-iframe { height:0px; visibility:hidden; display:none}

Blogger Hacks:How to post HTML tags in blogger

Do you need to post HTML tags in your blog like </head> but you can't because of some pesky and stinky errors.
There is a perfect solution for this.

Example, you want to post <body></body>

all you need to do is to replace the angle brackets:

You can use "Notepad" for replacing:

The HTML code should be like this:

Done! you can now post HTML codes :D

Blogger Hacks:How to add "Print Page" option for your blog

Almost all readers will bookmark the stuff they like, however some of them prefer to print posts or articles rightaway for future reference and reading. So here's a hack to enable your blog visitors to be able to print your blog posts. HP has provided a hack. But before anything else, make a backup of your template.

1. Locate </head> in "Edit HTML" box.

2. Paste this code before the tag </head>

<style type="text/css" media="print">
#noprint {display: none;}
// Hide unwanted elements
body {background:fff; color:000;}
// Black text on White background
a {text-decoration: underline; color:00f;}
//Underline Hyperlinks in blue
}
</style>

3. Before saving, preview first to check errors.

4. To add a "Print Page" option , paste this code on the bottom of your post.

<a href="javascript:window.print()">Print Page</a>

Blogger Hacks:Remove label number count

By default, the Labels will have an automatic count of the number of posts bearing that label tag.
It looks like this:

To remove the label count, follow these simple instructions:

1. Before anything else, don't ever forget to "Download full template" for backup when you accidentally ruined your HTML code and got errors. :)

2. Next is to click the "Expand Widget Template" box.

3. Search for the line in red color written below and delete it.

<b:widget id='Label1' locked='false' title='' 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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Done! you have successfully removed the label number count.

Blogger Hacks:Summarizing your posts

The hack i use in my blog is the "Ramani's selective expandable posts". This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize. By the use of this hack, you can save space in your blog,

A summarized post looks like this:

Clicking the "read more..." will allow you too see the rest of the post.
So here's what you need to do.

1. Before anything else, back-up your template first. Click on the "Download full template" under Edit HTML page.

2. Check the "Expand widget template" box.

3. Copy all the code in this page and search for the tag

</head>

and paste all the code you've copied BEFORE this line.

4. Then locate the DIV section which contains the line

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

5. Then add the code in red color on the following section.

<div class='post-body' expr:id='"post-" + data:post.id' > <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>

<span id='showlink'> <a expr:href='data:post.url'>Read More......</a> </span> <script type='text/javascript'> checkFull("post-" + "<data:post.id/>"); </script> </b:if>

<div style='clear: both;'/> 
</div>

Before saving template, i advise you to preview it first to check if it contains errors.
(If you experience an error. Just upload your backup template and try to repeat all the steps written above.)

6. Done! Just follow this format and start summarizing: