Friday, November 22, 2013

How to make your Blogger Blog responsive using Twitter Bootstrap

Posted by Fardan Ahmed at 11:03 PM Labels: Design

Well ! Hello There Guys. Today we will be discussing about responsive web design or layout. In the new era of the internet many people are using responsive web design because of the greater use of mobile and tablets and they all know that if they want to succeed they will need to focus on not only the desktop users but also mobile users etc.

Twitter bootstrap is one of the widely used tool for designing websites. It will give a neat design along with plenty of flexibility. We can easily design any website using twitter bootstrap without writing any single line of css. And also this is free of cost so you can get it Here. You can also edit it and change it according to your needs.

Our website is also running on bootstrap blogger template but we have made several changes which differentiates between us and others.

Features of Bootstrap blogger template:

SEO friendly blogger template.

Minimal design

Easier template modification.

Grid system and responsive design

Re-usable components

Easy to use CSS

JavaScript plug-ins

Auto read more

You can check the responsiveness of the template by applying it on a test blog and then by going Here. Or you can directly go to the maker's website and check the responsiveness by the link I provided above and by adjusting the width and height of your browser's window.

Bootstrap 3 Blogger Template:

Bootstrap 3 Blogger Template

Earlier version of bootstrap template was powered by twitter bootstrap 2.x.x. They have released another blogger template which is powered by twitter bootstrap 3 (RC2). This means it is a beta version, They will come up with the latest version of this template when they release latest version of bootstrap 3.

Bootstrap 3 is sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development. So bootstrap 3 is much much improved version of bootstrap 2.

How to edit open graph meta data:

Code for open graph will look like this, make sure that you made necessary changes.


<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>


<meta expr:content='data:blog.canonicalUrl' property='og:url'/>


<meta content='Bootstrap Template' property='og:site_name'/>
<meta content='article' property='og:type'/>


<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iaO44WYYXraUZCoWAhcbHzxp4lFIpbLlcqdRKPSr8GI6maMNKpchhjfakMiL93__3M8MuAzKkBA1R5n9NNj81fdb5NtD7SGJ00aal6tJsxdmMd6990uFF_rK1sB1RAOvx_Ljjc_2p3WY/s1600/apple-touch-icon-144-precomposed.png' property='og:image'/>


</b:if>


<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>


<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='Bootstrap Template' property='og:site_name'/>
<meta content='blog' property='og:type'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iaO44WYYXraUZCoWAhcbHzxp4lFIpbLlcqdRKPSr8GI6maMNKpchhjfakMiL93__3M8MuAzKkBA1R5n9NNj81fdb5NtD7SGJ00aal6tJsxdmMd6990uFF_rK1sB1RAOvx_Ljjc_2p3WY/s1600/apple-touch-icon-144-precomposed.png' property='og:image'/>
</b:if>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>

After adding open graph meta you should change og:site_name “Bootstrap template” with your blog or website name.

Other important opengraphs are ‘og:image’ and ‘og:type’. og:image “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iaO44WYYXraUZCoWAhcbHzxp4lFIpbLlcqdRKPSr8GI6maMNKpchhjfakMiL93__3M8MuAzKkBA1R5n9NNj81fdb5NtD7SGJ00aal6tJsxdmMd6990uFF_rK1sB1RAOvx_Ljjc_2p3WY/s1600/apple-touch-icon-144-precomposed.png” should replace with any image that suits for your home page.

Here is the code for apple touch icons, don’t forget to replace icon images for your website.


<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iaO44WYYXraUZCoWAhcbHzxp4lFIpbLlcqdRKPSr8GI6maMNKpchhjfakMiL93__3M8MuAzKkBA1R5n9NNj81fdb5NtD7SGJ00aal6tJsxdmMd6990uFF_rK1sB1RAOvx_Ljjc_2p3WY/s1600/apple-touch-icon-144-precomposed.png' rel='apple-touch-icon-precomposed' sizes='144x144'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrKRHV-_aTh38tx5pGd7g6Lcl4OMIH_XaITU3-cLnpKTxMqIHAxATAu2FD_rXwx_5_gAuVVNEHf8JIY4Ic88mzVUNPUtpdME8r_3hVJcZY-Cneu7UvMmDnp2Rq8nRAgOlvjR-iHtdsz7mS/s1600/apple-touch-icon-114-precomposed.png' rel='apple-touch-icon-precomposed' sizes='114x114'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqnbBg3aXJteG0hKCutFBTgZoz98c4KKpqqfYDz2wm-EfkBp1N7_iKrbMasfbQYaLroHvB-j91lBHZwVXm8Xl-F8voAhy08nqmhXgyel3WTW4_uvFtiOQxdtjTYPDG5tbtlV-265Q3v8v/s1600/apple-touch-icon-72-precomposed.png' rel='apple-touch-icon-precomposed' sizes='72x72'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lhbaG0amJOZ-h9hX6Z4FLjAXi3x0uIWPdrUxwk1F2bGWSIHYNBI61cyLsNc_8uioTw4iNMcOXXk4NoUc_a29cEiS48_1ZtH3UvFt9mDUksxaQsPkuTbt7Y3VS2k5J5VlYPk8xkP1hdOL/s1600/apple-touch-icon-57-precomposed.png' rel='apple-touch-icon-precomposed'/>

Last OF All:

So I think I have told you everything about the responsive blogger template design. You can grab it for free from the website I mentioned above and you can also share your thoughts about it.

Finally if you have any questions regarding responsiveness,styles,buttons etc you can ask us in the comments. Feel free to ask.