Blogging tips for beginners: Blogger Template Hack

Showing posts with label Blogger Template Hack. Show all posts

Sunday, August 31, 2008

How to add 3 column section on footer

As you can see at the bottom of this blog, I have three columns in the footer section. I placed my other widgets below to gain more space on my sidebar.

Adding extra columns to your footer section will provide more valuable space for blog widgets, and will give your blog a much appealing look.This guide will help you add extra columns to your own Blogger blogs.

The overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Here are the four steps needed to transform the footer section of your blog template:

1. First and most importantly Back up your existing blog template!

Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don't like the new look, you can easily revert back to this design.

To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link near the top of the page. You can then save your existing XML template file to your computer.

2. Move all existing widgets from the existing footer section

In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don't lose these widgets during the modification, and makes it much easier to complete.

3. Add extra code to your footer section.

Go to Template>Edit HTML in your Blogger dashboard, and do not check the "expand widget templates" box (this simplifies the process).

Now you need to find this section in your template:

Please note that this particular section may be called something slightly different in your template, eg: "footer-wrap" or "footer". In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in red.

it's a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don't get pushed beneath each other when you add them later.

4. Adding style for the new footer section

Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing "" tag, which is where the style section of your template ends.

Immediately before this line, add the following lines of code:

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

.footer-column {
padding: 10px;
}

And save your template again. The style in these lines of code ensure that the footer column don't get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

If you are unsure of the hex value for the color you prefer, you can refer to my HTML Color Chart.

If you would prefer to remove the line altogether, simply delete the whole line.

I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.

Wednesday, May 14, 2008

How to add Favicon

Adding a favicon to Blogger blogs is very easy just follow my easy steps and you will be done in just a minute, for those who don't know what Favicon is 'Favicon also called as Favourite Icon, Pageicon and urliconis is a small icon(image) displayed at the beginning of the address bar of the browser.

The main advantage of creating and using favicon is it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.

Most people use 16*16 pixel favicon but you can also use a 32x32 pixel size favicon with ".ico" format. But, you can also use gif, png(image formats) as well.

1. Create a Favicon.

To create a Favicon all you need is a program to create a favicon in (.ico) format. You can also use png or gif format if you don't have a program to create in .ico format. But if you don't have a program to create a favicon there's a lot of online favicon generator that can make favicon for you. Visit these sites http://www.genfavicon.com/ or http://www.graphicsguru.com/favicon.php or you can just search at Google using the keywords free online 16*16 icon generator , free online generator or free favicon generator.

2. Upload your favicon

When you are done creating your favicon, upload your favicon to any image hosting sites and get it's direct link URL.

3. Copy the code below

replace FAVICON URL with your favicon url
replace image format with image format of your favicon
ex. if you use GIF for your favicon replace "image/image format" with image/GIF

4. Paste it After the <HEAD> code

5. Save your template and your done.

Monday, May 12, 2008

How to place adsense code on every post

Knowing where to place the adsense ads is the best way on improving your adsense performance. Choosing the best placement for your AdSense ads will attract more attention; attention leads to clicks; and clicks bring you AdSense revenue. In this guide I will share to you the way on how you can integrate your adsense code on every post of your blog.

There are two ways on how you can place adsense ads on every blogger post. First is using the Blogger feature, second is placing the adsense code on the body of your template which is more complicated but this guide will make it easier for you.

Using the Blogger feature

1. Go to Page Elements then click Layout
2. Click "Edit" on your widget "Blog Post" located at the lower right corner of your widget.

3. Put a check on "Show Ads Between Posts" and select the ad format and color that best suit your blog.

Placing the adsense code on the body of your template

1. First you have to change your adsense code. I know this sounds misleading but you are not gonna alter your adsense code and this is not against Adsense Rules so you have nothing to worry about you will just convert some of the characters to character entities.

you have to parse the AdSense code so that it can be included into your Blog template.

Your adsense code should look like this:

2. Go to Layout then Edit HTML
3. Put a check on Expand Widget Template
4. Search for these lines

< class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

5. Replace the line "Your AdSense Code Here" with your Adsense Code. Your adsense code will appear after your post title and before your posts

< style='float:left;'> Your AdSense Code Here </div>

Here is code if you want to align the AdSense ad to your text, you can specify a margin or padding around the entire AdSense code.

<div style='float:left; margin:5px 10px 15px 20px'> Your AdSense Code Here </div>

The first number 5px is for the top margin, 10px is for the right margin, 15px for the bottom margin, and 20px for the left margin. you can change these values to whatever value that suits your blogger template.

Sunday, May 11, 2008

How to add to add "READ MORE" expandable post on Blogger

This guide will allow your blog hosted on Blogger to have an expandable post. Having an expandable post makes your post interesting. This will also give you the opportunity to put on your main page a great number of posts without making it incredibly long and difficult to load.

Here are the easy steps:

1. Go to Layout then Edit HTML
2. Search for the line <p><data:post.body/></p>
3. Paste the code below above <p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

your code should look like this:

4 . After adding the first set of codes. add the code below under <p><data:post.body/></p>

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

your code now should look like this:

5. Save your Template. This will only apply to your new posts. If you want summarize your old posts place <span class="fullpost"> After the lines on your post you want to summarize. Make sure to place </span> after your posts.
6. Go to Settings then Formatting, Look for Post template and paste the code below

Friday, May 9, 2008

How to add Popular Post on Blogger

Do you want to show your readers your most popular posts? well here is the widget codes that will exactly do that.

► Under Page Elements and add a HTML/JavaScript page element
► Copy and paste the code below
► Change the line "yourblogname.yourdomain.com" with your blog site url but don't include http://


<script type="text/javascript">

function pipeCallback(obj) {

 document.write('<ol style="text-transform: capitalize;">');

 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=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fyourblogname.yourdomain.com&num=10" type="text/javascript"></script>

<span style="font-size: 80%">Widget by <a href="http://blogging-for-starters.blogspot.com">Blogging for starters</a></span>

Thursday, May 8, 2008

How to add Alert Box with Prompt field

This is another type of Alert Box but this one will prompt user to enter some information. For instance, the prompt box can ask the reader for his name and use that to customize the web page. Be reminded that many browsers are configured to disable scripts that ask for information. Have fun customizing your Blog but don't make this a key aspect of the contents. For example, if you have a story that keeps mentioning the name of the reader, the parts where the name should be will appear “null”.

► Under the Layout tab select Page Elements and add a HTML/JavaScript page element
► Copy and paste the code below
► Change the line "Enter your message here" with the your own set of message.
► You can also change the line "reader" with your own default value of your text box field.

<script type="text/javascript">
var yourName = prompt("YOUR MESSAGE HERE", "Reader");
</script>

Below this JavaScript, add another HTML/JavaScript page element and enter the code below. this message will be a greeting message for your readers.

Welcome back
<script type="text/javascript">
document.write(yourName)
</script>! Feel free to look around.
If you like what you read, mention us in
your post or link to this site.
Hope to see you again
<script type="text/javascript">
document.write(yourName)
</script>

note: it is important that you add this java script code below the java script code of the alert box.

Tuesday, May 6, 2008

How to add Alert Box with Confirmation Button

This Alert Box is very useful if your site has a explicit content or not for the general public and want your readers to choose if they still want to continue entering your site or be redirected to a safe place.

► Under the Layout tab select Page Elements and add a HTML/JavaScript page element
► Copy and paste the code below
► Change the line "Enter your message here" with the your own set of message just like in my example output I've change it to "This site contains explicit contents. Are you sure you want to continue?".
► Change "YOUR BLOG URL" with the URL of your blog
► Change "SAFE LOCATION URL" with the URL of the site where you want your visitors to redirected after clicking the cancel button

ex. my url is http://blogging-for-starters.blogspot.com and the the safe place that I use is http://google.com. when a user clicks on the OK button he will be able to go and read my blog contents. when a user chooses to cancel he will be redirected to a safe place that I specify which is Google.

<script type="text/javascript">
confirm('Enter your message here 1');
if (confirm('

Enter your message here 2

')) {
window.location = "YOUR BLOG URL";
}
else {
window.location = "SAFE LOCATION URL";
}
</script>

Sunday, May 4, 2008

How to add a Message Box

This is a guide on how you can be able to add an alert message the moment your blog loaded. This is very useful if you want to greet your readers before they proceed in reading your blog contents, provide information, or warn the readers before they view the full contents of your site.

► Under the Layout tab select Page Elements and add a HTML/JavaScript page element
► Copy and paste the code below
► Change the line "Enter your message here" with the your own set of message just like in my example output I've change it to "You are about to enter Blogging tips for Starters". feel free to experiment.

<script type="text/javascript">
alert('Enter your message here')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

Thursday, May 1, 2008

How to Remove Blogger Navbar

The Blogger/Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. This navbar appears freely on Blogspot hosted blogs. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.

To remove the Blogger navbar follow these simple steps.

step 1. Under the layout tab click on edit html scroll to anywhere on the template and insert the following code. #navbar-iframe{height:0px;display:none;}

step 2. Save your template :)

Wednesday, April 30, 2008

How to add a DIGG button on every post

This simple Blogger template hack will put a DIGG button to every post.

Step 1. Under Settings Tab click on Edit HTML
Step 2. Put a check on Expand Widget Templates

Step 3. Search for the code <p><data:post.body/></p>

Step 4. Copy the code below and paste it above
<p><data:post.body/></p>


<div style='float:right; margin-left:10px;'>

<script type='text/javascript'>

digg_url="<data:post.url/>";

</script>

<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

</div>

If you want your button to be placed on the right just changed the value of margin-left and replace it with margin-right.

Monday, April 21, 2008

How to Add a Blogger Search Box

This simple Blogger Tweak will enables you to add a blogger search box that will help your readers search for a certain topic on your blog.

The main advantage of using this kind of search box is that the results will display on the body of your blog not unlike Google's search box that will open another window for search results.

OUTPUT:

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size.

If you change the width size="30" and value="Go" it will give you this

Saturday, April 19, 2008

How to Add Recent Comments

If you are using Google's Blogger, you will be wondering why Blogger can't be a bit more like WordPress or TypePad. While Blogger is incredibly easy to use, it's a bit more difficult to customize. But with a bit of work, you can tweak your Blogger site to near-perfection.

here is a code that you can use if you want your blog to have a recent comments widget. Just copy and paste the code below.

var numposts = 20; ---> number of comments shown
var showpostdate = true; ---> set this "true" if you want to show the date fo the comment
var showpostsummary = false; ---> if set to "true" this will also display the summary of the comment
var numchars = 100; ---> maximum character of comments shown

Friday, April 18, 2008

How to add Google Translator

Are your foreign readers having problem reading your english written posts? then this code will help you and your readers translate everything on your page in different languages. Inserting this Google Translator will also help boost your readership across the globe.

This code will add a Google translator just like mine. Just Copy and paste the code below.


<p align="center">

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ar&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ar&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_arabic_s.png" height="24" title=" Arabic "/></a> <a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|de&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|de&tbb=1&ie='+e;};"><img border="0" width="24" src="http://img170.imageshack.us/img170/8593/germanshb7.png" height="24" title="German"/></a> <a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|pt&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|pt&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_portuguese_s.png" height="24" title="Portuguese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|zh-CN&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|zh-CN&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_chinese_s.png" height="24" title="Chinese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|it&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|it&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_italian_s.png" height="24" title="Italian"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ru&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ru&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_russian_s.png" height="24" title="Russian"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ja&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ja&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_japanese_s.png" height="24" title="Japanese"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|es&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|es&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_spanish_s.png" height="24" title="Spanish"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|fr&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|fr&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_french_s.png" height="24" title="French"/></a>

<a href="javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=en&langpair=en|ko&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=en&langpair=en|ko&tbb=1&ie='+e;};">

<img border="0" width="24" src="http://i215.photobucket.com/albums/cc129/boysakto69/_korean_s.png" height="24" title="Korean"/></a><span style="vertical-align: super"></span></p>

I manually save and upload all flag images to my photobucket account for faster loading and stability.

Thursday, April 17, 2008

How to add Recent Posts

You wanted to show to your readers your latest posts but you can't because your blog host doesn't the option to do that, Blogger unlike wordpress unfortunately doesn’t a widget to display your recent posts. Blogger doesn’t do things for you that easily but thanks to this post displaying recent posts in your Blogger blog is just as easy.

here are the easy steps to do that.

step 1. Go to Layout --> Page Elements

step 2. Add a Page Element

step 3. Select HTML/JavaScript

step 4. Copy and paste the code below (replace "your blog url" with the url of your blog)

step 5. Save and enjoy your recent post widget ^_^