Blogging tips for beginners: May 2008

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, May 14, 2008

How to add Favicon

Monday, May 12, 2008

How to place adsense code on every post

Sunday, May 11, 2008

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

Friday, May 9, 2008

How to add Popular Post on Blogger

Thursday, May 8, 2008

How to add Alert Box with Prompt field

Tuesday, May 6, 2008

How to add Alert Box with Confirmation Button

Sunday, May 4, 2008

How to add a Message Box

Thursday, May 1, 2008

How to Remove Blogger Navbar

Translate this page

Recent Posts

Labels

Blog Archive

Subscribe

Blog Directories

Recent Comments

Play Pacman v2.6

Popular Posts