Hide HTML in Mobile Devices For Blogspot without using 'Display:none' - [1]

After Google's Mobile Friendly Update Algorithm which was rolled out on April 21, 2015. Many webmasters have seen a slight drop in their mobile traffic and they have now understood the importance of not just Mobile Friendly Web layouts but also templates that must load fast because mobile browsers are quite slow in rendering a webpage due to slow 3G or cellular network. Website Page Speed is an important Search engine metric to rank websites and it is really important that your Responsive and fluid layouts may serve content to visitors as fast as possible. Since People are new to creating Responsive Blogger templates, they often misuse some standards which can cause them a serious SEO blow in coming updates if not taken care of. One of such mistakes that I found on many freely available blogspot templates was the extensive use of CSS "Display:none" property for hiding Menu Links, Widgets and Columns. Read below to understand Why I believe use of Display:none is neither a good Design Approach and neither a SEO friendly method.

UPDATE: isMobileRequest  is applicable only to smartphone devices and it does not apply to tablets, iPads etc. Just a correction to this post. 

For The record: This tutorial is introducing Blogger Mobile Conditional Expressions first time across the web. The Data variable below is not even listed in official Blogger Layouts Data Tags.

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. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

View Summary!

Why not use Display:none; in Responsive Templates?

Display:none; property can surely be applied to images, widgets, iframes or any Div section with minimum textual content. You can not hide an entire Navigation Menu in Mobile template which you do display in Desktop template because you wish to instead display a responsive menu in Mobile devices. The menu will only be hidden from Front End view but its HTML will still be rendered and search robots will still crawl each link.  This can make robots suspicious and they can flag you for a Keyword stuffing activity.

More worse is the case when I see newbie designers hiding an entire content section with display:none. The content will still be visible to robots and they can penalize you for stuffing your page with unnecessary use of keywords.

Display:none also slows down the page because the  script or HTML that you have hidden from front end view using CSS will still load and render in background thus eating up your precious Page Speed.

In Short Display:none is a Front end approach we need one that hides the content at Server Side.

Use Blogger Conditional Expression For Mobile Devices

Blogger Templates are built with XHTML which support a long list of Conditional expressions and Logic Operators that can help you better communicate with the server and format the UI using widget layout tags. One Such Data Tag is isMobileRequest which is a Globally Available Data which can be applied to any HTML DOM inside the template. isMobileRequest  is a Boolean Data Type that accepts only two values which is either True or False.

Blogger adds a mobile parameter in Domain URL when the blog is visited using a Smartphone, Tablet, iPad or any mobile device. The mobile parameter works on a Boolean logic i.e. 0 or 1. If you visit mbt on a mobile device, you will see ?m=1 being appended to the URL in your address bar.

www.mybloggertricks.com/?m=1

m=1 means that the device is a mobile device and m=0 would mean a desktop or Laptop. However by default ?m=0 is not appended to the URL tail in Desktop devices.

?m=x is detected by isMobileRequest  which then tells the server that whether the device being used is a Mobile device or Desktop. We can use this request to hide or Show HTML content at server side which is not only just a SEO friendly approach but would also drastically improve your Mobile Page load time.

Google Has Given us a 100% Score for User Experience

This Magic Data Tag has helped us receive a 100/100 score on Google PageSpeed tool for MBT;

• Source Link
• The pageSpeed score is however 63 because of too many Advertising banners on our site which we can not remove by any cost.

How To Hide or Show HTML using isMobileRequest?

The Conditional expression has the following syntax which works on a Boolean Logic:

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

HTML To Show Only in Mobile Devices

</b:if>

The content inside the conditional expression above will load only in Mobile devices where the condition has value true due to the parameter ?m=1 where 1 means True.

If in case you wish to display a content only on desktop devices then you will reverse the logic in this order:

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

HTML To Show Only in Desktop Devices

</b:if>

As simple as that. Note that this condition works irrespective of whether or not you have enabled or disabled the default Blogger Mobile template. You can use it in both cases.

Need Help?

In Part#2 I will share in more detail on how to disable JavaScript and widgets in mobile themes using this logic. Stay tuned and do ask me as many questions as you may have. Peace and blessings buddies :)

Read More

Using OR, AND, NOT Logic Operators in Blogspot Template Layouts

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

Read More

Defining Device Breakpoints for Blogspot Templates

With so many Mobile Products in market where each smartphone or tablet has a different Screen size, it is important that we select some Content Specific Breakpoints so that your blogspot page may adjust and fit perfectly to the different screen sizes and may not looked squeezed or poor in resolution. Google recently rolled out a Mobile Friendly update on April 21, 2015, which boosts the ranking of mobile-friendly sites on mobile search results.  Google no longer favors fixed width layouts and recommends that all sites must be made fluid and responsive, where text should be readable without tapping or zooming, tap targets are spaced appropriately and the page avoids unplayable content or horizontal scrolling.

Therefore follow this interesting tutorial series in order to make sure you keep receiving traffic to your blogspot blogs from mobile phones and receive a Mobile-Friendly Label from Google.

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. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

View Summary!

What are Breakpoints?

Breakpoints are points at which your layout design breaks or crashes. Breakpoints are CSS3 Media Queries that tells the browser which Layout to load for your website based on the screen size (viewport). It controls the display of your user interface (UI) on mobile devices.

Suppose your Navigation Menu may look fine on a Laptop or Tablet but it may look broken, horizontally scrolling the page on a small hand phone set containing a width less than 480px. The Menu tabs may look misaligned or out of position. This is the time when you will need to specify a different custom Layout using CSS styles for your menu for the breakpoint 480px so that your menu may look just fine on small screen sizes. The browser will load that Menu styles (layout) only when the screen size of the device is less than 480px.

Done with theory now lets start converting your Blogspot template into a Responsive Template!

Disable Blogger Default Mobile Template

Since we are designing a custom responsive template for your blog therefore we don't need the Default Mobile View templates offered by blogger. It is important to disable it else you will not be able to see the custom mobile changes we will make in this tutorial series.

1 Go To Blogger > Template

2 Click the Gear Icon

3 Choose "No, Show desktop template on mobile devices"

 

4 Click Save

5 Next Click Edit HTML and search for this code if in case it exists in your template else ignore this step and follow step#6.

<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

Delete the code above if you found it.

6 Paste the following meta viewport code just below <head>

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

The code above gives information to the web browser about the screen size of the mobile device.

7 Save your template

Mobile Friendly Breakpoints For Blogspot blogs

Choosing the right breakpoints for any platform is the most complex task but it can be made quite easy if you apply the rule of KISS to it i.e. Keep it Simple Stupid!

We have defined below some of the most common Content Specific Device Breakpoints for blogspot blogs which respond quickly to changes in viewport. We will term it as the Responsive Cheat Sheet.

Note that we have used CSS3 Media Queries by Keeping Apple Devices as standard for simplicity but the breakpoints below cover all major brands like Samsung, Black berry, Nokia, Windows Phone, Kindle, Nexus and so on.

1 Go To Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for  ]]></b:skin>  and paste the following CSS Code just below it:

<style>

/* ########  Responsive Cheat Sheet ########### */

/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/

@media only screen and (max-width:320px) {

}

/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/

@media only screen and (max-width:480px) {

}

/*-----iPhone 5,6 ZONE3 ----------*/

@media only screen and (max-width:568px) {

}

/*-----iPads, Tablets ZONE4 ----------*/

@media only screen and (max-width:768px) {

}

</style>

4 Save your template and you are almost done!

The above are the only breakpoints required to make any blogger template responsive. You don't need combined or separate breakpoints for landscape and portrait view. The above Cheat Sheet is enough to make everything work just fine!

How these breakpoints work?

The yellow highlighted regions above are viewport sizes that defines the CSS Styles for a particular screen size. The CSS styles for each screen size will be defined inside these viewports.

By max-width:480px we mean width less than or equal to 480px. Styles inside this breakpoint will load only when the screen size is less than or equal to 480px.

For example If you wish the Sidebar Column which has a CSS Class .sidebar and width 300px, to have a 100% width in a Mobile Phone then you will add its new width inside ZONE1 breakpoint (inside the curly braces) as shown below

/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/

@media only screen and (max-width:320px) {

.sidebar {width:100%; overflow:hidden;}

}

That simple!

Note that none of the codes above will make your blog mobile friendly yet. The above guide is the skeleton/basic structure for a responsive layout. Your blog template will be fluid once you cover and follow all parts of this tutorial series.

Need Help?

Let us know if you need further clarification on any concept. I would love to answer all your questions posted in the comment form below. A lot more interesting parts are on its way. In our coming tutorials we will learn in detail how to insert the new responsive styles correctly inside the breakpoints specified above for different components/widgets of your blog. Make sure to Subscribe to our Email newsletter to ensure you don't miss any update.

Peace and blessings buddies! =)

Read More

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. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

View Summary!

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!

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:

1. Use percentages instead of numeric values to define width of columns
2. Create Separate Style sheets for Three Major Breakpoints  320/480/768
3. 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. Please be aware that responsive web design requires a significant amount of testing to make sure your site looks good on all devices and browsers, you may want to look into a variety of test management tools in order to expedite the process. 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 :)

Read More

Twitter Button adds a horizontal scrollbar to the page - [FIX]

Recently more and more people are experiencing problems with poor social media plugin UI. Twitter Follow button despite being mobile responsive messes up the site design by adding a long Horizontal Scrollbar to the bottom of the page temporarily for a few seconds and then it disappears. The Follow button is forcing the entire webpage to scroll horizontally. You might have seen a long green scrollbar at the bottom of our blog too. Upon debugging the site I found that the scrollbar was actually caused by the Twitter hub.html frame that renders within our site.

According to its developer benward the positioning of the hub frame is purely vertical (negatively positioned above the top of the page) however for some reasons we found that the webpage is forced to change its width dimensions. I have a simple fix for this bug that will prevent the Hub Iframe from exceeding a specified Parent container width size.

Prevent Hub Iframe From Causing a Horizontal Scrollbar

I am sharing the steps for blogspot blogs. The method described below is a standard procedure that applies to all platforms.

1 Go To Blogger > Template > Backup your Template

2 Click Edit HTML

3 Paste the following Style just above ]]></b:skin>

Simple Enclose your twitter Follow button Code inside the following Parent container

.twitterButtonFixmbt {position:absolute; overflow:hidden; max-width:300px;}

4 Save your template

 

Now enclose your twitter button code inside these Div tags

<div class="twitterButtonFixmbt ">

ADD Twitter Follow button code or Tweet button code here

</div>

That's it!

How it works?

I have enforced a maximum width of 300px and you can surely change it as per your container width. The position absolute and overflow properties along with max-width will make sure the Iframe doesn't exceed the prescribed Parent Dimensions.

Let me know if you needed any help. Peace and blessings buddies :)

Read More

Horizontal Divider Line With Back-To-Top Button - [Shortcode]

You are quite aware with HTML hr tag that defines a thematic break in a HTML page that can be a shift of topic or a section division.  The hr element is used to separate content in an HTML page. While writing blog posts, it makes a lot of sense to format your content well and present long lengthy content in sections rather in a single plain text, in such case CSS3 Dividers help a lot and to make it even more effective, we have included a smooth scrolling back-to-top link in the horizontal divider that takes a user back to the top of the page content. The BacktoTop button will display only when the content is long enough else it will auto hide itself. It will appear when a user scrolls down but would disappear as a user scrolls up. We have created around 5 Color Skins in two different themes, one with Solid color and one with Fading effect. The Hr Tag is created using Blogger Shortcode Plugin, the complete Toolkit For blogspot blogs.

Since Blogspot blogs are coded with XHTML therefore the <hr> tag must be properly closed, like this: <hr /> however in HTML, the <hr> tag has no end tag. So we have taken care of the same standards.

The Five color themes are

1. black, fblack
2. red, fred
3. green, fgreen
4. pink, fpink
5. yelow, fyellow

PS: where the f versions are faded themes. As you would see in the demo below.

DEMO

1. Install Blogger Shortcode Plugin

In order to use Divider shortcode you must first install the shortcode plugin for your blogspot blog by following 7 easy steps shared in the link below:

• Read: Blogger Shortcode Plugin Installation Steps

Skip installing it if you have already added it in your blogger template

2. Add Styles and Script

1. Go To Blogger > Template > Backup your Template
2. Click "Edit HTML"
3. Search for this code ]]></b:skin>
4.  Paste the following Code just above it

/*------- Shortcode Divider -------*/

    .sc-divider{margin:10px 0;height:20px;padding:0}.sc-divider hr{margin:0;position:relative;height:2px;border-bottom:2px solid;border-top:0;border-right:none;border-left:0}hr.fgreen{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-moz-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-ms-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0));background-image:-o-linear-gradient(left,rgba(112,207,10,0),rgba(112,207,10,0.75),rgba(112,207,10,0))}.sc-divider a.fgreen{border-color:#70CF0A;color:#70CF0A}hr.green,.sc-divider a.green{border-color:#70CF0A;color:#70CF0A}hr.fred{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-moz-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-ms-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0));background-image:-o-linear-gradient(left,rgba(252,64,44,0),rgba(252,64,44,0.75),rgba(252,64,44,0))}.sc-divider a.fred{border-color:#fc402c;color:#fc402c}hr.red,.sc-divider a.red{border-color:#fc402c;color:#fc402c}hr.fblue{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-moz-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-ms-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0));background-image:-o-linear-gradient(left,rgba(41,183,255,0),rgba(41,183,255,0.75),rgba(41,183,255,0))}.sc-divider a.fblue{border-color:#29b7ff;color:#29b7ff}hr.blue,.sc-divider a.blue{border-color:#29b7ff;color:#29b7ff}hr.fpink{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-moz-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-ms-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0));background-image:-o-linear-gradient(left,rgba(255,131,119,0),rgba(255,131,119,0.75),rgba(255,131,119,0))}.sc-divider a.fpink{border-color:#FF8377;color:#FF8377}hr.pink,.sc-divider a.pink{border-color:#FF8377;color:#FF8377}hr.fblack{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0))}.sc-divider a.fblack{border-color:#000;color:#000}hr.black,.sc-divider a.black{border-color:#000;color:#000}hr.fyellow{border:0;height:1px;background-image:-webkit-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-moz-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-ms-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0));background-image:-o-linear-gradient(left,rgba(253,206,9,0),rgba(253,206,9,0.75),rgba(253,206,9,0))}.sc-divider a.fyellow{border-color:#fdce09;color:#fdce09}hr.yellow,.sc-divider a.yellow{border-color:#fdce09;color:#fdce09}

/*------- Shortcode Back To Top----------*/   
.sc-top,.sc-top:visited{text-align:right;padding-top:6px;text-decoration:none;display:block;font-weight:400;font-family:oswald,arial;font-size:11px!important}.sc-top:hover{color:#666}a.sc-top:after{font-family:FontAwesome;content:'\f077';padding-left:5px}

 

5. Save your template and you are all done!

Add Colorful Horizontal Content Dividers in your Blogspot Posts

Now you can easily insert a colorful divider anywhere inside your blog post by using the shortcode below

[divider/]

The above shortcode will create a default black faded i.e. fblack horizontal line with a Top Link having the same color as your template links.

To create a colorful divider you can mention skin color in this format

[divider color="yellow"/]

To create a faded color use this,

[divider color="fyellow"/]

You can also add a headline above the line in this format

[divider color="fyellow"] Add Headline Title Here [/divider]

That easy!

Need Help?

Let me know if you need any help or assistance. Wishing you all a bless Happy ramadan! :)

Read More

Overused H2 & Missing H1 Tags in Blogger Posts Titles

Most Blogger blogs are poorly optimized when it comes to Headline tags which includes H1, H2 and H3 either because newbie publishers are implementing wrong SEO techniques by reading unauthentic articles across the web or may be because they are using a custom template which may look quite attractive when it comes to User interface (UI) but they are the worst when it comes to Optimized XHTML Structure. In our previous tutorial we share how you can assign H1 Tag to Blog Title on homepage, search pages and Archives, in todays tutorial we will discuss how to correctly optimize Post titles and Static Page titles in blogspot by assigning H1 Tag to a title on Item Page and H2 tags on Index and Archive pages. We will also empower the title Structure with the correct Schema Markup.

I have used the word 'Overused' because rarely do people understand that keeping a logical hierarchy of Headline tags on a HTML DOM is not only SEO friendly but also sensible thing to do. Bloggers today rarely understand that and as a result they often use Multiple H1 tags on a single page or they assign H2 to Post titles on item pages which is a terrible SEO mistake. H2 is overdosed to post tiles on every single Page may it be index, item or archive pages.

For The Record: This tutorial is the first tutorial of its kind shared online which focuses on adding H1 Tag to Post titles and optimizing the Headline tags with Microdata tags

Just like the headlines in a newspaper attract a reader's attention, similarly the Headline tags in a blog article attracts the attention of a search robot. H1 is given the most importance followed by H2, H3 and so on till H6. In web typography we normally use H1,H2 and H3 a lot and it is important that you may optimize the layout of your template such that these tags may be correctly placed on the basis of Importance. To make it worst Post Titles are even Self-Hyperlinked or Self-Linked when Post is viewed. Why would you link a page to the page itself? Makes no logic.

Note: Please first read Part 1 of this tutorial series so that you may understand the default hierarchy for Headline Titles in Blogger

Part 1: Missing <h1> Tag in Blog Title and Post Tiles

What's The Plan?

Be default Blogger blogs have the following Heading Settings:

Before:

Heading Tag	Assigned to
h1	Assigned to Blog Title. Not assigned at all when Logo Image is used
h2	Assigned to Sidebar Titles.
h3	Assigned to Post Titles and Subheadings! Weird!

I called it weird because your Sidebar tiles are given more importance than your Post titles! By default blogger assigns <H3> tag to Post titles on all pages which makes them even less important than the sidebar headlines which have a H2 tag. Fixing this is really important to better rank your titles.

In case where a logo image is used, no H1 tag is used at all! Which means there is almost no presence of <h1> tag on any page of your blog which is really not recommended in SEO.

After:

Heading Tag	Assigned to
h1	Assigned To Blog Title only on Index Pages and archives and assigned to Post Title on the Item Page only. This way every page on your blog will have a H1 tag assigned to your most important Title.
h2	Assigned to Post Titles on Index Pages and archives. Assigned to Sidebar Titles on all pages. Due to widget XHTML structure configuration, the sidebar headlines tags can not be edited. H2 is fixed for sidebar Headlines
h3	Assigned to Subheadings only

This way you will assign <H2> tag to Posts titles on Index and Archive Pages

• Index Pages: These pages are your Homepage and Label Pages

and you will assign <H1> Tag to Post Tiles on Item Pages only

• Item Pages: These are your Post or Static Pages When viewed

Lets get to work!

Optimizing Post Title Headline Tags

Remember that we are not just optimizing titles, we will also be adding schema microdata tags to better help search bots to recognize the structure of your entire site. This will also help eliminating Data structured errors on your webmaster account.

Follow these sequential steps:

1 Go To Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for this code or its alike

class='post hentry'

Which will be contained inside a div section as shown below

<div class='post hentry'>
 

4 Replace it with this

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
 

info: The above highlighted parameters are microdata tags that help describe your content.

5 Next find this code or one similar to it:

<b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <data:post.title/>
    </b:if>
   </h3>
  </b:if>

or in new blogger templates the code will look like this

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Replace the code you just found with this optimized version of the code

<b:if cond='data:post.title'>
                     <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
     </h2>

                       <b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<h2 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link' itemprop='url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
<a expr:href='data:post.url' itemprop='url'><data:post.title/></a>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>

<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <data:post.title/>
     <b:else/>
        <b:if cond='data:post.url'>
         <data:post.title/>
<b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
                    </b:if>

 

6 Save your template and you are done!

Customize the Titles!

Since we have changed the tag for post titles therefore you will see a change in your title colors and appearance. You need to style the new tags using the following css code.

Paste the code below just above ]]></b:skin>

.post h2 a,.post h2 a:visited, .post h1{
display:block;
text-decoration:none;
color:#242729;
font-family:arial;
font-size:27px;
line-height:36px}

.post h2 a:hover{
color:#828282;
text-decoration:none}

 

• Replace 242729 with Title color
• Replace 828282 with Title Color when mouse is hovered on it

Save your template and all done!

Need Help?

We have implemented the same method on MBT and we have seen amazing results so far. I hope to see your blogs rank well on SERPs and it benefit you as much as possible. Please let me know if you need any help in understanding any part of this tutorial. Wish you all a happy blogging experience, full of fun and free of bugs.

Peace and blessings buddies! =)

Read More