Main Photo Responsive Blogger Template Collections

 

Main Photo : The responsive blogger template collections

Main photo responsive blogger template is my second collection responsive blogger template after responsival blogger template. This template very suitable for photography and gallery blog.

                              DOWNLOAD                           PREVIEW

 There are several features of this template:

• You can edit font color, font size, font family, background image and others in template designer.
• Minimalist and clean design template
• Compatible with modern browsers
• Featured image slider with auto recent post per label
• 2 column template
• 3 column footer

How to setting main photo responsive blogger template

• General Setting

Make sure to change template the mobile view first. Click template => click gear icon => click yes.

•  Setting view image slider

This template is supported by the image slider with auto post new d per label or category. You just need to type the name label on the widget. Go to layout => click edit on looped slide widget.

• Setting social networks

Go to template => edit HTML => find 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 your social network and feeds.

• Setting menu navigation

Go to template => edit HTML => find 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 red color with your link.

Read more »

Responsive Blogger Templates Collections

Responsival : Responsive Blogger Templates Collections

After a long time not to share blogger templates with you, today I introduce a responsive blogger templates, called responsival. I am very happy to start posting again and thank you for all the comments and feedback that you provide.

           Download        Preview

This template includes the type of template that is designed to adjust to different types of screen resolution . up to 1400px width. So you can give the best service to your readers. If you see a demo version of this template then to have some additional work to you, is to change some parts of the template to suit your liking. There is a little different from this template, where there are some widgets that are not accessible via the ' layout ', but do not worry because I will give you the guide.
Go to the template => edit HTML => edit template => click on the HTML code and press Ctrl + F => enter the name of a widget that does not exist in the ' layout ', such as 'sponsors' and press enter => if you have found you can change as you wish, or you can delete => Save.

How to change the Header

Same as above, go to the template => edit HTML=> edit template => press ctrl + F => enter the name of the header, example of 'about' => change the name to your liking and replace '#' with the url address.

 <header class='block' id='top-wrapper'>
    <section id='logo'>
        <a expr:href='data:blog.homepageUrl'><img alt='blog logo' src='http://1.bp.blogspot.com/-o5_GPJH6T6o/T2wKXkdcg_I/AAAAAAAAAhc/LXZsMOlI1tM/s1600/face_200.png'/></a>
    </section>
    <nav id='main-menu'>
     <ul>
            <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Contact</a></li>
            <li><a href='#'>More</a></li>
     </ul>
    </nav>
    <section id='blog-description'>
     <h1>Hello... <strong>Responsival Theme</strong> is another <strong>template</strong> for <strong>Blogger</strong> users. PLAY with this responsive design and See the release on my blog.</h1>
    </section>
</header>

Replace blue text with your descriptions. 

How to change image

This is the most important part, to make the necessary responsive template image corresponding to the size, so that when we use the post editor to upload the image then it is likely there will be attributes that cause images unresponsive. So you have to do is make images resizable, namely:

As usual you get into HTML, every post you will choose a code like this:

<div class="separator" style="clear: both; text-align: center;">
    <a href="http://blablablabla/s1600/blabla.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em">
        <img border="0" height="160" width="320" src="http://blablablabla/s320/blabla.jpg" />
    </a>
</div>

•  Delete markyellow up.
•  Delete red attributes.
•  Change image size from s320/s400/s800/etc to s1600.

Happy blogging!!

Read more »