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

Infinite Scrolling in Blogger

infinity Symbol

Infinite Scrolling refers to the ability to continuously load new content on a page without refreshing it which gives an appearance of endlessness. It is used by major sites like Google+ , Facebook and Twitter and pretty successfully at that. The biggest benefit being exposure to more content and faster browsing . We will see how to integrate it into our Blogger blog by using Infinite Ajax Scroll jQuery plugin

Features

1. Faster Loading
2. Content Exposure increase many fold
3. More intuitive for Touch devices
4. Best suited for image-heavy blogs
5. Simplified Navigation
6. Higher user Engagement 

Adding it to your Blog

Across the Whole Blog
It will work on the Home Page , Label Pages , Archive Pages as well as Post Pages ( the previous post will be loaded in full )

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Only Home Page, Label Pages and Archive Pages

It will not work in the Post Pages

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js’></script>
<script type=’text/javascript’>
//<![CDATA[
(function($){‘use strict’;Date.now=Date.now||function(){return+new Date()};$.ias=function(g){var h=$.extend({},$.ias.defaults,g);var i=new $.ias.util();var j=new $.ias.paging(h.scrollContainer);var k=(h.history?new $.ias.history():false);var l=this;function init(){var d;j.onChangePage(function(a,b,c){if(k){k.setPage(a,c)}h.onPageChange.call(this,a,c,b)});reset();if(k&&k.havePage()){stop_scroll();d=k.getPage();i.forceScrollTop(function(){var a;if(d>1){paginateToPage(d);a=get_scroll_threshold(true);$(‘html, body’).scrollTop(a)}else{reset()}})}return l}init();function reset(){hide_pagination();h.scrollContainer.scroll(scroll_handler)}function scroll_handler(){var a,scrThreshold;a=i.getCurrentScrollOffset(h.scrollContainer);scrThreshold=get_scroll_threshold();if(a>=scrThreshold){if(get_current_page()>=h.triggerPageThreshold){stop_scroll();show_trigger(function(){paginate(a)})}else{paginate(a)}}}function stop_scroll(){h.scrollContainer.unbind(‘scroll’,scroll_handler)}function hide_pagination(){$(h.pagination).hide()}function get_scroll_threshold(a){var b,threshold;b=$(h.container).find(h.item).last();if(b.size()===0){return 0}threshold=b.offset().top+b.height();if(!a){threshold+=h.thresholdMargin}return threshold}function paginate(d,e){var f;f=$(h.next).attr(‘href’);if(!f){if(h.noneleft){$(h.container).find(h.item).last().after(h.noneleft)}return stop_scroll()}if(h.beforePageChange&&$.isFunction(h.beforePageChange)){if(h.beforePageChange(d,f)===false){return}}j.pushPages(d,f);stop_scroll();show_loader();loadItems(f,function(a,b){var c=h.onLoadItems.call(this,b),curLastItem;if(c!==false){$(b).hide();curLastItem=$(h.container).find(h.item).last();curLastItem.after(b);$(b).fadeIn()}f=$(h.next,a).attr(‘href’);$(h.pagination).replaceWith($(h.pagination,a));remove_loader();hide_pagination();if(f){reset()}else{stop_scroll()}h.onRenderComplete.call(this,b);if(e){e.call(this)}})}function loadItems(b,c,d){var e=[],container,startTime=Date.now(),diffTime,self;d=d||h.loaderDelay;$.get(b,null,function(a){container=$(h.container,a).eq(0);if(0===container.length){container=$(a).filter(h.container).eq(0)}if(container){container.find(h.item).each(function(){e.push(this)})}if(c){self=this;diffTime=Date.now()-startTime;if(diffTime<d){setTimeout(function(){c.call(self,a,e)},d-diffTime)}else{c.call(self,a,e)}}},’html’)}function paginateToPage(a){var b=get_scroll_threshold(true);if(b>0){paginate(b,function(){stop_scroll();if((j.getCurPageNum(b)+1)<a){paginateToPage(a);$(‘html,body’).animate({‘scrollTop’:b},400,’swing’)}else{$(‘html,body’).animate({‘scrollTop’:b},1000,’swing’);reset()}})}}function get_current_page(){var a=i.getCurrentScrollOffset(h.scrollContainer);return j.getCurPageNum(a)}function get_loader(){var a=$(‘.ias_loader’);if(a.size()===0){a=$(‘<div class="ias_loader">’+h.loader+'</div>’);a.hide()}return a}function show_loader(){var a=get_loader(),el;if(h.customLoaderProc!==false){h.customLoaderProc(a)}else{el=$(h.container).find(h.item).last();el.after(a);a.fadeIn()}}function remove_loader(){var a=get_loader();a.remove()}function get_trigger(a){var b=$(‘.ias_trigger’);if(b.size()===0){b=$(‘<div class="ias_trigger"><a href="#">’+h.trigger+'</a></div>’);b.hide()}$(‘a’,b).off(‘click’).on(‘click’,function(){remove_trigger();a.call();return false});return b}function show_trigger(a){var b=get_trigger(a),el;el=$(h.container).find(h.item).last();el.after(b);b.fadeIn()}function remove_trigger(){var a=get_trigger();a.remove()}};$.ias.defaults={container:’.blog-posts’,scrollContainer:$(window),item:’.post-outer’,pagination:’#blog-pager’,next:’#blog-pager-older-link a’,loader:'<img src="http://1.bp.blogspot.com/-luorIIJzBBo/USnR6gOh-1I/AAAAAAAAJ_c/VEh_iQfKHqE/s1600/loading.gif"/>’,loaderDelay:600,triggerPageThreshold:8,trigger:’Load more Posts’,thresholdMargin:-500,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){ FB.XFBML.parse(); gapi.plusone.go(); twttr.widgets.load(); _gaq.push([‘_trackPageview’]); },customLoaderProc:false};$.ias.util=function(){var c=false;var d=false;var e=this;function init(){$(window).load(function(){c=true})}init();this.forceScrollTop=function(a){$(‘html,body’).scrollTop(0);if(!d){if(!c){setTimeout(function(){e.forceScrollTop(a)},1)}else{a.call();d=true}}};this.getCurrentScrollOffset=function(a){var b,wndHeight;if(a.get(0)===window){b=a.scrollTop()}else{b=a.offset().top}wndHeight=a.height();return b+wndHeight}};$.ias.paging=function(){var c=[[0,document.location.toString()]];var d=function(){};var e=1;var f=new $.ias.util();function init(){$(window).scroll(scroll_handler)}init();function scroll_handler(){var a,curPageNum,curPagebreak,scrOffset,urlPage;a=f.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(a);curPagebreak=getCurPagebreak(a);if(e!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];d.call({},curPageNum,scrOffset,urlPage)}e=curPageNum}function getCurPageNum(a){for(var i=(c.length-1);i>0;i–){if(a>c[i][0]){return i+1}}return 1}this.getCurPageNum=function(a){a=a||f.getCurrentScrollOffset($(window));return getCurPageNum(a)};function getCurPagebreak(a){for(var i=(c.length-1);i>=0;i–){if(a>c[i][0]){return c[i]}}return null}this.onChangePage=function(a){d=a};this.pushPages=function(a,b){c.push([a,b])}};$.ias.history=function(){var e=false;var f=false;function init(){f=!!(window.history&&history.pushState&&history.replaceState);f=false}init();this.setPage=function(a,b){this.updateState({page:a},”,b)};this.havePage=function(){return(this.getState()!==false)};this.getPage=function(){var a;if(this.havePage()){a=this.getState();return a.page}return 1};this.getState=function(){var a,stateObj,pageNum;if(f){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{a=(window.location.hash.substring(0,7)===’#/page/’);if(a){pageNum=parseInt(window.location.hash.replace(‘#/page/’,”),10);return{page:pageNum}}}return false};this.updateState=function(a,b,c){if(e){this.replaceState(a,b,c)}else{this.pushState(a,b,c)}};this.pushState=function(a,b,c){var d;if(f){history.pushState({ias:a},b,c)}else{d=(a.page>0?’#/page/’+a.page:”);window.location.hash=d}e=true};this.replaceState=function(a,b,c){if(f){history.replaceState({ias:a},b,c)}else{this.pushState(a,b,c)}}}})(jQuery);
//]]>
</script><script>jQuery.ias();</script>
<a href=”http://www.stylifyyourblog.com” alt=”Blogger Templates” >Blogger Templates and Widgets</a>

Video Tutorial

Some Tips

+1 , Tweet and Like Buttons will be loaded after every AJAX request , so if you have these social sharing buttons beneath every post then don’t worry about them not showing

When the new post is loaded beneath a post ( If you choose the first option ) , then the Threaded comments in the newly loaded post will not work

To replace the Loader image , just search for .gif in the Widget code and replace that whole URL with another Image

To change the number of times before the user is asked to load more pages , search for triggerPageThreshold: and replace the numeric value ahead of it , if for example you set the value as 4 then the plugin will load new content four times before it asks you weather you want to see more content or not

onRenderComplete:function() function is used to tell the plugin what to do after the page has been successfully loaded , Here I have added a snippet which tells Google Analytics that a new page is loaded so that GA registers every AJAX request as a New Page visit

loaderDelay: tell how much milliseconds to wait before the new content is actually added to the page

For information about all the other options available in this plugin visit IAS Options

If you face any troubles in implementing , feel free to ask me via comments

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 )

New Blogger Template Showroom

showroom Blogger Template

Showroom is inspired from Tumblr template of the same name by Mixpanel. It has a eye-catching design and comes inbuilt with Related Posts widget , Infinite Post Scrolling and 7 Post types using Labels. It integrates with the Blogger Template Designer seamlessly and also adds custom fields which make editing Tags , Menu and Search Box easier. Search Engine Optimization has been done to Page and Post Titles as well as a Google PageSpeed score of 97% makes it ultra fast.

Screenshot

showroom template screenshot

Feature List

Infinite Post Scrolling
7 Post Types using Labels
Lazy Loading Share Buttons
SEO Optimized Post and Page Titles
97% Google PageSpeed Score
Related Post Widget
Blogger Template Designer support
Customized Label Design
Eye-catching Sidebar design
Using Web Fonts Noto Serif and YesterYear
Supports Google+ Comments 
Fallback Comment Design 
Cross Browser Compatible
Fresh Layout
And Much More…

Features in Detail

Infinite Post Scrolling



infinite post loading image


Using jQuery and AJAX , an unending number of Posts can be loaded without leaving the page. This is by default functional on the HomePage , Label Pages , Archive Pages as well as Search Pages.

Blogger Template Designer



custom blogger template designer


Custom options to easily change the background color and text color of Search Box , Menu links and Tags.

SEO Optimized and Ultra fast Load Times



google pagespeed score


The Post and Page Titles have been modified to make the template search engine friendly. Even though it supports Blogger Template Designer fully ( which loads with itself a lot of CSS and JavaScript) , it has got a 97% Google PageSpeed Score and loads blazingly fast.

7 Post Types



music label icon example


Using a bit of clever CSS and some Blogger Data tags , each post can be assigned a special post type with the help of Blogger Labels. The supported Blogger Labels are Image , Link , Blog , Chat , Video , Music and Quote . Each of these categories will have a separate Label Icon assigned to it .

Lazy Loading Share Buttons and Related Post Widget


Related Post and Lazy load share buttons

Tweet , Like and +1 buttons are present under each Post , as well a Related Post widget which relies on the Blogger Labels to recommend blog posts that are likely to interest the readers.

Google+ Comments support and Fallback Design


comment design

The template supports the newly released Google+ Comments for Blogger and In case you don’t want to shift now , there is a Attractive Fallback Comment design as well . If you use Google+ Comments for your Blog , then the comment count will by itself update to show the numbers of comments received by Google+ Comments as well.

I am thankful to MixPanel for allowing me to port this theme to Blogger. Soon I will be writing a tutorial to implement MixPanel Event based Analytics into Blogger , stay tuned for it.

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 !

New Blogger Template : FlatUI

.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(https://gumroad.com/assets/favicon.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;}

FlatUI Blogger Template

Inspired from the the recently released Flat UI Kit from DesignModo FlatUI Blogger Template is a fully responsive and feature-rich template. One of its main advantages over other Blogger templates is the ease with which you can customize the various components via the Blogger Template Designer. Many custom options have been added to the Template Designer to make it simpler to modify from a single location.

Features

Responsive

Responsive Blogger Template Desktop
Responsive Blogger Template TabletResponsive Blogger Template Mobile

Blogger Template Designer

Template Designer blogger

You can easily change the Color and Fonts of Buttons , Tags , etc from the Template Designer itself

Load Time

Google Page Speed Insights

With a Google Page Speed Score of 95% and a Page Size in 200KB range, FlatUI Blogger Template is optimized for fast browsing and makes the less than 20 HTTP Requests

Infinite Post Scrolling

Infinite Post Loading

Using jQuery and AJAX , an unending number of Posts can be loaded without leaving the page. This is by default functional on the HomePage as well as the Label Pages.

Read More Hack

Read More Default Style

The Read More hack is by default enabled and gives a more pro look to the blog.

Tags

Tag

The label/tags style is inbuilt , just make sure that the Cloud option is selected in the Blogger Label Widget Options.

Share Privacy Buttons

share privacy buttons

Scripts from respective social networks are loaded only when when you toggle it to load

These were some of the features , install it into your blog and explore all the other features . If you face any problems then feel free to ask in the comments.