HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

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.

Note* :- Some of the ttemplates made by soratemplates already has this feature.

Conclusion

Congrats !! You have made it. now you have learned that Make Your Blog Full Width, left Sidebar and Right Sidebar With Shortcodes. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Goodbye !! (Goodbye in English!! hahaha).
Make Your Blog Full Width, Left Sidebar and Right Sidebar With Shortcodes Make Your Blog Full Width, Left Sidebar and Right Sidebar With Shortcodes Reviewed by TemplatesYard on July 27, 2017 Rating: 5

21 comments:

  1. Oooooohhhhh, this one of the greatest tutorials for blogger. Thanks very much

    ReplyDelete
  2. http://simsekblog.com/

    not working Pages
    working Post

    why ?

    ReplyDelete
  3. Dude, how do I install the jquery plugin?

    ReplyDelete
    Replies
    1. only install it if your blog doesn't have one.
      http://www.sorabloggingtips.com/2017/07/how-to-add-jquery-in-blogger-and-blogspot-blogs.html

      Delete
  4. It doesn't work on my blog.. I have praticed correctly from your tutorial. I use PIXELZ blogger template. What is the solution?

    Check this screenshot :
    - http://prntscr.com/mejp1a
    - http://prntscr.com/mejpd5

    ReplyDelete
    Replies
    1. It has the feature in built, you don't have to follow this tutorial.

      Delete
  5. Yay! Thanks so much. It worked in my blog. https://www.yangsire.com/

    ReplyDelete
  6. I have brought your Premium healthy template however I cannot add a 'right side' bar. I followed the instructions in this page and it does not show up. Please help.

    ReplyDelete
    Replies
    1. URL:
      https://bakewithjenny.blogspot.com/

      I cannot add a 'right side' bar and I cannot 'Add an Gadget'. Please advise.

      Delete
    2. URL:
      https://bakewithjenny.blogspot.com/
      Cannot add a 'right side bar' to homepage.

      I also cannot add any gadgets. There is no feature for me to 'Add an Gadget'.

      Delete
    3. In this template you cannot add sidebar in homepage.

      Delete
  7. Works only with:
    [left_sidebar]

    The full sidebar does not work

    ReplyDelete
    Replies
    1. https://serneikaravi.blogspot.com/p/blog-page_18.html

      Here it is

      Delete
  8. how do i remove sidebar widget on soratemplate

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization(Adding or Removing stuffs) rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  9. Very good! Is it possible to make the post area width system definitive so that you don't always have to put the code in the posts? Thanks.

    ReplyDelete
    Replies
    1. This code do full width post only in post page.

      Delete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.