Oslanis - A Responsive Blogger Template

Oslanis Blogger template is a responsive Blogger template with float sidebar. Basically, this template for fashion related blog but i think, it's also suitable for all topics blog.
oslanis - responsive blogger template for fashion blog

Features Oslanis Blogger Template

  • Fully responsive template
  • Support Template Designer for background color, background image and background widget sidebar. For other variables, you can edit via Edit HTML
  • Support most browsers user include IE8.
  • Featured content slider.
  • Responsive dropdown menu.
  • Responsive video.
  • No error Google Snippet. Please check here.
  • Font icon from Font Awesome.
  • Widgetable, drag and drop.
  • Related posts with thumbnail.
  • 3 column footer
  • Auto crop thumbnail image with proportional size (not streched)
  • Recent post and comment with thumbnail
  • Default thumbnail in summary post, recent post, and related post for a post without image
  • Ads ready
  • and more


See also :
Axorys Blogger Template. A Blogger template with 8 predefined styles.

Setting Oslanis Blogger template

1. Setting Menu Navigation

You can add menu navigation from Layout > Add a gadget. The structure code something like this :
<ul class='sf-menu' id='osl-menu'>
  <li><a href="/">Home</a></li>
  <li><a href="#LINK">Menu</a></li>
  <li><a href="#LINK">Model</a></li>
  <li><a href="#LINK">Project</a></li>
  <li><a href="#LINK">Inspirations</a></li>
  <li><a href="#LINK">Portfolios</a>
    <ul>
      <li><a href="#LINK">Art Work</a>
 <ul>
   <li><a href="#LINK">Sketch</a></li>
   <li><a href="#LINK">Poster</a></li>
   <li><a href="#LINK">Animation</a></li>
 </ul>
      </li>
      <li><a href="#LINK">Logo</a></li>
      <li><a href="#LINK">Branding</a></li>
      <li><a href="#LINK">Web Design</a></li>
      <li><a href="#LINK">Social Media</a></li>
    </ul>
  </li>
  <li><a href="#">Sample Posts</a>
    <ul>
      <li><a href="#LINK">Post Format 1</a></li>
      <li><a href="#LINK">Post Format 2</a></li>
      <li><a href="#LINK">Post Format 3</a></li>
      <li><a href="#LINK">Post Format 4</a></li>
    </ul>
  </li>
  <li><a href="#">Last Menu</a>
    <ul class='last'> <!-- LAST_MENU -->
      <li><a href="#LINK">Child Last Menu 1</a></li>
      <li><a href="#LINK">Child Last Menu 2</a>
 <ul class='last'> <!-- LAST_MENU -->
   <li><a href="#LINK">Sub Child Last Menu 2.1</a></li>
   <li><a href="#LINK">Sub Child Last Menu 2.2</a></li>
   <li><a href="#LINK">Sub Child Last Menu 2.2</a></li>
 </ul>
      </li> 
      <li><a href="#LINK">Child Last Menu 3</a></li>
    </ul>
  </li>
</ul>
Note :
  • #LINK : Menu link
  • For last dropdown (but not last single menu), code <ul> must be <ul class='last'>
  • code above for single menu (5 menu) and 1 level dropdown menu (1 menu), and 2 level dropdown menu (2 menu). You can custom as you want

2. Setting Content Slider

You can add content slider from Layout > Add a gadget. Overall, the structure code something like this :
<div class="osl-slider">
  <div class='slider-item'>
    <img src='IMG_LINK' alt='ALT_IMG'/>
    <div class='slider-content'>
      <h2 class='title'><a href="LINK_HERE">TITLE_SLIDER_HERE</a></h2>
    </div>
  </div>
  <div class='slider-item'>
    <img src='IMG_LINK' alt='ALT_IMG'/>
    <div class='slider-content'>
      <h2 class='title'><a href="LINK_HERE">TITLE_SLIDER_HERE</a></h2>
    </div>
  </div>
</div>
Note :
  • IMG_LINK : image link
  • ALT_IMG : image ALT
  • TITLE_SLIDER_HERE : title slider
  • LINK_HERE : link to post
  • all images for content slider it must same size
  • If you want to add a link in image, the code should be like this :
    Image
    <a href="LINK_HERE"><img src='IMG_LINK' alt='ALT_IMG'/></a>
For other setting such as : recent posts with thumbnail, recent comments with thumbnail, profile, social media account, etc, you can see in documentation (available in download file).

* This template is free license. Please keep and DO NOT edit/remove the credit link. More details click here
**If you share this post in your blog, i would appreciated if the download link redirect to this post

Let me know if you have any question about Oslanis Blogger Template.

Images credit : - ArtPX.com

No comments:

Post a Comment