How to Make Your Blog Full Width, Left Sidebar and Right Sidebar With Shortcodes

Today we will learn how to make a blogger blog post Full width, shift the sidebar from right to left and vice versa. This is very advance tutorial and you can't find it anywhere else in the internet. After following this tutorial you will get freedom to to choose these three option's and you can switch to any style without any coding knowledge, You can activate any style by adding the shortcode in your post or page editor, below we have provide the live demo's for Full width, Left Sidebar and Right Sidebar blog post's.enjoy!!

Adding HTML Script

Now this is the most essential part of the tutorial and you have to do it very carefully. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<script type="text/javascript">

  /*<![CDATA[*/

// jquery replacetext plugin https://github.com/cowboy/jquery-replacetext

(function(e){e.fn.replaceText=function(t,n,r){return this.each(function(){var i=this.firstChild,s,o,u=[];if(i){do{if(i.nodeType===3){s=i.nodeValue;o=s.replace(t,n);if(o!==s){if(!r&&/</.test(o)){e(i).before(o);u.push(i)}else{i.nodeValue=o}}}}while(i=i.nextSibling)}u.length&&e(u).remove()})}})(jQuery);

   var s = "[full_width]";

    var o = "[left_sidebar]";

    var u = "[right_sidebar]";

    $(".post *").replaceText(s, "<style>@media screen and (min-width: 980px){.item #main-wrapper{width:100% !important;max-width:100%!important;float:none!important;border-right:0!important;border-left:0!important}.item #sidebar-wrapper{display:none;}.item #main-wrapper #main{margin-left:0!important;margin-right:0!important}}</style>");

    $(".post-body *").replaceText(o, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:right!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:left!important;padding-left:0!important;}}</style>");

    $(".post-body *").replaceText(u, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:left!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:right!important;padding-left:0!important;}}</style>");

 /*]]>*/

</script>

Now Save your template and go to pages to add sitemap.

Note :- the widget works on jquery so you have to install jquery plugin if you haven't installed it yet..

Step-2 ( Adding Shortcodes ) - Most Important !!

Now this is the most essential part of the tutorial and you have to do it very carefully.Go to your blogger dashboard > Post/Pages > Edit any existing or add new.
On the post/page content, add the following code in the content area.

Full Width Post;

Go to Pages or Posts > New Page or Post

On the new page content/post content after adding the page/post title, add the [full_width] code in the page content area.

Left Sidebar;

Go to Pages or Posts > New Page or Post
On the new page content/post content after adding the page/post title, add the [left sidebar] code in the page content area.

Right Sidebar;

Go to Pages or Posts > New Page or Post
On the new page content/post content after adding the page/post title, add the [right sidebar] code in the page content area.

Now click publish button and check the published page to see the newly added sitemap widget. ;)

Note:- This widget mainly work's with templates made by Soratemplates, but if it is still not working on your site, Don't get panic just comment down your blog address.

Share Share Tweet Share Share Share