How to Update Blogger Layout, Default Widget and b:Skin Version?
If you want to update your blogger layout, b:skin and widget then this tutorial will be handy for you. Step-by-step guide to update blogger to latest version.
Blogger has recently updated couple of things including their theme skin, Layout and default widget version. You might see your current Blogger theme’s layout has not updated but you can update it instantly.
Previously Blogger automatically updated the previous Layout version with new version. But this time it seems to me that we have to update it manually, because still blogger didn’t rollover the new version of the layout and widget version.
Probably there is a reason behind this, if blogger rollover updates automatically then many themes’ backend and frontend will break instantly. It could badly affect all blogger default and custom themes. Because I have tried to integrate some script from new themes to old theme and many CSS script stopped working. So it would be better to update manually.
Blogger has recently released new theme and you will see those theme’s layout, and widget version is bit different from older version. Blogger classic template users will understand it clearly the differences between old and new version.
In this tutorial I will show you about updating the old b:skin, Layout and Widget version with newer version.
There are zillions of users are currently using default and custom blogger themes but with older layout and widget version. Please have a look on the below Layout screenshot this is an old blogger layout that you are using in your default and custom blogger theme. Formerly blogger has updated automatically and many blogger themes’ layout has broken for this update.
 |
| Old Blogger layout Version 2 |
And now see the new Blogger Layout from below screenshot. I have added updated layout and widget script.
 |
| New Blogger layout Version 3 |
It’s looking similar to previous one but functionally this layout has improved from previous version. And you can see some changes on icons and text. If widget is visible then it shows eye icon and if widget is not visible then it shows a slash on eye icon. Instead of Edit text blogger has added pen icon to edit the widget.
What are the benefits of updated blogger layout and widget?
You might want to make your blogger theme more productive and compatible with all types of scripts and latest widget, and to do this you must use updated version of blogger layout and widget.
There are several benefits a blogger platform user can avail from this small update. You know blogger is constantly improving their platform to cope with latest trend and features. More progress means it will become compatible with all latest script, widget and features. If you update your blogger layout and widget then you will get certain benefits. Such as:
- Your blogger theme’s layout would be more stable and functional.
- All latest widget will be compatible with update layout.
- You can easily customize your blogger theme from theme designer.
- You can control the widget customization from theme customizer option.
- Webmaster can work on new layout smoothly and effectively.
- New blogger layout and default widget design is more eye-catchy.
- Your blog’s overall performance will increase.
So there are many benefits to use updated layout and widget version. Now I will show you about updating process of your current layout, widget and b:skin.
How to Update Blogger Layout to Version 3?
In 2016, Blogger has updated their layout and rollover it automatically, that was the 2nd version of blogger layout and for this reason many blogger themes’ layout has broken. You will see many blogger theme that developed before 2016 their layout has completely broken. For this reason many blogger theme developer has updated their theme’s layout script to fix the layout.
Recently in 2017, blogger has updated their layout to 3rd version but we can use both 2nd and 3rd version and blogger won’t force to automatic update. But you must update your blogger theme layout to use latest version of blogger widget. New version of Blogger widget also works with previous layout version.
This is very simple process to update blogger layout. You can update your old blogger layout instantly by following below tutorial.
Step #1: Login to your Blogger account and Go to blogger dashboard.
Step #2: From blogger dashboard click
Theme->Edit HTML
Step #3: Now locate below script at the top of your Blogger theme. You will find below code exactly in old blogger theme. But if you are using custom blogger theme then the script would be little bit different but similar.
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Step #4: Now simple locate this expr:dir='data:blog.languageDirection' line and before this line add this b:layoutsVersion='3' line. This will update your theme’s current Layout to Version 3. The final script would be like below.
<html b:version='2' class='v2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Step #5: Click Save theme button to save changes.
Now your blogger theme’s layout has updated but in updated layout we have to use updated default widget. However you can use any custom made blogger widget.
How to Update Blogger Widget to Version 2?
I have seen there are many changes in blogger updated widgets. For example: Popular post widget now more stable. Previously if we use large image then popular post widget image become blur but in new version of widget image won’t blur even you can display large image without blurring or fading.
In some theme I have seen popular post widget got Read More link at the end of the post snippet. So this is really great feature on latest Popular post widget.
Similarly, Blogger has brought many changes on Featured post, HTML/JavaScript (You Beauty!) gadget and other widgets. To update your blogger default widget version go through the below instructions.
 |
| Popular Post Widget Version 2 in Blogger Platform |
In some theme I have seen popular post widget got Read More link at the end of the post snippet. So this is really great feature on latest Popular post widget.
 |
| Featured Post Widget Version 2 in Blogger Platform |
Similarly, Blogger has brought many changes on Featured post, HTML/JavaScript (You Beauty!) gadget and other widgets. To update your blogger default widget version go through the below instructions.
Step #1: From blogger dashboard click
Theme->Edit HTML and locate below script. I have included updated blogger layout version code in below script.
<html b:version='2' class='v2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Step #2: Now add b:defaultwidgetversion='2' this code after b:layoutsVersion='3' code.
Step #3: And to use the default widget just add below default widget markup after/below ]]></b:skin> or </b:template-skin> markup.
<b:defaultmarkups>
<b:defaultmarkup type='Common'>
<b:includable id='responsiveImage' var='settings'>
<b:comment>Add in the high-res thumb for youtube images.</b:comment>
<b:if cond='not data:settings.image.isYoutube'>
<b:include data='settings' name='super.responsiveImage'/>
<b:else/>
<b:with value='resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 1152, "4:3")' var='highRes'>
<b:include data='{ image: data:settings.image, imageSizes: [320,490], sourceSizes: "(max-width: 640px) 100vw, (max-width: 1024px) 576px, 490px", enhancedSourceset: data:highRes }' name='super.responsiveImage'/>
</b:with>
</b:if>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='BlogSearch'>
<b:includable id='searchSubmit'>
<b:if cond='data:widget.sectionId == "search_top"'>
<label>
<input type='submit'/>
<b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>
</label>
<b:else/>
<b:include name='super.searchSubmit'/>
</b:if>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='AdSense,Blog'>
<b:includable id='defaultAdUnit'>
<!-- Clear out style (need non-empty string) -->
<b:with value='"/* Done in css. */"' var='style'>
<b:include name='super.defaultAdUnit'/>
</b:with>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>
<b:includable id='sharingButtonContent'>
<b:message name='messages.share'/>
</b:includable>
<b:includable id='postLabels'>
<b:include cond='data:view.isSingleItem and data:widget.type == "Blog"' name='super.postLabels'/>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>
<b:include name='super.headerByline'/>
<b:else/>
<b:include data='{ items: ["author", "timestamp"] }' name='headerBylineOverride'/>
</b:if>
</b:includable>
<b:includable id='footerBylines'>
<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>
<b:include name='super.footerBylines'/>
<b:else/>
<b:include data='{ items: [["share", "comments"]] }' name='footerBylinesOverride'/>
</b:if>
</b:includable>
<b:includable id='emailPostIcon'>
<!-- Replace icon with text -->
<span class='byline'>
<a class='flat-button' expr:href='data:post.emailPostUrl'><data:messages.emailPost/></a>
</span>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Blog'>
<b:includable id='main'>
<b:if cond='not data:posts.any'>
<div class='no-posts'>
<b:eval expr='data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere'/>
</div>
</b:if>
<!-- Display title on homepage -->
<b:if cond='data:posts.any and data:view.isHomepage'>
<h3 class='title'><data:messages.latestPosts/></h3>
</b:if>
<!-- Filter out the featured post, but only on the homepage. -->
<b:with value='(data:widgets.FeaturedPost filter w => w.sectionId == "page_body") map (w => w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post => post.id not in data:featuredPostIds) : data:posts' var='posts'>
<b:include name='super.main'/>
</b:with>
</b:with>
</b:includable>
<b:includable id='commentFormIframeSrc' var='post'>
<b:with value='data:template.isAlternateRendering ? ("&skinvariant=" + data:template.variant) : ""' var='variantParam'>
<a expr:href='data:post.commentFormIframeSrc + "&skin=soho" + data:variantParam' id='comment-editor-src'/>
</b:with>
</b:includable>
<b:includable id='commentForm' var='post'>
<b:with value='"90px"' var='cmtIframeInitialHeight'>
<b:include data='post' name='super.commentForm'/>
</b:with>
</b:includable>
<b:includable id='threadedCommentForm' var='post'>
<b:with value='"90px"' var='cmtIframeInitialHeight'>
<b:include data='post' name='super.threadedCommentForm'/>
</b:with>
</b:includable>
<b:includable id='postCommentsAndAd' var='post'>
<!-- Always render inline ad inside container -->
<div class='post-outer-container'>
<div class='post-outer'>
<b:include data='post' name='post'/>
</div>
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
<b:include cond='data:post.includeAd and data:post.adNumber lt (data:view.isHomepage ? 2 : 3)' data='post' name='inlineAd'/>
</div>
</b:includable>
<b:includable id='post' var='post'>
<b:if cond='data:view.isSingleItem'>
<div class='post-sidebar'>
<b:if cond='data:widgets.Blog.first.allBylineItems.share and data:post.shareUrl'>
<div class='post-sidebar-item post-share-buttons'>
<b:with value='data:widget.instanceId + "-" + (data:regionName ?: "byline") + "-" + data:post.id' var='sharingId'>
<b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, shareUrl: data:post.shareUrl, platforms: data:blog.sharing.platforms, }' name='sharingButtons'/>
</b:with>
</div>
</b:if>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels and data:post.labels'>
<div class='post-sidebar-item post-sidebar-labels'>
<div><data:messages.labels/></div>
<ul>
<b:loop index='i' values='data:post.labels' var='label'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:loop>
</ul>
</div>
</b:if>
</div>
</b:if>
<div class='post'>
<b:class cond='data:view.isMultipleItems and data:post.featuredImage' name='has-featured-image'/>
<b:class cond='data:view.isMultipleItems and not data:post.featuredImage' name='no-featured-image'/>
<b:include data='post' name='postMeta'/>
<b:if cond='data:view.isSingleItem'>
<b:include name='headerByline'/>
<b:include data='post' name='postTitle'/>
<div class='post-body-container'>
<b:include data='post' name='postBody'/>
</div>
<b:else/>
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail'>
<a b:whitespace='remove' expr:href='data:post.url'>
<b:comment>Max width is 576, so max size @ 2x is 1152.</b:comment>
<b:include data='{ image: data:post.featuredImage, imageSizes: [320,490,576,1152], sourceSizes: "(max-width: 576px) 100vw, (max-width: 1024px) 576px, 490px" }' name='responsiveImage'/>
</a>
<b:include name='headerByline'/>
</div>
<b:else/>
<b:include name='headerByline'/>
</b:if>
<b:include data='post' name='postTitle'/>
</b:if>
<b:include data='post' name='postFooter'/>
</div>
</b:includable>
<b:includable id='feedLinks'>
<!-- Don't render -->
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='BlogArchive'>
<b:includable id='main' var='this'>
<details class='collapsible extendable'>
<b:attr cond='data:view.isArchive' name='open' value='open'/>
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.archive' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='flat'>
<b:include data='{ buttonClass: "flat-button", items: data:this.data, itemSet: "data", itemsMarkup: "super.flat" }' name='extendableItems'/>
</b:includable>
<b:includable id='hierarchy'>
<b:include data='{ buttonClass: "flat-button", limit: 1, items: data:this.data, itemSet: "data", itemsMarkup: "super.hierarchy" }' name='extendableItems'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='FeaturedPost'>
<b:includable id='main'>
<b:with value='data:messages.featured' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:includable>
<b:includable id='snippetedPostContent'>
<b:with value='data:postDisplay.showFeaturedImage and data:post.featuredImage' var='hasImage'>
<div class='post-content'>
<b:class cond='data:hasImage' name='has-featured-image'/>
<b:class cond='not data:hasImage' name='no-featured-image'/>
<!-- Change the order and add a snippet container -->
<b:include cond='data:hasImage' data='post' name='snippetedPostThumbnail'/>
<div class='post-text-container'>
<b:include name='headerByline'/>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:with value='"featured-post"' var='snippetPrefix'>
<b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
</b:with>
<div class='post-footer'>
<b:include name='footerBylines'/>
<!-- TODO(sarnesjo): Use the postJumpLink call (in case it's been customized). -->
<a class='jump-link flat-button' expr:href='data:post.url'><data:messages.readMore/></a>
</div>
</div>
</div>
</b:with>
</b:includable>
<b:includable id='snippetedPostByline' var='post'>
<b:include name='headerByline'/>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<b:include data='{image: data:featuredImage, maxSize: 954, selector: ".hero-thumb"}' name='responsiveImageStyle'/>
<a class='thumb-link' expr:href='data:post.url'><div class='thumb hero-thumb'/></a>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Header'>
<b:includable id='image'>
<b:include name='super.image'/>
<!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->
<b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>
</b:includable>
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Label'>
<b:includable id='main' var='this'>
<details class='collapsible extendable'>
<b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
<b:with value='true' var='renderAsDetails'>
<b:with value='data:messages.labels' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:with>
</details>
</b:includable>
<b:includable id='list'>
<b:include data='{ buttonClass: "flat-button", items: data:this.labels, itemSet: "labels", itemsMarkup: "super.list" }' name='extendableItems'/>
</b:includable>
<b:includable id='cloud'>
<b:include data='{ buttonClass: "flat-button", items: data:this.labels, itemSet: "labels", itemsMarkup: "super.cloud" }' name='extendableItems'/>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='PageList'>
<b:includable id='content'>
<div class='widget-content'>
<b:if cond='data:widget.sectionId == "page_list_top"'>
<b:include name='overflowablePageList'/>
<b:else/>
<b:include name='pageList'/>
</b:if>
</div>
</b:includable>
<b:includable id='overflowButton'>
<a><data:messages.moreEllipsis/></a>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='PopularPosts'>
<b:includable id='main'>
<!-- Default the title to 'Popular posts'. -->
<b:with value='data:messages.popularPosts' var='defaultTitle'>
<b:include name='super.main'/>
</b:with>
</b:includable>
<b:includable id='snippetedPostContent'>
<div class='post'>
<b:class cond='data:post.featuredImage' name='has-featured-image'/>
<b:class cond='not data:post.featuredImage' name='no-featured-image'/>
<b:if cond='data:post.featuredImage'>
<div class='snippet-thumbnail'>
<a b:whitespace='remove' expr:href='data:post.url'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [330,660,1320], sourceSizes: "(max-width: 660px) 100vw, 660px" }' name='responsiveImage'/>
</a>
<b:include name='headerByline'/>
</div>
<b:else/>
<b:include name='headerByline'/>
</b:if>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<div class='post-footer'>
<b:include name='footerBylines'/>
</div>
</div>
</b:includable>
</b:defaultmarkup>
<b:defaultmarkup type='Profile'>
<b:includable id='main' var='this'>
<!-- Remove widget title -->
<b:include name='content'/>
</b:includable>
<b:includable id='teamProfileLink'>
<!-- Remove background image, add "Visit profile" message -->
<a class='profile-link g-profile' expr:href='data:userUrl'>
<b:include name='profileImage'/>
<div class='profile-name-wrapper'>
<div class='profile-name'><data:display-name/></div>
<div class='visit-profile'><data:messages.visitProfile/></div>
</div>
</a>
</b:includable>
<b:includable id='userProfileLink'>
<!-- Remove background image -->
<a class='profile-link g-profile' expr:href='data:userUrl' rel='author'>
<data:displayname/>
</a>
</b:includable>
<b:includable id='viewProfileLink'>
<!-- Change message to "Visit profile" -->
<a class='profile-link' expr:href='data:userUrl' rel='author'>
<data:messages.visitProfile/>
</a>
</b:includable>
<b:includable id='defaultProfileImage'>
<div class='default-avatar-wrapper'>
<b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>
</div>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
Step #4: Click Save theme button to take the changes effect instantly.
Now check your blogger Layout and see all widget is displaying with new icons. In your new widget version some old blogger widget may not support. So if you are using any custom widget then it may stop working in new version.
How to update b:skin version in Blogger?
Generally in side b:skin we add all CSS script and define variables. Blogger also updated their b:skin version to support all new CSS scripts and Webkit features.
You can update your current b:skin to newer version very easily. Please go through the below step-by-step instructions.
Step #1: Edit your blogger template by click
Theme->Edit HTML and locate below script. <b:skin><![CDATA[/*
Step #2: Now replace the above script by below scrip.
<b:skin version='1.0.0'><![CDATA[/*
Step #3: Finally Click Save theme to make changes.
Your blogger theme has now updated to latest version. And this update will enable you to use all latest CSS scripts.
That’s all about current update of Blogger theme. I hope you have already updated your Blogger theme’s Layout, Widget, b:skin by following above step-by-step guidelines. And now your default and custom theme has become more compatible with all latest script.
If you have any suggestions then feel free to share in comment section. I am always glad to listen to my blog readers. Thank you.
30 comments
Thanks for your query. I have updated the article. For using default widget you must use all default widget markup. Please check the markup file under Default widget update section in Step #3:.
Thank you. :-bd
Everything is working fine. I have tested. Please use custom heading design script from this below tutorial.
http://www.bloggerspice.com/2015/01/how-to-add-10-sub-headline-design-for-Blogger-Blog-post.html
To check different heading design Replace
.post h3{
with
.post h2{
or
.post h4{
but keep the widget script same.
Thank you. :)
After adding the markup, remove the popular post widget and again add it. I hope it will work now.
Because popular post is working in my demo site. But I think snippet has still problem. I will work on it to solve the issue.
Thank you.
here
How are you? After a long time i again contact to you and need your little help.
Read above post and I remove some coding error on my website. Thanks for this amazing post.
I also want to learn about hero image on blogger home page. Will you please make a post for how to create hero image in blogger home page.
Please make a post on this.
Sumit Kumar Gogawat
Thanks for your comment. Now a days i am too much busy with my job and custom Blogging work order. But i will publish about hero image soon.
type of info in such a perfect method of writing?
I have a presentation next week, and I am on the
look for such information.
Thanks for your lovely feedback.