Add Social Bookmarking Buttons/Icons Below Blogger Posts

I received few comments from my fellow bloggers relating the social bookmarking in blogger posts. Though, I have discussed how to install this in my previous post, there are few more doubts and clarifications regarding this hack. More over, my previous post just displayed links of all the social bookmarking sites and never included any buttons or icons in them. As we know social bookmarks improve traffic to our blog, it is necessary that you make it more attractive and big. Therefore, I thought why not post about this issue in my blog.

Enough of my story and your stories. Let's get our job done now!!! Follow these simple steps to display beautiful social bookmarking sites below every blogger posts.

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

2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line:

<div class="post-footer-line post-footer-line-1">

3. Download any one of the following text documents, that is, download the first text file for installing large icons below your blog posts. If you want small icons below your blog posts, then download the second file.

Large Social Bookmarking Button - File One
Small Social Bookmarking Button - File Two

4. Open the text document. Paste the code that you see in the text document just below the line in step 2.

5. Preview your template to check for errors in HTML code. Thats all folks!!! If you find any error, let me know via comments. Else, Save your template and enjoy those cool icons below every blog post you do.

Click4more... 98 Comments

What Is RSS All About?

I really wondered "What is RSS?", when I started blogging and I never knew what impact, it had on my blog. I just installed in my blog because I found the same in all other blogs. Now, it has been a year since I entered this blogging world and I got to know a little about this RSS which I want to share with my readers. To be very simple, it is another method for the readers to keep track of your blog. RSS stands for "Really Simple Syndication", a technology that websites use to distribute their content.

I am sure many of them use bookmarks to keep track of their favorite sites, that is checking those sites everyday or may be on a regular basis for new content. Instead, you can subscribe to each site's RSS feed and you will be informed automatically by your RSS Reader, once there is a new content added on that site. I have used two new terms "RSS feed" and "RSS Reader". What is this crap??? Wait... Relax with a coffee. Let me explain that to you.

Websites that use the technology of RSS create special files, called "feeds". As mentioned earlier, these files are designed in such a way that they are updated periodically to contain the latest information about the site. A RSS reader is simply like a software, in other words, an application to view the RSS feeds. There are two types of RSS readers available, namely, Web Readers and Desktop readers. The former one is the most preferred, because you can store your feeds on the internet rather than on your hard drive. Some of the popular and free RSS readers are: Google Reader, FeedDemon, Bloglines, etc... I prefer Google Reader because, it is simple to use.

Fine. I got my RSS reader. Now, what do I do? Simply, subscribe to the RSS feed of all your favorite websites. Now, how do I do this? Few sites mention "Subscribe Via RSS" or provide an icon, (something like the one, I should on top of this post) some where in the site for their readers to subscribe via RSS. While few browsers, like Fire Fox have got this option in built, that is, you can click on the icon displayed on the right end of the location bar to subscribe to them. Feel free to subscribe to my RSS feed too.

Click4more... 8 Comments

Automatic Read More Hack For Blogger With Thumbnails

I recently wanted to change my blog appearance and while working for the same, I could find this hack. This hack is basically an updated version of the previous "READ MORE HACK" provided by sites like eblogtemplates. The disadvantage with the previous hack was that it did not create a summary of the posts that are already existing, that is, posts that are already published. Moreover, you had to include the code every time in your posts to create a summary of the post.

This post will explain you how to add the automatic read more hack for all posts including a thumbnail, if the post has got a picture in it. If the post has not got any picture, it just shows a small summary of the post. Follow these simple to install this hack in your blog.
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line: </head>
3. Paste the following piece of code above </head>.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

4. Now, do a search again for the following piece of code: <data:post.body/>
5. Download this Automatic Read More Hack. Replace the following piece of code with that present in the file. Now, save your template and check out the result.

You may customize the number of letters displayed in post by changing the value in the following line, that is, change the ones highlighted in red.

summary_noimg = 450;

summary_img = 400;
In order to change the height and width of the thumbnail that is displayed in every post, you need to modify the following line, that is, change the ones highlighted in red.
img_thumb_height = 100;
img_thumb_width = 120;

Click4more... 43 Comments

How to add HTML codes in Blogger Posts?

Recently, one my blog readers wanted to know how do I add Java scripts and other HTML codes in my blog posts. To be very frank, even I had this question when I started my blog initially. And when I tried to implement such tricks in my blog, I faced a lot of difficulties with the coding. But nowadays, I find many sites have come up with blogging tips and it has become very simple to customize your blog. Let me straight away tell you, how to implement this trick on your blog posts.

If you just want to show up HTML codes in your blogger post, that is without any customization, then use this site : Simple Code. This method will show the HTML as it is and looks very simple. If you want to customize the way it is displayed, like I do in my blog, then you should follow the next method. In this method, you will have to include some codings and then your job will be done.

Follow these simple steps to include the HTML/Java script codes in your blog post:
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Now, do a search using "CTRL+F" for the following line: ]]></b:skin>
(Note: I have used the first method here. Just to show you how it looks)
3. Once you find the code, paste the following piece of code above it:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}

4. Once you do this step, save your template and return to your blog post where you want to insert the HTML code. Place the HTML content in between the following two tags namely, <div class="codeview"> and </div>
5. You can include the code straight away in the "Compose Mode" of your blog post area. After you complete your post, you can simply click the button "PUBLISH POST" and later, view the result.

If you still find problems with the display of HTML codes, then use Simple Code and get the simplified code from that site. Now, place this simplified code in between the two tags as mentioned in step four. That's all folks. Hope I made it simple and clear. Please post your views below through comments.

Click4more... 35 Comments

Free Premium Blogger Templates - WoodMag

It's quite long, since I posted a new template here. I simply did not want to post a lot of templates because many templates are uploaded day by day, but none of them are customizable nor look good. Finally, after a long time, this template "WoodMag Blogger Templates" deserves a top place among the recently released blogger templates. It is basically a three column template and as the name indicates, it has wood background and appears to look like a magazine style template.

Download WoodMag Blogger Template For Free

MAIN FEATURES:

1. Automatic Read More Facility: There is no need to explicitly add HTML codes and other stuffs to have the read more option enabled in your blog. You get this facility by default in your blog.

2. Lower Three Column Section: Many templates do not have this section while this template includes three sections for bloggers to add their Recent Comments Widget, Recent Posts Widgets, etc..
3. Works Perfectly On All Browsers: It works perfectly fine in IE and Mozilla Firefox because I personally tested the template in my test blog. Bloggers will realise this point only, when they try to customize their widgets and other HTML codes in their blog. A simple "Back to Top" icon will not come along the page in IE whereas in Mozilla, it does. So, there are a lot of similar problems. This template certainly overcomes all those.

Overall, a beautifully designed blog that has got all the features of a professional template. It is very important to note that this template is suitable for both personal and professional blogs.

Click4more... 8 Comments

Increase FeedBurner Subscribers To Your Blog

One of the ways to show your blog potential is by displaying the number of FeedBurner Subscribers. The most important thing to be noted regarding the Subscriber's count is that, they are real people with real thoughts and should never be associated with numbers. I had a Google search, for the past one week, related to this topic and I found out that, there is a hack for doing the same using a Netvibes accounts and an OPML file.

It is quite unrealistic to get 2500 subscribers overnight. Moreover, there is no use in doing the same. No real person is reading your blog to generate valuable comments or to increase your traffic. You just show people a couple of thousand readers more than what is in now. So, I advice you not to indulge in any such activities because, one day or the other ,"The Big G"(Google) will find a lock and your key will never fit the lock anymore. Some of the valuable tips that every new blogger can adopt to increase their FeedBurner Subscribers are listed below.

1. Placement Of Your Feed - This is the most important key to increase the subscriber's count. Anything you want to promote in your blog should be placed at the top, that is, above all the widgets. You should have noticed this in my blog provided you followed my blog on a regular basis. Initially, I had the Email subscription option at the bottom of my page(had 14 readers). I shifted it to the top, 2 weeks before and at present, the number of subscribers are 18. I think the results prove why it is so important to place your feeds above all folds.

2. Feeds Below Every Post - It is always intelligent to place a email subscription or your RSS feed below every blog post because, every person who visits your blog is not a blogger . They are just people who landed on your page searching for some information. Thus, it is important to tell in what way, your blog will benefit the user who came from a search engine. You may visit this page for implementation of feeds below every blog post.

3. Post About RSS - This method is self explanatory. Basically, this method tells you to spread "What is RSS" and educate your readers about RSS. Most of the blogs do not have high RSS subscriber's count, simply because many of them don't understand what RSS is all about. So, you may publish post explaining what RSS is and how it will be useful for the reader to stay up-to-date with your blog. Finally, place a RSS link below that post and I am very sure, you will definitely see the difference.

4. Promote Your Blog Feeds - You may promote your RSS feeds by placing them in various forums, email signatures, discussions, etc... You may also place your RSS feeds along with the home page URL when you comment on posts in other sites. This method will serve to be very useful provided you comment on blogs related to your niche. Also, you may solve some problems for your fellow bloggers and later ask them personally to subscribe your blog. Not as a gratitude, but as a token of appreciation in solving their problem.

5. Include A Bonus For Your Subscribers - Last but not the least. A free bonus for Subscribing to your blog. It is very tricky to do this in a blogger or blog spot blog. But, I recommend every one to place some useful Ebook below your subscription form. This will definitely increase the subscriber's count. You have to personally send the Ebook, you mentioned in your blog, through mail to the subscriber, once you know his/her email address via FeedBurner Email Subscription Service.

I have mentioned a few effective methods to improve your subscribers. Am sure there are lots more effective ways in achieving this, so feel free to leave your opinions here via comments. See you in my next post!!!

Click4more... 21 Comments

Jquery Image Maginfier For Blogger Blogs

I recently came across a blog that had the effect of image magnification. That is, once you click on the picture in a post, it magnifies. So, I found a hack to implement the same on blogger blogs. The script and the hack original was developed by Dynamic Drive. I modified a little bit of the code and have implemented in my post here.

I feel this trick will be very helpful to those people who post a lot of photos in their blog and for those who post payment proofs in their blog post. Fine, enough of all bla bla's. Let me straight away explain you how to implement this technique in your blog. Follow these simple steps.
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line: </head>
3. Place the following piece of code on top of the above line(</head>).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/careerfreelife/magnify/Magnifier.js?attredirects=0' type='text/javascript'>
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

4. Now, when you include any picture in your blog post. Go to the "Edit Html" section and just include class="magnify" and also include this piece of code with the <img src="URL"/>. Just see the syntax of the code here.

<img class="magnify" magnifyby="3" style="width: 200px; height: 150px;" src="YOUR IMAGE URL" alt="YOUR ALTERNATE TEXT" id="BLOGGER_PHOTO_ID_19numbers" border="0" />

5. Also, remove the link pointing to that picture. That is, remove the href code before the image HTML. If it is pretty confusing, just take a look at the following piece of code.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img class="magnify" magnifyby="3" style="width: 200px; height: 150px;" align="left" src="http://alturl.com/53eg" alt="sm_VistaWallpaper" id="BLOGGER_PHOTO_ID_5364892650738529362" border="0"/></a>

This is what, I used for uploading the picture shown above. You can change the width or height of the picture and even change s200 to s400 or s800 in the image URL for bigger images. Note: You cannot find s200 in the above code because I have shorten my URL due to the page width constraints. Any help regarding this trick, you may leave a comment and I will solve your problem.

Click4more... 13 Comments