Blogger Tips And Tricks|Latest Tips For Bloggers

How To Add Comment Feeds For Individual Blogger Posts

2009-12-27T00:54:00.000-08:00

This is very useful for your visitors to Subscribe to comments for the special blog posts of your blogger blog.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Copy below code and paste it immediately after the line <data:post.body/>.

<p style='background-color:#ffffc6;'><a expr:href='"http://YOURBLOG.blogspot.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Comments Feed For This Post</a></p>

Note:Replace YOURBLOG with your blog url name.

5.Now save your template and you are done.

How To Add Beautiful Page Peel Effect with jQuery

2009-08-21T18:52:00.000-07:00

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Don't Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag:

4.Copy below code and paste it just before the ]]></b:skin> tag.

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;
text-indent: -9999px;
}

Note : Please host 'subscribe.png' image yourself.

5.Scroll down to where you see </head> tag:

6.Copy below code and paste it just before the </head> tag.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
 $(&quot;#pageflip img , .msg_block&quot;).stop()
  .animate({
   width: &#39;307px&#39;,
   height: &#39;319px&#39;
  }, 500);
 } , function() {
 $(&quot;#pageflip img&quot;).stop()
  .animate({
   width: &#39;50px&#39;,
   height: &#39;52px&#39;
  }, 220);
 $(&quot;.msg_block&quot;).stop()
  .animate({
   width: &#39;50px&#39;,
   height: &#39;50px&#39;
  }, 200);
});


});
</script>

6.Scroll down to where you see <body> tag:

7.Copy below code and paste it just after the <body> tag.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/blogspot/WyNa'>
 <img alt='' src='http://4.bp.blogspot.com/_p4Te9Li52fs/So9QXjPscRI/AAAAAAAAAAM/Vl2QGxYn38k/page_flip.png'/>
 <span class='msg_block'>Subscribe via RSS</span>
</a>
</div>

Note : Please host 'page_flip.png' image yourself.

Replace 'http://feeds2.feedburner.com/blogspot/WyNa' with your feed address.

8.Click on "Save Templates" and now you are done.It will look like this :

When your mouse brings towards above icon it willlook like this :

Replace "Subscribe to: Posts (Atom)" With "Subscribe to: Posts (RSS)"

2009-06-29T21:18:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

4.Replace above with below code.

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (RSS)</a>
</b:loop>
</div>
</b:includable>

5.Now save your template and your done.

How To Add Subscribe Feed... Drop Down Menu to blogger

2009-06-28T02:34:00.000-07:00

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<form><select class="dropdown"
onchange="location = this.options[this.selectedIndex].value;">
<option value="" selected>Subscribe feed..</option>
<option
value="http://fusion.google.com/add?feedurl=YOUR-FEEDBURNER-URL">  in Google Reader</option>
<option value="http://add.my.yahoo.com/rss?url=YOUR-FEEDBURNER-URL">  in
My Yahoo!</option>
<option value="http://feeds.my.aol.com/add.jsp?url=YOUR-FEEDBURNER-URL">  in
My AOL</option>
<option
value="http://www.bloglines.com/sub/YOUR-FEEDBURNER-URL">  in
Bloglines</option>
<option
value="http://www.netvibes.com/subscribe.php?url=YOUR-FEEDBURNER-URL">  in
Netvibes</option>
<option
value="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=YOUR-FEEDBURNER-URL">  in
NewsGator</option>
<option
value="http://www.addthis.com/feed.php?pub=YOUR-FEEDBURNER-ID&h1=http%3A%2F%2Ffeeds2.feedburner.com%2FYOUR-FEEDBURNER-ID&t1=">  ..more Options</option>
</select></form>

Note : Remember to replace YOUR-FEEDBURNER-URL and YOUR-FEEDBURNER-ID with your real details.

Look at the example below.

<form><select class="dropdown"
onchange="location = this.options[this.selectedIndex].value;">
<option value="" selected>Subscribe feed..</option>
<option
value="http://fusion.google.com/add?feedurl=http://feeds2.feedburner.com/blogspot/WyNa">  in Google Reader</option>
<option value="http://add.my.yahoo.com/rss?url=http://feeds2.feedburner.com/blogspot/WyNa">  in
My Yahoo!</option>
<option value="http://feeds.my.aol.com/add.jsp?url=http://feeds2.feedburner.com/blogspot/WyNa">  in
My AOL</option>
<option
value="http://www.bloglines.com/sub/http://feeds2.feedburner.com/blogspot/WyNa">  in
Bloglines</option>
<option
value="http://www.netvibes.com/subscribe.php?url=http://feeds2.feedburner.com/blogspot/WyNa">  in
Netvibes</option>
<option
value="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds2.feedburner.com/blogspot/WyNa">  in
NewsGator</option>
<option
value="http://www.addthis.com/feed.php?pub=blogspot/WyNa&h1=http%3A%2F%2Ffeeds2.feedburner.com%2Fblogspot/WyNa&t1=">  ..more Options</option>
</select></form>

Now you are done.Look at the picture below.

How To Add Feed Link Button Before All Labels in Blogger

2009-06-27T18:36:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this code:

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

4.Now replace above code with below code.

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

5.Now save your template and you are done.It will look like this.

How To Add Feeds For LABELS in Blogger

2009-06-11T01:03:00.000-07:00

If you want to add feeds for labels in your blog read this post.For easy explanation I use my blogspot url.If you have a Blogspot blog:

URL Address : http://YOURBLOG.blogspot.com/

example :- http://bloggertipandtrick.blogspot.com/

FEED Address: http://YOURBLOG.blogspot.com/feeds/posts/default

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default

LABEL Address : http://YOURBLOG.blogspot.com/search/label/labelname

example :- http://bloggertipandtrick.blogspot.com/search/label/Templates

To Add a feed for your label your, feed address should like this :

http://YOURBLOG.blogspot.com/feeds/posts/default/-/labelname

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default/-/Templates

If you have spaces in your label, your feed address should like this :

example :- http://bloggertipandtrick.blogspot.com/feeds/posts/default/-/Change%20Template

Note : If you want to show your latest post under a label follow the steps below.

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Click on 'Feed' .

4.Add feed address for your label and click continue.Look at the example below.

5.Now customize your feed showing setting an click save.

Now you are done.

How To Create Table Of Content Using AJAX Feed

2009-06-06T21:34:00.000-07:00

Follow below steps to create nice Table Of Content for your blog.

1.First sign up for your Google API Key.

2.Now copy your AJAX Feed API key to notepad.

3.Now Login to your blogger dashboard--> layout- ->Page Elements

4.Click on 'Add a Gadget'.

5.Select 'HTML/Javascript' and add the code given below.

<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>


<script src="http://www.google.com/jsapi?key=YOUR-AJAX-FEED-API-KEY>>"
type="text/javascript"></script>


<script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Table of Contents',
url: 'http://YOURBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "YOUR-BLOG-TITLE"
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

6.Now Replace,

YOUR-AJAX-FEED-API-KEY with your real key.

YOURBLOG with your real blog name.

YOUR-BLOG-TITLE with your real blog title.

7.Now click SAVE and you are done.Look at the picture below.

How To Create Recent Articles Widget using Feed2JS

2009-05-19T21:13:00.000-07:00

1.First Go to Feed2JS Website.Look at the picture below.

2.Now fill in the form above.

URL Enter the web address of the RSS Feed :

http://yourblogname.blogspot.com/feeds/posts/default

Fill Other informations as your choice.Look at the example below.

3.Now Click on 'Generate JavaScript'.Now you can get your JavaScript code.

4.Log in to your dashboard--> layout- ->Page Elements

5.Click on 'Add a Gadget' on the sidebar.

6.Select 'HTML/Javascript' and add your JavaScript code and click save.

Now You are done.

How To Add Feed Burner Email Subscriptions to Blogger

2009-05-12T16:02:00.000-07:00

Using Feedburner, you are able to instantly have an email subscription service for your blog. Every day that you post something new in the blog, an email is sent out to the people who have subscribed to your blog. You don't have to do anything. People join the list and leave the list of their own free will; again, You don't have to do anything. You can make some choice about the way the email is configured, but Feedburner does all the work of actually maintaining the list and sending out the email.

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Publicize Tab.

4.Now Click on Email Subscriptions.

5.Now Click on "Activate" Button.

6.Now Choose the Blogging Platform as "Blogger"

7.Then you will get code . Copy and paste the code in your blog where ever you like to add Feed Burner Email Subscriptions Form.

How To Redirect your Blogger feed to FeedBurner feed

2009-05-12T15:25:00.000-07:00

If you have a blog and start to use FeedBurner to manage your feed, you have to change the auto discovery link in your template and redirect the old feed to FeedBurner, so you don't have to tell your readers to subscribe to the new feed.To Redirect your Blogger feed to FeedBurner feed follow the steps below.

1.Login to your blogger dashboard.

2.Go to settings-->Site Feed.

3.Now type your Feedburner Feed URL into the Post Feed Redirect URL text field. Remember to include http://

For example My Feedburner Feed URL is http://feeds2.feedburner.com/blogspot/WyNa

I must enter it like below.

4.After you enter your Feedburner Feed URL click on "Save Settings" and your done.Now Blogger will redirect feed traffic of your blog to your Feedburner feed.

How To Add Feedburner FeedFlare below your Blog Post

2009-05-12T03:22:00.000-07:00

If you want to add the FeedFlare to your blog follow the instruction below.

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Optimize Tab.

4. Click on FeedFlare.

5. Check on the services you want to display in your Feed or on your Site.

6.There is a FeedFlare Preview/Ordering below the list of services. This lets you see how FeedFlare will appear in your feed and/or on your site. Just Click and Drag the links on the location that you want.

7.Click on "Activate".Now You will get this message.

8.Now in this window Before the Save button, there is a "Get the HTML code to put FeedFlare on your site". Choose the Blogging Platform as "Blogger"

9. A pop-up window will appear and it contains the instructions on how you embed the Feed burner FeedFlare on your blog.Just follow the instructions.Now wait about 20 minutes and refresh your site.Look at the example below.

Blogger Feed URLs

2009-04-11T02:06:00.000-07:00

I think this simple informations (but very useful) should know every blogger.

Full site feed:

Atom 1.0: http://yourblog.blogspot.com/feeds/posts/default

RSS 2.0: http://yourblog.blogspot.com/feeds/posts/default?alt=rss

Comments-only feed:

Atom 1.0: http://yourblog.blogspot.com/feeds/comments/default

RSS 2.0: http://yourblog.blogspot.com/feeds/comments/default?alt=rss

Label-specific site feed:

Atom 1.0: http://yourblog.blogspot.com/feeds/posts/default/-/labelname

RSS 2.0: http://yourblog.blogspot.com/feeds/posts/default?alt=rss/-/labelname

Individual post comment feed:

Atom 1.0: http://yourblog.blogspot.com/feeds/postId/comments/default

RSS 2.0: http://yourblog.blogspot.com/feeds/postId/comments/default?alt=rss

Resource :

Blogger Help

How To Remove-Subscribe to: Posts (Atom)-Link

2009-04-09T05:05:00.000-07:00

If You need to remove this Subscribe to: Posts (Atom) link,Then Follow the instructions below.

log in to your dashboard--> layout- -> Edit HTML-->Check "Expand Widget Templates"

scroll down to where you see this:-

<b:include name='feedLinks'/>

Now Delete this code and preview the template before saving to check if any errors occured or not.

Now click "Save Template" and refresh your site.