Wordpress Like Comments For Blogger/Blogspot Blogs

Last week, one of my blog readers sent me a mail stating that he wanted to add a comments section on blogger like the one displayed in my blog right now. I started receiving few mails from different readers regarding the same hack for the past few days. So, I wanted to share this hack on "How To Add A Wordpress Like Comments Section For Blogger/Blogspot Blogs?" with my readers. If you wish to take a look at the final output, then scroll down and view the comments section on my blog or else, just check out the screen shot below.

To add this "Stylish Wordpress Type Comments Section" on your blogger blog, just follow the following steps. Please, make a back up of your template before you make any modifications. To create a back up, navigate to "Design->Edit HTML" and click on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Click on the expand template icon. Now, search for the following piece of code in it. You may use "CTRL+F" to fasten your search results.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

2. Replace the following block of code with the code mentioned in step 3.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

3. The following code should be replaced with block of code mentioned in step2.

<div class='comments'>
<b:loop values='data:post.comments' var='comment'>
<div id='comments-outer'>
<div class='comment-author'>

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>

<img class='avatar' expr:src='data:comment.favicon' height='35px' rel='dofollow' width='35px'/>

</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='says'>said on :</span>

</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span>

<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</div>

4. Now, its time to add the CSS part for this code. But, you need to remove the already present CSS for your comments section. To remove it, find the word "comments" in the CSS part of your template and remove the related code. The CSS part of your template are the codes which lie between the following two tags.

<b:skin> CSS OF YOUR TEMPLATE </b:skin>

Once, you find the code with name "comments", remove the blocks of code associated with them. Please have a look at the following picture for better understanding.

If you still do not know what code should be removed, then ping me via email and I will solve your problem.
5. Take a break with a cup of coffee:) Now, find the following code in your template.

]]></b:skin>

6. Copy and paste the following piece of code just above/before the line mentioned in step5.

/* Comments Section By www.newbloggingtipz.com */
#comments{
background : #fff url() no-repeat top;
float : left;
width : 590px;
font-size:12px}
#comments h4{ margin:1em 0;   font-weight:bold;   font-size:15px;   text-shadow:1px 1px 1px #ddd;   line-height:1.4em;   text-transform:uppercase;   letter-spacing:.2em;   color:$sidebarcolor}
#comments-outer{ background:#f4f4f4;   border:1px solid #ddd;   margin:1em 0 2.5em;   padding:10px;   line-height:1.6em}
.avatar-image-container{margin-right:20px; padding:0; float:right; width:48px; height:48px; margin-top:-20px}
.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHGuyFKyjKBl5xGPIjp058fSdIToYig9X2n59rL4LAutnnZvDJHmbu1qIvfrMSRiAUr6Ha5LffkTtVL-HFlCsNs2q37a6Q-QsypnQ-FXpA7Tv80595pugegAYRO54JE_wYhkNp0YA4EQ/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}
.deleted-comment{ font-style:italic;   color:gray}
.comment-body-author{background:#f4f4f4}

7. Huh!!! That's it!!! Save your template and you will find the "Wordpress Style Comments Section" on your blog.

For further customizations like adding a background to the comments section, etc.. you can edit the CSS part  or view "Our Services" page for any type of customization seen on blogger blogs. How ever, I have provided space for various customizations in the code by default. So, if you know little HTML then, the job should be very easy!!!

I hope you enjoyed this hack. If you need any clarifications regarding this hack, then feel free to comment on my blog or ping me via email. I will clarify your doubts as early as possible. Also, we would be happy to receive comments from readers who understood what I blabbered in this post and successfully installed this hack on their blog:)

Click4more... 48 Comments

Free Premium Blogger Templates - Smack V1

I'm quite happy to introduce my first premium blogger template namely, "The Smack V1 Blogger Template". This two column template is an improved version of the "Stunning Press" word-press theme. Lasantha(Have included his credit in the template) bloggerized this template. I have remodeled the whole template in such a way that, it loads much faster when compared to the conventional template. Moreover, this template is highly search engine optimized. Take a look at the following screen shot of this blogger template. Or, click on the "Live Demo" link to view a live demo of this template.

Live Demo | Download Smack V1 Blogger Template For Free

Features:

1. A 468x60 Ads Ready Banner.
2. A Customized Search Bar.
3. Two Navigation Bars (Above And Below The Header).
4. Ready To Use Social Bookmarking Buttons.
5. Gravatars Enabled For Comments.
6. Wordpress Like Comments Section.
7. Codes Ready For Your Site Logo (Read More About: Changing Blogger Logo).
8. Automatic Read More Hack Enabled.
9. Tested and Compatible with all major browsers (Firefox, IE and Safari).
10. Ready To Use Three Column Footer and so on...


The template also includes a provision for adding a sliding featured content widget. But, I did not include this feature in my template because, it will reduce the web page speed. Please, don't confuse yourself with this template and the "Stunning Press" blogger template. I would say "Smack V1" is an advanced version of the "Stunning Press" blogger template.


Template Customization:
I have listed clearly the entire customization with respect to this template. I have also explained few features for better understanding. You can always leave comments if you need any clarification regarding the template customization.


1. Meta Tags:
1.1. Search for the following code in your blogger template.

<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>

1.2. Replace "DESCRIPTION HERE" and "KEYWORDS HERE" with your own blog description and keywords.
(Note: Do not change the title tags. They are optimized by default for SEO and it comprises of meta tags for each blogger posts too.)


2. Navigation Bars:
2.1. Search for the following code in your blogger template.

<a href='#' title='Edit this link'>

2.2. Replace ' # ' with the link you wish to point to and "Edit" with the name of the link.
(Note: You will find the code mentioned in step 1 at two instances. You can replace them with different links of your choice.)


3. Changing Blogger Logo:
3.1. Look for the following code in your blogger template.

<link href='IMAGE URL IN GIF FORMAT' rel='shortcut icon'/>
<link href='IMAGE URL IN GIF FORMAT' rel='icon'/>

3.2. Replace "IMAGE URL IN GIF FORMAT" with the URL of your image(logo). That is, after uploading it to Google Picasa or Imageshack or Photobucket. Get the URL of the image and paste it in the space provided.
(Note: We design blogger logos and header images for your blogs at very affordable prices. Please, visit the services page for more details (Our Exclusive Premium Services) or write to me directly via email at smalwayz[at]gmail.com.)


4. Changing Header Banner And Footer Section:
4.1. It is pretty simple to change these sections. I have coded in such a way that you just need to navigate to "Design->Page Elemets" from the dashboard and choose "Add a Gadget" to add any content/image of your choice.


5. Changing Default Avatar For Blogger Comments:
5.1. The template carries a unique wordpress style of comments section. You may have a look at the screen shot of the comments section below.5.2. If you wish to change the default avatar for the comments section, then search for the following link in your blogger template.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglHGuyFKyjKBl5xGPIjp058fSdIToYig9X2n59rL4LAutnnZvDJHmbu1qIvfrMSRiAUr6Ha5LffkTtVL-HFlCsNs2q37a6Q-QsypnQ-FXpA7Tv80595pugegAYRO54JE_wYhkNp0YA4EQ/s400/grav.png

5.3. Replace the above link with the URL of your image (avatar of your choice) to display the default avatars on your comments section. That is, after uploading your image to Google Picasa or Imageshack or Photobucket, get the URL of the image and paste it in the space provided.


Overall, with this template installed on your blog, you just need to concentrate on your content and you can forget about the design of your blog because everything is installed by default with this template (including the "Read More" Hack). I hope I explained the customizations clearly. As mentioned earlier in the post, if you need clarifications or need further customizations(adding breadcrumbs or featured content or any other widget), please leave your comments below and I will help you solve the problem.

Click4more... 9 Comments

Add A Scrolling Search Bar On Blogger With Google Adsense

I had been working on few widgets requested by our blog readers for the past few days. One such widget is the Scrolling Search Bar. This widget basically comprises of three components namely, a little stylish search bar, a Google Adsense ad unit and social bookmarking buttons/counters. So, I would say this widget is basically a "Three-In-One" package that should be enabled on most of the blogs. If you want to increase your Adsense revenue, then go for it!!!

Since the ads scroll as the web page is scrolled, the impressions will increase and there is a higher probability for the ads being clicked, that is, your click rates will increase. Apart from this feature, it provides flexibility for the reader to search any content on your blog. Moreover, it becomes very easy for the reader to tweet or re-tweet your posts and share your posts on Facebook. If you would like to see the final output for this widget, then have a look at the screen shot below.You might have seen similar widgets provided by various sites like Wibiya but none of the sites, as far as I know, provide you the ability to display Adsense ads on their scroll bar. Anyway, let us proceed to the installation of this widget on our blog. Before you make any changes to your blog, make sure you back up your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

1. Let us first add the CSS part for the bar. Search for the following code on your blog template. You may use "CTRL+F" to fasten your search results.

]]></b:skin>

2. Now, copy and paste the following piece of code just above the line mentioned in step 1.

#mta_bar {
background-color:#dddddd;
border-top: 1px solid #ffffff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: hidden;
position: fixed;
height:20px;
}
#mta_bar img{border:none;}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left;
text-align:left;
padding-left:10px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #0000FF;
width:630px;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
white-space: nowrap;
padding-right:10px;}
#mta_bar .right a {font-size: 10px;
color: #0000FF;
text-decoration: underline;}
#mta_bar .right a:hover {
font-size: 10px;
color: #0000FF;
text-decoration: none;}
#left_bar a {background: url() no-repeat; text-decoration: none;
color: #000;
padding:0px 0px 5px 30px;}
#left_bar a:hover {
text-decoration: underline;
color: #000; }
#search{border:1px solid #d1cdcd; height:18px; width:150px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{
margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;
background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:125px}

3. You may temporarily save your template. Now, search for the following code in your template.

<div id='main-wrapper'>

4. Download the following text document - Scrolling Search Bar. Open the text document and paste the code present in it just before the line you searched in step 3. Please, change the Adsense Id(the one present next to the text "pub" in the document) with your Adsense ID. Also, replace my site URL(www.newbloggingtipz.com) with your site URL.
(Note: You may completely replace the Adsense section with your Adsense Code too. If you are pretty good at handling HTML, then you can customize the code as you want. I just provided the basic coding. You can add many more bookmarking buttons at the right of the scroll-bar too.)
5. That's it!!! Save your template!!!

You have installed the scrolling search bar on your blog now. The widget can be seen only on the post pages and not on your home page. If you want them to appear on your homepage, then remove the first and the last line mentioned in the text document. If you want some help regarding this installation, then feel free to leave comments or contact me via email. I will try my best to solve your problem.

Click4more... 15 Comments

Remove "Read More" Hack From Static Pages On Blogger

I have just now enabled guest blogging (my next post will be based on guest blogging and its importance, make sure you subscribe to this blog so that, you don't miss any thing that is valuable to your blog) on this blog, which I should have done long before. Better later than never. Anyway, when I recently added a new page to my blogger blog for enabling guest blogging, I encountered a mistake in it. It displayed a "Read More" link at the end of the post on the static page of my blog.

When I clicked on the link, it still showed the same page. So, it is pretty stupid to display "Read More" link for an already expanded post. More over, displaying the same page again and again for the same link appears to be more stupid. If you did not understand what I meant in the lines mentioned above, just have a look at the following two pictures and you will understand what I mean.

BEFORE REMOVING THE "READ MORE" LINK

AFTER REMOVING THE "READ MORE" LINK

So, I thought I should some how overcome this stupidity and to my surprise, I found a piece of code that would do the magic. Just follow the steps mentioned below and you will rectify the bug on your static pages on blogger.

1. As mentioned in many of my previous posts, make sure you create a back up of your template. To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top.
2. Expand your blogger template and search for the following piece of code.

<b:if cond='data:blog.pageType != "item"'>

(or)<b:if cond='data:blog.pageType != "item"'>

(Note: Make sure that the following pieces of code follow above or below the code mentioned in the step2.)

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

3. Copy and paste the following piece of code just before the line mentioned in step2.

<b:if cond='data:blog.pageType == "static_page"'><b:else/>

4. Now, search for the following code near by the above codes.

<div style='clear: both;'/>

5. Copy and paste the following piece of code just before the line mentioned in step4.

</b:if>

6. Save your template and view the static pages of your blog.

This trick might be little confusing because it involves correcting the stupidity on our blogs(quite difficult to accept and digest). If you feel this tutorial is complex, then you can leave your comments below and I will help you solve the problem.

Click4more... 34 Comments

Free Premium Blogger Templates - Prozine V1

Today, I present to you another premium blogger template namely, "The Prozine V1 Blogger Template". This template is yet another creation from Lasantha Bandara. Although, I google a lot about premium blogger templates, I finally end up with the creations from Lasantha Bandara. I feel the templates posted in his site has got the professional touch that one excepts to have on his/her blog. You may click on the demo link to have a live demo of this template or just view the screen shot below.

Live Demo | Download Prozine V1 Blogger Template For Free

The demo link is the basic setup for the template while the screen shot shows, how good the template can be modified. You can always search for design tips(blogger customizations) in my blog. This template "Prozine V1" is basically a right sided three coulmn blogger template which comes in with outstanding and ready to use features. To start off, the template has got a navigation bar below the header. It comes with ready to use 468x60 banner ad space with the header. More over, the template consists of a sliding feature content which requires a little customization though the space for it is readily provided in the template.

The template carries a white background with black text for the posts which is most commonly preferred combination. The template has a good combination of colors for the rest of the area. Apart from the color combination used, the post area has rounded corners rather than the usual straight ones. The template comes with a ready to use read more feature and also, a very good looking comment bubble enabled for each post.

I always mention one drawback with the templates posted under PBT which is nothing but the footer section. Most of the premium templates lack the footer section. But, this template has overcome that drawback and provides you a four column footer, quite a lot of widgets can be accommodated in this space. If you have not got enough widgets, there is no need to worry. The template comes with enough ideas for each footer section.

So, overall I would recommend this blogger template for every newbie trying to make his/her blog professional. Please share your views about this template via comments!!! Remember, you will generate back links, that contributes to your Google PR, if you comment on dofollow blogs (Read more about dofollow blogs here : "How To Make Your Blogger Blog Dofollow") like mine!!!

Click4more... 11 Comments

How To Speed Up Your Blogger Blog?

Hi friends!! This is my second post about speeding up a blogger/blogspot blog. If you missed out the first one, then click here to have a look at it - Speed Up Your Blogger/Blogspot Blog. I had been working on this topic myself for the past few weeks and few days before, I found a post about the same topic on Google Buzz. I wanted to share some of the tips mentioned there with my readers. Although, this topic deals with terms that sound weird, I have tried my best to keep them as simple as possible because, I always write things aimed at the newbies.

The prerequisites for improving the page speed of your blog would be, to get a few of the Firefox Add-ons working on your computer - Firebug and YSlow. These Add-ons are basically meant to analyze the speed performance of your site. Only when you analyze things, you will know whether you are on the right track or not. So, let me start off with methods which I felt were effective with my blog. I'm sure, it will be effective for your blog as well.

(Note: I have concentrated only on CSS and images in this post. The other methods of improving your blog speed will follow on the next series under the same topic. Make sure you have subscribed to this blog so that, you don't miss any valuable tip for the betterment of your blog.)

1. Changing The CSS Section: I highly recommend you to opt in for CSS sprites because it reduces the number of HTTP requests for your blog. If I start to explain about this, I'm sure either I will go mad or you will become one. So, let's not harm ourselves. I leave it to the link from where I gained a little info about CSS sprites - Image Slicing. I know it is pretty difficult for the newbies to understand. So, what do they do??? Simple. Just visit this site - W3C CSS Validation Service.
Enter your URL and get the report. It will clearly indicate the warnings and the errors regarding the CSS codes . You may avoid the warnings, but not the errors. Try rectifying the errors as much as possible. Alteast, learn why the error showed up and eventually, you will correct them once you understand why showed up, just as I did:)

2. Image Modifications - For a blog to be quick in loading, it is pretty obvious that the images in the blog load faster because images occupy more space when compared to the text. So, how do I load my images faster? Basically, if you reduce the number of images, or crunch them you will reduce the size which in turn, reduces the time it takes to load them, thereby increases the speed. Apart from crunching and reducing the number of images, the following methods will be more effective in increasing the speed of loading your images.

2.1. Serve Scaled Images: It is very simple to understand though it sounds complex. This method basically uses HTML to compress the size of your image. To explain this very clearly, consider the example of attaching a large size wallpaper of dimension (1024x768) to your blogger post. Once you attach it in your post, you will find a smaller image only and not the actual size of the image. This is because, the image has been scaled to fit in your post.

It is very important factor to note that, you can still find the original picture once you click on the picture; which means the original image is loaded, but it has been reduced by some factor to make it load faster in your posts. One image, multiple sizes using HTML implies scaling. This is the basics about scaling of images. You can read a little more about serving scaled images here - Serve scaled images.

2.2. Specifying Image Dimensions And Using Alt Tags: If you feel the first step is pretty complex to adopt, then you definitely need to adopt this technique. This method basically involves adding two tags in the images of your post or blog namely, the "height" and "width" tag. What happens when I add this piece of code? If you specify the dimensions in your "img" tag, then the browser understand that it has to load something in that space of "AxB" dimensions. If the dimensions aren't mentioned, then the browser will have to wait until the complete image is fetched or in other words, say wait until the end of the script.

Apart from specifying the dimensions in your img tag, I recommend you to add "alt" and "title" tags. The alt tag basically provides a text equivalent for the object/image. That is, incase an image has failed to load then, the alternate text will be displayed. This saves time because it prevents the re-hits to the server for loading the images. More over, the title tags will fetch you more traffic through images and makes your blog more SEO friendly. I will explain about this concept in the upcoming posts. Subscribe to my blog so that, you don't miss anything vital to your blog.

2.3. Minimizing the HTTP requests: In this method, you just need to ensure that all the URLs for your images are placed on the same server. To be more specific, since you blog on blogger and make use of Google Picasa to upload the images in your post, I recommend you to upload all the images related to your blog(including facebook, social bookmarking buttons,etc..) on Picasa. Do not upload on external servers say, Imageshack, Photobucket, etc.. Every image is associated with a HTTP request and every HTTP request consumes time.

So, if your HTTP requests are diverse(each image at different locations), it simply means more time. About 40 to 60% of your daily visitors come with an empty cache, meaning to say that, they load your site for the first time. So, I would say satisfying the first time visitors would be the key to a better user experience. Hope, you enjoyed this post. Share your views via comments!!! Comments are always appreciated!!!

Click4more... 29 Comments