How to display codes and scripts in your blogger posts

Jun 29, 2010

Want to show some piece of code in your post to your readers?
Normally when you insert some code with HTML tags in your blogger composer , it will be executed and the result will be shown instead of code.

Step 1
Login to your Blogger account and navigate to Layout section. Then go to Edit Html subtab.

Step 2
Find this code ]]></b:skin> in your template code, and above this line add CSS code below and Save your Template now

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Step 3
Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .

<div class="codeview">
Insert the Special code here
</div>

That it. If you have any problem to implement it, feel free to post a comment, I will help you.

Stop visitors from stealing your blog content

Below is a little trick that will stop your visitors from copying and pasting your blog information. Anyone with experience may know a way around this trick. However it will make it hard enough to discourage them and get them moving on to easier targets.

What to do?
Log in blogger / Dashboard --> Layout --> Add Gadget - scroll down --> HTML/JavaScript --> copy the next code and past in in HTML/JavaScript text box area

<script language="JavaScript">
<!--  
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com  
var message="Function Disabled!";  

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}  
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){ alert(message); return false;
}
}
}  
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}  
document.oncontextmenu=new Function("alert(message);return false")  
// -->
</script>

When someone will try to do right click a message will appear “Function disabled” , you can change this message too if you wish.

Enjoy.

Using Title Tags to Improve SEO

Until now, the Title Tags generated for each page of your Blogger blog would display the blog title first, then the name of your post. This wasn't so good for SEO (search engine optimization) as this made keywords from your post titles appear after your blog title.

So if you want to improve SEO that is important for your blog, follow step below.

1. Go to Layout > edit HTML in your Blogger dashboard.
2. Search for this tag:

<title><data:blog.pageTitle/></title>

3. Replace(means remove code above and place code below) this tag with the following:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4. Save your template.

This work only in XML blogger templates. Also is and a hack for classic bloggers, but as I know noone use classic blogger anymore.

Moving a blog to another email addres

Q1: Can I move my blog from one Gmail account to another?

Q2: I have two blogs that are on separate email addresses ID like to know how to move one to the other? I don't want the blogs combined but managed from the one email account.

Follow steps:

1. Login to Blogger Dashboard.

2. Click Settings on your dashboard --> than click Permissions tab.

3. Under Blog Authors click the ADD AUTHOR button. Copy and paste or type in the email address of the person you wish to invite or that of your second email account and click on Invite.

4. Open your Gmail for that account and check Blogger email [invitation]. Click link and activate it, you will log in blogger.

5. Now log again with your previous gmail account that you made invitation, go to permission and click give admin permission.

6. Now your blog can be managed by 2 email account, you can delete one [old] if you want.

That's it, need help, leave a comment.

Feb 14, 2010

How To Add The Blogger “Read More” Expandable Posts Link

This is a pretty popular Blogger hack that lots of people have asked me about. Instead of answering to each email individually, I thought it would make more sense to write an article about it.
With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Step #1 – Update Your Template Code

First you need to edit your existing code so I recommend copying and pasting it into notepad or any text editor. Also, it’s smart at this point to create a backup of your template just in case something goes wrong. Now do a search (CTRL + F) within the text editor for the following code post-header-line-1. This is the default code that Blogger includes but some custom templates remove or change this code so you might have trouble finding it. If you can’t locate this text then try searching for <data:post.body/> instead. Your template will for sure have this since it’s the tag that actually prints the body of your post.
Now depending on which code you were able to find will determine how easy the next steps will be. You might need to do some detective work first in order to get this working properly in your custom template. The idea is to get this new code into your template before the <data:post.body/> tag. Keep reading and hopefully the explanation will illustrate the concept clear enough so you are able to adapt this hack to your custom template.
Add the following code below the <div class=’post-header-line-1′/> and <div class=’post-header-line’> tags if you’ve got both.
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
The result should look something like this:

If you don’t have the default <div class='post-header-line-1'/> tag then your result should look something like this instead. This is how it would be done in the MushBlue Blogger custom template:

Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it’s just tag above it that will differ based on the template you’re using.
Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
Yes, there are supposed to be two </b:if> tags in the above code so don’t think it’ s a mistake. The result should look like this:

This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above.
Now let’s look at what the final result should be. Here’s the updated code block you just worked on all put together:

Ok, you’re all done editing the template code. Paste it back into your Blogger html window and save it. If you get an error, you made a mistake. The most common mistake is to accidentally delete a > or < while pasting in the new code. If it saved successfully, it’s time to move onto the next step and modify a quick Blogger format setting.

Step #2 – Add a Class Tag in Your Default Post Template

For this step, you need to navigate in your Blogger account to “Settings” => “Formatting” and scroll all the way down to the bottom. It’s the last option called “Post Template”. You’re going to paste in the following code:
<span class="fullpost">
</span>
You’ll want to keep the spaces in there which will make sense later. After you save this, it will look like this:

Step #3 – Create a New Post

Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class=”fullpost”> and </span> tags. If not, then you didn’t save it properly so go back and re-read step #2.
So when writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.

Now publish or preview your post to see the “read more” hack working on your blog. If it doesn’t show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It’s difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.
Here’s the live post with the “read more…” link properly working based on the text I used above in the post text area.

Additional Info

If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags breaking apart the post into two parts.
For some posts, you might not want to use this feature at all. If that’s the case, just delete the <span class=”fullpost”> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!