Edit Footer & Credit Navigation Links with Social Icons

By default BlogrCart Closet Blogger theme comes pre-installed with footer navigational links, social media icons, a section to display Blogger store branding preferences with a back to top arrow button. The background is using a bg-inverse class which gives a dark/black background colour.

In any text element use the inverse class tag helper to target text & links so the text will display a whitish colour especially at the footer & credit sections.

Users can also add in default Blogger widgets using Blogger Layout & automatically the text colours & links will inherit the footer colours assigned. Most of the default widget styles is served by Blogger widgets CSS default styles which is injected automatically by Blogger upon the blog page rendering.
$ 35.00
   Add to Cart
To edit the footer/credits navigational links, find this element <footer class='bg-inverse' id='footer-wrapper'> (scroll to bottom of template) at the  template editor & slightly below ,the example links code will look like so:-

<nav role='navigation'>
  <ul class='list-inline'>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Terms &amp; Conditions</a></li>
  <li><a href='#'>FAQ&#39;s</a></li>
  <li><a href='#'>Contact Us</a></li>
  <li><a href='#'>Delivery Status</a></li>
  <li><a href='#'>Support/Help</a></li>
  </ul>
</nav>

For each footer/credit links is surrounded by a <li> ... </li> tag, Include the URL to your internal pages by replacing the # with the page URL of choice.

To change the text display edit the text in between <a> .... </a> tags.
Pre-installed social icons is also included with BlogrCart template. Powered by Font Awesome, using web fonts pre-installed classes to display various social media icons easily.

<ul class='list-inline'>
   <li><a href='#'><i class='fa fa-google-plus-square fa-2x'/><span class='sr-only'>Google Plus</span></a></li>
   <li><a href='#'><i class='fa fa-facebook-square fa-2x'/><span class='sr-only'>Facebook</span></a></li>
   <li><a href='#'><i class='fa fa-twitter-square fa-2x'/><span class='sr-only'>Twitter</span></a></li>
   <li><a href='#'><i class='fa fa-linkedin-square fa-2x'/><span class='sr-only'>LinkedIn</span></a></li>
   <li><a href='#'><i class='fa fa-wechat fa-2x'/><span class='sr-only'>WhatsApp</span></a></li>
   <li><a href='#'><i class='fa fa-youtube-square fa-2x'/><span class='sr-only'>Youtube</span></a></li>
</ul>

Replace the # to the URL to your social media profile page.

An example icon display will have a <i class='fa fa-*-square fa-2x'/> where as, the fa class tag is calling the customized web fonts images by Font Awesome.

The <span class='sr-only'>*</span> is used to make sure screen readers can read what this link is for, since that we are using an image font as replacement.
Edit the blogger store name & branding which includes an address & contact information section at below codes:-

<span style='font-size:150%;letter-spacing:-1px;font-family:Arial;'>
  <i class='fa fa-edit'/>&amp;nbsp;&amp;nbsp;YOUR BRAND
</span>
<address>
    No 123, Cahaya Road, Kuala Lumpur MALAYSIA.
</address>
<address>
   <i class='fa fa-phone'/> +6012 266 5604&amp;nbsp;&amp;nbsp;
   <i class='fa fa-envelope-o'/> support@irsah.com
 </address>

Edit the store address in between the <address...</address> tag.
Edit Footer & Credit Navigation Links with Social Icons Edit Footer & Credit Navigation Links with Social Icons

Không có nhận xét nào

Đăng nhận xét

Subscribe Our Newsletter

Get the latest OFFERS right to your mail.