Error Saving Blogger Widget in Layout Using Bootstrap

When developing & designing Blogger themes, various issues will occur as most of the layout & widget functionalities has been customise to meet the new functionalities introduced for a Blogger theme. One of the most common issues would be at Blogger Layout upon arranging & saving widgets. This issue are commonly faced when downloading/installing free Blogger template due to poor coding practices. A common warning will appear - "An error occurred. Please refresh page and save again." when attempting to save. When integrating Bootstrap responsive mobile first framework with Blogger, certain tags & name classes will cause the above error to show up. A common tag & name class would be the <nav> & .navbar class name used by Bootstrap which is actually reserved for Blogger default Navbar widget. Find below some tricks users can use while integrating & using Bootstrap tags & class names to prevent thrown errors by Blogger dashboard Layout.

$ 45.00

- Select Colour - Blue White Black

- Select Size - Size S Size M Size L

Add to Cart

• Navbar Tag & Classnames
• Div to Nav Helper

To prevent errors during saving widgets in Blogger Layout, the Bootstrap <nav> & navbar classname conflicts with Blogger's reserved navbar widget. When using this tag on a Blogger theme, an error will occur hence when rearranging widgets in Layout would not be saved. Here's a typical <nav> code structure used by Bootstrap 3.++ mobile first framework. <nav class='navbar navbar-inverse navbar- fixed -top' role='navigation'>   <div class='container'>     ... lots of codes ...   </div> </nav> To avoid errors by Blogger in Layout, change the <nav>...</nav> tags to <div>...</div>. Now the mark-up codes will look like so:- <div class='navbar navbar-inverse navbar-fixed-top' role='navigation'>   <div class='container'>     ... lots of codes ...   </div> </div> Although this mark-up codes is not proper or semantic to indicate a navigation, at least now users can use the Layout & save their changes. You can change back using the <nav>...</nav> tags later, when all customisations have been completed since that you will not be arranging your widgets in Layout. If you are worried about semantic mark-up, then jump to the next section for a quick snippet adding JavaScript/jQuery to dynamically change your <div> to <nav> when you're page is loaded/displayed.

This is a small snippet using JavaScript (jQuery) to dynamically change your <div> to using <nav> for a more semantic mark-up due to Blogger Layout thrown errors. This code should be used after/below the jQuery library Or even better at the bottom of your theme before/above the </body> tag. Note: This helper has already pre-installed in BlogrCart Closet Blogger theme, <script> //<![CDATA[ // Helper to switch <nav> tags due to Blogger Layout conflicts $(document).ready(function(){   var blogrCartDiv = $('div.navbar');   var blogrCartNav = $('<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"></nav>');   blogrCartDiv.before(blogrCartNav);   blogrCartNav.append(blogrCartDiv.contents());   blogrCartDiv.remove(); }); //]]> </script> Explainations First we are creating a variable for our target <div> & our new <nav> tag. Next we insert our new saved variables (<nav>) before the existing <div> at our page. Then we grab all the HTML contents (while preserving the mark-up) from our <div> & insert into our new <nav> variable. This will allow all mark-up usable from our previous <div>. Last, we delete/remove our previous <div> & leaving the new semantic mark-up (<nav>) since that we have already copied the entire contents in previous steps. The changes happens so quickly upon page display & right after the loaded javascript library. Now you can use & save in Layout without hard-coding the navigation everytime using Blogger Layout for editing.