Main Photo Responsive Blogger Template

Features of this template :

• Responsive blogger template both of desktop and mobile view
• Support Template designer. You can edit the background image, font family, font size, font color and others in Template Designer
• Featured image slider with auto recent post per label
• Minimalist and clean design template
• Compatible with modern browsers
• 2 column template
• 3 column footer and more

DEMO DESKTOP    |    DEMO MOBILE    |    DOWNLOAD

Setting Main Photo Responsive Blogger template

1. General setting

Before install this template, make sure to change the mobile view. 

Go to Template > click the Gear icon > click Yes. Show mobile template on mobile devices. > choose Custom (please see the image below) 

* this setting recommended if in your current setting for mobile view is No. Show desktop template on mobile devices 

2. Setting Featured Image Slider

This template support image slider with auto recent post per label/category. You just need type the Label name in widget section.

Go to Layout > click "Edit" Looped Slider widget

* Case sensitive. make sure you write correctly

3. Setting social networks

Go to Design > Edit HTML > Proceed and find this code below :

<div class='network'>
<ul>
<li><a href='https://twitter.com/ireng_ajah'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid9RmRY6skBfEi9O45vbL_py-MblhFQ89fzwDbRKiGN6mZe3SaRTGrWu1BNlkRFPl01by5M_ysL6H1E56r5a3wYc-k0AXluhrZXJJByjd4a5FyKtSbLgV1PJT2M4xB8yVnsjFzAvovztdM/s1600/twitter.png' title='Main Blogger on Twitter'/></a></li>
<li><a href='https://www.facebook.com/MainBlogger'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0L_Qr_iRYMp0tImM1EKPwICcuSrDozQinaS7mXUyfgDW4XBwvW_AFhMsLE3d5m7V7PKx6B2TSmKIkIjd8B8CzgqaZz9QvhcFP1QwJM9shJWAKHLdQkSzMU2GZOC5G_8xG-I6-gUy4kLWy/s1600/facebook.png' title='main Blogger on Facebook'/></a></li>
<li><a href='https://plus.google.com/111461490683022468168'><img alt='Google+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUsPGPKO011Ty_yetkMEupkiJaExzhsBjiFsOXWe11FvE1buy70zLsj1oqrAxuo1CqGw1RCUO-Oer6Nwk1ss5xH7kRD6jC2cqOs2ptTDqsEV-djQTGpKWNpgRPM8inPffjA0Vnxhme0Ld/s1600/gplus.png' title='Main Blogger on Google+'/></a></li>
<li><a href='http://feeds.feedburner.com/mainbloggerz'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1_GmY1WJuISxnQ6djhNkbVaWpofzuFVnhh2WyWFFbbllMJRgyyKRsYvt5BNNmrq6VEmL37DisJxTlMJFBjrQh16vYRT4ReTt67Chh_X19wtTudlJVeH-vzaJpuMYja4SK2NCLXdRo0jQ/s1600/rss.png' title='Subscribe RSS Feed Main Blogger'/></a></li>
</ul>
</div>

Replace : Red color with you social and RSS feed links 

4. Setting Menu navigation on Bottom 

Go to Design > Edit HTML > Proceed and find this code below : 

<div class='creditl'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/advertise.html'>Advertise</a></li>
<li><a href='/p/contact-us.html'>Contact Us</a></li>
</ul>
</div>

Replace : Link and title menu

5. Setting Banner Ad 125*125px 

For perfect view, the structure of banner ad 125*125px should be like this 

<ul class='ads'>
<li>YOUR_LEFT_BANNER_CODE_HERE</li> <!-- Left banner -->
<li class='last'>YOUR_RIGHT_BANNER_CODE_HERE</li> <!-- Right banner -->
</ul>

6. Setting Widget on Mobile 

To display widget on mobile or/and desktop, you can add these codes 

mobile='yes'

mobile='no'

mobile='only'

For example, you want to add Popular Post widget. Default Popular Post widget look like this :

<b:widget id='PopularPosts1' locked='false' title='Popular' type='PopularPosts'/>

Then, you want to display on mobile too. So, the Popular Post widget code will be like this

<b:widget id='PopularPosts1' mobile='yes' locked='false' title='Popular' type='PopularPosts'/>

If you need more information please leave a comment i am glad to see your comments here. :)

Template Owner : Main-Blogger