Showing posts with label Blogger's Design Series. Show all posts
Showing posts with label Blogger's Design Series. Show all posts

Monday, June 13, 2011

How to Add Rounded Corners to Your Blogger's Blockquote

In this post, I am going to share with you a simple way to create a rounded blockquote for Blogger's blog. Previously, I already shared with you the way to "Add Blockquote to Blogger's Blog" and then I shared with you "How to add shadow to Blogger's Blockquote".  I hope both of the posts are helpful for you.

In this post, I will share with you "How to Add Rounded Corners to Blogger Blockquote". I always wanted to get a rounded blockquote for blogger's blog and I think that it is quite cool. Finally, I found the answer. If you like rounded blockquote for blogger's blog, please read on to get the codes.


First of all:
If you are following my previous post to create customized Blogger's Blockquote, then find your codes just like below:

Blogger's Blockquote with Shadow:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
-moz-box-shadow: 0px 5px 15px #ccc;
-webkit-box-shadow: 0px 5px 15px #ccc;
box-shadow: 0px 5px 15px #ccc;
}
Note:
I suggest you find the word "blockquote". You can use the shortcut key "Ctrl + F", then find "blockquote".  It would be faster for you to find the codes.

Secondly:
Add the codes below to your codes:
Rounded Corners Coding:

-moz-border-radius: 15px;
border-radius: 15px;
After you add in the codes, you new "blockquote" codes will look like codes below:
Blogger's Blockquote with Shadow and Rounder Corners:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
-moz-box-shadow: 0px 5px 15px #ccc;
-webkit-box-shadow: 0px 5px 15px #ccc;
box-shadow: 0px 5px 15px #ccc;
-moz-border-radius: 15px;border-radius: 15px;
}
Finally:

All you need to do is to click "Save the Template". That's it!

Done. Now, you can go ahead and add your blockquote, you will find that the blockquote is now having rounded corners.

I hope you can implement the codes correctly. If you find any difficulties, please let me know.

Have fun and enjoy!

Earn Money From Blog Recommends:
Confession of a Lazy Super Affiliate Chris Rempel
Personally, I bought this ebook and I find that it is very useful and very informative. I am now trying out his methods and I will be making some great income soon.

I will show you my earnings using his methods as soon as I got paid. You would want to read about it. The ebook is being sold at a good price. Grab it and learn the technique.

I Really Very Recommend This Ebook! Never before I found such an informative ebook. 

Monday, May 30, 2011

How to Add Shadow To Your Blogger's Blockquote

I have written about "How to Add a Blogger's Blockquote to your Blogger's Blog" the other day. Today, I am going to share with you the way to add shadow to your Blogger's Blockquote to make your blockquote more appealingto your blog's readers.

How to Add Shadows to Your Blogger's Blockquote:
From my previous post on "How to Add a Blogger's Blockquote to your Blogger's Blog", I shared with you that you need to add certain codes to your Blogger's template to customize your Blogger's blockquote. In this post, in order for you to add shadow, you will need to add some more short codes to the previous codes to make the shadow appear in your customize Blogger's blockquote.


Firstly, your customize blockquote codes look like this:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
}


Secondly, copy the codes below and paste to your Blogger's template to replace the previous codes above:

blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
  -moz-box-shadow: 0px 5px 15px #ccc;
  -webkit-box-shadow: 0px 5px 15px #ccc;
  box-shadow: 0px 5px 15px #ccc;
}

Finally, save your template.




That's it. Now, your customize Blogger's blockquote will look just like:


Note:
If you find that my blog's post are helpful, you might want to subscribe to my blog by using the subscription box at the top of my blog.

Saturday, May 28, 2011

How to Add and Customize Your Blogger's Blockquote

As promised in my previous post about "What is Blockquote in Blogger's Blog", in this post I will share with you the way to add a blockquote to your blogger's blog and customize the blogger's blockquote to make it look like Earn Money From Blog's blockquote.

If you would like to have a Blogger's blockquote like my blog, then this post would be a great guide for you to get started to create a blockquote like Earn Money From Blog.

Earn Money From Blog Blockqoute:
This is Earn Money From Blog's blockquote. 
First: Add the Following code to your Blogger's blog Template:
blockquote {
background: #FFFFCC;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
width: 450px;
height: auto;
border: 2px dotted #FFCC66;
text-align: left;
font-style:italic;
color: #6e6e6e;
}
Reminder: Add the codes above before the "]]>". Look at the picture below:

Second: Save your Blogger's Template.

DONE!

Now, you can go to create a new post.
1. Type something in your post area.
2. Highlight the sentences you want to change to be blockquote.
3. Click on the "Blockquote" button. As shown in the picture below:


4. Publish and you will see your post now contain blockquote that look like mine.
Note: 
You might have notice that my Blogger's Blockquote has shadow around it. I will teach you how to add shadow to the Blogger's Blockquote in the next post. We do it one step at a time. :)

Congratulation!!! You just created a Customize Blogger's Blockquote or your blog. 

I hope this post will be clear for you to follow.If it is too confusing, please give some comments. Thanks.

Note: 
If you find that my blog's posts are helpful for you, maybe you would want to subscribe to Earn Money From Blog. Thanks. :)

Wednesday, May 25, 2011

What Is Blockquote in Blogger's Blog

Have you seen blogs with blockquotes? Personally, I feel that blockquotes are amazing because they makes the blog look more alive and more approachable.

What is Blockquote?
Blockquote are snippets of memo or notes normally included in a blog post by bloggers. Bloggers normally place some short notes in their post as a highlight or important notice.

How to Insert Blockquotes?




In Blogger.com, we can insert blockquote easily using the "Blockquote" button in the post page of Blogger.com. Look at the picture above, that is the button of "Blockquote". All you need to do is to Select the part of your blog's post and click the Blockquote button. Then, the part of your blog's post will become Blockquote.

Please continue reading to read about Blogger's Blockquote.


Examples of Blockquote:




I have found 2 examples of blockquotes using Google. And the image below shows the example of Earn Money From Blog's blockquote.


I will share with you the way to implement blockquote just like my Earn Money From Blog blockquote in my next post.

Monday, November 22, 2010

Increase Infolinks Earnings by 30% using a Simple Code

Hi everyone, few days ago, I mentioned about a new in text advertising program called Infolinks.com. So far, Infolinks is working great for me. Less than a week using Infolinks, I got some god income from Inforlinks.

In this post, I am going to share a method to increase Infolinks earnings by 30% or more. If you look at my blog carefully, you might notice that there is a text links provided by Infolinks, that is the way to make more money from Infolinks.

Please continue reading to get the code to make the Infolinks text link appear in your blog.



Copy and paste to your blog using "Add a Gadget", "HTML/Javascript". Move the gadget to the location you want and it will appear properly.

Note: You must have the Infolinks.com in-text advertising codes before using the codes in this post. You can refer to Infolinks blog for more information of implementation.

Friday, May 22, 2009

Placing 125x125 Ads on Your Sidebar

I am sorry for my delayed update. Some of my readers requested a post about my 125x125 Ads on my sidebar. There are some codes to do it but I must say that not all the blogs can use the same codes because some blogs have smaller sidebar. So, it really depends on the width of your blog's sidebar.

The codes I am going to share with you here can be a guidelines for you to have the same thing placement of 125x125 Ads like my blog.




First of all, the result you will get is going to look like the picture above. Please be noted that your sidebar must be wide enough to have this design work properly. So, normally, I will set the Width of my blog sidebar to be more than 250 pixels because 2x125 pixels is equal to 250 pixels.

The codes to place your 125x125 Ads like my blog is as below:

Here is a Larger Banner [You Own Codes]


125x125 Ads No.1 [You Own Codes]
 
125x125 Ads No.2 [You Own Codes]
 
125x125 Ads No.3 [You Own Codes]
 
125x125 Ads No.4 [You Own Codes]



All you need to do is Copy the codes above and go to your blog's "Layout" page, then click "Add a Gadget" and choose "HTML/Javascript". Paste the codes in the "HTML/Javascript" area and remember to use your codes for the 125x125 Ads.

That is basically all the steps needed. Have fun.

Monday, December 15, 2008

How to Add Read More to Your Blog's Posts


Adding Read More to your Blogger's blog is not very hard to do. It only requires you to follow some simple steps and spend some time to copy and paste codes to your blog's template.

I found that adding "Read more..." function to our Blogger's blog posts is an effective way to make our blog looks more tidy and neat. Personally, I do not like a blog or site that have very long list of posts and I need to scroll down a lot of find the posts I want to read. So, by adding a "Read more..." function to our blog, we will shorten our blog posts and give a better reading experience for our blog readers.

So, please read on to learn how to implement "Read more..." function on your blog. I have make it short and simple for you to follow.


Please follow very carefully the steps describe below. You must do it step-by-step to make sure everything works properly. Do not skip the steps.

Step-by-step Guide to Implement "Read more..." on your blog:
1. Login to your Blogger.com account, then go to "Layout">>"Edit HTML".
2. Now, please select the "Expand Widget Template" before doing anything. Then, find for in HTML code.

3. Copy and Paste the code below after .=

4. Now, look for the in the HTML code. Copy and paste the code below after .

Read More...

5. Now, Save your template.

6. Go to "Setting">>"Formatting". Then, scroll down to the lowest part of the page and you will find the "Post Template".

Note: "Post Template" is the place where you can place codes or words so that it will always appear when you create new posts.


Copy and paste the code below into "Post Template".



After you pasted the codes, your "Post Template" will look like the picture below:

If you cannot see clearly, please click the picture to enlarge it.

7. Now, click on "Save Settings".

8. Now, you can go to "Posting" to create a new post. On the new post page, you will see the page below:


If you cannot see clearly, please click the picture to enlarge it.
***Remember: Type part of your post before the and then type the rest of your post between the and .

Then, click on "Publish" and all your new post will look like the picture below:


If you cannot see clearly, please click the picture to enlarge it.

Now, you will have "Read More..." function for all your blog's posts now.

I hope my step-by-step guide above will be helpful. You might want to read about "How eblog templates implement the Read More function". Enjoy the new feature.

Wednesday, December 10, 2008

Add Extra Columns in Your Blogger's Blog Header



You might see that some blogs or sites are having extra columns in their blogger blog's header. Some of those blogs or sites are using the extra columns of their blog's header to sell advertisements to make more extra income from their blog while some other bloggers are using the extra blog's header columns to place navigation bar for their blog or they will use the extra blog's header columns to place the "Subscribe to the Feed".

So, if you are looking for the way to ad extra columns to your blog's header, this post will be helpful to you. I have written down the steps to do to create columns in your blog's header.



The picture above shows the blogger blog's header after modified.

Note: Please note that not all blogger's template can be modified using the same method as describe below. I am sure that the methods below are suitable for minima templates. The steps mention below can be used for blogger's templates with the "header-wrapper" code.

Step-by-step Guide:
1. Login to your blogger account. Then, go to "Layout">>"Edit HTML". Now, Do Not Choose "Expand Widget Templates" and look for the code below:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


2. Then, replace the codes above with the codes below:

#header-wrapper {
width: 660px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
width: 400px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-right {
width: 220px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-top {
padding: 0 5px 10px;
}

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right ul {
margin: 0;
padding: 5px;
}

#header-right ul li {
display: inline;
padding: 5px;
}

#header-right-bottom {
width: 220px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

#header-right-bottom ul li {
display: inline;
padding: 5px;
}

The codes above might not match the width of your blog's template. So, place make some modification to the width so that it matches your blog. The width that you might need to change is #header-right-bottom, #header-right, #header and #header-wrapper. Remember that #header-right-bottom and #header-right should be of the same width to prevent out-of-shape blog's header.

3. After pasting the codes above, now you need to find for the codes below:








4. Replace all the codes in step 3 with the codes below:
















5. Now, you have completed all the important steps. So, you will need to click "SAVE TEMPLATE" to save the changes that you made.

Done. Now, you have successfully modified the your blogger blog's header. You might want to firstly "Preview" the changes before clicking the "SAVE TEMPLATE" button. After you save everything, your blog's design will look like the picture shown.

Enjoy.

Monday, December 8, 2008

Changing Your Blog's Favicon to Your Own Favicon



Do you know that you can change the favicon of your blog hosted on Blogger.com to the favicon of your own? Normally, we will have as our blog favicon. For me, I do not like the favicon because it makes my blog look not professional. So, I change it to my own favicon.

You can change your blog's favicon to your preferred favicon too. It is quite easy to make the modification. Just follow the steps described at the later part of this post, I am sure you can do it too.


Changing blog favicon is not as hard as it seems. It is quite simple and you only need to do some simple steps to change the favicon to your preferred favicon. So, please read the steps below:

Step-by-step Guide:
1. First of all, you need to have the image to be used as your favicon. If you do not have one, you can use favicon generator to create favicon using photos. You can use the Favicon Generator on BloggerBuster. If you do not know how to create your own favicon, you can get free favicon at Favicon Gallery or you can check Smashing Magazine for ideas of favicons.
2. Now, Login to your Blogger.com account.
3. Go to "Layout">>"Edit HTML".

4. Copy the code below:





*Remember: Change the URL "http://your-icon-url.png" to the URL of your favicon. For example, if you upload your favicon to Photobucket, then you will need to login to your Photobucket account to copy the URL of your favicon.

5. Now, find for the section within the HTML codes of your blog. Paste the code in step 3 after the .
6. Now, save your template.

Done. You have successfully change your blog's favicon to your favorite favicon. You can now try to visit your blog and you will notice that the favicon is changed to your preferred favicon.

Friday, December 5, 2008

How to Add a StatCounter to Your Blog

Knowing how many visitors and page views your blog has per day is important. I think that it is very important to check whether your blog is being viewed by other people or not. So, if your blog do not have a stat counter, you will never know how many people are reading your blog.

So, adding a stat counter to your blog can help you a lot. You can know where your readers comes from, how many people are viewing your blog, how many page views your blog get per day and so on. I am having a stat counter at the lower part of right sidebar. I am using ShinyStat and it is free.

If you want to add a stat counter to your blog, you might be interested to read the rest of this post. I will show you step-by-step to add a statcounter to your blog.

There are several stat counter service available online. Most of them are free service. I would not list all of them here because it would be a very long list. So, I only list down the 5 great and free stat counter services as below:
  1. ShinyStat
  2. StatCounter
  3. HiStats
  4. GoStats
  5. AmazingCounters

Personally, I like ShinyStat because it is a very good stat counter. It has a lot of features such as showing traffic chart of your blog, showing which countries your readers come from, what sites are linking your blog, what operating system your readers are using and so on.

Before you can add a statcounter to your blog, you will need to sign up for the statcounter services I mentioned above or if you do not like the services I recommend, you can try to find for other options using Google Search.

After you have signed up for the service, you need to follow all the steps of the service to setup your statcounter. Then, the most important part is to get the HTML code of the statcounter you have setup in the service.

Step-by-Step Guides to Place Statcounter on Your Blog:
1. Login to you Blogger.com account.


2. Go to "Layout">>"Add a Gadget">>"HTML/JavaScript".
3. Then, paste all the HTML code of your statcounter in "HTML/JavaScript".
4. Save.

After saving, you might want to move the "Gadget" on the layout around. Then, save it when you have place the "Gadget" at your preferred place.

Now, the statcounter will start recording down the traffic on your site. You will be able to know how many people are viewing your blog and so on.

You might want to read about "Adding ChatBox to Your Blog" to mae your blog more interactive.

Wednesday, December 3, 2008

Adding a Comment Form to Your Blog Posts

Do you noticed that all my blog posts are having a Comment Form like the picture on the left? Normally, if we want to write comments on blogs created in Blogger.com, we will click on the "Comments" or "Post a Comments" link after the blog post and a popup window will appear for us to type in our comments. I feel that the popup comments window is quite annoying and I do not like it. So, I login to my Blogger.com account and make some tweak to the comment feature of my blog. By doing some simple tweaks, I can place an "Inline Comments Form" or "Embedded Comments Form" beneath all my blog posts.

After adding the comments form beneath all my blog posts, I found that it is much easier for my blog readers to write comments. Adding the comments form beneath my blog posts make my blog more user-friendly and looks more professional too.

I have written down some steps you need to do to make the comments form appear after every posts of your blog in the later section of this post.

The steps below are required to embed comments form after your blog posts:
1. Login to yhour Blogger.com account.

Go to "Setting">>"Comments".

2. Now, you are at the comments setting of your blog. You can see a lot of options for you to tweak such as the "Comments: Show/Hide", "Backlinks: Show/Hide", "Comments Timestamp Format" and so on.

In the comments setting, we are going to changed the "Comment Form Placement" setting.

3. I am sure you will be able to find "Comment Form Placement" on the page, then select "Embedded below post". By choosing this option, you are making the comments form to appear below your blog posts after people click on "Comments" or Post a Comment" link of your posts.

4. This step is optional, you can skip this step if you do not want to change anything f "Who Can Comment?". After you choose the setting, you can proceed to change the setting of "Who Can Comment?". Here, you can choose who can write comments on your blog posts. If you allow anyone to write comments, then you can choose "Anyone". There are 3 more options left which are "Registered User (include OpenID), "Users with Google Accounts" and "Only members of this blog". So, it is up to you which option you prefer.

5. Now, "Save Settings".

Everything is done. You can now visit your blog and then click "Comments" or "Post a Comment" link after your blog posts. You will be directed to a page where you will see the Comments Form below you post. There you can write your comments.

I hope you will enjoy using this simple tweak.

Add a ChatBox to Your Blog

Adding a chatbox to blog is a great way to interact with your blog reader. You can see that I am using a chatbox on my blog at the right sidebar. I am adding the chatbox to increase interaction with my blog readers.

You can add a chatbox to your blog too. It is quite simple and it is a great way to add more activity on your blog. In this post, I will share some sites that gives us free service to place a chatbox on our blog.

I manage to find 3 sites that are giving free chatbox service for bloggers. You can read about the features of chatbox below:

1. Cbox:

Cbox is the chatbox that I am using on my blog now. It is a free chatbox service. I like thisservice because it has some nice designs to choose from. If you want to use Cbox on your blog, you can choose the colors according to the color of your blog. It is a neat chatbox too. The bad thing about Cbox is that it does not have spam protection.

2. Shoutbox:

ShoutBox is a very popular free chatbox service. It is a great chatbox service. It has spam protection and the colors can be changed too. On the chatbox, it will shows the number of users are currently on your blog. I think that it is a good chatbox service. I might want to change my chatbox to this service soon.

3. Flooble chatter box:

Flooble chatter box is another free chatbox service. Personally, I do not like the design of the chatbox and it is not very user-friendly. So, I do not use it.

There are a lot of other chatbox services available. The 3 services I mentioned above are the more popular services. You might want to try other services if you do not like the 3 chatbox services I mentioned above.

Tuesday, December 2, 2008

Prevent Plagiarism, Disabling Text Selection on Your Blog


I found that a lot of bloggers are facing plagiarism problem. Some people like to copy the posts on blogs and paste it on their blog to use it as their own contents. Actually, if those "copy and paste" people would like to share, they can spend sometime reading the posts on other blogs and write a new post using their understanding about the topic but they are too lazy to read, too lazy to understand and too lazy to type.

So, this post is about how we can avoid "copy and paste" people from copying our blog contents. I found a script that can disable "text selection" on our blog on Dynamic Drive. So, by using the script, text selection on our blog will be disabled and so "copy and paste" cannot be done.

Prevent text selection on your blog is quite simple.

Step By Step Guide:
1. Login to your Blogger.com Account then go to "Layout">>"Edit HTML".
2. Then, all you need to do is to copy all the code below:



The code above is obtained from Dynamic Drive

3. Then, paste the code after the section of our blog.
4. Save your template.

Now, you can visit your blog and then try to select text on your blog. I am sure that it is no longer enabled. So, people cannot copy your post anymore.

Monday, June 25, 2007

Adding AdSense Ads to your Posts Area

Adding AdSense Ads into your posts is a great way to get a lot of clicks and earn a lot from Google AdSense. A lot of top earners of Google AdSense use this way to get clicks and earn from Google AdSense.

How Do You Want To Make AdSense Ads Appear in Your Posts?

A lot of people are wondering about it, so, I decided to write a step-by-step guide in this post to teach you how to insert it into your posts area in Blogger.com. There a few steps to follow before you can add AdSense Ads to your blog's posts. I have make it into step-by-step guide. Please read the rest of the post.

Step-by-Step Guide:

Step 1:
Parsed Your AdSense Code:
Parse means you make slight modification to the AdSense Code. How do you want to parse the code?

Simple. You need to change all the symbols like <, >, and so on in the code to HTML tags.

Re-type the code according to the picture below:


If you are lazy to do it, you can parse the AdSense Code at BlogCrowds.com. BlogCrowds.com offer free parse code service.

Parse Your AdSense Code at:
BlogCrowds

Step Two:
Placement of the AdSense Ads your posts:
Expand your blog's widget first and find for the code below:

i) Place the Ads Next to your posts:

ii) Place the Ads after your posts:
Paste the parsed AdSense Code at the place you want the Ads to appear. Then, Save the template.

After doing all the steps above, the AdSense Ads will appear in your posts area. The steps mentioned above is only applicable to Blogger.com Customize Template.

Some people said that it is against the AdSense Polices to modified the AdSense Code but I already asked Google about this modification. They said it is OK to make minimal modification to place AdSense into Blogger.com template.

***Below is the reply from Google AdSense Team:***

"Thanks for your email. We do permit minor edits to the AdSense code to
allow AdSense to be placed into Blogger.

Please keep in mind that in general, publishers are not allowed to alter
the AdSense ad code for any reason. Once you've generated the ad code in
your AdSense account pages, you may not alter any portion of the code or
manually change the layout of the ads. For instance, publishers may not
alter the ad height variable to mask the Ads by Google moniker.

Thanks for your cooperation.

Sincerely,

Sean
The Google AdSense Team

----------------
To access the Google AdSense home page or to log in to your account,
please visit: https://www.google.com/adsense

Original Message Follows:





Can I change the original AdSense Code to the code above so that I can
place it into Blogger XML template? "

AddThis Social Bookmark Button

Related Links:

Friday, May 18, 2007

Expandable post for Blogger

I have created an expandable post in this Earn Money From Blog. As you can see, there is a "Read More" link below this post. If you would like to know more about how I create this expandable post. Click the "Read the Full Post..." link to continue reading.


If you would like to create an expandable post like me. This is a good post to guide you.

Step 1:
1. Login to your Blogger Acount. Click on Layout on your blog. Click Edit HTML.
2. Go to find:

3. Copy the code below:



4. Paste the code between

and

5. Save Template.


Step 2:
1. Expand the Code.
2. Locate this code:

3. Paste the code below:

Read the Full Post...

4. Follow the code correctly, if not the "Read more!" function will not function correctly.
5. Save template.

Step 3:
1. This is the last step.
2. Go to Settings------>Formatting. Scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :

Type your summary here

Type the rest of the post here


3. Done!

Your posts will have "Read the Full Post..." function and this is good to make all your posts have their links in your blog. This is helping you to create a lot of inbound links in your blog.

Sunday, May 13, 2007

Adding Extra Elements to Blogger's Blog Header

Normally, in Blogger we can only see our template lik the pictures below:

This post will teach you how to make the "Add a page Element" appear at the Header. After you apply the steps in this post, then you can add something into your header easily.

Your Header will look like the picture above after making some changes to your blog's HTML.

Step-by-step Guide:

1. Login to your Blogger Account.
2. Click on "Layout" at the blog your want to make changes.
3. Then, click on "Edit HTML".
4. Now, here is a serious part. Try to find the code in the picture below:

5. You can surely find it.
6. Make changes to it. Change the maxwidget='1' to maxwidget='5' and change showaddelement='no' to showaddelement='yes'.

Finally, the code will look like pictures below:


Click to see larger picture.



7. After you have completed all this steps, "Save Template".

8. Go to your "Page Element" tab. You will find that you can "Add a page element" to your header.

9. This is useful especially if you want to place AdSense for Contents(Link Units) there.

Happy Blogging!!!