Make Your Blog More Attractive - Tip 1 | A Decidedly Intellectual Blog

Saturday, March 26, 2011

Make Your Blog More Attractive - Tip 1

4:24 PM

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Many bloggers, both newbies and experienced ones, keep asking me about the "Read More and Add Your Comment" buttons, special "Note" tag which I include in my recent posts, about the Tags and Author Name which are included below every post title and so on. I plan to publish articles in the upcoming weeks solving these issues and other issues faced by the bloggers as well. It's better that you subscribe to my blog so that, you don't miss any valuable tip that would make your blog more attractive.

In this post, I will demonstrate on "How to add the Read More and Add Your Comment buttons" to the home page of your blog. Though blogger has enabled the "Read More" feature with "Insert jump break" icon, to add the CSS stylized icons, you need to follow the instructions mentioned in this post. Still not clear about what I'm blabbering, then have a look at the previews below - on IE, on Firefox.

On Internet Explorer

On Mozilla FireFox

Note: Rounded corners are visible only on the latest browsers and it's not supported by IE. However, the hack will work on IE. It will be visible as straight edges. Check out the screen shots to find the difference between the straight corners and rounded corners.

Fine. Let's install this hack on our blogs. Just follow the instructions mentioned below.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you make any changes in the template.

2. Search for the following code in your blog. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

3. Paste the following piece of code just above the line mentioned in step 2 (the one you searched for).

.rmlink a {
       color:#ffffff;
       text-decoration: none;
       float:right;
       font-family:Arial;
       padding:3px 4px 3px 4px;
       font-size: 12px;
       font-weight: bold;
       text-align: center;
       background: #444343;
       padding-left:10px;
       padding-right:10px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
}
.rmlink a:hover {
       color:#ffffff;
       text-decoration: none;
       background: #7b7b7b;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
}

4. Save your template temporarily. Next, expand your template checking the box on the top right corner of HTML area, that is, ensure you have a tick mark on the box.
5. Once the template is expanded, search for the following code in your template.
<data:post.body/>
6. Just download this text file - Read More Hack. Replace the above mentioned code with code present in the text file. That is, just copy the entire content in the text file and paste it instead of the code mentioned in step 5.
7. Save your template. That's it!!! Every time you make a post, just use the default "Jump Break" tag and this hack will work.

If you face any problems installing this script, you can always contact me via email or leave a comment below. You can also request for solutions regarding the problems you face when installing other widgets on your blog or request for the scripts which attracted you the most on my blog, say like the subscription box, the search bar, etc... Your problems will be addressed in the upcoming posts on my blog. So, what you waiting for??? Leave a comment and get your problem solved!!!

UPDATED CODE
Few people asked me to include the number of comments along with "Add Your Comment" and "Read More" button. The updated version would look as shown in the picture below.

So, for those who wish to have the new version of code. Just follow the same steps which are mentioned above expect step 6. Instead of the file - Read More Hack, download the following file - Updated Read More Hack Code and replace the code as mentioned.