Sunday, April 20, 2014

// // Leave a Comment

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='http://4.bp.blogspot.com/-xAYWEVyxvmM/Tpkdq4l1lNI/AAAAAAAALtk/FYlb2DxEcqE/s1600/twitter.png' title='Main Blogger on Twitter'/></a></li>
<li><a href='https://www.facebook.com/MainBlogger'><img alt='Facebook' src='http://3.bp.blogspot.com/-VOBRmsL8e6Y/Tpkdqs5VxOI/AAAAAAAALtI/z57Wppciv5c/s1600/facebook.png' title='main Blogger on Facebook'/></a></li>
<li><a href='https://plus.google.com/111461490683022468168'><img alt='Google+' src='http://4.bp.blogspot.com/-yA9nQkc9rSQ/Tpkdqk2-hKI/AAAAAAAALtQ/K0PjU7Z5tNs/s1600/gplus.png' title='Main Blogger on Google+'/></a></li>
<li><a href='http://feeds.feedburner.com/mainbloggerz'><img alt='RSS Feed' src='http://4.bp.blogspot.com/-i7NERqdQKP0/Tpkdq10lKqI/AAAAAAAALtY/TYmuUrKey9A/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


0 comments:

Post a Comment

Confused? Don't hesitate to ask We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows.

Note: Please do not spam. Those type of comments will be deleted upon our review.