Blogger Trick

Home » Archives for Maret 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Posted by Budhi Rabu, 28 Maret 2012 1 comment

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

related post, related posts blogger, blogger widgets

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRTd2W5WMt1nzPHt4yYLfdzcJG-lTgzhMI3szTy8YNKOYin9LzIMrGjsvplRRg6gzAXSxzWmM8080wC4hUZ6IGqRMr-r0psEMe81VrM6O399v_cba-SOoAVkXjzwlUb3qECHmu8JzRIF1u/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEtEdiyJKiqvvNY3rT1kivCmBBvt5SYW9tkHqEM8jHNXMKTGd23HyfV9-C1-46g0zhnmJIVDSokE4Oy0ehzNWAUXr3PfkRg2jdWu-e-dF6hhtva39VU1DAdXB0AlAA87SX4ZRhdOL8nJZF/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

How to change Blogger "Post A Comment" Message

Posted by Budhi 56 comments

In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so let's get started.

How to replace Post a Comment with an image

To replace "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked in red:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>

...and for this one too:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Step 4. Replace <data:postCommentMsg/> with one of the below images codes:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRge60ECHsByLUaKZtjvuXkp1b3_G7QjqvzvUQn5jKsHsA-g2Nxy7Anfd1KT6xC00LTP7LtRvOvg9QBP0w85Y16R1qHnBAjLFBvdL-TUE1QZe9jSOVUYhAyhWiQ9k5akqVXUWNhJQBZo/s1600/leave+a+comment.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmOb5eQ7gDJoASok2R9hzGLUCOtVldVF6qZFE_Fw23DB3K5X0KYpzUpjZEyD1M3qSpuzgwoKki7PGty51_2yQlpGBIQe6pQG-VZi0LUVhBAKGtoiiOaxTzU99dR_u6qbsHJXTCKqMPzc/s1600/Post+a+comment+blogger.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_tZTANS0jrkSj8X5VW9esbS9_jiDz2DULblhZLH4v2EMpcjND4Epsm7_vdbrStjrDbLfGXMXQLePoQmwOclb4tcVbDVQHDt_2WCSVs04EXGnJXAJThTwRnHSGmr9ogknmdRKCGPzBPp3H/s1600/animated+comment+arrow.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wIfEGtc1VG-0nWbVOEWWaJFHoPri5QWMueNwDpHvcOKx9pftuO05H28sBmamB5iJyIOWzUTIKqRUCApvaRdrLehfz-rM35x8MJAyflTDf2c7CHNZO4cc0q0Tt6j3Bf8bAesUkq2-LZb-/s1600/leave+a+comment2.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HuB0XpK5cCeQKxXKffnxyX0DbLXgi8DHXt6tuxjFqHiKoHFb5Ysj94E9MeMvu2WvhDmTPXHLqMp_aZRLV6Vkwp3kMThhBFApJtFeuVFQDrQfwRpd9CWrkRGKCki1bJ0Gza_JqJYbUwHq/s1600/comment.gif" />

You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it):

<p><data:blogCommentMessage/></p>

Step 6. Save Your Template.

Thats it! I hope you like your new comment form !

How to optimize Images and Increase Blog Traffic

Posted by Budhi Minggu, 25 Maret 2012 1 comment

This tutorial will explain you how to optimize images before uploading them to internet. Generally most of people don't optimize images before uploading it to Blogger as needed. Optimizing images should be done when talk about the SEO (Search Engine Optimization). Learning the correct and proper way of optimizing images in blogger is important. Google Image search is used widely for finding quality reference images, icons and photos. A great percentage of our blog traffic depends on Image search. When we are downloading images, most of the time they are saved with very odd names and we don't take any interest in modifying the name. So you should always consider two things when uploading images to Internet these are proper use of alt tag and image name should be change with proper keyword. Let me explain..

1. Change Image Name with Keyword
see in the screenshot

When we are downloading images from Internet, generally they are saved in local drive with some very odd name like untitled.jpeg, img1.jpeg etc. So changing these names with appropriate keywords is always helpful. For example, if i want to add img1 or untitled in this post then definitely i will change these name with those words which describe the content called keywords so i will change to image SEO.jpeg or optimize image.jpeg.

2. Use alt attribute

Search robots can not read multimedia may it be graphic images or flash. An image is meaningless for search spiders if it is not defined(tagged). So to tell search robots what the image is all about, we can add an alt tag to our image code. When you add a photo to your post editor, switch to "Edit HTML" mode and find the HTML code for the image which will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigEIo9KYBtYu-vGpH8JL0AVC2BgXV3gcgX701S41amnAtgp3K1wXA4zl9jHE9WLRIHNDmRkcl5Mxh74paI_t4SZo-CUItnNlL3Nuau4SXK5IBscNMFiGaqqJa1IP0_sqiciv8y_z_n6EQH/s1600/how+to+seo+optimize+blogger+posts+titles.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigEIo9KYBtYu-vGpH8JL0AVC2BgXV3gcgX701S41amnAtgp3K1wXA4zl9jHE9WLRIHNDmRkcl5Mxh74paI_t4SZo-CUItnNlL3Nuau4SXK5IBscNMFiGaqqJa1IP0_sqiciv8y_z_n6EQH/s200/how+to+seo+optimize+blogger+posts+titles.jpg" width="100" /></a></div>

Now you need to identify the HTML code of the image which is marked with red. Just add the underlined alt tag after <img as shown below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigEIo9KYBtYu-vGpH8JL0AVC2BgXV3gcgX701S41amnAtgp3K1wXA4zl9jHE9WLRIHNDmRkcl5Mxh74paI_t4SZo-CUItnNlL3Nuau4SXK5IBscNMFiGaqqJa1IP0_sqiciv8y_z_n6EQH/s1600/how+to+seo+optimize+blogger+posts+titles.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="image description" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigEIo9KYBtYu-vGpH8JL0AVC2BgXV3gcgX701S41amnAtgp3K1wXA4zl9jHE9WLRIHNDmRkcl5Mxh74paI_t4SZo-CUItnNlL3Nuau4SXK5IBscNMFiGaqqJa1IP0_sqiciv8y_z_n6EQH/s200/how+to+seo+optimize+blogger+posts+titles.jpg" width="100" /></a></div>

Replace image description with your own keywords. And try to write short sentences to describe them, also keep description limited to 4-5 words. Less is better.

How To SEO Optimize Your Blogger Blog Titles For Higher Search Results

Posted by Budhi 0 comments

This is called "Blogger/blogspot Title Swapping". Swapping blogs title can help boost your position in search engine results page listing and also increase clickthroughs. From an SEO (Search Engine Optimization) perspective, page title is the most important element in your blog in terms of ranking well in search engines. If you look at your browser's title bar you will notice that Blogger's default templates display your blog title in front of each page or post title. So page title would normally be displayed as:

After swapping the blog title, it will be appearing like this:

seo optimization, title swapping, blogger optimize

This kind of placement will be also appearing in google search results. The reason why you should put post titles at the beginning is because users are more likely to search for specific post content rather than the actual name of your blog. So having the post titles at the beginning increases your chances of being found.

How to optimize blogger post titles

Step 1. Log in to your Blogger Dashboard and go to Template > Edit HTML

Step 2. Check the "Expand Widget Templates" checkbox

Step 3. Find (CTRL + F) this code:

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

Step 4. Replace the code above with this one:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> |<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Step 5. Click Save Template and you are done.

How To Remove Blogger Attribution Gadget

Posted by Budhi Kamis, 22 Maret 2012 0 comments

The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps:

blogger attribution, blogger hacks, powered by

Step 1. Log in to your Dashboard, go to Template > Edit HTML

Step 2. Check the "Expand Widget Templates" box

Step 3. Search (CTRL+ F) for this code:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Step 4. Replace true with false

Step 5. Click on the Save Template button

Now attribution gadget is unlocked and it can be removed. Just go to:

Layout and click on the edit link from Attribution gadget:

Click on the Remove button - as you can see in the screenshot below:

That was all !

How to add a gadget/widget inside your Blogger Blog header

Posted by Budhi 5 comments

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below:

But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize blogger header

Step 1: Go to Blogger Dashboard > Template > Edit HTML and backup your template

Step 2: Click anywhere inside the code area and open the search box by using the CTRL + F keys:

adsense, blogger tricks, blogger widgets

Step 3: Search for this piece of code:

/* Header
----------------------------------------------- */

Note: If you can't find it, search only for the first line:

/* Header

Screenshot:

blogger gadgets, blogger widgets, blogspot tricks

Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.

Step 5: Find the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Find the following code:

</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>

Step 8. Just above it, paste this:

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

Note: if you can't find the code from step 7, search for this instead:

<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

... and paste the code from step 8 just below it.

B. Add extra gadget/widget section to Blogger Header

Let's go one step forward and add an extra gadget section within Blogger header in new template designers.

Step 9. Just below the code from step 8, paste this codejust before/above it:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 10. Now find:

]]></b:skin>

Step 11. Paste just above it, this CSS code:

.header-right {
display:inline-block;
float:right;
width:400px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 12. Save the Template.

Step 13. Now all you have to do is to go to Layout and Add a Gadget to the newly created extra header section in Blogger.

The widget now should appear side by side.

If you have any questions or need some help, leave a comment below.

How to Burn Blogger RSS Feeds at Feedburner

Posted by Budhi Senin, 19 Maret 2012 0 comments

What is RSS?

A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors to your website can subscribe to your blog’s RSS feed in an RSS reader such as Google Reader.

What is FeedBurner?

Most blogs have RSS feed which is detected automatically by commonly used feed readers when the blog URL is added to the reader.

However, if you want to make it more obvious and easier for readers to subscribe using RSS, or want to know exactly how many people subscribe to your blog then the best option is to add a Feedburner RSS feed and email subscription to your blog.

Feedburner is a free web service which enhances bloggers and podcasters ability to manage their RSS feeds and track usage of their subscribers.

How to create a feed with feedburner

1. Go to Feedburner and sign in to Feedburner with your Google Account (create a Google Account first if you don’t have one).

2. To set up your RSS feed with Feedburner, simply copy the URL of your RSS feed and paste it into the “Burn a feed right this instant” box. Then click Next >>

3. On the next screen, choose the second options - RSS.

4. On the next screen you will be given your RSS feed’s new URL on Feedburner. You will want to use this URL anywhere you reference your RSS feed on your blog. Change the feed title and address with your own.

5. When you click on Next, you will be given the options to setup tracking features for your RSS feed.
Check "Clickthroughs" and "I want more!..." options.

Adding Your Feedburner Feed To Your Blog

This is used to add the RSS icon and easy subscribe options to your blog side bar using a text widget as explained below:

1. Click on the Publicize Tab > Chicklet Chooser in your Feedburner account and copy the HTML code.

2. Go to Blogger Dashboard > Design > Page Elements and add a new gadget

3. Select HTML/JavaScript from the pop-up window and paste the html code in the box.

Adding a FeedBurner Email Subscription

After you have set up your feed, you will want to consider giving visitors the option to subscribe to your content via email. If so, you will want to go to the Publicize tab and click on Email Subscriptions. Click on the Activate button to start email subscription service for your RSS feed.

You will then want to click on Communication Preferences in the left sidebar menu. This will allow you to customize the activation email subscribers receive to confirm their subscription.

Once customized, click Save. The next options you will want to configure are under Email Branding in the left sidebar menu. This is where you can upload a logo, customize the Email Subject line, and change the font styles, colors, and sizes to format the email subscribers will receive. Click Save when finished.

The last (and most important) setting for your email subscription is the Delivery Options. This is where you will tell Feedburner what time to deliver new RSS feed updates to subscribers.

Once saved, click on the Subscription Management link. Here, you can get the code to add a subscription form on your blog or you can get a link to your take visitors to the opt-in form for subscribing via email.

To add it on your blog:

1. Go to Blogger Dashboard > Design > Page Elements

2. Add a new Gadget

3. Select HTML/JavaScript & paste the code in the box.

Redirecting All Your Blog Feed To Feedburner

Unless you redirect all your blog feed to Feedburner you won’t get accurate subscriber numbers because some of your readers subscribe using your original blog feed.

To do this:

1. Go to Settings > Site Feed in your blog dashboard

2. Add your Feedburner address to Post Feed Redirect URL and click Save Changes.

3. Now all your feeds is automatically redirected through FeedBurner and you’ll be able to track subscribers.

If you are enjoying reading this blog, please consider Subscribing!

Add Facebook Like Button Below Post Titles

Posted by Budhi Sabtu, 17 Maret 2012 0 comments

This Facebook Like button allow users to Like your post and share it to their Facebook friends. If you want to add the Facebook Like Button below your blogger post title, then follow these steps:

Adding Facebook Like Button Below Post Titles

Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed if needed)

Screenshot

Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code:

<data:post.body/>

Note: you might find it more than 3 times, stop to the 2nd one (or 3rd one in case it wont show up after applying the code from step 3)

Step 3. Just above it, paste this code:

<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

Screenshot

Step 4. Save your template and you are done!

For any questions you may have, please leave a comment below!

Auto Read More with thumbnail for Blogger/Blogspot Posts

Posted by Budhi 0 comments

This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:

1. Auto readmore for all the posts:

Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
</div>
<div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == "true"'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
<b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

That's it, enjoy!

Adsense Ad Code Converter

Posted by Budhi Jumat, 16 Maret 2012 0 comments

This tool automatically converts javascript ad code into the correct format so you can embed it directly into your new xml Blogger template. It’s perfect for converting AdSense, AdBrite, Chitika or any other javascript ad code you may have.

Instructions: paste your Adsense code in the empty box and then press on the "Convert" button.

How to put Adsense ads on Blogger/Blogspot

Posted by Budhi 1 comment

If you want to earn money from your site/blog, Google Adsense is the most popular service to monetize your blog or website content. When implemented, Adsense will display targeted Google ads on your blog and they can generate revenue on either a per-click or per-impression basis.
Of course, to display ads on your site, you should first Sign Up to Google Adsense program.

Before adding your ads, keep in mind that Adsense allows only up to 3 ad units, 3 link units and 2 search boxes per page.

In this tutorial i will show you the three ways you can add Adsense ads to your blog.

1. Adsense Gadget

Use this method to add ad unit as a widget, in places outside the blog post area. You can position it by simply dragging it in Page Elements, just like any other widget. To add the Adsense Gadget, go to:

1. Blogger Dashboard >> Design >> Page Elements >> click on the "Add a Gadget" link
2. From the pop-up window, select AdSense Gadget:

3. Configure ad format and colors.
4. Click Save and you're done.

2. Inline Ads

This will display an ad unit at the end of each post. To show ads between posts:

1. Go to Design > Page Elements and click the Edit link in Blog Posts gadget box.

2. Check the "Show Ads Between Posts" box.

3. Configure ad frequency, ad format, and colors. Live preview is provided beneath the settings.
4. Click Save.

3. Adsense code

The most notable benefits of using this method are:

You can place ad anywhere in your blog
You can add the code anywhere in your blog template - in your post content or page.
To find out which format perform the best, custom channels will help you to track the performance of specific groups of ad units.
You can choose types other than ad unit i.e. link unit, search box.

To create an ad unit:
1. Go to Google Adsense website.
2. Click on My ads tab, go to Ad units and then press on the "New ad unit" button.

3. Choose your ad type, choose format and colors and assign channels.
4. When you have finished editing, click on the Save and get code >> button and copy the code provided.

To add an ad unit to your blog, you have the following options:

Paste the code in a HTML/Javascript gadget
Paste the code in a blog post or page, or
Paste the code direct in your template. (if you choose this option, first you should convert adsense ad code)

If you have any more questions, leave a comment below.

How To Remove Blogger Threaded Comments

Posted by Budhi Senin, 12 Maret 2012 1 comment

The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from your blogger blog, follow these steps:

Step 1. Go To Blogger Dashboard > Template > Edit HTML (click on Proceed button if needed)

Step 2. Select "Expand Widget Templates" (back up your template)

Step 3. Search (using CTRL + F) for the following code:

<b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Step 4. Now remove it (you'll find this code twice and replace it twice) and paste this code instead:

   <b:include data='post' name='comments'/>
          </b:if>
               <b:if cond='data:blog.pageType == "item"'>
                     <b:include data='post' name='comments'/>

        </b:if>

Step 5. Save Template.

That was all!

Add Videos/Images in Blogger/Blogspot Comments

Posted by Budhi 37 comments

Many of you maybe have wondered if it is possible to post Youtube videos and images into Blogger comments. With this trick it will (: But first of all, you should know that if you have blogger threaded comments activated, it won't work. So if you want to have this feature, firstly, you should remove blogger threaded comments.

Read here on How to Remove Blogger Threaded Comments.

How to add videos/images in Blogger comments

Step 1. Go to Dashboard >> Template >> Edit HTML (click on Proceed if needed)

Step 2. Select "Expand widget templates" box (make a backup)

Step 3. Find (using CTRL + F) the following tag:

</body>

Step 4. Paste the code below, immediately above/before that tag:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:490px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/\[\/youtube\]/gi, "frameborder='0' allowfullscreen></iframe>");bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Step 5. Now find (CTRL + F) this code:

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

Step 6. Add the following code just above it:

<div id='multimedia'>

Step 7. Now find:

</b:loop>

Note: look for this piece of code after the code on the step 5.

Step 8. Just after, paste this piece of code:

</div>

Step 9. Save template.

Instructions

Now everytime you want to post images & videos in comments, you should add the following tags at the beginning and end of the url of your youtube videos or images you want to share:

For example:

We have this Youtube URL:
www.youtube.com/watch?v=jEgX64n3T7g

To add a youtube video in blogger comments, we'll have to add the red codes at the beginning and end of the youtube URL of the video:

[youtube]www.youtube.com/watch?v=jEgX64n3T7g[/youtube]

To add images in blogger comments, add these codes at the beginning and at the end of your image url:

[img]your-image-url[/img]

Note: replace your-image-url with the url address of your image

Settings

To tell your visitors on how to post images and videos into your blogger comments, you can add a message just above your blogger comment form.

Just go to Dashboard >> Settings >> Posts and Comments - and look for the Comment Form Message section, click on "Add" link and add this text:

If you want to post a youtube video or a image in your comment, use <b>[img]YOUR-IMAGE-URL-HERE[/img]</b> for posting images and <b>[youtube]YOUTUBE-VIDEO-URL-HERE[/youtube]</b>

See this screenshot for more info:

Now click on the "Save Settings" button on the top right corner and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.