Blogger Tips And Tricks 2012

Official Twitter Share Button (Tweet Button) for Blogger

@Twitter has now officially released new Sharing Buttons with counter(Tweet Button). The button comes in three styles and has a new URL shortener(t.co). The tweet button will show how many times your post has been shared on twitter.

The main advantage of the Tweet button is that it will let the reader to follow you(and a related account) after he tweets your post.If you have a wordpress blog, then use the Wordpress Tweet Button Plugin

To install the new tweet button on blogger, Follow these steps

1 . Configure the Tweet Button using this Simple Installer(Code and Demo will be updated according to the details that you provide here)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='bloggerplugins:Tutorials and Widgets for Blogger' data-count='vertical' data-via='bloggerplugins'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

2.Copy the generated Code

3. Login to your Blogger Dashboard and Navigate to Design > Edit HTML

4. Click on the Check box which says “Expand Widget Templates”

5. Now Look for

<data:post.body/>

and immediately above it paste the following code snippet(after proper editing)

6.Save your template and now you should see the twitter button near each of your blog posts.

Something more about the Tweet Button

Source: http://www.bloggerplugins.org/2010/08/twitter-share-buttons-for-blogger-tweet.html

Blogger Custom Domain on GoDaddy

This tutorial will explain how you can set up Blogger on a domain which you bought via GoDaddy.I assume that you have already bought a domain from GoDaddy. Here are the detailed steps for configuring your Blogger Custom Domain with GoDaddy.

1.Login to this GoDaddy Tool

Enter your domain name there e.g.: www.bloggerplugins.org

2.Click on the confirm button and a CNAME record will be created for you and you will get a success Message saying that the DNS records were created

3. If you are publishing to your www domain, then that’s not sufficient. You will also have to create a set of 4 A Records.

To do that first login to your GoDaddy Account and go to DNS Manager

4. Now Click on Edit DNS Zone next to the domain name which you want to use as a blogger Custom Domain

5. You will see a record there under A(Host). Select it and delete it first

6. Now use the Quick Add button to create 4 A(Host) Records as shown in the below screenshot

In the host field you have to give @ and in the points to field, you have to give these IPs respectively

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

(See the screenshot above to see how to input these values)

7. Now Click on the Save Zone File Button on the top right.

8. Confirm the modification by clicking on the OK button

Finally the Set of A(Host) Records should look like this :

You are done with GoDaddy Settings. Now you have to configure your Blogger Account to publish to this domain.

Publishing your BlogSpot blog to the Custom Domain

1.Login to your Blogger Dashboard and Navigate to Settings > Basic and click on the Add a custom domain link

2.Now Switch to advanced settings

3.Provide your Custom Domain URL and click the Save Button

4. Now Click on the Edit Link Once again

5.Now select the redirection Option and save the settings Once again

5. Now your blog should be visible at your new domain.

Adding Google APPS to your Godaddy Domain(Mail[yourname@yourdomain.com] , Calendar etc)

1.Once again go to the Godaddy Configuration Tool and key in the following URLs one by one and click on the Confirm button

mail.bloggerplugins.org
calendar.bloggerplugins.org
docs.bloggerplugins.org
sites.bloggerplugins.org

You will obviously have to replace bloggerplugins.org with your domain name while doing this.

2. Create MX records for that Domain using this Automatic Configuration Tool

3. Now Signup for Google APPS using this link

4.When you finish the signup process, you will be taken to the Google APPS dashboard. You might be asked to create a CNAME to verify your domain ownership.

In that case you should create a CNAME(Alias) Record with the following Details

Host: googlefffggghhh12345 [The one provided on your Google Apps dashboard for the verification purpose.This is just a sample string.You should use the one provided and not this sample string :)] This is the alias name.

Points To : google.com

You can add this Record in DNS Manager under CNAME(Alias) using the Quick Add button and don’t forget to Save the Zone File.

5.Once you have verified the ownership, you can access each of the Google Applications. You can also change them to custom URLs(that's why we created the CNAMES using the Godaddy tool in Step 1).You can change the URL of the mail application to mail.yourdomain.com(To do that Click on the APP and then Click on the Link Change URL)

Source: http://www.bloggerplugins.org/2009/08/blogger-custom-domain-on-godaddy.html

The Complete FeedBurner Guide with Some Cool Enhancements

What is Feedburner?

Feedburner is a service(now owned by google) which helps you in publishing your feeds in a better way.It helps you analyze your feeds,keep track of your visitors,know the number of feed subscribers etc.

How to Use Feed Burner?

1.Login to Feedburner.com using your Google account

2.Copy your blog url,or your blog feed url and paste that url at feedburner.com

adding-your-blog-feeds-to-feedburner

3.If you pasted your blog url(yourblog.blogspot.com) instead of your feed url (yourblog.blogspot.com/feeds/posts/default),then feedburner should be able to fetch your feed url automatically.[If you don't have a malformed template]

4.In the Next Step Give Title to your feed(Probably your site title itself) and also pickup a fancy slug(the final feed url will be http://feeds.feedburner.com/slug)

giiving-your-feed-title-and-handle-at-feedburner

5.In the Next Stage,you should have finished Creating your feed

congrats-you-got-your-feedburner-feed

6.Now your feed should be live at http://feeds.feedburner.com/yourfeedslug

Branding Your Feedburner Feeds

You can Apply Domain Branding and Email Branding on Feed Burner

What is Domain Branding?

This is what we normally do-We burn our blog feeds using Feed Burner and ask our visitors to go to our feedburner Url to subscribe to our feed.

Wouldn't it be better if we were able to make the feed a part of our own domain rather than asking them go to a url like feeds.feedburner.com/yourfeedname .Now with feedburner you can do that too. For example look at my feed url http://feeds.bloggerplugins.org/BloggerPlugins . Doesn't it look better than http://feeds.feedburner.com/BloggerPlugins ?.Domain Branding can be done only if you have your own Custom Domain

What is Email Branding?

If you have activated the Email Subscriptions Option in feedburner,then users will be able to subscribe to your feeds by email.When someone subscribes via email,feedburner will sent feed updates to all the email subscribers.We can brand the emails being sent.We can decide on the email from which the feeds should be sent(I use feeds@bloggerplugins.org) .You can also Brand the email by including your logo in the emails.You can do This from the different Sub Options under Email Subscriptions in the Publicize Tab at Feedburner.

How Does Branding Help Me?

Branding helps you in giving a professional touch to your feeds.You will now feel like a better owner of the feeds as the feeds can be viewed from your own sub-domain.

Will i loose my existing Subscribers if i Opt for branding?

No, you are actually just making your original feed visible on your feed specific domain.And even your old feed url will continue to work..Ie if you have http://feeds.feedburner.com/FeedName , then after setting up branding, you will have the feed available at http://myfeedspecificdomain/FeedName also. These feeds are actually the same.So you wont loose any subscribers when you change the feed links on your blog with your new branded feed url

How To Setup Domain Branding?

Do you remember how you configured the Custom Domain For Blogger? You created a CNAME record for that.Its the same method for this one also.

Now From the Left Pane Opt for My Brand

you will see something like

feeds CNAME something.feedproxy.ghs.google.com on the right pane.

Now Create a CNAME record with the Name feeds and value something.feedproxy.ghs.google.com from your domain control panel(in the same way as you did for the custom domain)

Now add the new feed sub ddomain on the Right Pane(Feedburner) – I gave feeds.blogegrplugins.org as i have created a CNAME with name feeds

After doing this,my feed feeds.feedburner.com/BloggerPlugins became visible at feeds.bloggerplugins.org/BloggerPlugins.

How to Setup Email Branding?

Navigate to the Publicize Tab and Opt for Email Subscriptions.If it is not yet activates,then activate it.Now in Communication Preferences,you can provide your custom email[user@yourdomainname] .I used feeds@bloggerplugins.org .You can also format the email Properly in a custom way,and also add a logo to your email feeds by filling in the options in the Branding submenu.

Configuring Blogger To use our new FeedBurner Feed(Feed Redirection)

1.Login to your Blogger DashBoard

2.Goto Settings > Site Feed

3.Give Your new Feedburner Feed Url there and Save the Settings.

redirect-blogger-feeds-to-feedburner

4.If you have used any links on your blog,pointing to your blogger feed,then change then replace them with the new FeedBurner Feed Url

5.Now anyone trying to access http://yourblog.blogspot.com/feeds/posts/default(and other blogger post feed urls) will be redirected to the Feedburner Feed that we Specified.

Adding Feedburner Email Subscription To Blogger

1.Login to Feedburner and Go to The Publicize Tab.

2.Look for the Email Subscriptions link in the left pane and click it

3.If you haven’t activated that service,Activate it.

4.Now Copy the Subscription Form Code from the right pane.

5.Make a New HTML/JavaScript Gadget in Blogger and Paste this code in that Gadget and save it.

6.Now you should have an email subscription form on your blog

Adding The Feedburner Feed Count to Blogger

1.At Feedburner Navigate to the Publicize Tab

2.Look for the Feed Count link in the left pane and click it

3.If you haven’t activated this service activate it

4.Choose the Proper Colors for the counter and click Save

5.Now Copy the Code from there and add it to any HTML/Javascript Gadget.If you have branded your feed URL,then make sure that you change the feedburner feed url in this code to your branded URL(i changed feeds.feedburner.com/BloggerPlugins to feeds.bloggerplugins.org/BloggerPlugins)

Adding The Feed Link to Blogger Instead of the Counter

<a href="my feed url" title="Subscribe To My Feed" rel="nofollow">Subscribe to My Feed</a>

You can modify the above Code with your feed url and paste into into an HTML/Javascript Gadget to have a Subscription Link on your Blog.If you need a better looking link,then

1.Navigate To the Publicize tab in Feedburner

2.Look For Chicklet Chooser in the Left Pane,and click it

3.Select the proper link that you need from the right pane and copy out the code

4.Paste this into an HTML/Javascript Gadget(If you used a branded domain make sure that you replaced the feedburner feed url with your branded feed url)

Preventing Search Engines From Indexing Your Feed

1.Login to your Feedburner Account and Navigate to the Publicize Tab

2.Now In the Left Pane,Look For the NoIndex Link

3.In The right pane,indicate that your feed shouldn't be indexed and activate that service

I have tried to explain all important aspects of using FeedBurner.Did i miss out anything important?If so Kindly let me know and i will update the post. Did you fall into trouble trying to use a branded feed url?? Then drop me a comment or contact me @ the Blogger Forums. I will be happy to help you out.

Source: http://www.bloggerplugins.org/2009/08/feedburner-tips-blogger-complete-guide.html

Height Fixer For Blogger

Making the Sidebar and the Post Area to be of Same Height

Some of the simple blogger templates use CSS to set the background color of the sidebar and the main post part.In this case,the heights of these two columns can be different making it look a little awkward.In many cases you may want to make both of these columns of the same height.

If you didn't understand what i am talking of,then i will show you some demos.

Check out the sidebars of both

Blog Without Height Fixing – Link

Blog After Height Fixing – Link

The height adjustment can be done using a very simple javascript code.Actually i had to make something like this for another site of mine.So i thought of sharing this with you guys,

Here is the height fixing script.

<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
 }
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->

What does this height fixer do?

When the page is fully loaded,this javascript code will get executed(as we have used onload). Now the variable mh will get the value of the height of the div with id main-wrapper.The variable sh will get the value of the height of the div with id sidebar-wrapper,Next we make a check.We check if sh is greater than mh.The greater of these values will be assigned to the variable mh

Now we set the height of both the divs[div with id sidebar-wrapper and the div with id main-wrapper] as sh pixels. So what does this actually do?? This script checks which of these divs have a larger height and assigns that larger height to both of these divs thus making both of them of equal height.

Where to place this height Fixer Code?

The height fixer code can be placed anywhere in the head section of your template.If you are still confused about where to place the code,then place it just above

</head>

Where else Can i Use this Script?

This script can be used anywhere where you need to adjust the height of two divisions(divs) to be the same.In that case don’t forget to change main-wrapper and sidebar-wrapper in this script with the respective ids of those divs.That means you can use this script to adjust the height of any two columns and make them of same height.

Why is the script having so many complex characters like < > etc?.

This is a parsed javascript.Blogger has problems with normal javascript(you might know this if you have tried to add the adsense code into the template).

Does this work on All Browsers?

This is a a very simple javascript code and it will work on all browsers.

Your comments and suggestions are always welcome.

Source: http://www.bloggerplugins.org/2009/08/height-fixer-for-blogger.html

Link to me widget for blogger

This is a nice little widget which can find its place in your blog’s sidebar.You might want to let your readers link back to you in an easy way.We will now make a new Link To Me Widget which will display the code needed for a reader to link back to your blog.We will also provide a Add link using Blogger Button.

This button will work like a widget installer,which makes it easier for your readers to add your link.They can link back to you easily by adding your link to me widget.

How to make the Link to me Widget?

1.First of all Make a Small Logo of your blog,which can easily fit into any blog sidebars.It should be small and pretty :P

2.Now upload this image somewhere.[You can use blogger to upload the logo if you want or you can opt for some service like tinypic.com]

3.Now note the url of this uploaded image

4.Ok now you Copy the following Code into a Text File

<p>If you like this blog,then link back to me.<br/>
This is what you will see.</p>
<div style="text-align: center;">
<a style="border:0px;text-decoration:none;" href="Your_Blog_URL" title="Your_Blog_Title">
<img alt="Your_Blog_Title" style="border: 0px;" src="Url_of_a_Small_logo_of_your_blog"/>
</a>
</div>
<textarea rows="3" cols="30">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea><br/>
<br/>

Optionally use this Widget installer to add this link to your blogger blog.

<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input style="display: none;" value="My Favourite Site" name="widget.title"/>
<textarea style="display: none;" name="widget.content">
&lt;a href="Your_Blog_URL" title="Your_Blog_Title" style="text-decoration:none;border:0;"&gt;
&lt;img src="Url_of_a_Small_logo_of_your_blog" alt="Your_Blog_Title" style="border:0" /&gt;
&lt;/a&gt;
</textarea>
<br/>
<input style="border:0px;" src="http://www.blogger.com/img/add/add2blogger_lg.gif" value="Link To Your_Blog_Title" name="go" type="image"/>
</form>

5.In this code replace all occurrences of Your_Blog_Title with the Title of your blog

6.Replace all occurrences of Your_Blog_URL with the url of your blog.

7.Replace all occurrences of Url_of_a_Small_logo_of_your_blog with the url of the logo that you uploaded.

8.Now your code is Ready!!

9.Copy out the modified code from your text editor.

10.Now Goto Blogger > Layout page

11.Choose to add a gadget and Opt for HTML/Javascript

12.In that widget paste the modified Code and Save.

Now you should have a link to me widget on your blog.If you want to test the Add Link With Blogger Button,Then try adding the widget to your blog itself.[You can remove it after testing!]

With Slight Modifications to the code,you can change this to a text link instead of an image link.

If you need some help in Customizing this widget, then drop in a comment or better contact me via a topic at the Blogger Forum

Source: http://www.bloggerplugins.org/2009/08/link-to-me-widget-for-blogger.html

What can you expect from blogger in the future?

If my guesses are correct,blogger will soon come up with post summaries(+ read more link) and static pages.

Some of you might have noticed the changes to your blogger templates.I have seen some new codes which give me the feeling that something better is coming!

Blogger May Soon have Static Pages like in Wordpress

static-pages-on-blogger

This code gives me the feeling that blogger too will soon have Pages like in Wordpress

~~Blogger May soon have the Read more link and Post Summaries.~~ - Blogger has now added this Functionality.

This thing has been around for a while.

read-more-for-blogger

This code should probably give the indication that we will soon see post summaries and read more links on blogger..

When will these become a reality.. :)

Source: http://www.bloggerplugins.org/2009/08/what-can-you-expect-from-blogger-in.html

Alternate Comment Forms For Blogger

Have you ever felt that the blogger comment form (even the embedded inline one) doesn’t look pretty.Don’t worry you can convert the default comment form of blogger to an stylish commenting system which enables threaded comments and author images.Here i am listing some of the most popular commenting alternatives,.

These are the three famous commenting systems!

1. Intense Debate –

intensedebate- To give you a better demo,i am using the intense debate commenting system on this post.This is now owned by Automattic, the makers of Wordpress.This is my personal favorite and i am now confused whether i should switch to this or if i should use the default blogger commenting system.

intensedebate-commenting-system

2.DISQUS -

disqus This is another Commenting system – It is the same thing that Mashable.com uses for its comments.

disqus-commenting system

3.JS-Kit (Echo)

js-kit This is also another JavaScript based commenting system.Echo offers both free and paid packages!The free package comes with threaded comments and an interface where the commenter can add videos,images,similes, etc.The commenter can also format his comments using a simple WYSIWYG comment editor.

js-kit-commenting system

When you try to go for any of these commenting systems,make sure that you backup your template and keep a copy,so that you can revert back if it didn’t work out well.

These are the three most popular commenting systems.They come with threaded commenting with Gravatar based profile images,which can make you commenting system look more professional.I personally prefer Intense Debate over the others.

So if you want to remove the default blogger commenting system and get a better commenting interface,then you can opt for any of these commenting systems.

Note: These comment forms come with an option to show the comment form on new posts only(means posts with 0 blogger comments)!That means your old comments will stay intact and will use the old blogger comment form.(This is optional.. you can also revert all posts to use the new commenting system.But in that case, you cant display the existing comments easily..)

Source: http://www.bloggerplugins.org/2009/08/alternate-comment-forms-for-blogger.html

How to add Retweet Button to Blogger

Update: Twitter has now Released its own Retweet Buttons - So check it out at Official Tweet Button from Twitter With Counter

How to add retweet button to Blogger ?

Twitter is getting more and more famous and so is retweet Most of you might be knowing of both of this.Still i will give a brief into on both :P

Twitter – Twitter is a free social networking site that enables users to send short notices of 140 characters. :P

Retweet – This one enables to repost some interesting tweets on twitter.The retweet button can act more like a tweet counter

Adding a retweet button will show a neat count of how many times,your post has been tweeted about,and will also allow your readers to retweet it

Retweet Button Style 1

Code for retweet button style 1

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet Button Style 2

Code for retweet button style 2

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet button Compact Style 1

compact-retweet-button-for-blogger-style-1

Code for compact button style 1

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet Button Compact Style 2

Code for compact button style 2

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

How to install the Retweet Button on your blog?

1.Select any of these four retweet button styles,and copy the corresponding code into a text file.

2.Now in this code replace your_twitter_username with your actual twitter username

3.Now we have got the final retweet code.Now login to your blogger dashboard and navigate to Layout > Edit Html and expand the widget templates

4.Find this piece of code

and immediately after that place our retweet code(from our text file).and you are done :)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that, place our retweet code(from our text file)

5.Save the template.

Now you should have a retweet button near each of your blog posts.

Retweet Button for Blogger classic Templates

This is not for the blogger XML templates that we normally use.If you are using a blogger classic template,these four code styles can't be directly used in your template.You will have to modify any of these four code styles for it to work on the classic template.In any of these four code styles change <data:post.canonicalUrl/> to <$BlogItemPermalinkUrl$>

Now you have got the code for the classic template!

Where to place the code for classic blogger template?

Place the code just above <$BlogItemBody$> and save the template.Now you should have the retweet buttons on your classic blog.

If you liked this post, why not help me by retweeting it.. :)

Additional Note: How to check the retweet count of any url?

To check the retweet count of any url,just go to this url in your browser. http://api.tweetmeme.com/imagebutton.gif?url=http://twitter.com .Make sure to replace http://twitter.com with the url whose retweet count you would like to know.

Source: http://www.bloggerplugins.org/2009/08/retweet-button-for-blogger.html

You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)

I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)

These CSS style definitions should be placed above

]]></b:skin>

If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

Source: http://www.bloggerplugins.org/2009/08/blogger-releases-new-version-of-label.html

New Advanced Post Editor For Blogger

Blogger has released an updated version of the Post Editor.This one has more features than the old post editor.Here is a screen shot of the new Post Editor,so that you can get an overview of what is new in this advanced post editor.

Some of the added Features in this new Editor are:

Improved Image Handling
Improved Raw HTML
Geotagging
Resize the Post Editor Vertically
Easy Link Editing in Compose Mode
Better Previews
Draggable Placeholders
A New Advanced ToolBar

How to Enable the New Post Editor

Go to the Settings Page, and under the global Settings, Opt for the Updated Editor and save the settings.

The Best Blogger Resources

There are many many sites about blogger. Here i would like to share with you all blogger related sites which i love. All of these are my personal favourites.So i thought of sharing them with you guys! All of these sites provide tutorials,gadgets and templates which can be used on Blogger.

Blogger Tutorials and Gadgets

Amanda Fazani

She writes at Blogger Buster and Gadgets For Blogger . Blogger Buster is the Best Blog on Blogger Tutorials. Gadgets For Blogger is a directory which list all useful gadgets that can be used on blogger. Amanda also designs templates which can be found at Blogger Buster Designs and she also has made some premium templates at Theme Forest

Some Other Sites on Blogger Tutorials

Blogger Tricks
Anshul Dudeja
Techie Blogger

Blogger Templates

Klodian

He is the person behind Deluxe Templates. He is now a good friend of mine and he has got a good collection of Blogger Templates.Some of these were inspired from Wordpress and other templates.All of these templates are perfectly coded and you can get them from his blog.

Dante

Dante has some truly original Blogger Templates at his blog.(Dante Araujo) . I really love his templates because they are so original. and elegant .He has got some really elegant templates that serve as image galleries. I haven't even seen any wordpress template to match those gallery templates. All of these blogs are powered by blogger.

Other Template Resources

Another great resource for Blogger Templates is Btemplates . Its actually the biggest collection of Blogger Templates which are organized well into categories and tagged properly so that you can find the best one out of them.

You can also check out my bigger list of Blogger Template Resources .

There are many other good resources for blogger. These are just my personal favourites.

Source: http://www.bloggerplugins.org/2009/09/best-blogger-resources.html

Post Summaries on Blogger With Read More

Blogger is fulfilling some of our expectations. Now blogger officially supports Post Summaries With Read more.This means that you wont need any JavaScript and CSS based tricks to display post summaries on Non-Post Pages.

How Does This Work

Blogger has introduced something called jump breaks. This will help you in creating the summary. What is a jump break? - Jump break is a special tag which can be inserted anywhere in a post using the post editor.When you have inserted a jump break into a post, the portion of the post above(or before) the jump break will serve as the summary of the post. This means that only this smaller portion will be displayed on Non-post pages.

How to insert a jump break?

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor.

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place  [Note that there is a space before and after more.] at the position where you want the break to occur. Now try going to your home page,and only the summary would be displayed on the home page.You might get problems seeing the Read More Link if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Design > Edit HTML and "Expand the Widget templates". Now check if the following code is already present in your templates

    <b:if cond='data:post.hasJumpLink'>

  <div class='jump-link'>

    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>

  </div>

</b:if>

If this code is not present in your template,then add this code before
Now it should work properly.. If it doesn't,then leave a comment here and i will try to help you out..

Changing the Read More Text

By default the read more link text is Read more » . You can change this to whatever you like. To do that, Go to Blogger Layout / Design > Page Elements and click on the Edit link on the Blog Posts Widget.

Change the Post Page Link Text and Save the Settings..

Drawbacks of the New Feature

For the post summaries to work effectively, you have to edit each of your posts and add the jump link in each of them. Blogger wont generate summaries automatically.:(

Permalink:Post Summaries on Blogger With Read More

Source: http://www.bloggerplugins.org/2009/09/post-summaries-on-blogger-with-read.html

Numbered Page Navigation For Blogger

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about. blogger page navigation

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

Update 30/03/2012 : If Page Navi is not working, change http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js to http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js

Source: http://www.bloggerplugins.org/2009/09/numbered-page-navigation-for-blogger.html

Show avatars on Blogger Comments

Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

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

If you can’t then that means we have something to do..

If you couldn’t find this,then do the following steps.

a)Find

<dl id='comments-block'>

and replace it with

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

b)Now Find all occurrences of

<a expr:name='data:comment.anchorName'/>

and replace each of it with

<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'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..

Further Styling.

If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above

]]></b:skin>

CSS Code

.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaAHsNKjQX1LNkG_yIhg-njSgoShMEl2uKIoCr7P_xaUgX8U_dbTxwBD35GwgO-WXILwI6qhyphenhyphen9jWzC7ZZyTcSkTU-6rOglp7XT7IwpnUXTrtqmzkLT-g-QzK6L3x_BhVEIrEyi_bpMzg/s400/default.gif); width:35px;height:35px; }
.avatar-image-container  img { border:none;}

You can customize the CSS according to what you need.

If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0TFldnApXOnOY5UUtYpwgIRNk7fX3Y__DzAwlg8snX1xE67DI97SoDFcBrPaZvYpgAc0DeyzpeDvklvEwnHE6LgT2PRX7twORJDZKNVcbg2GZY-_POYYS8akZygN_9NSdXpixcd-njD8/s400/grav.png);width:50px;height:50px;}

This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).

BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.

In case anything bad happens restore the template backup.. and comment here..:)

Permalink: Show avatars on Blogger Comments

Source: http://www.bloggerplugins.org/2009/09/show-avatars-on-blogger-comments.html

A New Make over

Hi guys, today i have tried to improve the look of this blog. We now have a new template specially designed and coded for this blog. First of all i would like to thank my friend Klodian of Deluxe Templates for helping me in coding this template.He is just awesome. Thanks a lot buddy for your valuable help and support..

What do you think of this new make over?
Give me your feedback guys :)

Source: http://www.bloggerplugins.org/2009/10/new-makeover.html

Button Type:
Button Location:
Syntax of the Tweet:
Your Twitter User Name
User name of Related Twitter account
Description of the Related Account
Lanuage of the Button
Display

Something more about the Tweet Button

Publishing your BlogSpot blog to the Custom Domain

Adding Google APPS to your Godaddy Domain(Mail[yourname@yourdomain.com] , Calendar etc)

What is Feedburner?

How to Use Feed Burner?

Branding Your Feedburner Feeds

What is Domain Branding?

What is Email Branding?

How Does Branding Help Me?

Will i loose my existing Subscribers if i Opt for branding?

How To Setup Domain Branding?

How to Setup Email Branding?

Configuring Blogger To use our new FeedBurner Feed(Feed Redirection)

Adding Feedburner Email Subscription To Blogger

Adding The Feedburner Feed Count to Blogger

Preventing Search Engines From Indexing Your Feed

Making the Sidebar and the Post Area to be of Same Height

What does this height fixer do?

Where to place this height Fixer Code?

Where else Can i Use this Script?

Does this work on All Browsers?

How to make the Link to me Widget?

How to add retweet button to Blogger ?

Retweet Button Style 1

Retweet Button Style 2

Retweet button Compact Style 1

Retweet Button Compact Style 2

How to install the Retweet Button on your blog?

Retweet Button for Blogger classic Templates

Where to place the code for classic blogger template?

Related Posts with Thumbnails for Blogger

Related Posts Widget with Thumbnails for Blogger

How to display the related posts on every page and not only on the post pages?

What is new?

Drawbacks

How to Customize?

How to Enable the New Post Editor

Blogger Tutorials and Gadgets

Amanda Fazani

Some Other Sites on Blogger Tutorials

Blogger Templates

Klodian

Dante

Other Template Resources

How Does This Work

How to insert a jump break?

Changing the Read More Text

Drawbacks of the New Feature

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

Implementation of Comment Avatars

Further Styling.

Adv

Popular Posts

Featured Posts

Advertising

Category

Blog Archive