Add HTML Codes in Blogger Post

Do you want to write some Html codes in your blog post? If so, first you would have to make a few simple changes to your blogger template so that it is able to resist any codes in the post. If you do not make the changes in the template, the Html code in your blog post will merge with the codes in the basic blogger template and you would not be able to view any codes in your post.

Hence, to make some changes in your blogger template , you would have to add a few CSS codes to your template.

Step1 :

Go to Dashboard> Layout >Edit Html.

Step 2:
Click on "Edit HTML " Tab and it will open up a new window .
Step 3:

Now Search for this Code: ]]></b:skin>
(Check out here to locate a code easily in the Template)

Add the following Code just above the ]]></b:skin> code.

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Step 5:

Save Your Template.

Done! Now, your blog is ready to show HTML codes in every blog post. Awesome, isn’t it? Also,it is so very easy.

There is still one more step you would have to follow, to show Html codes in blog post.
While writing your post , go to Edit Html section of your post and add <pre>before and </pre>after the codes.

Like this: <pre>Your Codes Here</pre>

That’s it! Your Html codes will show in your Blog post! :) Read more Entry>>

Modify ‘Comments’ and ‘Posted By’ words in Blogger

Do you think that ‘comments’ and ‘Posted by’ words in blogger are so very common and conventional, that you would like to customize it and use a cool word of your own .Well, that’s no problem !It’s a breeze actually! Oh, no, you do not have to go about tweaking the template and stuff like that.

1. Go to the Page Elements tab on your dashboard.
2. Click on the word Edit in the Blog Posts section.


The Main Page Option box will appear.

• Delete the word comments and insert whatever word you would like. Like for instance, you can replace the word ‘comments’ by’ ‘fantastic bloggers’.

• Likewise, for the posted by word, delete the words 'Posted by' and insert your desired word. You can substitute it by ‘written by’ or whatever.

• Click Save Now.

Yes, you’re done! Simple wasn’t it? Read more Entry>>

Schedule your posts in Blogger

Are you off on a vacation? Are you worried that the regular postings on your blog will be disrupted? No worries. You can schedule your posts so that they will be published on the date and time you set. Cool. How do you do that? It’s so very simple.
To schedule a post:

* Write your post.
* When done, click Save Now.
* Click on Post Options (located at the bottom of the 'edit post' page)

• Enter whatever time and date that you would want your post to be published.

• Click Publish Post.

Your post will be automatically published on that date and time.

Well.. wasn’t it a breeze? :) You can enjoy your vacation with no worries as your blog is being updated automatically!

Read more Entry>>

Make Strikethroughs in Blogger

Whats a strikethrough? Well, it's where you write a word and then go back and put a line through it, most often purposely, just for the fun of it! Like this:

Why must should I have strikethroughs in my blog?

This is what you do:

Click on the Edit Html as you are writing your post.
Put in front of the text that you want the line to go through.

Put behind it. The backslash is very important.

Thus, when you click on the Edit Html tab, this is how the above sentence will look.

Why must should I have strikethroughs in my blog?

WOW!Isn't this real cool!Well, go around playing with strikethroughs in your blogs!:)

Read more Entry>>

Add 'Read More' Expandable Post Link in Blogger

'Read More' Expandable Post Link or the Expandable Post Summaries are post teasers which shows just the first paragraph of the post instead of the entire post on the front page of your blog!And the reader can click on the ‘Read More’ link to see the full post. These allow the reader to get a small introduction to each post on the main page.

This hack is very useful if there are long articles on one page. Blogger blog does not have this feature available directly from the dashboard, so, you have to follow the 3 basic steps order to implement the expandable post summaries in the new layout blogger template.

Note – Before you start to tweak your template, you will first have to:

1. Enable post pages .

Go to Settings >Archiving and Enable post pages to Yes.

2. Add a Class Tag in your default post template:

Go to Settings > Formatting and scroll all the way down to the bottom. In the last option Post Template paste in the following code:

Keep some space between the tags and Save .

Then, you better take the following 2 precautions:

1. Copy and paste your existing code onto a notepad or any text editor.

2. Create a backup of your template just in case something goes wrong.

Now for the template tweak for Read More link:

Step 1- Style your CSS. This changes how posts display on different pages.

* Login to your account.
* Go to 'Template'
* Click 'Edit HTML'
* Check 'Expand Widget'

Scroll down just above </head> and add in this code:

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


You will see a tag ]]></b:skin> just above the </head> tag.
The above code should be placed between these two tags. We have defined a class called 'fullpost'.




Step 2 - Add Read More links which will appear after the paragraph summaries.

* Scroll down the code and locate this code- .

Add the code below immediately after the above code :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url' target='_blank'>Read more Entry&gt;&gt;</a>
</b:if>


When done,save the template . You should see that the Read More Entry>> appearing on your blog. To locate a code in the template follow this easy method.

Step 3- Create a New Post

Everything is set. Now test it out. When you click on the New Post tab, you will see that the post text area has a <span class="fullpost"> and </span> tags. If not, then redo step2.
Write your new post and anything you put above the <span class="fullpost"> tag will be the teaser text. At the end of the post put in the </span>tag.

Yes, your 'Read more' link is all set and working!:) Go for it!

I prefer not using the 'Read More' link in this blog as I read somewhere that when you have loads of screenshots,it is better to have full posts since it is better for Google SEO.(Psst..I'm still not familiar with SEO!:)) Anyways its up to you, to use Read More link or not!

Copyright © 2009 Laila Rajaratnam. All Rights Reserved
Read more Entry>>

How to locate a code in the Template

Isn’t scanning long lines of codes in the template a real pain? There is a real cool shortcut to find a code in the template .Just press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Type all or part of the code you are looking for in the Find box. The scrollbar will scroll down to the part where the code is located and highlight it. Like this:



That’s it! Now you can do whatever editing and preview. If everything seems OK, click Save Template and View Blog to check out that everything is OK!

Read more Entry>>