Scilk Blogger Template

free blogger template with masonry style and image slider

Scilk is a free Blogger template with masonry style and support image slider content. With a minimal design, this template ideal for personal blog.

buy short domain 5 letters dot com

Features Scilk Blogger Template

  • Fully responsive
  • Support template Designer. Easely to change background color, font color, font size, color link, and more via Template Designer
  • Image slider for featured posts support both auto by label and manual input
  • Masonry style layout
  • Dropdown menu navigation
  • Off canvas sidebar
  • Off canvas dropdown menu
  • Related posts with thumbnail
  • Lazy load image
  • Ads ready above and bottom
  • 2 column footer

personal blogger template with image slider

1. Setting Dropdown Menu Navigation

This is code for dropdown menu navigation. You can add via Layout in Menu Navigation widget.

<ul class='menu' id='menu'>
  <li><a href="/">Home</a></li>
  <li class='dropdown'><a href="LINK_HERE">Dropdown Menu 1</a>
   <ul class='dropdown-menu'>
    <li class='dropdown'><a href="LINK_HERE">Child 1.1</a>
     <ul class='dropdown-menu'>
      <li><a href="LINK_HERE">Sub Child 1.1.1</a></li>
      <li><a href="LINK_HERE">Sub Child 1.1.2</a></li>
      <li><a href="LINK_HERE">Sub Child 1.1.3</a></li>
     </ul>
    </li>
    <li><a href="LINK_HERE">Child 1.2</a>
    <li><a href="LINK_HERE">Child 1.3</a>
    <li><a href="LINK_HERE">Child 1.4</a>
   </ul>
  </li>
  <li><a href="LINK_HERE">Menu 1</a></li>
  <li><a href="LINK_HERE">Menu 2</a></li>
  <li class='dropdown right'><a href="#">Last Menu</a> <!-- "right" class -->
   <ul class='dropdown-menu'>
    <li><a href="#">Child Last 1</a></li>
    <li class='dropdown right'><a href="#">Child Last 2</a>  <!-- "right" class-->
     <ul class='dropdown-menu'>
      <li><a href="#">Sub Child Last 2.1</a></li>
      <li><a href="#">Sub Child Last 2.2</a></li>
      <li><a href="#">Sub Child Last 2.2</a></li>
     </ul>
    </li> 
    <li><a href="#">Child Last 3</a></li>
   </ul>
  </li>
</ul>
Notes
  • LINK_HERE: your link
  • "right" class: add this class name for right side menu (see demo Last Menu for detail)

Other template: Proin Mag Blogger Template

2. Social Media Account

We use font icon from FontAwesome version 4.7.0. If you want to add your social account, make sure the social name available in FontAwesome list. You can add this via Layout in Social Account widget, sidebar widget, or footer widget

<ul class='social'>
  <li><a href='LINK_ACCOUNT'><i class='fa fa-facebook'></i></a></li>
  <li><a href='LINK_ACCOUNT'><i class='fa fa-twitter'></i></a></li>
  <li><a href='LINK_ACCOUNT'><i class='fa fa-pinterest'></i></a></li>
  <li><a href='LINK_ACCOUNT'><i class='fa fa-instagram'></i></a></li>
</ul>
Notes
  • LINK_ACCOUNT: your social account link
  • code above for facebook, twitter, pinterest, and instagram. If you want add another one, make sure available in FontAwesome list

3. Setting Image Slider

This template support image slider content both auto by label name and manual input.

a. Auto Image Slider By Label

This is code for auto image slider by label name. You can add this feature via Layout in Homepage Slider widget.

<div class='highlight_wrapper'>
   <div class='auto_slider'>
      <div data-type='slider_content' data-label='LABEL_NAME' data-no='NUM_POSTS'></div>
   </div>
</div>
Notes
  • LABEL_NAME : the label name. case sensitive. make sure you write correctly
  • NUM_POSTS : number of posts

b. Manual Image Slider

For manual input image slider, copy and paste this code below into Homepage Slider widget.

<div class="featured-slider" id="featured-slider">
  <div class="slider_item">
    <a class="slider_item_content" href="LINK_POST">
	  <div class="slider_item_thumbnail" style="background-image:url(IMAGE_LINK);"/>
      <h2 class="slider_item_title">TITLE_POST 1</h2>
	</div></a>
  </div>
  <div class="slider_item">
    <a class="slider_item_content" href="LINK_POST">
	  <div class="slider_item_thumbnail" style="background-image:url(IMAGE_LINK);"/>
      <h2 class="slider_item_title">TITLE_POST 2</h2>
	</div></a>
  </div>
  <div class="slider_item">
    <a class="slider_item_content" href="LINK_POST">
	  <div class="slider_item_thumbnail" style="background-image:url(IMAGE_LINK);"/>
      <h2 class="slider_item_title">TITLE_POST 3</h2>
	</div></a>
  </div>
</div>
Notes
  • LINK_POST : link post
  • IMAGE_LINK : image link
  • TITLE_POST : title post
  • make sure to use the same image size

4. Recent Posts

Copy and paste this code below into HTML/Javascript widget. You can add a recent posts in sidebar or footer.

<div class='recentposts' data-no='NUM_POSTS'></div>

NUM_POSTS : number of the recent posts

5. Lazy Load Image

This template support Lazy load image. You can add this feature for the image in your post. Make sure the image code structure look like this.

<img alt="ALT_IMAGE" border="0" class="lazyload" data-src="IMG_LINK" src="IMG_PLACEHOLDER">
Notes
  • ALT_IMAGE: image alt
  • IMG_LINK: image link
  • IMG_PLACEHOLDER: placeholder image link. you can use your image link with a small size (change the image size;s400, s640, s1600 to s10 ~ for sample)
  • recommended you add that code to Post Template (see in Setting menu)

For other setting such as profile, post count, text above subscribe form, dropcap and button, , etc, you can see in documentation.

Dont forget to back up your template before install Scilk Blogger template

buy short domain 5 letters dot com

By instaling this template, you agree with our Term & License

We accept personal request and custom Blogger template. Contact now

Post a comment