| 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 |
| Add to Cart |
 |
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. |
