Blogger has added an option to enable/disable the Light Box Feature. Those who want to disable these overlay displays can easily do that from the Blogger Settings Menu. To know more read Disable Blogger Light Box
Blogger has added a new option to easily integrate Google Analytics with your Blog.
To Add your Google Analytics Tracking code, you just need to specify your Google Analytics Account number in your Blogger Dashboard. To do that Go to Settings > Other and fill up the “Google Analytics Account number” field, Once done Save the Settings. Now Blogger will automatically add the analytics tracking code to your blog(even on the mobile version).
Go to Settings > Other and provide your Google Analytics Account number.
Click the Save Settings Button when done.
If you are using a Custom template, then you might have to apply the fix mentioned at the end of the tutorial.
If you don’t know your Analytics Account number, then read on:
1. Login to analytics
2. Now Click on the Edit Link to the right of your Blog’s profile(If don’t yet have a Website profile, then you can create one)
3. Now you will be taken to a page like :
4. Click on the “Check Status” link
You will see a screen like
5. Copy the Web Property ID from there. That’s your Analytics Account number which you can provide in the Blogger Settings.
Fix:
If you are using a custom template, then the Google Analytics code might not be added to your Blog. To check that Edit your template(Template > Edit HTML) and look for(Ctrl + F or Cmd +F)
<b:include name='google-analytics' data='blog'/>
If it is not there in your template, then add it above
</body>
There is some Good news from the Blogger Team on the Blogger Code Blog. If you have enabled the Mobile Templates, you will be able to customize the Blogger Mobile Template by using CSS definitions. You will also be able to control which widgets are to be shown and which shouldn't. You can also configure the widgets to show an alternate content in the mobile view.
Though this looks so promising, I was not able to test all of these features.
Go to Template and Click on the Gear Icon below the Mobile Template. From the Dropdown opt for “Custom”, Preview the mobile template and Save it.
Blogger Templates are made up using Widgets.Blogger has added a new property(mobile) to the <b:widget/> tag. This property can take values ‘default', ‘yes', ‘no' or ‘only'. And this property will determine how the widget will be rendered in the mobile view.
The widgets that display on mobile by default are the following:
If you want to hide any of those, then use the property mobile='no' in the Widget tag, and that widget would no longer appear in the mobile view.
For example I can hide the Attribution Gadget in Mobile view if I use
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
If you want to display the non-default widgets in your Mobile view, then just set the mobile property to yes.
E.g.: this is the normal tag for the Blog Archive Widget
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
Now if you set the mobile property as
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>
, then you should see the archive widget on your Mobile View(I didn't get it working).
If you want a widget to appear only in the mobile view, then you can set the mobile property to 'only'
<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>
If I use this tag, the attribution gadget will disappear from my desktop view, and will appear only on the mobile view.
This code change will make the attribution widget disappear from your Mobile View.
Now you can fully customize the looks of your mobile template. The body element of the mobile template will be styled my the mobile class
<body class='loading mobile'>
Make sure that your template has:
<body expr:class='"loading" + data:blog.mobileClass'>
So if you are good at CSS, you can use this class name to style your mobile template.
.mobile .date-header {
text-decoration:underline;
}
Once you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want, then you can provide alternate content inside a widget.
e.g:
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Powered By Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>
This will show a Powered by Blogger Text link on the Mobile View, and a Powered by Blogger image on the normal desktop view.
The condition
<b:if cond="data:blog.isMobile"/>
can be used to check if the viewer is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog. Happy hacking, and do share if you have created some really awesome mobile template :)
Before we Start, here is a preview of what we are talking about
This process involves kind of a two way verification. In your blog you should tell the Google Crawlers that this guy with this Google Profile is the author of the entry.
Now Google has to verify that the Blogger has provided the correct Google Plus Profile.So it will see if that guy’s Google Plus profile links back to your Blog. If it does, then Google can confirm that he/she is the author and it may display his/her profile information in the Google Search Results.
Note: Even of you do all this, there is no guarantee that Google will display your Profile Details in search.
There are two methods of setting up this two way verification. We will have a look at simplest of those
Every page on your Blog should tell Google that this Google Plus guy is my Author. To do that, there should be a link to your Google Plus profile on every page on your Blog. This link should have the rel attribute set to author
You can do that by adding the following link code to some HTML/JavaScript Widget
<a rel="author" href="https://plus.google.com/109412257237874861202">My Profile</a>
The Link in red should be replaced by your Google Plus Profile URL. You can replace the thing in Green with anything you want. When you add this as an HTML/JavaScript Widget, you are telling Google that every page on your Blog was written by the guy with the Google Plus Profile which you have mentioned in the link. It is not mandatory that you should add this link in a Gadget. You can add the link anywhere in your Template. The only thing is that it should be there on every page of your Blog.
Now we have to help Google in conforming this.To do that your Google Plus profile should link back to your Blog’s home page.
So Edit your Google Plus Profile and add a link to your Blog’s Home Page.
Now you have successfully completed the steps. Read the last part of this post to know how you can verify if you did everything right.
b. For a Multi Author Blog.
The method is almost the same for a Multi Author blog as well. The only difference is that each post on the Multi Author Blog should link to the corresponding author.
If you are not good with Blogger Template Codes, then you can manually add the Google Plus profile link to each Post(so that each post will link to the corresponding author’s Google Plus Profile). If you are good with the template codes, then you can use the following code.
<b:if cond='data:blog.pageType == "item"'>
<!—repeating block –>
<b:if cond='data:post.author == "Author1Name"'>
<a rel="author" href="https://plus.google.com/109412257237874861202">My Profile</a>
</b:if>
<!/—repeating block –>
<b:if cond='data:post.author == "Author2Name"'>
<a rel="author" href="https://plus.google.com/109412257237874861202">My Profile</a>
</b:if>
</b:if>
Author1Name and Author2Name should be replaced by the name of the Authors(their Blogger Name). The red links should be replaced by the Google Plus Profile link of the corresponding Author. You can change the green text to anything you want. If you have more than 2 authors, you can just repeat the repeating block.(I have commented it so that you can properly identify the repeating one).
You have to pasted this code in your template below
<div class='post-footer-line post-footer-line-1'>
or
<p class='post-footer-line post-footer-line-1'>
or
<data:post.body/>
Now each of the Blog Author’s Google Plus Profile should link back to your Blog’s home page.
You can use the Rich Snippets Testing Tool to verify if you have done everything properly. Give a post URL in the text box at http://www.google.com/webmasters/tools/richsnippets and preview how your page will appear on the search engine. You should see something like this when you do a preview.
Now you have successfully added the Author snippets to your Blog. This doesn’t mean that Google will start to show your Profile details right away. We don’t know how they do it. Right now we only see these working for some quality blogs. Here is an authorship request form which might help you
Many of you might have noticed that Blogger has made some Cool Improvements to its Commenting System. Blogger has introduced an improved Spam Filter and a Comment Inbox. Most of you must have noticed the new “Comment” tab in your Dashboard (This may not be present on all blogs. Blogger is in the process of rolling out this feature to all users)
Blogger has introduced the “Comment Inbox” where you can view all the Comments published on your blog.The Comment Inbox has Sub tabs namely Published , Awaiting Moderation and Spam
Most web forms are targeted my spammers and bots. Most Blogging Platforms have their own ways of keeping the bots and spammers away. Wordpress uses Akismet for this process.Blogger has its own filtering mechanism to keep the odd ones out. Now Blogger improved its spam fighting mechanisms by integrating Google’s Spam Filtering Technologies into Blogger. Blogger will automatically detect Spam comments and move them to Spam in your Comment Inbox. The comments in the Spam Inbox are not visible in your blog. You can mark Comments as Spam and move them to the Spam Inbox.You can also mark comments as Not Spam that have been incorrectly classified or marked as spam and the comment will be immediately published on to your blog.
What do you think of the new additions?
The Official Twitter Tweet Button has 3 default styles(2 of them with a counter and one without) . The Button works with JavaScript and is not fully Customizable.This post is for all those who want to customize, the tweet button and change it into a simple Text link. The output will be a simple HTML link with all the features if the Tweet Button(excluding the count)
<data:post.body/>
and immediately after that line paste the following code(Edit the code if needed)
<a expr:href='"http://twitter.com/share?text=" +data:post.title+ "&url=" + data:post.canonicalUrl + "&via=twitter&related=bloggerplugins:Widgets and Tutorials for Blogger"' style='float: left; background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/TGeItpz_KFI/AAAAAAAABmE/HrzGzh8nvTk/tweetbutton[3].png) left no-repeat; padding-left: 20px;' title='Share on Twitter' rel='nofollow' target='_blank' >Tweet This</a>
Save the Template and you should see a Tweet This link below each of your posts like this
Tweet This
1. You can edit via=twitter with your twitter user name. So if your twitter username is john, then change via=twitter to via=john
2. You can also edit related=bloggerplugins:Widgets and Tutorials for Blogger .You can replace bloggerplugins with a twitter handle that you would like to recommend. You can replace Widgets and Tutorials for Blogger with a description of the recommended account
3. You can also edit Tweet This with the text you want to see on the link
Facebook has now released an improved version of its like Button. The new Facebook like button looks like the horizontal version of the Official Tweet Button. The Facebook Like button will show the no of likes just like the tweet button does.The like button has some changes from the older version in the way the user is allowed to like and unlike.
1. Blogger – Login to your Blogger Dashboard, Navigate to the Edit HTML tab under Design and follow the instructions at this page (It also has instructions to upgrade your old like button to the new one)
2.Wordpress – Edit your Wordpress theme and insert the following code into your Wordpress Post Loop(If you want it to appear on Post pages only, then edit single.php.Otherwise you will have to edit multiple theme files)
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light&font=arial" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:40px;"></iframe>
It has been a long time since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.
Here is a screen shot of how the Tweet box appear on my Previous Post.
Hope that now you got a good idea of how this works, If not scroll down to the bottom of the post and see it in live action :)
1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.
Make Sure that you have checked the Read & Write Option when you Register your Application
2.When you complete the signup process, you will get some JavaScript codes, with a unique API Key
Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.
3.Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab under Design and “Expand your Widget Templates”
4.Look for
</head>
5.Now look for
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link="<data:post.url/>";
twttr.anywhere(function (T) {
T("#bp_tweetBox").tweetBox({
width: 560,
label: "Share the L❤ve & Retweet",
defaultContent: "RT @bloggerplugins <data:post.title/>"+" "+bp_tweet_link
});
});
</script>
</b:if>
Now you should see the Tweet Box on all of your post pages
Currently, this doesn’t do any URL shortening . You can expect that it my next post. I will also try to post about the other @AnyWhere features soon :)
Share your opinions and if you have any questions about the tweet button, feel free to ask :)
It has been almost 2 months since Blogger introduced the “Stats” feature. Now they have gone a step further by introducing 2 Gadgets related to the “Stats”. Blogger has now got a “Popular Posts” Gadget and a “Blog’s Stats” Gadget.(These are currently available only on Blogger in Draft).
The Blog’s Stats Gadget displays your Blog’s stats in one of the different graphical(or textual) formats. The Gadget Options will give you a better idea
These Gadgets are not available in your regular Dashboard. So login to Blogger in Draft at http://draft.blogger.com . Now Go to Design > Page Elements and Click on the “Add a Gadget Link” and you will see the 2 new Gadgets
What do you think of the ne Gadgets?
There are many photographers out there who wish to display their picasa albums in a Blogger Post. It’s actually quite simple to add a picasa slideshow. If you are noob, then these steps might help you.
1. Login to Picasa Web, and Navigate to your Album.
On the Right side you will see a “Link to this Album” link. Click that
2. Now Click on the Embed SlideShow Link
3. From the overlay window, adjust the Slideshow settings
and copy the Embed Code.
4. 1 If you want to have the Slideshow embedded into a Blog Post, then follow these steps else branch over to 4.2
a. Login to your Blogger Account, and Edit/Create a post:
Switch to the Edit HTML(or HTML) mode, and paste the copied embed code into the post editor.
The embed code has a width parameter and a height parameter (something like width="288" height="192" ). You can adjust these parameters to set the height and width of the slide show.
b. You can switch back to the “Compose” mode to edit the rest of the post.
c. Publish the post and the slideshow is now live on your blog :)
4. 2 If you want to add the Slideshow to your sidebar
a. Then login to Blogger and Go to the Layout Page (or Design > Page Elements)
and click on the Add a Gadget Link and then add an HTML/JavaScript Gadget.
b.Paste the Copied Code into the Gadget and Save it with an Appropriate Title
c. The Slideshow is live on your blog as a Sidebar Gadget.
The Random Posts Gadget will display a list of Random Posts(from your blog) on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. The Gadget inherits styles from your Blog. But you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed).
Maximum Length of Post Title – Your post titles can be too long. In that case you can limit the title to x number of characters using this parameter.
Snippet Style – You can display the snippet with Post Summary, Post Thumbnail , or both or none.
Feed – The default Option “Summary Feed” will scan your post summary feed. This is the faster and efficient option and i would advise you to opt this one. If you choose “Full Feed” , the gadget will be slower but you will get YouTube Thumbnails also.
Note:- If you want to grab the images or YouTube thumbnails, then you should have “Site Feeds” set to Full. If you opt for the Media Thumbnail only, then the short feed will be used by default.
Thumbnail Dimensions – Size of the Thumbnail in pixels. The gadget doesn’t generate any Thumbnail. It just uses the media thumbnail,YouTube thumbnail , or any image in the post and scales it to the specified dimensions
Summary Length - If you have opted to display the post Summary, then you can control the length of the summary(in characters)
Post Meta Style – You can display the Post Date, Comment Count and a Read More Link.You can choose any combination of these three.
Font and Font Size– By Default, the container’s font and Font Size is inherited into the Gadget. But if you are using a 3rd party template, then these might not be properly inherited. In that case you can use this Option to over ride these parameters.
Extra Styling – Allows you to specify the position of the Thumbnail, and whether to underline the links or not.
Border Color – You can either opt for No Border, or select one of the 140 available colors. If you are not sure about how these colors look like, then take a look at this color chart at W3Schools - http://www.w3schools.com/html/html_colornames.asp
Link Color and Text Color – By default , the colors will be inherited from your Blog. If you want to override this , you can choose one out of the 140 different colors.
(The colors were provided in the Dropdown(and not as text fields) to tackle a problem with the API)
Read More Text – This field was intentionally added to help blogs which are not written in English. Initially i used “More »” as the Read more text without taking any user Input. Seeing this on a non- English Blog is a little awkward. So i added this new field :)
 |  |
Credits:Thanks to Kannan of http://cre8tivenerd.com/ for the gadget image
Waiting for your Feedback and Suggestions :) . If you like the gadget, share it and spread the word :)
Update:
just updated the recent posts and random posts gadgets. Some blogger methods were deprecated(not sure if it is temporary) and so an update was necessary. these gadgets are cached on to the blogger servers and so may take time to reflect onto your blogs. If you can't wait then remove the gadgets and add them using the following links
Random Posts - http://go.bloggerplugins.org/random2
Recent Posts - http://go.bloggerplugins.org/recent2
The Default Blogger Templates(which can be customized using the Designer) are all made to use the “Blog Pages” as your Blog’s Top Navigation Menu. This is done using a Page List Gadget. But , you might want to setup your own menu with Custom Links. In that case, you can replace the Page List Gadget with a Link List. This tutorial guides you on how you can replace the Page List with a Link List without loosing the Menu Styling(and the highlighted active links)..
This is a frequently asked question on the Blogger Help Forum. The solution is simple, if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of using a Page List. If you are using one of the Default Blogger Templates, and if you have added a Page List Gadget below the header, you will be using "Page" links as the Navigation Menu. To change this to a Link list, follow these simple steps.
1. Login to your Blogger Account and navigate to the Design > Edit HTML tab. Do NOT check the “Expand Widget Templates” Option.
2. Now look for(Ctrl + F)
<b:widget id='PageList
and you will find some line like
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
3. Replace this line by the following Code
<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content PageList'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li class='selected'>
<a expr:href='data:blog.homepageUrl'>Home</a>
</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
</b:if>
<b:loop values='data:links' var='link'>
<b:if cond='data:blog.url == data:link.target'>
<li class='selected'>
<a expr:href='data:link.target'><data:link.name/></a>
</li>
<b:else/>
<li><a expr:href='data:link.target'><data:link.name/></a>
</li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
4. Save the Template.
5. Now you can manually add links to the Menu by using the Quick Edit Wrench Button 
.
The Styling of the Gadget will be preserved and the Active links will be highlighted.
Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. Older versions of IE doesn’t support the latest web technologies like HTML5 and CSS3. With Chrome Frame, all these new Technologies will be supported.
1. Log in to your Blogger account
2. Go to Design > Edit HTML tab.
3. Look for <head> and immediately below it paste the following line of code.
<meta http-equiv='X-UA-Compatible' content='chrome=1'/>
4. Save the Template
Now if anyone visits your Blog using Internet Explorer and if he/she has already installed the Google Chrome Frame on his/her PC, then your Blog will be rendered using GCF
1. Better and Faster Rendering (if GCF is installed on the visitors PC)
2. Normal rendering (if GCF is not installed) – No the user won’t be prompted to install the Chrome Frame(unless you add some extra scripts to do that).
If you want, you can prompt IE users( who have not installed GCF) to install GCF. This is optional . To prompt users, Follow these steps.
1. Once again Login to your Blogger Account
2. Go to Design > Edit HTML
3. Look for </head> and just above that add the following code snippet
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style type='text/css'>
.chromeFrameOverlayContent{top:10px;margin-top:10px;}
</style>
<script>
window.attachEvent("onload", function() {
CFInstall.check({
mode: "overlay"
});
});
</script>
<![endif]-->
4. Save the Template. Now the IE user will be prompted to install the Chrome Frame(if he hasn’t got it already). This prompt will appear only once(stored in cookie).
