Design a Responsive Blogger Template - Tutorial

Designing Mobile Responsive Templates has become a trending topic in web today. Mobile Technology and Mobile Traffic has evolved immensely from 2010 to 2013 especially in Asia USA and Africa. People now prefer reading emails on their iPhone as compared to using their Desktop computer. Fast wireless wifi connections is another reason that encouraged usage of mobile devices like smart phones (Apple and Android), Tablets, netbooks and low resolution cellphones like NOKIA.

More of our clients today are interested in fluid and flexible Blogger templates compared to traditional Fixed width Layouts. We have received over a hundred requests for this tutorial series. We are therefore releasing the first ever complete step by step Tutorial Guide on Mobile Optimized Responsive Blogger Templates to the Google Blogger Community. You will learn how to enable your Blog layout adjust itself automatically to the Device Screen Size.

Tutorial Series

1. Design a Responsive Blogger Template

2. Common Device Breakpoints For a Responsive Blogspot Template

3. Hiding Widgets & Scripts in Mobile Templates [1], [2]

4. Design a Mobile Responsive Drop Down Menu for Blogger

5. Using Mobile Friendly Images in Blogger.

6. Create Mobile Responsive AdSense Ads and Safely Hide AdSense units

7. In Progress..

Note: You are reading Part 1. Read it only for understanding the theory behind what Mobile friendly blogspot templates are. We will do the coding part from Part 2 onwards which is Common Device Breakpoints.

What is a Responsive Layout?

In layman terms a responsive webpage is a flexible design that adjusts its width and styles according to user device Screen size. It will look different on a Desktop Screen and much different on a smart phone or Tablet (has two sizes: portrait and landscape) . No matter what device you use a responsive design will adjust itself perfectly to give you a Clean user interface.

For Blogspot Users:

If you have activated Mobile view for your blogger blogs then if you view your blog in a smart phone, you will find its look completely different compared to a desktop. By default all blogger blogs are made mobile optimized but those styles are too simple and doesn't represent the blog in its true form therefore we will learn to create a custom designed Mobile Friendly layout for Blogger ourselves. This will allow you to customize your mobile Template and have a better control over the display of elements such as Ads and widgets on your site.

Therefore in our case we don't need the default mobile view at all and we have disabled it completely.

See it yourself!
An example of a responsive website is the latest design of MyBloggerTricks.com. Just view it using this amazing tool linked below. Observe clearly how its Menu changes as the size of the screen shrinks. You can also test it by simply adjusting your browser window size using your mouse cursor!
MBT view in iPhone

Just insert the following URL in the Input Field

http://mybloggertricks.com?m=1

Testing Responsive Designs

Are you too late?

If your blog layout doesn't support auto adjustment of layout and loading of new stylesheets based on Device width then you don't need to worry because Responsive layouts is a new idea and it will take time till everyone applies it. You wont believe this but Giant Corporate sites like TechCrunch have not yet upgraded their theme to a responsive one and moreover Google is so slow that it has not even introduced auto-width-adjusting AdSense Ads for such fluid layouts. So it will take time till this new terminology is well acknowledged by majority of websites and internet firms.
Update: TechCrunch is now responsive and Google now favors Mobile friendly Pages. Google now ranks Mobile friendly blogs better and give them preference in Mobile search results over sites which are not yet mobile optimized. So hurry up and save that precious mobile traffic which you might be loosing at this moment!

How are Responsive Layouts Designed?

If you know some basics of HTML and CSS then trust me you are going to find it extremely easy and you would love to play with your layout columns using just your browser. CSS3 has introduced several new techniques of achieving some frequently used functions. It is no more limited to just styles but it now supports some really interesting front-end programming functions like @import, counter-reset, animations, transitions etc. and the most popular amongst them are Media Queries (@media ) that acts like conditional IF statements used in blogger.

Normally mobile browsers emulates a desktop view by squeezing big resolutions into small screens that is often difficult to read and browse. You must be familiar that how difficult it is to click a web link in iphone unless you zoom it.. In order to tell the browser to detect the screensize we will add a META viewport tag inside <head> section of your layout.

Any Template can be converted into a flexible layout in just two simple steps:

1. Add Meta Viewport just below <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Here width=device-width will detect the screen size.

2. Use CSS3 Media Queries

Update: Ignore the Breakpoints below and instead follow our detailed tutorial on Defining Device Breakpoints discussed in Part 2
Media Queries are conditional CSS3 queries that detects screen size and applies the relevant stylesheet to that screen. For example see these two media queries for smart phones and Tablet devices.

@media screen and (max-width : 480px) {
/* If screen size less than 480px Load these styles */
/* Done for Smart Phones */
}
@media screen and (max-width : 768px) {
/* If screen size less than 768px Load these styles */
/* Done for Tablets */
}

Here are some interesting tips that you keep in mind throughout this tutorial series:
Tips To remember:

Use percentages instead of numeric values to define width of columns
Create Separate Style sheets for Three Major Breakpoints 320/480/768
Remember to use box-sizing, max-width and min-width properties

Need help?

This was a brief introduction of how exactly a responsive layout is designed and what makes responsive websites so important today. I just hope I did justice with the post by making it as easy as possible. If you are facing confusion in any part just feel confident to leave your precious comment in the comment box below and I will be at your service 24/7. Please let me know how useful was this tutorial for you and did it help answering most of your questions?

Wish you peace and blessings buddies :)

Are we are going to discuss electronics or logic gates here? Of course not! :) Blogger Team has recently made some performance based changes to their XHTML Widget tags for layouts. They have introduced some logic operators to simplify long conditional expression using short and simple syntax thanks to Blogger Logical Operators. I have been testing Blogger templates since 7 years and the best thing I loved about it is the simplicity to retrieve data from the server. Although users are restricted from accessing the server side and database records but they have been given a great deal of access to call objects on Front end using Layout tags. Lets get straight to the fun ride!

For The Record: This is the first unofficial detailed tutorial of its kind across the web on Blogspot layout tags

Must Read: How to Show and Hide Widgets in Blogspot?

List of Operators Supported by Blogger Templates

At present blogspot templates support all major operators used in basic programming which are:

Operator	Syntax	Definition
OR	or and \|\|	OR or UNION is used to combine several conditions, any of which if true would render the HTML content. You can declare it either as or or \|\|. Prevents repeating b:if tags
AND	`and` and `&&`	And or INTERSECTION is used to combine two or more than two conditions. All conditionals must be true. You can use either and or the ampersand symbols &&. Prevents repeating b:if tags
NOT	`! and not`	NOT or EXCLUSION is used when you want to exclude something from the condition. Use either not or ! Best used with Membership operator
Equivalence	`==` and `!=`	Equity is used to to check what a data value is. Here '==' means equal to and '!=' means not equal to
Ternary Selector	[condition] ? [result when true] : [result when false]	Used to select one of two options, based on a condition.
Membership	`in` and `contains`	Used to check whether a value is one of several possible values. You can define the set using either square brackets [ ] or Curly braces { }. Prevents repeating OR

Example Usage of These Operators

Below I will give brief examples of how smartly these operators simplify an expression and prevents repeating a condition.
OR Example
Suppose you wish to show a HTML code only inside index pages (search pages, homepage) and item pages (Posts) but not on Static pages or archive pages. This is how you will write down the conditional expressions using widget layout tags.
Previously without 'or' the expression was written as such:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
HTML Code To render
</b:if>
</b:if>

Now with 'or' operator the expression is simplified as such:

<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
HTML Code To render
</b:if>

or you can use || instead of or:

<b:if cond='data:blog.pageType == "index" || data:blog.pageType == "item"'>
HTML Code To render
</b:if>

AND and Equivalence Example
Suppose you wish to show a HTML code only on Search pages but not on homepage. Here we are selecting label pages only out of index pages.
Previously without 'and' the expression was written as such:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>
</b:if>

Now with 'and' operator the expression is simplified as such:

<b:if cond='data:blog.pageType == "index" and data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>

or you can use && like this

<b:if cond='data:blog.pageType == "index" && data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>

You might be thinking what is the different between ! and != then lets try the next example to clear this confusion.
NOT and Membership Example

Unlike != which is only used when comparing/equating two tags, not (!) is used to negate an entire expression. not is mostly commonly used with Membership operator as shown below.

Lets suppose we wish to show a HTML code on all pages except the Posts and Static Pages. We will format our expression as shown below.

Previously without membership operator (contains or in) and NOT operator the expression was written as such:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
HTML Code To render
</b:if>
</bi:f>

Now with NOT and membership operator the expression is simplified as such:

<b:if cond='data:blog.pageType not in {"item","static_page"}'>
HTML Code To render
</b:if>

you can also write it like this by placing not before the expression. Note that you can use either [] or {}, same meaning for membership operators.

<b:if cond='not data:blog.pageType in ["item","static_page"]'>
HTML Code To render
</b:if>

Or like this using contains:

<b:if cond='not ["item","static_page"] contains data:blog.pageType'>
HTML Code To render
</b:if>

Combined Use of OR and AND
You can surely make your expression even more in-depth by using OR and AND operator together in a single expression.
In the example below, the HTML code will render only when the page visited by user is either the archive page or Search/Label Page.

<b:if cond='data:blog.pageType == "archive" or (data:blog.pageType == "index" and data:blog.url != data:blog.homepageUrl)'>
HTML Code to render
</b:if>

You can group multiple conditions inside the round braces and then compare them as against others. As simple as that!
Ternary Selector Example

Ternary selector is most useful when you need to apply one class out of two classes to any HTML DOM.

In the example below we will use a ternary operator in a div tag to apply a class comments-open when comments are allowed and apply the class comments-closed when the page no more accepts comments

<div expr:class=’data:post.allowComments ? "comments-open" : "comments-closed"'>
HTML Code To render
</div>

This is an excellent way to show your readers a special message when you are no more accepting comments for certain posts.

Need Help?

In our coming tutorials we will make extensive use of these new operators to make sure you are served the most optimized blogger widgets and scripts. We have already started applying these new expressions in posts published last week. Do check how we used Ternary operators along with combined AND, OR and Equivalence operators in this post.

Let us know me know if you need any help or assistance in understanding any syntax. Peace and blessings buddies! :>

Disable Javascript in Mobile Blogger Templates

Now that you have learnt how to hide HTML content in Blogspot blogs using the conditional tag "isMobileRequest", Its time to learn how to prevent blogger Widgets from loading inside Mobile devices for Responsive Blogger Templates. It is really important that your mobile site may load as faster as possible due to slow internet speed of Mobile browsers. In order to achieve this purpose, we need to hide some widgets that makes no sense in small screen devices. These Sidebar widgets could include your Fancy Subscription boxes, search boxes, Labels, Archives, PopularPosts, Blog ROLL, Recent comments and so on. Most of these widgets use jQuery or JavaScript that really slows down the site. Therefor we will not just hide the Widget HTML content but would also disable its javaScript. You can continue showing them in Desktop/Laptop devices but it is really advisable that you hide such widgets for mobile devices in order to speed up your Page load time as much as possible in order to rank higher on Mobile Search results. We have experienced a tremendous positive impact of this technique on our Blogger blog (mbt) and it has really helped increasing our mobile traffic a lot. Lets get started!

Tutorial Series

1. Design a Responsive Blogger Template

2. Common Device Breakpoints For a Responsive Blogspot Template

3. Hiding Widgets & Scripts in Mobile Templates [1], [2]

4. Design a Mobile Responsive Drop Down Menu for Blogger

5. Using Mobile Friendly Images in Blogger.

6. Create Mobile Responsive AdSense Ads and Safely Hide AdSense units

7. In Progress..

How to Find and Hide Widgets?

Before hiding widgets first learn how to find Widget ID. We published a post yesterday solely to help you out.

Must Read: 2 Ways to Find Widget ID in Blogger

After you have explored how to locate widgets inside Template, you are ready to learn how to disable them in mobile devices so that they may not load in background and may not slow down your blog speed in smartphones and tablets, thus giving a speedy mobile experience to your readers.

Disable Widgets in Responsive Templates

In order to understand how it is done, we will assume that our widgetid is HTML3, which is the 'Back at Home' widget on our blog and we will discuss it throughout this tutorial.
Hiding this widget in Mobile devices

1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 From the drop down menu locate your widget through the widget ID. In our case it is HTML3
locate widget by ID

4 You will be taken to the widget code. Expand/Collapse the code by clicking the black-pointed arrow towards its left. Click it once more when you see the second sub-arrow
expand the code

5 The code will now look something like this,

<b:widget id='HTML3' locked='false' title='Back at Home' type='HTML'>
                  <b:includable id='main'>                     
                    <b:if cond='data:title != ""'>
                      <h2 class='title'> <data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                   </b:includable>                 </b:widget>

We will apply the conditional isMobileRequest expression right inside the <b:includable> tag as shown below

<b:widget id='HTML3' locked='false' title='Back at Home' type='HTML'>
                  <b:includable id='main'> <b:if cond='data:blog.isMobileRequest == "false"'>                     
                    <b:if cond='data:title != ""'>
                      <h2 class='title'><data:title/>
                      </h2>
                    </b:if>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                    <b:include name='quickedit'/>
                    </b:if>                 </b:includable>                 </b:widget>

We have set the isMobileRequest Boolean value to false, so that the widget may load only in Desktop devices and it must be kept hidden in Mobile devices. If you visit our blog using a Mobile browser (not a desktop simulator), you will observe that the 'Back at home' widget is not loaded at all.
If you want the widget to display only in Mobile devices but not desktop then set the Boolean value to true
This Slideshow widget contains up to 12 images which could have really slowed down our blog in mobile devices but thanks to this conditional tag, things are much neater now.

6 Save your template and you are all done!

Disable Widget Scripts From Loading in Background

Almost every widget that you install on your blog has a JavaScript or jQuery attached to it to bring about the dynamic front-end fancy effects. Just by hiding the widget HTML content wont help you speed up your blog unless you also hide/disable the scripts that make them work. If you hide a widget but forget to disable the script, then the JavaScript will still be loaded and rendered in background thus slowing down your site.

JavaScript of your widgets in blogger is either located above </head> tag or below <head> tag.

You must know where you widget script is located because you installed it yourself! Normally officially blogger widgets scripts load only when the HTML loads so you don't need to worry about most of blogger official widgets like PopularPosts, archives, Poll, Comments, Label List etc.

The Slideshow widget HTML3 that we hide earlier has a script that needs to be disabled also. Lets do that now!

1 Inside your template locate the script by searching it near <head> opening and </head> closing tags.

2 Once you find it then enclose the entire script code using isMobileRequest conditional expression as shown below

Use the following syntax:

<b:if cond='data:blog.isMobileRequest == "false"'>

JavaScript to Hide

</b:if>

The condition is set to false which means the script will not be loaded in Mobile devices but it will load in Desktop and Laptops.
If you want the opposite then set the condition to true

3 Save your template and you are all done! That simple!

Need Help?

Let me know if you could not understand any part of the tutorial by leaving your comments below. I hope this rarely used yet recommended technique may help you better optimize your blogger blogs for mobile.

Wish you peace and love buddies! =)

autoupdate credits info in template footer

It makes a lot of sense to always add your website name along with Copyrights Date/time in Footer credits to let your users get accustomed to your brand identity and also know that you reserve full copyrights of the content you share on your blog. A credit link consists of mostly your Trademark/benchmark name (i.e. Blog Title) and the Time interval for which you deserve full ownership of your Blog resources and of its use and distribution. When we design Blogger templates we often add Credit links or attribution links at the bottom of the blog footer to let everyone know who designed and developed the template.

In your case if you want to remind your visitors of who owns the content and resources then you can surely use the simple script shared below which will dynamically insert your Blog Title, Blog link and current Year in your blog to let everyone know of your Copyrights. After using this XHTML + JavaScript, no matter how many years may pass by, your footer credits will always show the current Copyrights Legal Date, thus preventing you from manually updating the Date each year and Blog Title each time you update the Site Title. If it is 2015 it will show © 2015 and in 2020 it will automatically get updated to © 2020. Therefore this tutorial will help you Auto Insert Copyrights Legal Date and Trademark in Blogger Footer Credits. Lets get started

Update Blogger footer Credits

1 Go To Blogger > Template > Backup your Template

2 Click Edit HTML

3 Search your Footer Credits code and replace the contents with this Simple code.

INPUT:

<a expr:href='data:blog.homepageUrl'><data:blog.title/>™ </a>© <script type='text/javascript'>document.write(new Date().getFullYear());</script>, All Rights Reserved.

OUPUT:

My Blogger Tricks™ © 2015, All Rights Reserved.

Things to note:

data:blog.homepageUrl will be replaced with your Blog Homepage URL
<data:blog.title/>™ will be replaced with your Homepage title i.e. Your Trademark
The green highlighted script will be replaced with Current new Date of the year. getFullYear() returns the year in four digits. You can learn more about it at JavaScript Date Reference
You can replace the bold black text with any custom message you may like

4 Finally save your template!
Your Footer will now be automatically updated each time you change your blogspot blog title or when the new year arrives!

Need Help?

Let me know if you needed any help with this simple XHMTL trick that uses Blogger layout tags and some simple JavaScript. Wish you great weekend buddies. Have fun with friends and family. Peace buddies! =)

This article describes how to get the URL or internet address of a picture in Google Photos, and the difference between Google's shareable links and URLs.

Google Photos is a tool that help bloggers (and everyone else) to manage their picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums. You can read more about it here.

In Google Photos, there are two different types of web-address for a photo.

One is the URL, and this can be used to refer to pictures from Blogger, or from other tools that want a link that just shows the photo, eg Twitter, Google Maps. This is the traditional style of internet-address for a photo.

The other is the shareable link. This is what Google Photos provides from the Share function. Shareable links can be used in Facebook, and other places where the photo that is being shared is displayed within a web-display, rather than just as a picture. (Ref: How to make and manage shareable links in Google Photos.)

Unfortunately shareable links cannot be used in many applications. This is because they don't just show the picture. Instead they load a display showing the picture-date, the name and picture of the person who is logged in to Google at the time, and any other pictures that you have included in the same shareable link.

If you want to use an image from Google Photos in a tool which cannot use shareable links, you need to find it's URL, instead. At the moment, Google Photos doesn't have a way to get this - but luckily it's easy enough to find.

TIPS&TRICKS