Proin Mag Blogger Template

proin mag free blogger templateProin Mag is a news and magazine style free Blogger template with clean design, suitable for all type of blogs such as technology, games, daily news, or cooking and recipe blog.

This template built from Soho template and support 2 predefined styles. A big thumbnail and grid style with small thumbnail.

magazine style free blogger template

Features Proin Mag Blogger Template

  • Fully responsive
  • Support template Designer. If you dont like the color background, font family, color link, etc, you can change easely via Template Designer
  • Slider image for featured posts support auto by label and manual input
  • Dropdown menu navigation
  • Support 3 different styles featured posts by label; big thumbnail, small thumbnail, and list style for sidebar or footer widget
  • Off canvas dropdown menu and sidebar on mobile views
  • Related posts with thumbnail
  • 3 column footer
  • Sticky and scroll sidebar
  • Tabview for related posts and comment section
  • Responsive video post
  • Instagram gallery
  • Lazy load image
  • Ads ready
  • etc

1. Setting Dropdown Menu Navigation

This is code for dropdown menu navigation.
<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)

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.

And this is the code. You can add to the Social Account widget.
<ul>
 <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-SOCIAL_NAME'></i></a></li>
</ul>
Notes
  • LINK_ACCOUNT: your social account link
  • SOCIAL_NAME: font icon name. make sure available in FontAwesome list

3. Setting Image Slider

We added 2 versions of image slider. First auto image slider by Label. Second one manual input image slider.


a. Auto Image Slider By Label

image slider proin mag blogger template

This is code for auto image slider. You can add this feature in Layout > Auto Slider widget.
<div data-type='slider-content' data-label='Colors' data-no='5'></div>
Notes
  • data-label : the label name. case sensitive. make sure you write correctly
  • data-no : slider count

b. Manual Input Image Slider By Label

This is code for manual input image slider. You can add this feature in Layout > Manual Slider widget.
<div class="feat-slider" id="featured-slider">
 <div class="slider-item">
  <a class="slider-item-thumbnail" href="LINK_POST" style="background-image:url(IMAGE_LINK);"></a>
  <div class="slider-item-content">
   <h2 class="slider-item-title"><a href="LINK_POST">TITLE_POST</a></h2>
  </div>
 </div>
 <div class="slider-item">
  <a class="slider-item-thumbnail" href="LINK_POST" style="background-image:url(IMAGE_LINK);"></a>
  <div class="slider-item-content">
   <h2 class="slider-item-title"><a href="LINK_POST">TITLE_POST</a></h2>
  </div>
 </div>
 <div class="slider-item">
  <a class="slider-item-thumbnail" href="LINK_POST" style="background-image:url(IMAGE_LINK);"></a>
  <div class="slider-item-content">
   <h2 class="slider-item-title"><a href="LINK_POST">TITLE_POST</a></h2>
  </div>
 </div>
 <div class="slider-item">
  <a class="slider-item-thumbnail" href="LINK_POST" style="background-image:url(IMAGE_LINK);"></a>
  <div class="slider-item-content">
   <h2 class="slider-item-title"><a href="LINK_POST">TITLE_POST</a></h2>
  </div>
 </div>
</div>
Notes
  • LINK_POST : link post
  • IMAGE_LINK : image link
  • TITLE_POST : title post
  • you can see in Proin Mag Big Header for the demo live
  • recommended use the same image size

4. Featured Posts

There are 3 styles of featured posts. First is featured posts with 2 thumbnails (next called feat-1). Second is featured posts with 3 thumbnails (next called feat-2). And third is featured posts with list style (for sidebar and/or footer widget).

For the first and second styles, it only appears on the homepage. Basically, you just need to type the label name into the widget. 

recipe and cooking free blogger template

a. Featured Posts 2 Thumbnails

This is code for this feaured post.
<div class='feat-one' data-label='Creative'></div>

b. Featured Posts 3 Thumbnails

This is code for this feaured posts.
<div class='feat-two' data-label='Inspiration'></div>

Please note: Make sure for feat-1 and feat-2 added in Featured Posts By Label widget.

Basically, you can add more than 1 featured post both feat-1 and feat-2. I mean, let's say for example, you can add 1 feat-1 and 2 feat-2. Or you can add 2 feat-1 and 4 feat-2.

The important thing is make sure added in Featured Posts By Label widget. In demo live Proin Mag Grid Style, you can see 2 feat-1 and 2 feat-2.

And there is no position rule for the featured post. You can see the difference featured post position between feat-1 and feat-2 in the demo live of Proin Mag Grid Style and Big Thumbnail.

c. Featured Posts List Style (for sidebar and/or footer widget)

This is code for this feaured posts.
<div class='label-content' data-label='Photography' data-no='4'></div>
Notes
  • data-label : the label name. case sensitive. make sure you write correctly
  • data-no : post count
  • you can add more than 1 featured post

5. Recent Posts

This is code for this recent post. You can add to the widget via Layout.
<div class='recent-content' data-no='5'></div>
Notes

data-no : latest post count


6. Lazy Load Image

This template support lazy load image. You can see the demo lazy load images here.

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

7. Post Count

Post count is the total number of posts for a Label page. I already set max-result when you or a visitor click the label name in the sidebar, footer or end of post.
By default, I set max-result 6 posts.

If you want to change with another one, go to Edit HTML and find this code.
var label_count = 6;
Notes

label_count = 6 change with new one


Please note: If you want to change the number of label_count, make sure it's a same number with:
- old dashboard: Setting ~ Post, comments, and sharing > Posts ~ Show at most.
- new dashboard: Setting > Posts ~ Max posts shown on main page.

For other setting like Twitter meta data, instagram gallery, profile, dropcap & button, you can see in download file.


  • By instaling this template, you agree with our Term & License
  • Wanna customize Proin Mag Blogger Template? Contact us now

Drop your comment if you have a question or anything else about Proin Mag Blogger template.
Post a comment