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">Now Save your template and go to pages to add sitemap.
/*<![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>
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.
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
Reviewed by TemplatesYard
on
July 27, 2017
Rating:
Oooooohhhhh, this one of the greatest tutorials for blogger. Thanks very much
ReplyDeletehttp://simsekblog.com/
ReplyDeletenot working Pages
working Post
why ?
You haven't added the codes properly.
DeleteDude, how do I install the jquery plugin?
ReplyDeleteonly install it if your blog doesn't have one.
Deletehttp://www.sorabloggingtips.com/2017/07/how-to-add-jquery-in-blogger-and-blogspot-blogs.html
It doesn't work on my blog.. I have praticed correctly from your tutorial. I use PIXELZ blogger template. What is the solution?
ReplyDeleteCheck this screenshot :
- http://prntscr.com/mejp1a
- http://prntscr.com/mejpd5
It has the feature in built, you don't have to follow this tutorial.
DeleteYay! Thanks so much. It worked in my blog. https://www.yangsire.com/
ReplyDeleteI 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.
ReplyDeleteShare your blog url.
DeleteURL:
Deletehttps://bakewithjenny.blogspot.com/
I cannot add a 'right side' bar and I cannot 'Add an Gadget'. Please advise.
URL:
Deletehttps://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'.
In this template you cannot add sidebar in homepage.
DeleteWorks only with:
ReplyDelete[left_sidebar]
The full sidebar does not work
Share your blog url.
Deletehttps://serneikaravi.blogspot.com/p/blog-page_18.html
DeleteHere it is
how do i remove sidebar widget on soratemplate
ReplyDeleteSorry 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.
DeleteVery 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.
ReplyDeleteThis code do full width post only in post page.
Delete