Customize Blogger EU Cookies Notification Bar

Blogger EU Cookies NoticeAll blogspot users are recently informed in their dashboards that European Union (EU) laws require all publishers to give EU visitors information about cookies used on their blogs. For that reason Blogger team has automatically added a notice bar on all blogs to help meet these regulations. The notice lets visitors know about Google's use of certain Blogger and other cookies used on these blogs, including Google Analytics and AdSense cookies. It is a publisher's responsibility to ensure that the Notification bar must be clearly visible on the blog and must not be disabled in any case using CSS or JavaScript unless the publisher is already displaying a custom bar notifying users about the use of cookies on his site.

EU Cookies notice in Dashboard

Will Blogger Show The notice on Custom Domains also?

Of course it will!

Note that all blogspot blogs which are using the default .blogspot.com Domains ( country-code Top Level Domain or ccTLD) or custom domains (such as .com, .net, .org etc.) will automatically show the following sticky Notice at the top of the page when a user visits that blog from a browser in a European Country:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.Learn More Got it

The message will disappear when the user clicks Got it.

Is it shown on all Country Specific URLs ccTLD?

It will be shown only to visitors from European Union associated countries like Italy, France, UK, Denmark, Sweden, Greece, Germany etc.

You won't see the notice outside of the EU.

How to see the Notice if you are Outside European Union?

To see the notice if you�re outside of the EU, view your blog and change the country code, for example blogspot.it,  blogspot.fr or blogspot.co.uk.

If you use a custom domain, you can use a EU IP Proxy address to browser your site. A Simple trick is to add the following string parameter just after your custom domain:

.prx.gb.teleport.to

Like in our case to visit mybloggertricks.com in united kingdom we will type the following URL in address bar:

http://www.mybloggertricks.com.prx.gb.teleport.to

Clicked the 'Got it' button and now you can not see the notice bar again?

Use the Netherlands proxy and it will appear again!  Make sure you don't click got it this time else you will have to delete your browser cookies to make it appear again :)

.prx.us.teleport.to

Can We Hide or Disable the EU Cookies Notice?

Yes you can but only if you are already displaying a custom message using custom script on Top of your blog which informs users about the use of cookies on your site. If you are not using any such script to inform readers about cookies then you are obliged to display the Blogger Default notice instead. You must not choose to avoid informing readers about the use of Cookies on your blog. Doing such may cause your blog to get banned.

If you are already using a custom script to inform readers about Cookies used by 3rd part services on your blog and the message clearly links to your Privacy Statement page then you can surely choose to disable the default notice by add the following script just above </head> tag inside your template

<script type="text/javascript">

  cookieChoices = {};

</script>

How Do the Notice Look Like?

You must not try to hide this notice bar like we normally hide the Blogger navbar. If in case you have not hidden the blogger navbar then the message will look like this:

EU cookies notice when navbar is enabled

If you have chosen to hide the navbar then the message will display like this:

EU cookies notice when navbar hidden

Lets Customize the EU Cookies Notice Bar!

Before: A Long Textual string with dull colors.

Default EU cookie Notice bar

After: A Neat and cleaner message with custom colors.

custom EU cookie Notice bar

The default Notice is a long lengthy text with dull colors, in order to make sure to display a custom Short message to your readers that may also match your Template color theme then follow the steps below:

1 Go To blogger > Template > Backup your template

2 Click Edit HTML

3 Paste the following code just below ]]></b:skin> tag

<!--Custom EU Cookies Notice by STCnetwork.org-->
<script type="text/javascript">
  cookieOptions = {
    msg: "This site uses cookies to help deliver services. By using this site, you agree to the use of cookies.",
    link: "https://www.blogger.com/go/blogspot-cookies",
    close: "Got it!",
    learn: "Learn More" };
</script>
    <style>.cookie-choices-info {z-index:999999!important;background-color:#333333!important;border-bottom: 1px solid #6FC415
        box-shadow: 1px 2px 2px #000!important; padding:3px 0px!important;}.cookie-choices-info .cookie-choices-text{font-size:14px !important; color:#dddddd!important;}.cookie-choices-info .cookie-choices-button{  background-color: #6FC415!important;border-radius: 1px!important;box-shadow: 2px 3px 2px #000!important; padding:6px!important;text-transform: none!important;}</style>

You can make the following customizations if you want:

  • Replace the black bolded text with any message you may like.
  • If you want you can replace the yellow highlighted link with your Custom Privacy Statement page else you can leave it as it is because the default link points to Blogger's Privacy page for Cookies info.
  • To change Notice Bar background color edit #333333
  • To change the green border that appears at the bottom of the bar edit #6FC415
  • To change the background color of Buttons edit #6FC415
  • To change the font color edit #dddddd

 

4 Save your template and you are all done!

Need Help?

Let me know if you need any further clarification or help. We have also started a discussion related to this topic at our Forum where you can interact with more bloggers to help you setup the cookie bar for you. Join the discussion by clicking here.

I hope you are now more safe than before. Wish you all a safe blogging journey. Peace and blessings buddies! :)

Create a Mobile Responsive Multi-level Drop Down Menu

responsive menu for blogger blogs

The biggest hurdle while creating a Fluid layout is to convert your Static header menu into a responsive one. You need to replace your wide desktop menu with an auto-adjusting mobile menu that must match your webpage color theme and should also contain enough room for both your Navigation links and Search Form. It thus can play a two-in-one role. Today we will create a jQuery menu with Toggle effect to slide up and slide down the Link list. The Menu container will also contain a search functionality and will support nesting of as many child lists as you wish to create. Our previously shared Responsive menu lacked few features which we have covered in this menu. It is therefore an advanced Multi-level Drop Down menu with several important features which are:

  1. It is Fully Responsive - will auto adjust to any mobile screen size
  2. It will appear Only in Mobile devices - thanks to isMobileRequest Conditional Tag
  3. It has a Responsive Search Form - Users can now easily navigate through your site
  4. It supports Infinite Nesting - Its nested structure allows you to add infinite sub-menus!
  5. It is Cross-Platform Browser Compatible - Design Supported by all major browsers

We have added the same menu in mbt and all our client sites. You can see a live demo of this great menu in action:

DEMO (Appears when you reduce window size)
Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
4. Design a Mobile Responsive Drop Down Menu for Blogger
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Add This Responsive Menu in Blogspot

Since we write tutorials exclusively for blogger users, therefore non-Blogger users may ignore steps which are specific to Blogspot. Follow these easy steps:

1. Go To Blogger > Template > Backup your template

2. Click Edit HTML

3. Search for <head> and just below it paste the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Note: The above code includes source links to jQuery library, FontAwesome icons and Oswald Font. If you already using anyone of it then you may avoid adding their respective source links.

4. Next search </head> and just above it paste the following CSS and JavaScript code

<style>
/*-----------Responsive Drop Down Menu by STCnetwork.org --------------*/
.sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya input{padding:5px 10px;width:75%;margin:5px 0 0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya button{background-color:#6FC415;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya button:hover{background:#76D314}
#navitions{background-color:#242729;border-bottom:0px solid #6FC415;box-shadow:0 1px 9px #666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px 2px 9px #6FC415}.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:block}.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px; font-family:oswald; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu &gt; li &gt; a{font-size:105%;font-family:oswald}.sf-menu ul ul{top:0;left:100%}.sf-menu{float:left}.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul li:hover{background-color:#333}.sf-menu ul a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu ul ul li{background:#3C3C3C}.sf-menu li:hover &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows .sf-with-ul{padding-right:1em}.sf-arrows .sf-with-ul:after{content:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}.sf-arrows ul li &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Verdana,Geneva,sans-serif}.sf-menu li &gt; i:after{content:&#39;+&#39;;color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li i.active:after  {left: 4px;font-size: 26px;top: -8px;}
.sf-menu li &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
.sf-menu li &gt; i.active:after{content:&#39;-&#39;;font-size:36px;top:-14px}.sf-menu a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust: 100%;}
@media only screen and (max-width:320px){#searchnya input{width:67%}}
@media only screen and (max-width:768px) {
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:&quot;\f0c9&quot;;top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav &gt; li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover &gt; a.home,.sf-menu &gt; li &gt; a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}
}
</style>

<script type='text/javascript'>
//<![CDATA[
// Superfish v1.7.2 - jQuery menu widget - Joel Brich
(function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" "+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return c.closest("."+p.menuClass)},o=function(c){return e(c).data("sf-options")};return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)})}return this},show:function(){var t=o(this);if(!t){return this}var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return this},destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" "+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}var u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true, disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};     
//]]>
</script>

 

5. Find <body> and just below it paste the following HTML code

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div id='navitions'>
        <div class='isi'>
          <nav class='navix' id='nav1'>
<div id='searchnya'>
               <form action='/search'>
           <input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Search here�&apos;;}' onfocus='if (&apos;Search here�&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Search here�'/>
                <button title='Search' type='submit'>
                  <i class='fa fa-search siy'/>
                </button>
              </form>
            </div>

            <a href='#' id='mobilenav'>
              Select Menu
            </a>
            <ul class='sf-menu' id='menunav'>
              <li>
                <a class='home' expr:href='data:blog.homepageUrl'>
                  Home
                </a>
              </li>

<li><a href='#'>LINK TEXT </a></li>
<li><a href='#'>LINK TEXT </a></li>
            
                   </ul>
           
            <script type='text/javascript'>
              //<![CDATA[
              menunav (jQuery);
              //]]>
            </script>
          </nav>
        </div>
      </div>
    </b:if>

 

  • Replace the # hash tag symbol with your Page URL
  • Replace LINK TEXT  with your Page Title
  • You can create sub-menus by following standard HTML by following these steps 
  • You can keep on adding new tabs just above </ul>

6. Finally save your template and you are all done!

 

Creating Multi Level Drop Down List

You are all done with the major code work. Now you just need to create the list in HTML using standard method. Any tab or link in your menu will have this structure:

<li><a href="#">LINK TEXT</a> </li>

To add a drop down list to this tab all you need to do is to paste the following code just before the closing </li> tag. See below:

<li><a href="#">LINK TEXT</a>

<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a></li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>

</li>

To add a second drop down list within this vertical list, simply use the same concept. I will add the second vertical list after the tab: "FIRST LIST 2"

<li><a href="#">LINK TEXT</a>

<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a>

<ul>
<li><a href="#">SECOND LIST 1</a></li>
<li><a href="#">SECOND LIST 2</a></li>
<li><a href="#">SECOND LIST 3</a></li>
</ul>

</li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>

</li>

 

Rest follows the same pattern.

Hide your Desktop Menu From Loading in Mobile Devices

To make sure  redundant links may not appear once because of your Desktop menu (menu you are currently using) and second because of your Responsive menu, we will have to disable your Desktop menu on mobile devices.

Enclose your Desktop Menu's HTML code inside the following conditional expressions:

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

Your Desktop Menu

</b:if>

The above condition will show the Desktop menu only in Laptops and Desktop screens but will hide it in Smartphones and Tablets/ipads. To understand in detail what the condition above does, please read part#3 of this tutorial series.

Credits

The menu uses the Superfish Plugin V 1.7.2 created by Joel Brich as the backbone for its front-end dynamic effects. Superfish is a jQuery plugin that adds usability enhancements to multi-level drop-down menus. Due to this plugin our menu now fully supports touch devices and keyboard interaction.

The design and customization to the scripts are contributed by STCnetwork. Kindly attach due credits back to this page if you wish to share this menu with your readers.

Need Help?

If you have any questions that you wish to ask then please do not hesitate to post them below. I hope the menu above may change the overall UI experience of your beautiful blogger blog for your mobile visitors.

The tutorial series above have been really popular this month and I would like to thank you all for finding it so useful. I am trying my best to complete it as soon as time allows. Wish you all a safe and happy blogging journey, Peace and blessings buddies! =)

Auto Update Credits Info in Template Footer

autoupdate credits info in template footerIt 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! =)

Disable rendering of JavaScript and Widgets Using isMobileRequest [2]

Disable Javascript in Mobile Blogger TemplatesNow 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!

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

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

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.

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'>
                    <!-- only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <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"'>
                    <!-- only display title if it's non-empty -->
                    <b:if cond='data:title != &quot;&quot;'>
                      <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

Disabing Javascript

 

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

2 Ways to Find Section ID and Widget ID in Blogspot

Locate widgets in bloggerWe have been asked several times how to find Gadgetid or widgetid of Blogger widgets so we thought a separate tutorial would be helpful in this case. We will share two ways to find and locate the widgetid and sectionid so both Windows users and Macintosh users may find it helpful. The page elements Section is now referred to as Layout section in Blogger dashboard. The widgets are mostly referred as Gadget in Layout section with blue highlighted links. Through this tutorial you will also understand how to easily locate widgets inside your blogger template using their IDs.

 

What is widgetid or sectionid?

widgetid :

Each widget that you create inside Layout has its unique Identification number that we refer as "ID". This Widget ID is always alphanumeric and is the only code that helps us control the widget look and appearance.

sectionid:

Each widget is added inside a section. In other words each section is a container that holds widgets. Popular sections of your blog are the Header, Sidebar, Footer and Main. These sections are also uniquely identified using their ID which we call the sectionid. We can use the section Id to modify the look and appearance of all widgets inside it.

Finding Section and Widget ID - Method 1

Each widget that you add to Layout has an edit link. If you hover your mouse cursor over it, your browser will show a tooltip at the bottom of your screen displaying important information related to that link. The information included in each link is:

gadget edit link

edit link info

  1. Blog ID : You can create up to 100 blogs in blogger. Each blog is identified using this ID.
  2. Widget Type: It's the Official name used for blogger widgets such as Header, Main, PopularPosts, Label etc.
  3. Widget ID
  4. Section ID

As shown in the second image above, the value next to widgetid is HTML3 which is the Gadget ID Code and the value next to sectionid is sidebar which is your Section ID code.

Section ID can easily be found now because recently blogger updated the Layout interface by highlighting in bold letters each section with its section ID Code.

blog posts section id

Sectionid is main in the above screenshot

sidebar section id

Sectionid is sidebar in the above screenshot

This method works for both Windows users and MAC users and is same for Safari/Opera/Firefox/Chrome browsers.

Finding Section and Widget ID - Method 2

This method could however work only for windows users because I am not user if Mac Safari browser does show URL for popup windows.

This time click the Edit link next to your widget, a popup window will open. Maximize it to see the Full URL in the address bar of the popup IFRAME.

popup url info

 

From the URL above you can see that the widgetid is HTML3 and sectionid is sidebar

That simple!

Locate Widgets in Blogger Templates

Now when you have learnt how to find the widgetid, its time to locate widgets inside your blogspot template. Suppose we wish to locate the widget with widgetid HTML3

locating widgets in blogger

1. Go to Blogger > Template > Click Edit HTML

2. Click the drop down menu "Jump to widget"

3. The drop down menu contains a list widget IDs. In our case it is HTML3. Click it!

List of Widget IDs

4. You will be taken to the location where the HTML DOM for your widget exists enclosed inside <b:widget> tags.

Widget Code

You can expand this code and edit the Widget Contents like its Headline, style content hidden inside <data:content/> tag or do amazing things with it like hiding the Widget from rendering inside Mobile devices or hiding widget on a particular page or post.  

Need Help?

Let me know if you need further clarification on any method. I would love to make it more simple for you. Stay tuned and subscribe to our email news letter for more amazing stuff. Peace and blessings buddies! =d

Eid-ul-Fitr 2015 Mubarak To All Readers!

Eid Mubarak 2015

Ramadan kareem has finally reached its destination and as I am writing this post, we are preparing the Last iftar and surely this marks the end a Holy month which was full of spiritual contemplation and reflection. With the end of this Iftar the Gates to Satan will be opened once again. Eid-ul-Fitr is a reward for people who remain stead fast in their fasting and worship. This Eid is a gift from Allah to His believers for the hard labour and endeavors that they suffered by staying hungry and thirsty for hours. We would therefore like to include all of our beloved readers in this Eid festivity, and we'd like to wish you all a very happy Eid Mubarak on behalf of entire STCnetwork team!  Wishing you a blessed Eid filled with happiness and joy. May you guys have the best time with your friends and family. :)

May this Eid Brings you good tidings that lasts forever!

 

EID Mubarak Buddies!

5 Ways to Improve Your Online Shop

5 ways to Optimize your online shopMost online retailers spend time updating their marketing tactics and developing new advertising campaigns, but no amount of marketing can help when your website isn�t optimized to create the best possible user experience. If your online store could use a boost in efficiency and appeal, give it a makeover with these tactics. I am sharing today 5 smart tips that will help you better optimize your online eCommerce site to turn every visitor into a returning customer

Design for Simplicity

Visitors should know the focus of your site within seconds of arriving at the homepage. Get rid of unnecessary text and design the layout around your main product or service. Avoid overwhelming visitors with too many choices. Use a large header image or a series of scrolling images to showcase current promotions and popular offerings.

design for simplicity

Category navigation should be simple and intuitive and require as few clicks as possible. Place a search box in a prominent place on every page to give customers the option of going directly to the products they�re looking for. Product descriptions should provide all necessary information in just a few descriptive sentences, offering only what the customer needs to know before they make a purchase. Make sure that �add to cart� buttons are visible both on product pages and in search results.

Provide Useful Filters

When customers perform a search on your site, the results can be overwhelming if there�s not a way to narrow down the results. Create sidebar filters with options such as category, brand, price and color to help people find exactly what they want. Place �breadcrumb� links at the top of every page so that customers can easily click back to a previous category when browsing or searching.

web search filters for online shopping

Your goal should make it as simple as possible for visitors to find the products that they came to your site to buy. The modern consumer doesn�t want to spend time sifting through page after page of results looking for one specific item. If that�s the only option that you offer, customers will leave without making purchases.

Make It Personal

Every search gives you the opportunity to customize the shopping experience for your visitors. You can use what people are searching for to track trends and see which products are getting the most attention. This same information can be applied to individual customers in the form of tailored product recommendations. Many sites display products similar to those that customers are viewing to give them an idea of what others with comparable interests are searching for and buying.

Customers also like being able to adjust settings in their accounts to receive personalized product recommendations either while they shop or via email. This directs them right to products they find useful or entertaining and can serve to increase sales by prompting them to make purchases they might not have considered before.

Step Up Style with Flipbooks

If you want to give your product catalog a little extra flair, consider designing a flipbook and embedding it in your site. Like a paper catalog, flipbooks include images and descriptions of products that users can browse at their leisure. However, flipbooks can feature links, audio and video along with static images to provide a much more dynamic experience.

designing a flipbook

The popularity of tablets means that the majority of your customers will look at your flipbook on a device other than a computer. This means that features of your website such as cart access and checkout buttons won�t be visible and could detract from your ability to make sales. However, many flipbook creation services allow you to embed these features directly into the catalog to let customers shop for products and make purchases without having to navigate to your main site.

An online PDF to Flipbook Converter is a great way to expand your reach beyond the scope of your website. Include social sharing links both on the page where the flipbook is featured and within the flipbook itself to encourage customers to share their favorite products with friends.

Streamline Your Checkout

streamline your checkoutEven customers that arrive on your site ready to make a purchase can get to the checkout and decide to abandon the process. This usually happens when the checkout is too long, too complicated or requires the input of too much information. If possible, pare your checkout process down to a single page. If you can�t use a one-page checkout, make sure that every page has a list of the steps at the top and that the current step is highlighted so that customers can see where they are in the process. This makes multi-step checkouts seem less arduous and encourages customers to proceed from one step to the next.

Another way to simplify checkout is to offer a guest option for those who don�t want to create a full account. This cuts down on the amount of clicks necessary to complete a purchase and decreases the likelihood that customers in a hurry will abandon their carts.

Need Help?

If you need more help and assistance in better optimizing your online shops, feel free to leave your comments below and we would love to share our experience with you. Do let us know how did you find these tactics and how far you think such minor changes could bring a drastic change in your business. Would love to hear from you guys. :)

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

Blogspot template with 100% Mobile User Experience

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
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

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;

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

MBT has a 100% user Experience

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

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

blogspot template operatorsAre 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

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