Official Blogger Contact Form Gadget Released

Blogger Contact Form

Word about Google working on a official Contact Form gadget started to go around when many Blogger developers start to encounter some code in the Blogger hosted CSS and JavaScript files which clearly indicated that a Official Contact Form gadget was on the way. Finally today after a long wait of 14 years , Blogger has released the new Contact Form gadget which will surely ring a death knell for third party contact form providers

How To Add It 

1. Go to the Layout Tab of your Blog

layout tab

2. Click the Add a Gadget button

add a gadget

3. Click on More Gadgets


gadget menu





4. Click on the Contact Form Gadget

configure contact form

5. Give it a appropriate title and Save it

Its Features

contact form example

> Sending simple text messages
> No Support for attachments ( Will be likely added in the future )
> Custom CSS Styles can be added easily
> All code is escaped before sending ( Cannot send any HTML via the message )

This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google’s Product line.

Five Reasons to Switch to Google+ Comments Now

google+ comments

Google+ Comments launched just 2 weeks ago yet it has garnered lots of good reviews and a positive response from the Blogger user community. This move is a part of Google’s ongoing initiative for plusification of its products but its a clear sign that Blogger is still and will remain a indispensable product in Google’s arsenal. G+ Comments are also a clear challenge to the FB Comments , Disqus and other commenting systems even though it is yet to launched outside of Blogger officially. The presence of unofficial implementations for Drupal and WordPress establishes the fact that its being liked by everybody out there. So if you one of those people who are still not convinced of using it on your blog then here are Five Solid Reasons that will surely make you change your mind

1. Connected with everybody ( Literally !! )

connect google+ and blogger

Lets think of a dream scenario , Somebody , Somewhere on the Web shares the link to your newest article and you are thanking them for doing it the very next minute. In reality other than when you get traffic from some popular website , many conversations about your blog on social media are ignored by you or you have no way to know that they are even happening out there. G+ Comments takes a dig at this problem by making sure that if-and-when a link to your article is shared on Google+ publicly it will appear in the Comments sections with all its +1’s and comments that were done on the original thread. Even though this is a small innovation yet it will help keep the conversation about your article either on the blog or social media in a single place

2. Privacy Conscious


privacy



The power of Circles from Google+ is used to make sure that your privacy is never compromised . May it be a comment on your favorite Technology blog while you are working in office or a comment directed towards the author alone for fixing that typo you should be rest assured that you will not be caught by your boss or shame the author publicly for that silly mistake of theirs respectively . Another aspect is the ability to see comments custom-tailored to you. So your Best Social Friends comments will be visible to you on the top irrespective of the fact that when they were posted

3. Mention People


mention people in comments



Well its not new , Disqus and Livefyre have similar features but the thing here to consider is that you can easily send a notification to Google+ users without much hassles and get them involved in the conversation right away

4. Edit , Delete , Report Spam and Share on Google+




All the standard Moderation tools that every blog owner wants with a small yet impactful addition of social sharing right into the core of the comments structure. This small feature will increase exposure to your content on Google+ many folds and increase engagement with your readers and reader’s friends exponentially. A sure shot way to effects those Social Signals and increasing your search engine ranking organically

5. Threaded Comments 


threaded comment



Even though this is common place now and not a very big deal , but being able to reply to specify comments is always a great UX move. Considering just last year it was introduced in Blogger officially , its pretty big deal that its inherently present from start in this comment system. It gives more organized feel to your comments sections and makes it many times easier for you to manage the comments.

Bonus Reason : Migrate Comments 


comment migration



If you are a Blogger user , then you will not have to worry about losing all your previous comments that your blog received till now as all those comments will get automatically migrated as-and-when you choose to switch to Google+ Comments and reverse will also be possible soon if you think of switching back to the old comment system . One thing to note though is that the old comments cannot be marked as spam or deleted easily. (This bug will surely be fixed soon )

Still Not Convinced
Then check out this Hangout on Air from Google employees +Yonatan Zunger and +Dan Peterson

Conclusion
Active development is in full swing and lots of features might be coming out soon. If you have any feedback regarding any problems that you face while using G+ Comments , then without hesitation report it in the Blogger Product Forum.


So take the chance and Try Google+ Comments





Update
We have switched to G+ Comments but we have still allowed you to comment via the old comment box if you like that one more

Blogging , Fun and HPConnectedMusic

hp connected musicThis is my 3rd IndiBlogger Blogger Meet and it was nothing less exciting and fun-filled than any previous one. We reached the venue just when synchronized clapping and tapping had started , there were some awkward hiccups but it set the mood for the rest of the meet.

After that started the introductions and entertaining challenges moderated by our very own Prateek Shah or rather ‘Prateeksha’

Then came the most awaited presentation explaining the features of HPConnectedMusic

Here is a brief overview of the Features


1.  More than 1 Million Songs available to choose from


2.  Ability to Download and Play Music Offline




3.  Online Streaming and Internet Radio

4.  Meridian Powered Desktop Application for HP laptops

5.  Intelligent Playlists , Custom Filters and Constantly changing Album covers



6.  Supports advanced playback technologies like Beats Audio


7. Extensive Search Features with Artists , Tracks and Albums Listings





8. Common Trivia and Latest News related to each artists integrated within the service


9. Take part in competitions and Win Tickets to concerts worldwide


10. Free for 1 year on selected HP Laptops








Sneak Peek for Non-HP Product owners 


Artists 

HomePage

Music Genres 

Internet Radio

Hope this convinces you to check out the new HP laptops with support for HPConnectedMusic

In the end , we had a huge group photo and everybody had some goodies with them thanks to HP and IndiBlogger

Special Kudos to the IndiBlogger Team for this event ( couldn’t find all pics of all members )

The New Blogger Template Editor

New Blogger Template EditorThe first major update to the Blogger Template Editor since 2006 . Loosely referred to as Edit HTML , it has gone though a complete makeover. The previous Editor appeared as a lightbox-style window and was pretty similar to the version available before Blogger switched to the new look back in October 2011. This update is a full-blown overhaul with build from scratch approach bringing a whole new set of features to the table

The Technology Behind the Editor

CodeMirror XML editor

The New Template Editor is using CodeMirror , a JavaScript component which provides an in-browser Code Editor. It has been modified a bit to add some Blogger specific functionalities ( Preview Template & Jump To Widget ) but the core appears to be same. Shifting to CodeMirror , which is open source and has a active development community around it ( Check it on Github ) is surely nothing less than awesome. It is used by sites like CodePen , CodeSchoolCSSDeck , JSBin as well as Google Apps Script just confirms the fact that it is ready for big-time use.

Update : After a mail from us pointing out this change , Marijn Haverbeke ( The person behind CodeMirror ) has added Blogger to the list of Real World Use Cases of CodeMirror.

The New Features

The New Editor is aimed at making Creation & Editing Blogger Template a lot easier for user with less experience in coding HTML/CSS/JS . Some of the specific additions are

1. Jump To Widget

Jump To Widget option Blogger Template HTML

Finding code related to a specific widget has become very easy , Just open the Jump To Widget Dropdown and select the widget of your choice. By making jumping to specific Widget Code block, it becomes easier for users to add code to render widget on specific page  (Earlier it was a bit overwhelming to go through a lot of code to add those conditional tags )

2. Expandable Code Segments 

Expand Code Segments



The ability to exapand code makes the Template Editor look less cluttered and more clean. Current once you expand the code , there is no ability to collapse it again . May be they will add that in the future

Update : As Samantha Schaffer , one of the Google Intern responsible for creating this new Editor has mentioned in the comments , after expanding the code block ,the triangle disappears but if that specific area is clicked again then the code collapses and the triangle reappears

3. Inline Preview Template

Preview Template Blogger Template HTML

Giving a option to preview the template in the same window is well thought UX move , keeping the continuity of the Google UI and not at all compromising with the testing of the template. It will surely improve the workflow of many template designers.

4. Format Template

Format Template Before

If you are like me , trying to squish every whitespace out of your template to hyper-optimize for the smallest HTTP request size , then this might not be a feature for you. Jokes apart as you can see in the above image it can be a nightmare to edit a Template like that. A click of Format Template will indent your code in the most human readable form as seen in the image below . Just a word of caution though , for heavily modified template this might cause some problems , so Preview before saving any changes.

After using Template Format Blogger Template HTML

5. Find , Replace and Replace All functions

Replace function in Blogger Template Editor

The Editor has its own Find , Replace and Replace All functions. This might seem a little off in the beginning as the Browsers Own Search will not work in the Editor but once you get used to it , it will come naturally. Especially the addition of Replace (CTRL+SHIFT+F) and Replace All (CTRL+SHIFT+R) , a must in code editors, will come really handy if you fiddling with the template a lot ( Especially with multiple similar items ) .

Here is a video demonstrating all the features (No sound but background music)

Conclusion


This will give many people a reason to shift their Blog on Blogger and make editing templates for current users much easier and more welcoming. This also fizzles out all the rumors going around after Google’s Readers close-down about Blogger being next in the line to be closed down – HELL , if that was the case then these array of new developments would not be happening. Blogger is one of the oldest blogging platform and is here to stay for a long time. Also don’t forget to check the official announcement

Update : This update appears to be rolled out for all the users and there seems to be no option to revert back to the old Template Editor

Leaked : Contact Form Widget coming to Blogger

contact

While creating my new template , I came across some interesting piece of code in the official CSS and JavaScript files which are included automatically by Blogger on each page of a blog. Its presence is a sure shot indication of a Contact Form Widget that is being developed by Blogger. Read on to find more details


Update – The Contact Form Gadget has been released 

Proof


The proof can be simply found by simply by seeing the View Source of any of your blog pages.

In the Source of the page, search for widget_css_2_bundle.css and -widgets.js

Open these files and search for the keyword “contact” and you will see something like this (click image to enlarge)

blogger's javascript file

blogger's css file

Check out these example CSS and JavaScript File URL’s
http://www.blogger.com/static/v1/widgets/3934819169-widgets.js
http://www.blogger.com/static/v1/widgets/3441929121-widget_css_2_bundle.css

I went a step further and applied the CSS to a standard Form and the result was something like

blogger official contact form

.gumroad-button{font-family: Helvetica, Arial, sans-serif !important;font-size: 13px !important;line-height: 17px !important;font-weight: 500 !important;text-align: left !important;color: #8e8e8e !important;text-shadow: 0 1px 2px white !important;background: url(http://1.bp.blogspot.com/-hksZgli2Gx4/UVkzyriIICI/AAAAAAAAKlQ/nRzTLqJqhpA/s20/eye.png) 5px 49% no-repeat white !important;border-radius: 3px !important;border: 1px solid #c8c8c8 !important;padding: 4px 6px 4px 26px !important;box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .1) !important;text-decoration: none !important;display: inline-block !important;}.gumroad-button:hover {text-decoration: none !important;color: #777 !important;border-color: #bbb !important;box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .02), 0 1px 2px rgba(0, 0, 0, .1), 0 0 4px rgba(0, 0, 0, .1) !important;}

Demo

This pretty much explains everything and I suppose we can expect it to be released soon to the public . This was a much needed step as all the Blogger users were dependent on third party contact forms . On a positive note , this is a sign that active development is still ON in Blogger and closing it down is not happening in the near future atleast . The Official Google+ Stream gadget for Blogger was also found out by us but its still not implemented yet

Want to get these Updates straight to your Inbox , Then Subscribe !

The All new Google+ Followers Widget

Google+ Followers widget

Just a couple of hours ago Blogger launched the Google+ Follower widget. Build on the lines of the older Friend Connect Follower widget , it has a Follow button accompanied with the faces of your Google+ Followers. It is now available in the Add a Gadget menu and can be added to your blog with just a single click. The widget currently has no configurable options but this will surely change as future enchantments are made. This can be seen as another step in the direction of integrating Google+ with Blogger. Now lets see some of the other facts related to this widget

Before adding this widget you will have to connect your blog to Google+ if you haven’t already done it

To connect your Google+ profile with Blogger

 1. To do that just go the Google+ tab in your Blog’s dashboard and click the Upgrade to Google+ button

Upgrade to Google+

2. You will be presented a screen where you will have to tick the check-box and click the Switch Now button

connect with google+ blogger

3. Now you have a choice whether you want to add the blogs you contribute to the About section of your Google+ profile. Whatever you choose , either skip or add the blogs to your profile

add your blogs

4. This completes the integration of your Blogger account with Google+

To add the Google+ Follower widget

1. Go to the Layout tab

Blogger Layout tab

2. Click the Add a Gadget button ( preferable in the Sidebar )

3. Now select the Google+ Followers Widget and click the Save Button

Google+ Followers

4. Check your blog and you will see the widget in your sidebar now .

Hope this tutorial helped and don’t forget to follow us on Google+ via the Google+ Follower widget present in the sidebar

Check more about this story on Blogger’s official blog – Grow your audience with the Google+ followers gadget

Changes and Issues with Blogger

changes issuesIn the Past 39 Days there has been no new post and I sincerely apologize for that . Since I have started using Blogger again , I have come across some changes and issues that I would like to share with everybody.

1. Old Interface Shelved
This happened around 20th September. Old Interface has now become fully inaccessible even if you are using direct links to it. This is what is shown instead

no more old ui

This change has been well planned as the New Edit HTML Editor ( which came under the most fire from the users ) is now pretty stable and allows editing at par with the old one. This force upgrade also came in wake of the one-UI-all-across-policy of Google so that every Google Product has a kind of uniformity.

If you are Old Interface fan like me then there are still some glimpse left of it here and there. Like when Uploading Images in the HTML mode of the Post Editor. After you press the Upload buttons , the confirmation screen has Old Interface styles (Screenshot below)

old interface screenshot

2. Extra Control over Link Structure
The ability to change the Link Structure has been around for a couple of months in the Draft Blogger interface but it has been rolled out in the Main interface as well. So now you can easily reword your links and they no longer depend on your post headings alone.

link structure

A more advanced version of this feature would be ability to omit the year and month from the structure as well. But none the less its a step in the right direction

3. Mobile Custom Redirect Issue
This issue was experienced while using a mobile device (This requires that your User Agent is a mobile device like a Android , iPhone , Symbian or any other similar device). Also you must have a Custom Redirect setup to test this. When a user clicks on a custom Redirect URL , they are redirected to the Custom 404 Error Page. This happens because to serve the mobile version of your blog , Blogger attaches a query parameter ( ?m=1 ) which gets directly appended with the custom redirect and  Blogger thinks of its as a URL itself

For example check this URL – http://www.stylifyyourblog.com/contact?m=1 ( I have a redirect in place which redirects /contact to /p/contact.html )

4. Comment Avatar Image and JS File Size and Issue
With the advent of the New Threaded Commenting System in Blogger , it became clear that Blogger comments were second to none when comparing them with third party services like Disqus or IntenseDebate . But while observing some things in the threaded comment system closely , I came across some shocking facts.

Firstly the Avatar Image size of users who had integrated their account with Google+ was of the order of 512X512 px . This led to a lot waste in the bandwidth from Blogger side as well as it slowed down the loading of pages. In extreme cases a single image was wasting 200KB+ . I filed a request with the Blogger Dev Group and got a positive response but no action has been taken till yet. You can see the thread here

Secondly the size of the JS file included inline as well as externally to make to Threaded Comment system work is a whooping 390KB+ as compared to the 15KB file that was included for the old comment system. After discovering this fact I am seriously considering to shift to a third party comment system which are way lighter.

5. Naked Domain Redirect Issue
In the past 2-3 days there was been a widespread issue across Blogger where the non-www version of the Blog has stopped redirecting to the www version of the blog . Blogger team has released a step to step guide to solve this issue . You can check it here

Stay tuned as I will be resuming my daily posting of helpful tutorials and tips

If you have experienced any other change or issues while using Blogger , feel free to share them in the comments

The Official Google+ Stream Widget

Google+ streamThe much awaited Google+ Stream Widget for Blogger and other platforms is on the way. It has not been made public yet but there is a working Demo present in one of the Blogger employee’s blog which I stumbled upon by chance. Its not ready for a public release yet as the profile thumbnails of users are not working correctly . This widget uses the Blogger API for its implementation but this can be easily integrated into any other platform with a simple Iframe.

Here is a YouTube Video with the Demo

The Code

<script type="text/javascript">
        if (!window.gadgets || !gadgets.rpc) {
          document.write('<script type="text/javascript"'  
                  'src="//www-blogger-opensocial.googleusercontent.com/gadgets/js/rpc.js?containerx3dbloggerx26nocachex3d0x26debugx3d0x26cx3d1x26vx3dea8289bd3846c57bd64db8aa8a3f2928x26svx3d9">'  
                  '</scr'   'ipt>');
        }
      </script>
<script type="text/javascript">
    
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
        
          
          
          
            holder.postFeed = "http://www.blogger.com/feeds/2295610366269213074/posts/default";
          
          
          
            holder.commentFeed = "http://www.blogger.com/feeds/2295610366269213074/comments/default";
          
          holder.currentBlogUrl = "http://www.stylifyyourblog.com/";
          holder.currentBlogId = "2295610366269213074";
        
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height   'px';
      }
    });

    
    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;parent=http://www.stylifyyourblog.com/&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>
<script type="text/javascript">
        gadgets.rpc.setRelayUrl("sidebar-gadget1", '//www-blogger-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html');
        gadgets.rpc.setAuthToken("sidebar-gadget1", "3600249869607945918");
      </script>
</div>

As you will observe in first few lines ,it is using the Blogger API for getting the Blog ID and URL . After that a iFrame is included ( Line 47 ) which is the Widget itself.

All Blogger API widgets use IFrames for implementation and this is no different.

After a bit of research I came to across a XML file which contained the information about the author of this widget inside Google.

You can check the XML file here http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml


Demo

if (!window.gadgets || !gadgets.rpc) {
document.write(” +
”);
}

function registerGetBlogUrls() {
gadgets.rpc.register(‘getBlogUrls’, function() {
var holder = {};

holder.postFeed = “http://www.blogger.com/feeds/2295610366269213074/posts/default”;

holder.commentFeed = “http://www.blogger.com/feeds/2295610366269213074/comments/default”;

holder.currentBlogUrl = “http://www.stylifyyourblog.com/”;
holder.currentBlogId = “2295610366269213074”;

return holder;
});
}

if (!window.registeredCommonBloggerCallbacks) {
window.registeredCommonBloggerCallbacks = true;

gadgets.rpc.register(‘resize_iframe’, function(height) {
var el = document.getElementById(this[‘f’]);
if (el) {
el.style.height = height + ‘px’;
}
});

gadgets.rpc.register(‘set_pref’, function() {});

registerGetBlogUrls();
}

gadgets.rpc.setRelayUrl(“sidebar-gadget1”, ‘//www-blogger-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html’);
gadgets.rpc.setAuthToken(“sidebar-gadget1”, “3600249869607945918”);

Implementing it

You can easily implement this using the following code in your websites ( its pretty long code ! ).

<iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>

To display your Profile stream , just search for the word userid in the above code , it will look something like this

Just replace the highlighted number above with your Google+ Profile ID

Somethings to Remember

This widget has not been officially released and might experience some unexpected problems. Other than that feel free to ask any problems that you come across while implementing it in your blog/websites.

Blogspot domains localized and Google mum !!

Google has made a really weird move. It has localized the Blogspot domains for all Indian users or atleast thats what I have come to know. All the Blogspot URLs are redirecting to a .in domain if they are accessed from within India. A intial guess is that is that everybody with a Indian IP address is being redirected to the .in version. The .com version is still existing and is served to everybody with a IP address out of India. There are very far reaching implications for such a move.

UPDATE: There is a official explanation about the issue present Here. To check your .com domain put /ncr after your Blog URL and you will be redirected to the .com domain.

Till now there is no news that any other countries blogspot domain is localized. I have myself tested for .de , .ca, etc but none are redirecting to the blogspot blog. Google being mum about this move is also a very weird thing (maybe Google has been hacked !!! ).

Advantages
> As its localized to India, so Indian users can access Blogspot blogs faster. Now their request is sent to Indian servers rather than a US based server.

> For all Bloggers its in a way a good news as now they have two domains for the same blog

> Both the versions a.k.a. .com and .in are same. Any comment on the .in version will appear on the .com version as well.

> No SEO losses as such as every page has a rel=canonical tag with a .com domain

Disadvantages
> As users are distributed between these two domains there is a loss in Alexa Rankings !!!

> Page Rank is zero for the .in version !!

> Confusion: users might get puzzled that their Blog URL’s have been changed.

> Unnecessary: Google could have just created a copy of blogspot blogs in every countries Servers and served the .com version faster from their.

All in all this is out-rightly weird. Even though there is a thing about serving blogs faster but changing the domain for that purpose is not a correct move. The Blogger Forum has started to fill with request about this change. Another odd thing to note is that Google is mum about this issue. There is no mention about this thing on any of their Blogs.

One thing that is coming into my mind is that ,there is ongoing hearing against Google Inc in the Delhi High Court. Even though this is just a thought but maybe this has been done to make it easy for the Indian Govt to ban Blogspot URL’s in India. Something like the dreaded SOPA & PIPA. This is just a thought.

I strongly suggest that there should be option for Bloggers to choose whether they want a localized domain or not. 

What are your views about this bizarre move by Google

Blogger is going to release Threaded comments

Threaded comments or nested comments as many people call them is the one feature which is missing in the Blogger comment system. I have come to know through reliable sources that Blogger is soon going to release Threaded comment as a default option for users. Even though the date is not known but it will be live anytime now. In any case if you are getting a bit impatient then I will also be discussing how to implement it now in your blog using a hack thats doing rounds across the internet . I have altered its style a bit to make it look a bit more presentable.


How I came to Know


Well that reliable ,super-secret source of my is none other than the Edit HTML of the Template. Even though it may sound a bit confusing ,but while creating templates I came across some code with threaded keyword in them and after a bit searching though it I could understand that it was a new feature that Blogger was going to rollout.Here is some visual evidence and you can even try it yourself by searching for the term threaded in the template. (Tick the Expand Widget Preview option)

Earlier in the day Dasari Harish of Way2Blogging did a post explaining what you can expect from this commenting system and how it will work and other stuff related to it.

This new feature rollout also explains why recently there has been lot of Service Unavailable errors and a bit of slowdown while using Blogger .


  

How to Implement it Now in your Blog

Demo

There are hacks present on the internet dating back to as long as 2008 ,on how to do this in your blog. But recently hacks by Tien Nguyen have made it possible to implement this in your blog. I will be using a older version of his hack and the styling done by me. In case you want the Newest Version you can get it from Here
Step 1: Go to Templates > Edit HTML (Old Interface Users go to Design > Edit HTML)
Step 2: Tick the Expand widget Preview Option 
Step 3: Search for ]]></b:skin> and paste the following CSS just before it (How to Copy code easily)

#cm_block{position:relative;left:-20px;}
.cm_wrap{clear:both;float:right;margin-bottom:10px;width:98%}
.cm_head{float:left;margin:0;width:70px}
.avatar-image-container a img{border-radius:100%;background:url() no-repeat scroll center center;position:relative;left:1px;top:0px;width:40px;height:40px;}
.cm_avatar{width:42px;height:42px;margin:0;padding:0;border:solid 4px white;-webkit-border-radius:1em;-moz-border-radius:10em;border-radius:10em;-webkit-box-shadow:0 1px 2px rgba(0,0,0, .2);-moz-box-shadow:0 1px 2px rgba(0,0,0, .2);box-shadow:0 1px 2px rgba(0,0,0, .2);border-image:initial;background-color:white;}
.cm_reply{padding-top:5px}
.cm_reply a{-moz-border-radius:2px;-webkit-border-radius:2px;background:0;border:1px solid #C4C4C4;border-left-color:#E4E4E4;border-radius:2px;border-top-color:#E4E4E4;color:#424242!important;display:inline-block;font:12px/19px sans-serif;margin:0;padding:1px 6px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #FFF}
.cm_reply a:hover{background:#f8f8f8;text-decoration:none!important}
.cm_reply a:active{background:#f1f1f1;text-decoration:none!important}
.cm_entry{border-radius:10px 100px 80px;background:#f8f8f8;overflow:hidden;padding:16px}
.cm_info{margin-bottom:5px}
.cm_name{float:left;font-size:12px;font-weight:700}
.cm_name:after{content:" said";}
.cm_date{color:#444;float:right;font-size:10px;font-style:italic}
.cm_entry p{color:#222;font-size:13px;margin:0}
.cm_pagenavi{color:#666;font-size:10px;font-weight:700;text-shadow:1px 1px #FFF;text-transform:uppercase}
.cm_pagenavi a{color:#666;padding:10px;text-decoration:none}
.cm_pagenavi a:hover{text-decoration:none}
.cm_pagenavi span{background:#FFF;border:1px solid #E0E0E0;color:#888;padding:4px}

Step 4: Search for <b:includable id=’comments’ var=’post’> and till the end of this tag which looks like this </b:includable> Replace all the code with the code given below

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>                      
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7535998369717577932&amp;postID=&quot;   data:post.id   &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot;   data:comment.anchorName   &quot;%22%3E&quot;   data:comment.author   &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
</div>
<div class='clear'/>                                  
</div>
<p><data:comment.body/><b:include data='comment' name='commentDeleteIcon'/></p>
</div>
</div>
</div>
</b:if>            
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

</b:if>
</div>

In Line 40 of the above code relplace the blogID with your blog Id (To find the blog id ,just open lets say the Stats page and in the address bar you will see a very long numbers ,thats your blog id).

Step 5: Now below the </body> tag ,paste the following code(Sorry for the Horizontal scrollbar but had to make the code one-click copyable):

<script type="text/javascript"><!--
var _0x7bf4=["x32x20x78x3Dx31x72x2Ex31x6Ex2Ex4Ax3Bx32x20x46x3Dx77x2Ex79x28x27x31x6Dx27x29x3Bx32x20x6Dx3Dx46x2Ex75x3Bx32x20x70x3Dx5Bx5Dx3Bx32x20x37x3Dx5Bx5Dx3Bx32x20x64x3Dx5Bx5Dx3Bx32x20x6Ex3Dx30x3Bx32x20x49x3Dx27x27x3Bx32x20x4Bx3Dx27x27x3Bx32x20x45x3Dx27x27x3Bx32x20x69x3Dx30x3Bx32x20x6Ax3Dx30x3Bx32x20x6Bx3Dx30x3Bx32x20x68x3Dx30x3Bx32x20x62x3Dx27x27x3Bx32x20x42x3Dx22x22x3Bx32x20x71x3Dx22x22x3Bx31x73x20x31x31x28x29x7Bx32x20x56x3Dx2Dx31x3Bx38x28x5Ax2Ex31x79x3Dx3Dx27x31x7Ax20x31x76x20x31x75x27x29x7Bx32x20x31x65x3Dx5Ax2Ex31x77x3Bx32x20x31x30x3Dx31x78x20x31x32x28x22x31x74x20x28x5Bx30x2Dx39x5Dx7Bx31x2Cx7Dx5Bx5Cx2Ex30x2Dx39x5Dx7Bx30x2Cx7Dx29x22x29x3Bx38x28x31x30x2Ex31x41x28x31x65x29x21x3Dx31x70x29x56x3Dx31x71x28x31x32x2Ex24x31x29x7Dx31x6Fx20x56x7Dx32x20x57x3Dx31x31x28x29x3Bx38x28x57x3Dx3Dx2Dx31x7Cx7Cx57x3Ex3Dx39x29x7Bx31x34x28x6Dx2Ex66x28x27x4Cx3Dx22x63x27x29x21x3Dx2Dx31x29x7Bx69x3Dx6Dx2Ex66x28x27x4Cx3Dx22x63x27x29x3Bx6Dx3Dx6Dx2Ex65x28x69x2Bx34x29x3Bx69x3Dx6Dx2Ex66x28x27x22x27x29x3Bx70x5Bx6Ex5Dx3Dx6Dx2Ex65x28x30x2Cx69x29x3Bx6Dx3Dx6Dx2Ex65x28x69x29x3Bx37x5Bx6Ex5Dx3Dx77x2Ex79x28x70x5Bx6Ex5Dx29x2Ex75x3Bx64x5Bx6Ex5Dx3Dx30x3Bx6Ex2Bx2Bx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex2Dx31x3Bx69x2Bx2Bx29x7Bx76x28x6Ax3Dx69x2Bx31x3Bx6Ax3Cx6Ex3Bx6Ax2Bx2Bx29x7Bx38x28x37x5Bx6Ax5Dx2Ex66x28x70x5Bx69x5Dx29x21x3Dx2Dx31x29x7Bx49x3Dx70x5Bx6Ax5Dx3Bx4Bx3Dx37x5Bx6Ax5Dx3Bx64x5Bx6Ax5Dx3Dx64x5Bx69x5Dx2Bx31x3Bx45x3Dx64x5Bx6Ax5Dx3Bx76x28x68x3Dx69x2Bx31x3Bx68x3Cx6Ax3Bx68x2Bx2Bx29x7Bx38x28x64x5Bx68x5Dx3Cx45x29x7Bx31x37x7Dx7Dx76x28x6Bx3Dx6Ax3Bx6Bx3Ex68x3Bx6Bx3Dx6Bx2Dx31x29x7Bx70x5Bx6Bx5Dx3Dx70x5Bx6Bx2Dx31x5Dx3Bx37x5Bx6Bx5Dx3Dx37x5Bx6Bx2Dx31x5Dx3Bx64x5Bx6Bx5Dx3Dx64x5Bx6Bx2Dx31x5Dx7Dx70x5Bx68x5Dx3Dx49x3Bx37x5Bx68x5Dx3Dx4Bx3Bx64x5Bx68x5Dx3Dx45x7Dx7Dx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex3Bx69x2Bx2Bx29x7Bx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x40x3Cx61x20x4Ax3Dx22x23x63x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax2Bx31x29x3Bx6Ax3Dx71x2Ex66x28x27x3Cx2Fx61x3Ex27x29x3Bx71x3Dx71x2Ex65x28x6Ax2Bx34x29x3Bx37x5Bx69x5Dx3Dx42x2Bx71x7Dx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x50x3Dx22x59x22x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax29x3Bx38x28x64x5Bx69x5Dx3Ex36x29x64x5Bx69x5Dx3Dx36x3Bx37x5Bx69x5Dx3Dx42x2Bx27x74x3Dx22x31x35x3Ax27x2Bx28x31x39x2Dx64x5Bx69x5Dx2Ax35x29x2Bx27x25x22x20x27x2Bx71x7Dx62x2Bx3Dx37x5Bx69x5Dx7Dx62x2Bx3Dx27x3Cx67x20x50x3Dx22x31x66x22x3Ex3Cx2Fx67x3Ex27x3Bx46x2Ex75x3Dx62x3Bx46x2Ex74x2Ex51x3Dx27x31x62x27x3Bx32x20x4Dx3Dx77x2Ex79x28x27x31x61x27x29x2Ex75x3Bx32x20x6Fx3Dx4Fx28x4Dx29x3Bx38x28x6Fx3Ex72x29x7Bx62x3Dx27x3Cx67x20x74x3Dx22x47x3Ax31x63x22x3Ex31x64x20x27x3Bx32x20x48x3Dx28x6Fx2Dx6Fx25x72x29x2Fx72x2Bx31x3Bx32x20x73x3Dx27x27x3Bx32x20x6Cx3Dx31x3Bx69x3Dx78x2Ex66x28x27x2Ex31x6Cx27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx78x2Ex65x28x30x2Cx69x2Bx35x29x7Dx7Ax7Bx73x3Dx78x7Dx69x3Dx73x2Ex66x28x27x23x44x27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx73x2Ex65x28x30x2Cx69x29x7Dx69x3Dx78x2Ex66x28x27x3Fx53x3Dx27x29x3Bx38x28x69x3Dx3Dx2Dx31x29x7Bx6Cx3Dx31x7Dx7Ax7Bx6Cx3Dx4Fx28x78x2Ex65x28x69x2Bx31x33x29x29x7Dx76x28x69x3Dx31x3Bx69x3Cx3Dx48x3Bx69x2Bx2Bx29x7Bx38x28x69x3Dx3Dx6Cx29x7Bx62x2Bx3Dx27x3Cx55x3Ex27x2Bx69x2Bx27x3Cx2Fx55x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx61x20x4Ax3Dx22x27x2Bx73x2Bx27x3Fx53x3Dx27x2Bx69x2Bx27x23x44x22x3Ex27x2Bx69x2Bx27x3Cx2Fx61x3Ex27x7Dx7Dx38x28x6Cx2Ax72x3Cx3Dx6Fx29x7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx28x6Cx2Ax72x29x2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx6Fx2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx32x20x43x3Dx77x2Ex79x28x27x31x69x27x29x3Bx43x2Ex75x3Dx62x3Bx43x3Dx77x2Ex79x28x27x31x68x27x29x3Bx43x2Ex75x3Dx62x3Bx38x28x6Cx3Cx48x29x7Bx62x3Dx27x3Cx74x20x31x67x3Dx22x31x6Bx2Fx31x6Ax22x3Ex2Ex58x20x7Bx51x3Ax20x31x38x7Dx3Cx2Fx74x3Ex27x3Bx32x20x4Ex3Dx77x2Ex79x28x27x31x36x27x29x3Bx4Ex2Ex75x3Dx62x7Dx7Dx7Dx7Ax7Bx31x34x28x6Dx2Ex66x28x27x4Cx3Dx63x27x29x21x3Dx2Dx31x29x7Bx69x3Dx6Dx2Ex66x28x27x4Cx3Dx63x27x29x3Bx6Dx3Dx6Dx2Ex65x28x69x2Bx33x29x3Bx69x3Dx6Dx2Ex66x28x27x3Ex27x29x3Bx70x5Bx6Ex5Dx3Dx6Dx2Ex65x28x30x2Cx69x29x3Bx6Dx3Dx6Dx2Ex65x28x69x29x3Bx37x5Bx6Ex5Dx3Dx77x2Ex79x28x70x5Bx6Ex5Dx29x2Ex75x3Bx64x5Bx6Ex5Dx3Dx30x3Bx6Ex2Bx2Bx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex2Dx31x3Bx69x2Bx2Bx29x7Bx76x28x6Ax3Dx69x2Bx31x3Bx6Ax3Cx6Ex3Bx6Ax2Bx2Bx29x7Bx38x28x37x5Bx6Ax5Dx2Ex66x28x70x5Bx69x5Dx29x21x3Dx2Dx31x29x7Bx49x3Dx70x5Bx6Ax5Dx3Bx4Bx3Dx37x5Bx6Ax5Dx3Bx64x5Bx6Ax5Dx3Dx64x5Bx69x5Dx2Bx31x3Bx45x3Dx64x5Bx6Ax5Dx3Bx76x28x68x3Dx69x2Bx31x3Bx68x3Cx6Ax3Bx68x2Bx2Bx29x7Bx38x28x64x5Bx68x5Dx3Cx45x29x7Bx31x37x7Dx7Dx76x28x6Bx3Dx6Ax3Bx6Bx3Ex68x3Bx6Bx3Dx6Bx2Dx31x29x7Bx70x5Bx6Bx5Dx3Dx70x5Bx6Bx2Dx31x5Dx3Bx37x5Bx6Bx5Dx3Dx37x5Bx6Bx2Dx31x5Dx3Bx64x5Bx6Bx5Dx3Dx64x5Bx6Bx2Dx31x5Dx7Dx70x5Bx68x5Dx3Dx49x3Bx37x5Bx68x5Dx3Dx4Bx3Bx64x5Bx68x5Dx3Dx45x7Dx7Dx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex3Bx69x2Bx2Bx29x7Bx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x40x3Cx41x20x4Ax3Dx22x23x63x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax2Bx31x29x3Bx6Ax3Dx71x2Ex66x28x27x3Cx2Fx41x3Ex27x29x3Bx71x3Dx71x2Ex65x28x6Ax2Bx34x29x3Bx37x5Bx69x5Dx3Dx42x2Bx71x7Dx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x50x3Dx59x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax29x3Bx38x28x64x5Bx69x5Dx3Ex36x29x64x5Bx69x5Dx3Dx36x3Bx37x5Bx69x5Dx3Dx42x2Bx27x74x3Dx22x31x35x3Ax27x2Bx28x31x39x2Dx64x5Bx69x5Dx2Ax35x29x2Bx27x25x22x20x27x2Bx71x7Dx62x2Bx3Dx37x5Bx69x5Dx7Dx62x2Bx3Dx27x3Cx67x20x50x3Dx22x31x66x22x3Ex3Cx2Fx67x3Ex27x3Bx46x2Ex75x3Dx62x3Bx46x2Ex74x2Ex51x3Dx27x31x62x27x3Bx32x20x4Dx3Dx77x2Ex79x28x27x31x61x27x29x2Ex75x3Bx32x20x6Fx3Dx4Fx28x4Dx29x3Bx38x28x6Fx3Ex72x29x7Bx62x3Dx27x3Cx67x20x74x3Dx22x47x3Ax31x63x22x3Ex31x64x20x27x3Bx32x20x48x3Dx28x6Fx2Dx6Fx25x72x29x2Fx72x2Bx31x3Bx32x20x73x3Dx27x27x3Bx32x20x6Cx3Dx31x3Bx69x3Dx78x2Ex66x28x27x2Ex31x6Cx27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx78x2Ex65x28x30x2Cx69x2Bx35x29x7Dx7Ax7Bx73x3Dx78x7Dx69x3Dx73x2Ex66x28x27x23x44x27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx73x2Ex65x28x30x2Cx69x29x7Dx69x3Dx78x2Ex66x28x27x3Fx53x3Dx27x29x3Bx38x28x69x3Dx3Dx2Dx31x29x7Bx6Cx3Dx31x7Dx7Ax7Bx6Cx3Dx4Fx28x78x2Ex65x28x69x2Bx31x33x29x29x7Dx76x28x69x3Dx31x3Bx69x3Cx3Dx48x3Bx69x2Bx2Bx29x7Bx38x28x69x3Dx3Dx6Cx29x7Bx62x2Bx3Dx27x3Cx55x3Ex27x2Bx69x2Bx27x3Cx2Fx55x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx61x20x4Ax3Dx22x27x2Bx73x2Bx27x3Fx53x3Dx27x2Bx69x2Bx27x23x44x22x3Ex27x2Bx69x2Bx27x3Cx2Fx61x3Ex27x7Dx7Dx38x28x6Cx2Ax72x3Cx3Dx6Fx29x7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx28x6Cx2Ax72x29x2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx6Fx2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx32x20x43x3Dx77x2Ex79x28x27x31x69x27x29x3Bx43x2Ex75x3Dx62x3Bx43x3Dx77x2Ex79x28x27x31x68x27x29x3Bx43x2Ex75x3Dx62x3Bx38x28x6Cx3Cx48x29x7Bx62x3Dx27x3Cx74x20x31x67x3Dx22x31x6Bx2Fx31x6Ax22x3Ex2Ex58x20x7Bx51x3Ax20x31x38x7Dx3Cx2Fx74x3Ex27x3Bx32x20x4Ex3Dx77x2Ex79x28x27x31x36x27x29x3Bx4Ex2Ex75x3Dx62x7Dx7Dx7D","x7C","x73x70x6Cx69x74","x7Cx7Cx76x61x72x7Cx7Cx7Cx7Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx43x6Fx6Ex74x65x6Ex74x7Cx69x66x7Cx7Cx7Cx73x74x72x6Fx75x74x7Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx4Cx65x76x65x6Cx7Cx73x75x62x73x74x72x69x6Ex67x7Cx69x6Ex64x65x78x4Fx66x7Cx64x69x76x7Cx7Cx7Cx7Cx7Cx43x6Dx5Fx43x75x72x5Fx50x61x67x65x7Cx43x6Dx5Fx42x6Cx6Fx63x6Bx5Fx43x6Fx6Ex74x65x6Ex74x7Cx43x6Dx5Fx4Ex75x6Dx7Cx43x6Dx5Fx54x6Fx74x61x6Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx49x64x7Cx73x74x72x5Fx74x32x7Cx32x30x30x7Cx4Fx72x67x5Fx55x72x6Cx5Fx54x68x72x65x61x64x43x4Dx7Cx73x74x79x6Cx65x7Cx69x6Ex6Ex65x72x48x54x4Dx4Cx7Cx66x6Fx72x7Cx64x6Fx63x75x6Dx65x6Ex74x7Cx43x75x72x5Fx55x72x6Cx5Fx54x68x72x65x61x64x43x4Dx7Cx67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64x7Cx65x6Cx73x65x7Cx7Cx73x74x72x5Fx74x31x7Cx43x6Dx5Fx50x61x67x65x5Fx4Fx62x6Ax7Cx63x6Fx6Dx6Dx65x6Ex74x73x7Cx43x6Dx5Fx49x74x65x6Dx5Fx4Cx65x76x65x6Cx5Fx54x7Cx43x6Dx5Fx42x6Cx6Fx63x6Bx7Cx66x6Cx6Fx61x74x7Cx43x6Dx5Fx50x61x67x65x5Fx4Ex75x6Dx7Cx43x6Dx5Fx49x74x65x6Dx5Fx49x64x5Fx54x7Cx68x72x65x66x7Cx43x6Dx5Fx49x74x65x6Dx5Fx43x6Fx6Ex74x65x6Ex74x5Fx54x7Cx69x64x7Cx43x6Dx5Fx54x6Fx74x61x6Cx5Fx4Fx62x6Ax7Cx43x6Dx5Fx52x65x70x6Cx79x43x53x53x5Fx4Fx62x6Ax7Cx70x61x72x73x65x49x6Ex74x7Cx63x6Cx61x73x73x7Cx64x69x73x70x6Cx61x79x7Cx6Fx66x7Cx63x6Fx6Dx6Dx65x6Ex74x50x61x67x65x7Cx72x69x67x68x74x7Cx73x70x61x6Ex7Cx72x76x7Cx49x45x5Fx76x65x72x7Cx63x6Dx5Fx61x75x74x68x6Fx72x5Fx72x65x70x6Cx79x7Cx63x6Dx5Fx77x72x61x70x7Cx6Ex61x76x69x67x61x74x6Fx72x7Cx72x65x7Cx67x65x74x49x6Ex74x65x72x6Ex65x74x45x78x70x6Cx6Fx72x65x72x56x65x72x73x69x6Fx6Ex7Cx52x65x67x45x78x70x7Cx7Cx77x68x69x6Cx65x7Cx77x69x64x74x68x7Cx63x6Dx5Fx72x65x70x6Cx79x5Fx63x73x73x7Cx62x72x65x61x6Bx7Cx6Ex6Fx6Ex65x7Cx31x30x30x7Cx63x6Dx5Fx74x6Fx74x61x6Cx7Cx62x6Cx6Fx63x6Bx7Cx6Cx65x66x74x7Cx50x61x67x65x7Cx75x61x7Cx63x6Cx65x61x72x7Cx74x79x70x65x7Cx63x6Dx5Fx70x61x67x65x5Fx63x6Fx70x79x7Cx63x6Dx5Fx70x61x67x65x7Cx63x73x73x7Cx74x65x78x74x7Cx68x74x6Dx6Cx7Cx63x6Dx5Fx62x6Cx6Fx63x6Bx7Cx6Cx6Fx63x61x74x69x6Fx6Ex7Cx72x65x74x75x72x6Ex7Cx6Ex75x6Cx6Cx7Cx70x61x72x73x65x46x6Cx6Fx61x74x7Cx77x69x6Ex64x6Fx77x7Cx66x75x6Ex63x74x69x6Fx6Ex7Cx4Dx53x49x45x7Cx45x78x70x6Cx6Fx72x65x72x7Cx49x6Ex74x65x72x6Ex65x74x7Cx75x73x65x72x41x67x65x6Ex74x7Cx6Ex65x77x7Cx61x70x70x4Ex61x6Dx65x7Cx4Dx69x63x72x6Fx73x6Fx66x74x7Cx65x78x65x63","","x66x72x6Fx6Dx43x68x61x72x43x6Fx64x65","x72x65x70x6Cx61x63x65","x5Cx77x2B","x5Cx62","x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2))) ((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3 29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8] _0x4f09x5(_0x4f09x3) _0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--></script>

If you get a error while saving this code,escape the code above using Postable and then paste it in your template


Step 6: Preview for errors and then Save .

Don’t hesitate to ask questions if you have any problems implementing it in your blog.

What do you think about this move by Blogger ,is it in the right direction ? Will this make Blogger come one step closer to becoming the Best CMS out there ? (It is already the Best Online CMS out there.- Atleast according to Royal Pingdom )