Labels widget comes pre-installed to help up organize (or categorize) your store products using Blogger editor built in Labels features.Below are indicators & tutorial on how to customize BlogCart MNMLIS theme responsive main navigation link bar with example codes & detail instructions for customization provided.
In your template editor below are the codes for the floating/fixed main navigation bar powered by Bootstrap 3.0++ responsive framework.
<!-- NAVIGATIONS -->
<div class='collapse navbar-collapse navbar-right' id='blogcart-collapse-2'>
<ul class='nav navbar-nav'>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Catalogue <i class='fa fa-angle-down'/></a>
<ul class='dropdown-menu' role='menu'>
<li class='category-drop'>
<b:section class='category1' id='category1' showaddelement='no'>
<b:widget id='Label99' locked='true' title='Catalogue' type='Label'>
<b:includable id='main'>
<b:if cond='data:display == "list"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='' expr:href='data:label.url + "?max-results=24"'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
<b:else/>
<a class='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=24"'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
</b:if>
</b:loop>
<b:else/>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='' expr:href='data:label.url'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
<b:else/>
<a class='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=24"'> <data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
</b:if>
</b:loop>
</b:if>
<!--b:include name='quickedit'/-->
</b:includable>
</b:widget>
</b:section>
</li>
<li class='divider'/>
<li><a expr:href='data:blog.homepageUrl + "search/label/?max-results=24"'>View All</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collections <i class='fa fa-angle-down'/></a>
<ul class='dropdown-menu' role='menu'>
<li class='category-drop'>
<b:section class='category2' id='category2' showaddelement='no'>
<b:widget id='Label98' locked='true' title='Collections' type='Label'>
<b:includable id='main'>
<b:if cond='data:display == "list"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='' expr:href='data:label.url + "?max-results=24"'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
<b:else/>
<a class='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=24"'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
</b:if>
</b:loop>
<b:else/>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='' expr:href='data:label.url'><data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
<b:else/>
<a class='' expr:dir='data:blog.languageDirection' expr:href='data:label.url + "?max-results=24"'> <data:label.name/>
<b:if cond='data:showFreqNumbers'>
&nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
</b:if>
</a>
</b:if>
</b:loop>
</b:if>
<!--b:include name='quickedit'/-->
</b:includable>
</b:widget>
</b:section>
</li>
<li class='divider'/>
<li><a expr:href='data:blog.homepageUrl + "search/label/?max-results=24"'>View All</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown 1 <i class='fa fa-angle-down'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>About Theme</a></li>
<li><a href='#'>Example Blogger Page</a></li>
<li><a href='#'>Example Blogger Page</a></li>
<li><a href='#'>Track Delivery</a></li>
<li class='divider'/>
<li><a href='#'>Tutorials</a></li>
</ul>
</li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>About Us <i class='fa fa-angle-down'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Company Background</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Testimonials</a></li>
<li><a href='#'>Current Activities</a></li>
<li class='divider'/>
<li><a href='#'>Returns</a></li>
<li><a href='#'>Terms Service</a></li>
<li><a href='#'>Privasi Policy</a></li>
</ul>
</li>
<li><a href='/search/label/Blog'>Blog</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
<!-- NAVIGATIONS -->
1.0 Customizing Logo Text [UPDATED]
Editing the logo text, go to Blogger Layout section find Header widget & click Edit. Insert the text required.To customize the fonts height & color, use Blogger Template Desiner Advance options & choose your desired font styles. View it live the changes you've made & resize the text height accordingly.
New for PRO version 1.1 & Freemium V1.0
Users can insert a logo image using the Header gadget/widget. At Blogger Layout, find Header gadget/widget & click Edit. At the pop up window display, to replace the text used, click choose image to upload an image from your computer.Note that to maintain visual display for the main navigation, the image logo will resize to accordingly to a maximum 50px in height. So best to upload an image for a logo at 50px in height to 300px in width so it will tuck nicely at the main navigation bar on any screen size.
1.1 Customizing a Single Link
Using the default template navigation settings, to edit a single link (without drop downs) on the main navigation, find code below:-<li><a href='#'>Blog</a></li><li><a href='#'>Blog</a></li>
Replace the
# (hash) to your internal page url & edit the text before or in between <a href='...'>Edit Text to Display Here</a>.1.2 Customizing Drop Down Links
To edit a drop down menu, below is an example:- <li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>About Us <i class='fa fa-angle-down'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Company Background</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Testimonials</a></li>
<li><a href='#'>Current Activities</a></li>
<li class='divider'/>
<li><a href='#'>Returns</a></li>
<li><a href='#'>Terms Service</a></li>
<li><a href='#'>Privacy Policy</a></li>
</ul>
</li>
Every
<li> with a class of dropdown will automatically display the children links as a drop down menu. Refer the code structure above to apply the pre-installed styles by Bootstrap 3.0++ responsive framework that comes with the template.In addition adding a
<li class='divider'/> will add a line in between your drop down links.
1.3 Customizing Labels for Categorization
TheLabels widget is located within the main navigation for this template. To edit the links, go to Blogger Layout & find the Labels widget located below the Header widget. Click Edit and use the many functions offered to display the links.Important! Make sure blog owners have published several posts with
Labels assigned to. This will automatically included using the Labels widget here.To edit the
Labels drop down display text at main navigation bar, in template editing mode, find or Jump to Widget Labels98 or Labels99 . An example link will look like so:-<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collections <i class='fa fa-angle-down'/></a>
Edit the text highlighted in yellow.
Currently this demo is using Intense Debate commenting system. By default Blogger comment system is activated.