Thursday, December 5, 2013

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!!

9 comments:

Sandra Z. Wilson said...

Wonderful post! You've made some very astute observations and I am thankful for the the effort you have put into your writing. Its clear that you know what you are talking about. I am looking forward to reading more of your sites content.
happy wheels | coolmathgames | run 3 | happy wheels online | cool maths 4 kids | game run 3 online

katie middleton said...

I really loved reading your blog. It was very well authored and easy to understand.Old Age Home in Coimbatore, Charitable Trust in Coimbatore

katie middleton said...

Very nice chance and service.. People should make use of it.keep posting posts like this...Very much informative...Hotels in Kumbakonam,Budget Hotels in Kumbakonam

kumar said...

All are saying the same thing repeatedly, but in your blog post I had a chance to get some useful and individual information about responsive blog templates, I love your writing style very much, I would like to suggest your blog in my friend’s circle. So, please keep on update like this excellent post.
Engineering Colleges, Mechanical Engineering Colleges in Chennai

katie middleton said...

This is really nice because it well informative for me and hope for others also keep it continued so that we can get benefits.Hotels in Kumbakonam,Kumbakonam Hotels

Nandhini said...

Excellent ! I am truly impressed that there is so much about this subject that has been revealed and you did it so nicely.
Housekeeping Services in Chennai

susmita rai said...

I am very happy when read this blog post because blog post written in good manner and write on good topic. Thanks for sharing valuable information

Bangalore Web Designing Company, Web Development Company

katie middleton said...

Extraordinary Post...Really Useful..keep me Mind these tips.SPA IN KUMBAKONAM, SPA IN TRICHY, SPA IN THANJAVUR

katie middleton said...

Marvelous! Great post. I am one of blogger in this blog .I like all posts here. Thank you.ITFOFINDIA,ITF OF INDIA

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes