After released Axorys Blogger template and Oslanis Blogger template, time to Moslar Blogger template. It's a responsive blogger template with clean design and support content slider for featured posts.
moslar blogger template - responsive blogger template

Features Moslar Blogger Template

  • Fully responsive template
  • Support Template Designer. This template support Template Designer for body font, color link, background color, background image, background color navigation, background stripes color, background color widget sidebar. You can change just in 1 click. For others, you can edit via Edit HTML
  • Support most browsers user include IE8.
  • Featured content slider.
  • Big header logo. You can add your logo blog. No minimal and maximal size. It will auto resize.
  • 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 stretched)
  • 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 Moslar Blogger template

Please note. I recommended to check these links. These links are general setting our Blogger template.
  • Basic Setting Our Template.. It's about basic setting our templates. You can see how to setting such as Template Designer, setting Meta Tags (Description), setting error page, setting time stamp, etc.
  • Setting Default Features. It's about setting default features our templates. You can see how to setting such as recent posts with thumbnail, recent comments with thumbnail, custom search form, and banner 125*125px
responsive blogger template with featured content slider

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='mos-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'>

2. Setting Featured Content Slider

setting featured content slider blogger template
Featured content slider is auto recent post by Label name. Just go to Layout > click Edit Featured Slider widget, and type the Label name as featured posts.
Case is sensitive. Make sure you write correctly.

3. Setting Social Account

Moslar Blogger template use font icon from FontAwesome. Make sure if you want to add your social media account, the icon available on icon list FontAwesome. Code for social media account is like this below.
<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 :
LINK_HERE : your social account link

4. Setting Search Form Google Search CSE

Basically, you can use a search form from default Search Box widget. If you want to use search form from Google Search CSE, add the code search box into widget. And for code search results, go to Edit HTML, find this code
<div class='main-wrapper-inner'>. And add the search results code after that code.


Have a question about Moslar Blogger template? Leave your comment