Xmas Specials

Sale

Up to 20% Discounts

Holiday Delights

Offers

200+ Items Up for Grabs

Free Gifts

Free

Limited time only.

Hiển thị các bài đăng có nhãn Tutorials. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Tutorials. Hiển thị tất cả bài đăng
With the flexibility of BlogrCart Closet responsive mobile 1st Blogger store theme, blogger store owners can easily include an original (or alternative) price at product post or display it on the product gallery pages. Using this feature, blogger store owners can enhance their products offered to their users & hopefully (but surely) build more sales lead.

Find below the necessary addition(s) to allow to display an "Original Price" (the alternative price) text/tag which Blogger store owners can edit for each products at their Blogger store.

A working example page using an "Original Price" tag/text is located here at http://blogrcart-closet.blogspot.com/2014/12/adding-highlighted-paragraphs-using.html

Note: In order to display the alternative price tag for previous Product Post pages, blogger owners are required to edit each post manually. Use guideline below as reference.


Here is the step-by-step guide to easily install an alternative price aka "Original Price" at BlogrCart Closet responsive Blogger store theme.

Insert the Alternative "Original Price" Editing Box

Go to Settings > Post and Comments > and at Post Template find below codes:-

<tr> 
  <td class="item_price">$ 45.00</td>
</tr>

Now edit the above codes so it should look like below:-

<tr class="custom_price">
  <td class="item_price">$ 25.00</td> 
</tr> 
<tr class="custom_price">
  <td class="label_original_price">
    <span class="label_original">Original Price</span> $ 145.00
  </td>
</tr>

And click Save Settings to save your changes. The highlighted in yellow are the additional codes which was added.

To view the changes, Click the Pencil button to start a New Post and you can view another price below the product price box is included. Edit the required text/integer after "Original Price".

You can edit the "Original Price" text to whatever text you want to display. But always make sure that the "Original Price" text is surrounded within a <span class="label_original">... </span> tag.

Adding the CSS specific Styles

In order to let the "Original Price" to display accordingly to your new setup, add below codes BEFORE/ABOVE </head> in your Template Editor:-

<!-- custom index post styles -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static&quot;'>
<style>
.gallery-product { min-height:400px; }
.product-description { bottom:-20px; }
.label_original_wrapper { width:100%; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }
.label_original_price { display:inline-block; *display:inline; text-decoration: line-through; color:red; }
span.label_original { display:inline-block!important; border:0 none!important; height:1px!important; display:none!important; }
</style>
</b:if>
</b:if>

<!-- custom product post styles -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.label_original_price, span.label_original { text-decoration: line-through; color:red; }
.custom_price { padding-right:20px; display:inline-block!important; *display:inline!important; width:auto!important; }
</style>
</b:if>
</head> <!-- YOUR REFERENCE -->

Click Save Template and view your changes. Of course, there will be none, but once you have start editing the new Auto Post Template with the Added codes above, then the "Original Price" will display in both Product Gallery & Product Post.

Some Quick Explanations

The first part (highlighted orange) are conditional codes for adding styles to the "Original Price" tag at gallery pages & the later (in highlighted cyan) are conditional codes to add styles only at product post pages.

Show Original (Alternative) Price Tutorial E-commence Blogger Store

Đọc thêm »
The send order e-mail & Paypal checkout comes pre-installed with BlogrCart template. The customisation functions have been grouped together at bottom of theme/template codes to optimise page display &  current webpage best practices (loading JavaScript/jQuery after all HTML mark-ups where possible).

Below is the full tutorial to edit & customize the checkout features for BlogrCart Closet Blogger theme. This step-by-step guide will show the IMPORTANT parts to edit according to blogger store owners personal preferences.




1.0 Download &Install Template

Download FREE Version here Download FREEMIUM VERSION

Download PRO version here Download PRO VERSION [FULL]

UNZIP & upload using Blogger dashboard > Template > Backup/Restore > at Upload a template from a file on your hard drive. > click the Choose File button. Once success, preview your new template.

To allow this theme display correctly in mobile screens, turn off Blogger default mobile theme by going to Settings, Mobile section, click the Gear button & select No. Show desktop template on mobile devices. , Then click Save.

More options (PRO Themes) to allow responsive image gallery pop over toggling turn off Blogger default zoom at Settings > Basic > Turn Off/Don't Show image zoom.

2.0 Install Pre-made Pages

For BlogrCart Closet PRO users, the template files comes with license, template file & theme Pages. PRO users can build quickly sample Product Pages including the Send Order page, Success page & Error handling Page. In addition this tutorial is also included for references & future usages.

Upload the file title BlogrCart-Closet-PAGES-MASTER-V-1-0.xml at Settings, Other & Import Blog link, find the file in your computer & upload accordingly making sure the Automatically publish all imported posts and pages is ticked/selected.

3.0 Install Pages

3.1 Send Order Page

PRO users can skip this section.

Go to Pages > Add a Page and at the Title field type in Send Order & click Save. Then click the HTML tab (far left at editor) and copy paste below codes to the editor body.

<div class="row">
  <div class="col-sm-4 col-md-push-8">
    <div class="panel panel-default" id="summary">
      <div class="panel-heading">
        <h4>Order Summary</h4>
      </div>
      <div class="panel-body">
        <small>Below is your order summary &amp; totals.</small>
      </div>
      <div class="table-responsive">
        <table class="table">
        <tbody>
          <tr><th>Description</th><th>Amount</th></tr>
          <tr><td>Quantity in Cart</td><td><span class="simpleCart_quantity"></span></td></tr>
          <tr><td>Amount</td><td><span class="simpleCart_total"></span></td></tr>
          <tr><td>Tax</td><td><span class="simpleCart_tax"></span></td></tr>
          <tr><td>Shipping/Delivery</td><td><span class="simpleCart_shipping"></span></td></tr>
          </tbody>
       </table>
    </div>
    <div class="panel-footer">
    Total Orders for Today: <strong><span class="simpleCart_grandTotal"></span></strong>
    </div>
  </div>
</div> <!-- //end col-sm-4 -->
<div class="col-sm-8 col-md-pull-4">
  <form action="" id="contact" method="post" name="contact" role="form">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a class="btn btn-default pull-right" data-target="#blogrcart-view-modal" data-toggle="modal" href="javascript:;"><i class="fa fa-shopping-cart"></i> View Shopping Cart</a>
          <h3 style="margin: 0;">Send in Orders</h3>
          <small>Details submitted here will not be published.</small>
      </div>
      <div class="panel-body">
        <div class="form-group ">
           <label for="first_name">First Name</label>
           <input class="form-control" id="first_name" name="first_name" placeholder="Required" type="text" />        </div>
        <div class="form-group">
          <label for="last_name">Last Name</label>
          <input class="form-control" id="last_name" name="last_name" placeholder="Required" type="text" />
        </div>
        <div class="form-group">
          <label for="email">Your E-mail</label>
          <input class="form-control" id="email" name="email" placeholder="Required" type="email" />
        </div>
        <div class="form-group">
          <label for="phone">Phone @ H/P</label>
          <input class="form-control" id="phone" name="phone" placeholder="Required" type="tel" />        </div>
        <div class="form-group">
          <label for="address">Delivery Address</label>
          <textarea class="form-control" id="address" name="address" placeholder="Required" rows="5"></textarea>
        </div>
        <div class="form-group">
          <label for="postcode">Postal Code</label>
          <input class="form-control" id="postcode" name="postcode" type="text" />
        </div>
        <div class="form-group">
          <label for="message">Your Message</label>
          <textarea class="form-control" id="message" name="message" placeholder="Optional" rows="5"></textarea>
          <span class="helper-block text-info small">Please include additional messages to us here.</span>
        </div>
        <div class="well well-sm">
          A copy of your order details will be sent to you via e-mail. Please check your email inbox upon success submissions. Thank You.
        </div>
      </div>
      <div class="panel-footer text-center">
        <button class="btn btn-default" id="send-order" type="submit">Send Order</button>
      </div>
    </div>
  </form> <!-- //end form -->
</div> <!-- //end col-sm-8 -->
<div class="clearfix"></div>
</div> <!-- //end row -->

Click the Compose tab and click Save. At the Compose page editor this page will display awkwardly, but since it is using Bootstrap classes & styles, automatically the form fields & texts will align accordingly like at the demo page.

Once satisfied, click the Publish Page button. View this page by clicking the View link underneath this Page link. Grab the full URL of this page at your browser bar. An example would look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html

Save this URL at your favourite text editor for template settings further below.

3.1 Install Success Page

PRO users can skip this section

Go to Pages > Add a Page and at the Title field type in Success & click Save. Edit the page body as this page will be the return page from success orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/success.html

Save this URL at your favourite text editor.

3.2 Install Error Page

PRO users can skip this section

Go to Pages > click Add a Page & at the Title field type in Error & click Save. Edit the page body as this page will be the error handling page upon users non delivered orders using the send order form functionality checkout. Click Publish Page & view this page full URL at your browser bar by clicking the View link. An example URL will look like so:-

http://YOUR-BLOG-NAME.blogspot.com/p/success.html

Save this URL at your favourite text editor.

4.0 Install Auto Post Template

PRO users can skip this section. Advance Auto Product Post Template included in theme download. Use & install.

A fully customised auto post template comes pre-included with BlogrCart template. This is important as most of the shopping cart functionalities & also how the product displays depends on this template.

At Blogger Dashboard > Settings > Post & Comments > Post Template > click the Add link to insert the codes below:-

<table border="1" cellpadding="5" class="product-description" rules="all"><tbody>
<tr class="label-description">
    <td class="item_description">This is the short description for any product post. Write a short description for the product here in not less than 300 words. This will create a unique content for your product hence giving the extra boost from search engine results. Edit this table for short description section only. Use Blogger "Remove Formatting" functions to remove copied &amp; paste texts alignment, fonts, text colours &amp; text styles.<br />
<br />
Use table #1 for product Main Image.<br />
Use table #2 for product Thumbnail Images.<br />
Use table #3 for product details &amp; other specifications.<br />
Use "Jump Break" AFTER table #1 to prevent Auto Pagination. By default the "Jump Break has been assigned.<br />
<br />
Edit &amp; remove sample texts if not in use.<br />
Option size &amp; colour only available on PRO versions. Get 1 now!</td>
</tr>
<tr>
    <td class="item_price">$ 45.00</td>
</tr>
<tr>
    <td class="label-quantity"><input class="form-control item_quantity" size="2" type="text" value="1" />&nbsp;&nbsp;
<a class="btn btn-default item_add btn-lg" href="javascript:;">Add to Cart</a></td>
</tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-image" rules="all">  <tbody>
<tr>
    <td class="thumb_image"><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yt6X8Y2YDShx4Z4aTsDslQicCWCvY7cR5fyXKyXusxnRYoL6MGp3IGuY7Tor_ZuEobeH-ajzVXmI5c24iVXPasj090jHNUNF-xxbMH39zIdqhrdHwJmVYedwlxr4FpdGCiPm9wxmfWc/s1600/GrassGreen_W_F.jpg" height="320" width="197" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</td></tr>
</tbody></table>
<!--more--><div class="product-detail product-tabs">
<ul class="nav nav-tabs text-center">
<li class="active" role="presentation"><a href="javascript:;" role="tab">
    Product Details</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane in active">
<table border="1" cellpadding="5" class="product-thumbnail" rules="all"><tbody>
<tr><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUh9P_iJz99aaZ4q4ZaJAfP2np2zeH01io0H8jn9W_nqzDpgGvaCDHv4OP34fZF45FJkWmSuYgYLQ-aIYyhEpwfmOiqnVVUf1Z-1ad5-BRHSYF-N3UIGKDPJPyd1S6s-ibF9siPQBH7E/s1600/GrassGreen_W_B.jpg" height="200" width="112" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s1600/product_placeholder.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg" height="125" width="125" /></a></div>
</td></tr>
</tbody></table>
<table border="1" cellpadding="5" class="product-detail-section" rules="all"><tbody>
<tr>
<td>This is a&nbsp;<code>tab-section</code>&nbsp;Edit the text within this box/table in Blogger editor easily &amp; this panel automatically displays &amp; styled automatically. Use Blogger "Remove Formatting" functions to remove copied &amp; paste texts alignment, fonts, text colours &amp; text styles.<br />
<br />
This section is very useful in providing informational details for a particular product. Use this as your standard/repeated product size &amp; dimensions section. Adding a table within this section is not semantic &amp; will break the product display layout styles.</td>
</tr>
</tbody></table>
</div>
</div>
</div>

The auto template comes with a price field, a product thumbnail field, supporting product image field, a description section & a detail section to insert relevant contents for your Product Post. Edit the contents during posting your product. Example product images & thumbnail images are included for reference. Please use as your guide.

Note: The tab functionalities, select by colour, select by size is included in PRO template file download.  PRO users have the full codes with custom functions used with the advance auto post template.

Click Save Settings. Preview the example Auto Post Template by clicking the Pancil icon to start a Post.

5.0 Customising Shopping Cart Functions

Plug-in Location

All shopping cart functionalities is located at HTML99 widget unless otherwise stated. Expand by clicking the small black triangle arrow next to the relevant codes required to view the detail settings.

5.1 Shopping Cart Currency

Expand <b:includable id='cart-currency-settings'> & view the detail settings. Information has been included in template for reference.

Use short codes (highlighted) for available pre-set currencies provided with shopping cart plug-in. Below are the example codes:-

<script>
//<![CDATA[
simpleCart.currency('USD');
/*
* Available pre-set currencies
* Currencies supported by Paypal 
* Ref: https://developer.paypal.com/docs/classic/api/currency_codes/
code: "USD" "US Dollar",
code: "AUD", "Australian Dollar",
code: "BRL", "Brazilian Real",
code: "CAD", "Canadian Dollar",
code: "CZK", "Czech Koruna",
code: "DKK", "Danish Krone",
code: "EUR", "Euro",
code: "HKD", "Hong Kong Dollar",
code: "HUF", "Hungarian Forint",
code: "ILS", "Israeli New Sheqel",
code: "JPY", "Japanese Yen",
code: "MYR", "Ringgit Malaysia",
code: "MXN", "Mexican Peso",
code: "NOK", "Norwegian Krone",
code: "NZD", "New Zealand Dollar",
code: "PHP", "Philipine Peso",
code: "PLN", "Polish Zloty",
code: "GBP", "Pound Sterling",
code: "RUB", "Russian Ruble",
code: "SGD", "Singapore Dollar",
code: "SEK", "Swedish Krona",
code: "CHF", "Swiss Franc",
code: "TWD", "Taiwan New Dolar",
code: "THB", "Thai Baht",
code: "TUR", "Turkish Lira",
*
* Currencies not supported by Paypal but included as pre-sets
*
code: "BTC", "Bitcoin",
code: "INR", "India Rupee",
code: "IDR", "Indonesia Rupiah",
code: "NGN", "Nigeria Naira",
code: "VND", "Vietnam Dong",
code: "PKR", "Pakistan Rupee",
********************************
//]]>
</script>

If the currency of choice is not listed as pre-sets, or blogger store owners require currency customizations, replace the short codes above and use the built-in currency customisations as follows.:-

<script>
//<![CDATA[
simpleCart.currency({
  code: "USD",
  name: "US Dollar",
  symbol: "$ ",
  delimiter: ",",
  decimal: ".",
  after: false,
  accuracy: 2
});
//]]>
</script>

The example above is to set USD as currency code along with the currency detail preferences.

5.2 Shopping Cart Email Settings

Important: The saved URL from Section 3.2, Section 3.3 is required here. Insert the URL's based on the default settings provided. Leave/remove the http:// pattern when editing.

Expand <b:includable id='cart-email-settings'> & view the detail settings.

Information & guides has been included for your customization. Follow the exact default "pattern" in order to make the send order functions work properly.

5.3 Shopping Cart Paypal Settings

Expand <b:includable id='cart-paypal-settings'> & view the detail settings.

Information & guides has been included for references. Follow the exact default patterns for customizations.

5.4 Shopping Cart Shipping Settings

Expand <b:includable id='cart-shipping-settings'> & view the detail settings.

Information & guides has been included for references. In addition, users can set the shipping settings chich will be calculated by:-

  1. Shipping/delivery based on percentage of items in cart
  2. Shipping/delivery based on quantity of items in cart
  3. A fixed shipping/delivery per item in cart.

By default, a fixed shipping/delivery price is activated at USD5/item

5.5 Shopping Cart Tax Settings

Expand <b:includable id='cart-tax-settings'> & view the detail settings.

Information & guides has been included for references. The tax rate is calculated based on the items & delivery charges applies.

Set the percentage of the tax here. By default the template is using 5% or 0.05 percent from shopping cart totals.

6.0 Additional Set Up

This template comes with responsive modal pop-up to view the cart summary. The shopping cart can be viewed & accessed in any page using the link located at the floating/fixed main navigation bar.

To edit the Send Order button to your Send Order page at HTML99 widget find <b:includable id='modal-cart'> & expand the code to view the mark-up.

Find below codes to edit to your Send Order page

<a class='btn btn-danger small text-center' href='http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html'>
   <i class='fa fa-envelope'/>  Send Order
</a>

Change http://YOUR-BLOG-NAME.blogspot.com/p/send-order.html to the Send Order page URL you have saved in Section 3.1. Click Save Template & test your changes.

End of Tutorial

Find all about theme customisations, code snippets here at demo pages. 

Tutorial & Guide Install BlogrCart Closet Theme

Đọc thêm »
You do not have too! The image pop over zoom effect actually does it by itself. The built-in functions installed with BlogrCart Closet theme replaces the "tired" image zoom effect brought in by Blogger (as default) since that it breaks your product images upon using on smaller screen sizes.

So make sure the default zoom functions is de-activated in your Blogger dashboard Settings.

Basically the add on functions introduced for this theme  is generated by Bootstrap 3 core plug-ins. The designers added additional custom functions in making sure the theme product images are loading correctly while using the pop over image zoom effect & some toggling functionalities.

Find what images the built-in responsive zoom functions compiles for the pop over image zoom effect for a product post at below section.


Offer
The responsive image zoom functions gathers images from your main product image (table #2) and images you have inserted in the add-in product thumbnail images (table #3). All images inserted in this table will output with the zoom initialization.

Test it here, the main product image (our t-shirt model facing front) & the supporting thumbnail images (the no image available & t-shirt model facing back) will be shown when togling the images using the responsive zoom functions.

Users do not have to require to arrange the images as by default the theme will automatically re-arrange the images accordingly for best product presentation.

How to Edit the Pop Over Image Toggle Zoom Effect

Đọc thêm »
BlogrCart Closet PRO Blogger store theme comes with an advance auto post template to ease editing before publishing a product listing. It also comes with the select options by size and color for users to use with the product selection.

By defaul 2 type of options is pre-included with the auto post template & theme owners can customize on which one to use or omit for a product.

Find below the details on how to customise the select options pre-built for blogrCart Closet PRO Blogger store theme.


Sold Out
The advance auto post template comes with a select by size & color options for a dedicated product post. Below is an example:-

For a select by colour options:-

<select class="some_class">
  <option value="n/a">- Select Colour -</option>
  <option value="Blue">Blue</option>
  <option value="White">White</option>
  <option value="Black">Black</option>
</select>

For a select by size

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
</select>

Editing Select Options

To edit the select option, edit the value you want to display in cart at highlighted in cyan & the same value to display in select box drop down edit in yellow.

The values highlighted in red is reserved & serves as helpers for users select option during product display.

Adding More Select Options

To add in more select options, add the values & texts pairs within the <option>..</option> mark-up. An example would look like so:-

<select class="some_class">
  <option value="n/a">- Select Size-</option>
  <option value="Size S">Size S</option>
  <option value="Size M">Size M</option>
  <option value="Size L">Size L</option>
  <option value="Size XL">Size XL</option>
  <option value="Size XXL">Size XXL</option>
</select>

In the example above the ones in bold is the added option values & the text to display in our new & edited select box. The new text will display in this select drop down & the values will be sent to cart accordingly upon users selection.

Removing a Select Option

If a select option is not required, you can delete/remove the entire codes within the <select>...</select> mark-ups.

Or a much simpler method, at your Blogger editor Compose screen, click at an empty space on the right side of the select box you require to remove. Then press Backspace at your keyboard & the select box will be deleted/removed.

Use back again the mark-up if you require to add in options for later product updates,

Examples can be seen throughout this demo site whereas we removed the select options, the quantity field & also the price (if not required), and it does not break your theme layout.

Product Posting Edit Drop Down Select Options

Đọc thêm »
Some of the search engine optimisation equipped for BlogrCart Closet Blogger store/shop theme is using the Open Graph meta's or more commonly known as "og". These meta tags, apart from the more common tags used, like meta title & meta description comes pre-installed with this awesome theme.

Open Graph meta tags are most commonly used by social media search robots such as Facebook, other than popular search engines like Yahoo etc. These tags explains to search robots, what the pages is about & let them understand each & every product post more clearly, upon their first visit.

For BlogrCart Closet Blogger store theme, the additional meta tags has already been included in templates codes where the contents are dynamically inserted. It also comes with a fallback, if store owners have forgotten to write down the meta description or even if the page could not find any image.

Find below some of the customisations required to customise to a Blogger store preference.


Offer
There are not much of customisations required for the Open Graph meta tags pre-installed with BlogrCart Closet Blogger store theme because the contents here is dynamically inserted by Blogger.

In template editor, at the very beginning of template codes within the <head...</head> tag find codes as follows:-

  <meta content='*' property='og:description'/>
  <meta content='*' property='og:title'/>
  <meta content='*' property='og:url'/>
  <meta content='*' property='og:site_name'/>
  <meta content='*' property='og:type'/>
  <meta content='*' property='og:image'/>

Where * is the dynamic inserts for any page in a Blogger store.

To include a default image, if an image can not be found at your Blogger store, find below codes to edit:-

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxlWz69sPITlRJ56oqIOo8YUYz-acqPK7IRjFvihyphenhyphenjKmwcQil19tAZWVoYu6ZXcVKPFbxZ2T_F1MLPHU5FZGiJDYVJC69G2iP-mB5HQR4C0I1Pcdx8S2oDWiA6T3AR0P6XXKuk-nYpBs/s1600/BlogrCart+Closet.jpeg' property='og:image'/>

Edit/change the URL highlighted above to the URL of your uploaded image as fallback if an image can not be found.

Editing Open Graph Meta Tags for Search Engine Robot

Đọc thêm »
Only a few hours after we have released this Blogger theme for download, we had a question on how in the demo the 1st paragraphs has a slightly bigger font size. Can one install or use it with BlogrCart Closet Blogger store theme?

Yes on can! The technique used is by using Bootstrap 3 pre-built styling class to enhance user readability for text or a paragraph. Find below how easy to install/use the styling class either automatically when posting a product or editing a particular post.
$ 25.00
Original Price $ 145.00
   Add to Cart
The technique used to highlight the first paragraph is by using the "lead" classname which comes with Bootstrap 3.++ mobile 1st template framework. Since that Blogger editor will strip the <p>..</p> tags, users are required to use the <span>...</span> tags instead. Below is an example:-

<span class="lead:>Example text for the first paragraphs.</span>

The text containing in between the <span> tag will inherit the extra styles hence adding the extra height (and weight) for the fonts proportionately at any screen sizes.

You can add it anywhere in your Blogger theme using this technique, for semantic mark-up, the "lead" class is an indicator of a leading text which would be most appropriate for the 1st paragraph of any page.

Adding Highlighted Paragraphs Using Bootstrap 3 Pre-assigned Class-name

Đọc thêm »
BlogrCart Closet Blogger store theme comes with a 404 Page Not Found page pre-installed. It is a simple page complete with Page Not Found meta tags to help users when error in not finding a specific product (or page) at a Blogger store.

Find below the customisations offered for the 404 Page Not Found pre-built with BlogrCart Closet theme.


Customising Background Image

In template editor find /* 404 Page Not Found */ inside the CSS stylesheets. Below is the example code used:-

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBBPe4uBytkb9G5SfQ-O9gOjbTk5_QjZjLkgGs47P3TzpJIub6domDl7wuoTvjDyMAj5AelTN6xSpeJspbwKVRjYqpBPHPjJER_qHiQ2bi213fJWld_ChFJkCygX4Z3NcSdoLFF34u_Y/s1600/blogr+template+free+theme+download-compressed.jpg);
}

To customise, change the URL highlighted above to an uploaded image. Best image size would be 1600px X 1200 px at 4:3 image ratio. Best rendered for images below 100kb in file size.

Editing Page Text

To edit the page title & paragraphs, find below codes slightly at the bottom of template codes.

<!-- 404 page not found starts -->

  <div class='inset-shadow tint' id='error_page'>
    <div class='container'>
      <div class='row'>
        <div class='col-sm-12 text-center inverse'>
          <h1 class='inverse'>Ooops... We&#39;re Sorry</h1>
          <p>The page you&#39;re looking for must have been moved.</p>
          <p>Use our internal navigation links to assist your findings.</p><br/>
        </div>
      </div>
      <div class='row text-center'>
 <form action='/search' id='blogrcart-search' method='get' role='search'>
          <div class='input-group input-group-lg col-sm-6 col-sm-offset-3'>
            <input class='form-control' name='q' placeholder='Search' type='search'/>
            <span class='input-group-btn'>
            <button class='btn btn-default' type='submit'><i class='fa fa-search fa-lg'/></button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>

<!-- 404 page not found ends -->

To edit the page titles edit at the cyan highlighted texts.

To edit the page paragraphs. edit at the green highlighted texts.

Click Save Template & preview your changes.


Customising 404 Page Not Found Pre-Installed Page

Đọc thêm »
By default BlogrCart Closet Blogger store theme comes with a built-in send order e-mail checkout & this service is made available for free, UNLIMITED sends e-mail orders & can be accessed 24/7. This service is maintained & updated to allow sending of emails on the "fly" without using any database or keeping any data.

This will allow almost to instant sending of orders from any BlogrCart powered theme checkout form. Later, Blogger store owners can follow up with the sent orders via e-mail to their users or customers. In addition, various customization can be included for blog store owner e-mail settings to enhance user's checkout experience.

The plug-in installed with BlogrCart Closet can also allow Blogger store users to use alternate send order scripts, pointing to where the scripts are hosted to. Find below, the easy set-ups to include a plug-in scipt to host your own send order mail functions for BlogrCart Closet Blogger theme:-   


Back-up your Blogger template (if required), at template editor, Jump to Widget HTML99 & find <b:includable id='cart-email-settings'> expand the code to view the details. Below is an example:-

  simpleCart({
    checkout:{ type:"SendForm", method:"POST", extra_data: {
      firstname:document.getElementById("first_name").value,
      lastname:document.getElementById("last_name").value,
      email:document.getElementById("email").value,
      phone:document.getElementById("phone").value,
      address:document.getElementById("address").value,
      postcode:document.getElementById("postcode").value,
      comments:document.getElementById("message").value,
      }
    }
  });

Now, to use your own send order script with BlogrCart Closet Blogger store theme, change the codes as follows:-

  simpleCart({
    checkout:{
      type:"SendForm",
      method:"POST",
      myCheckout: true,
      url: "http://YOUR-URL-TO-SELF-HOSTED-SEND-ORDER-SCRIPT.php",
      extra_data: {
      firstname:document.getElementById("first_name").value,
      lastname:document.getElementById("last_name").value,
      email:document.getElementById("email").value,
      phone:document.getElementById("phone").value,
      address:document.getElementById("address").value,
      postcode:document.getElementById("postcode").value,
      comments:document.getElementById("message").value,
      }
    }
  });

The highlighted codes above are the additional functions to tell the plug-in that you want to send the checkout data to your own self hosted send order script.

At myCheckout: true will tell the shopping cart plug-in to activate a custom checkout to point to a custom URL.

At url: "http://YOUR-URL-TO-SELF-HOSTED-SEND-ORDER-SCRIPT.php" is telling the shopping cart plug-in to point to the new hosted script for further processing.

How To Add Self Hosted Send Order Email Scipts

Đọc thêm »
BlogrCart Closet Blogger theme comes equipped with fixed (or floating) main navigation menu bar with drop links, un-obstructive pop-up modal search field, a pop-up modal view shopping cart & social icon links. In addition drop down Labels widget comes pre-installed to help up organise your store products categorisations.

Below are indicators & tutorial on how to customise BlogCart Closet theme fixed/floating main navigation link bar with example codes & detail instructions for customisations. 
$ 45.00
   Add to Cart
In your template editor below are the codes for the floating/fixed main navigation bar powered by Bootstrap 3.0++ responsive framework.

<!-- Start navigation -->
<nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
  <div class='container'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class='navbar-header'>
      <button class='navbar-toggle collapsed' data-target='#blogrcart-navbar' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
        <span class='icon-bar'/>
      </button>
      <a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
    </div>
    <div class='collapse navbar-collapse' id='blogrcart-navbar'>
      <ul class='nav navbar-nav'>
        <li class='active'><a href='#'>About Us <span class='sr-only'>(current)</span></a></li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Collection <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
       <li class='category-drop'>
              <b:section class='category1' id='category1' showaddelement='no'>
                <b:widget id='Label4' locked='false' title='Labels' type='Label'>
                  <b:includable id='main'>
          <b:if cond='data:display == &quot;list&quot;'>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
       </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;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='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
       </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;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 href='/search/Label'>Show All Collection</a></li>
          </ul>
        </li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Category <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
       <li class='category-drop'>
              <b:section class='category2' id='category2' showaddelement='no'>
                <b:widget id='Label3' locked='false' title='Labels' type='Label'>
                  <b:includable id='main'>
          <b:if cond='data:display == &quot;list&quot;'>
            <b:loop values='data:labels' var='label'>
              <b:if cond='data:blog.url == data:label.url'>
                <a class='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
       </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;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='navbar-text' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;nbsp;<span class='badge text-right' dir='ltr'><data:label.count/></span>
                  </b:if>
       </a>
                <b:else/>
                 <a class='navbar-text' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>
                  <b:if cond='data:showFreqNumbers'>
                  &amp;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 href='/search/Label'>Show All Categories</a></li>
          </ul>
        </li>
        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>FAQ&#39;s</a></li>
            <li><a href='#'>Feedback</a></li>
            <li><a href='#'>Reviews</a></li>
            <li><a href='#'>Privacy Policy</a></li>
            <li><a href='#'>Terms &amp; Conditions</a></li>
            <li><a href='#'>Returns &amp; Refunds</a></li>
            <li><a href='#'>Delivery Status</a></li>
            <li class='divider'/>
            <li><a href='#'>Sitemap</a></li>
          </ul>
        </li>
        <li><a href='#'>Look Book</a></li>
        <li><a href='#'>Contact Us</a></li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a data-target='#blogrcart-view' data-toggle='modal' href='#'><i class='fa fa-shopping-cart fa-lg'/>  <span class='simpleCart_quantity'/> in Cart</a></li>
        <li><a data-target='#blogrcart-search' data-toggle='modal' href='#'><i class='fa fa-search fa-lg'/></a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- End navigation -->
To edit your main navigation brand text find below codes:-

<a class='navbar-brand' expr:href='data:blog.homepageUrl'>Brand</a>

Edit the brand text to your Blogger store name.

To add an image logo that will display for any screen sizes at your main navigation edit above codes to look like so:-

<a class ='navbar-brand' expr:href='data:blog.homepageUrl'>
  <img src='URL-TO-YOUR-UPLOADED-IMAGE' alt='' />
</a>

Using the default template navigation settings, to edit a single link (without drop downs) on the main navigation, find code below:-

<li><a href='#'>Look Book</a></li><li><a href='#'>Contact Us</a></li>

Replace the # (hash) to your internal page url & edit the text before or in between <a href='...'>Edit Text to Display</a>.

To edit a drop down menu, below is the example codes:-

        <li class='dropdown'>
          <a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Support <span class='caret'/></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href='#'>FAQ&#39;s</a></li>
            <li><a href='#'>Feedback</a></li>
            <li><a href='#'>Reviews</a></li>
            <li><a href='#'>Privacy Policy</a></li>
            <li><a href='#'>Terms &amp; Conditions</a></li>
            <li><a href='#'>Returns &amp; Refunds</a></li>
            <li><a href='#'>Delivery Status</a></li>
            <li class='divider'/>
            <li><a href='#'>Sitemap</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.
The Labels widget is located within the main navigation for this template. To edit the links, go to any page and click the "Category" or "Collection" link to view the drop down links.

To edit, click the "pencil" icon and select the Labels you want to display as a link, for a drop down menu. Make sure you have created the related Labels at your Blogger post editor to make it available here & displayed by the widget, 

Edit Bootstrap Navigation Links Drop Downs How To's

Đọc thêm »
BlogrCart Closet Blogger theme comes with 2 sets of responsive touch/mouse enabled image carousel powered by slick.js. The first set will be located on Product Pages, and the other on Gallery & Static Pages. This tutorial & code snippet explains the settings for the image carousel used in a blogger pages either than the Product Post pages.

Both of the image carousel settings are using Google + Blogger API, a request callback to grab a blog content feed & display at a page. In order to minimize load & best optimisation practices, BlogrCart Closet theme only fetches the product image, price tag & product title.

The image fetched are also scalable & very useful to set the width & height of displayed images within the carousel image container. Find below the location & settings built for the related image carousel in pages other than the Product Post pages below.
$ 25.00
   Add to Cart
PRO Version
In Blogger template editor, find <div id='footer-top'> which is located half way to the bottom of template codes.

Above this code is the settings for the image carousel. This functions is requesting Google+Blogger API blog feed.

<script>
  //<![CDATA[
  var numProducts = 8;    // nos of product image to render
  var showProductTitle = true;   // set to true to display product title
  var productTitleLength = 35;   // if showProductTitle, set the product title length
  var showProductImage = true;   // set to true to display product images
  var image_size = 240;    // if showProductImage, set the max product image size in pixels
  var display_button = true;   // set to true to display button
  var button_text = 'View Now';   // if Display_button, set text to display for product button
  var showProductSummary = false;  // set to true to display product summary
  var numProductSummaryChars = 120;  // if showpostummary true, set nos of chars to display
  var showProductPrice = true;    // set to true to show product price
  var currency_after = false;   // if showProductPrice, set to true to place currency after price
  var currency = "RM";    // if showProductPrice, set the currency
  var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed
  //]]>
</script>

The snippet above are self explanatory. Edit to your requirement.

In addition, the images (& products) is displayed according to the respective Labels set for easy categorisation. Edit the Label tag at the highlighted code snippet below:-

<script expr:src='&quot;/feeds/posts/default/-/Features?published&amp;alt=json-in-script&amp;callback=productDisplay&quot;' type='text/javascript'/>

The text is case sensitive & spaces are replaced with %20. Edit to your preferred Label of choice. Example product post must be published with assigned Label in order to initiate the image carousel.

Freemium Version
Freemium theme has a much simplified code settings to see how this plug-in works & for test purposes. Below are the example settings codes:-

<script>
  //<![CDATA[
  var numProducts = 8;            // nos of product image to render
  var showProductSummary = true;  // set to true to display product summary
  var numProductSummaryChars = 120;  // if showpostummary true, set nos of chars to display
  var default_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIKcsm_Mz_D1BmxqzG9eLi8xEl4sRiOo4zC2RO7Jm4OuT8R8oJKNNRy0HwYLDhw4b4pz2EAAcmxbgPV4KCrz5XQVTC6iRp7O84inKMpI54AFea1Fw0gNKgXuOSdWCcBVA5hMdThw03DBB/s200/product_placeholder.jpg'; // default image if no image displayed
  //]]>
</script>

Edit to personal requirement. Editing the required product post to display by Labels is using the same features as above.
Due to the touch/swipe enabled image carousel responsive behaviour, users can set the image transition duration, auto pagination timing & the amount of products to display & cycle through.

At template editor, use Jump To Widget, select HTML99 & find this code <b:includable id='carousel-settings'>, expand the code to view the detail settings.

An example would look like so:-

<script>
//<![CDATA[
$(function(){ 
  $('.related-products').slick({
    dots: true,
    infinite: true,      // Image transition in milliseconds
    speed: 300,
    slidesToShow: 6,     // Nos of products to show
    slidesToScroll: 2,   // Nos of product to cycle
    autoplay: true,
    autoplaySpeed: 3000, // autoplay speed transition in milliseconds
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});
//]]>
</script>

Comments & indicators included. Edit to your requirement.

The settings above shares the same settings for the related product image carousel located in Product Post pages.

Edit & Customize Image Carousel in Gallery Pages

Đọc thêm »
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.

Error Saving Blogger Widget in Layout Using Bootstrap

Đọc thêm »

Shop by Favourites

Subscribe Our Newsletter

Get the latest OFFERS right to your mail.