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.
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.
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
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>
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:
If you have chosen to hide the navbar then the message will display like this:
Before: A Long Textual string with dull colors.
After: A Neat and cleaner message with custom colors.
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:
4 Save your template and you are all done!
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! :)
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:
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:
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 > li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover > ul,.sf-menu li.sfHover > 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 > li > 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 > a,.sf-menu li.sfHover,.sf-menu > li > 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:'';position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .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 > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-left-color:#FFF}.sf-menu li > 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 > i:after{content:'+';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 > ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
.sf-menu li > i.active:after{content:'-';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:"\f0c9";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 > 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 > a.home,.sf-menu > li > 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 > ul,.sf-menu li.sfHover > ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover > 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 == "true"'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav1'>
<div id='searchnya'>
<form action='/search'>
<input name='q' onblur='if ('' === this.value) {this.value = 'Search here�';}' onfocus='if ('Search here�' === this.value) {this.value = '';}' 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>
6. Finally save your template and you are all done!
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.
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.
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.
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! =)
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
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:
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!
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! =)
UPDATE: isMobileRequest is applicable only to smartphone devices and it does not apply to tablets, iPads etc. Just a correction to this post.
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.
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.
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
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
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 != ""'>
<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 != ""'>
<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>
6 Save your template and you are all done!
Almost every widget that you install on your blog has a JavaScript or jQuery attached to it to bring about the dynamic front-end fancy effects. Just by hiding the widget HTML content wont help you speed up your blog unless you also hide/disable the scripts that make them work. If you hide a widget but forget to disable the script, then the JavaScript will still be loaded and rendered in background thus slowing down your site.
JavaScript of your widgets in blogger is either located above </head> tag or below <head> tag.
You must know where you widget script is located because you installed it yourself! Normally officially blogger widgets scripts load only when the HTML loads so you don't need to worry about most of blogger official widgets like PopularPosts, archives, Poll, Comments, Label List etc.
The Slideshow widget HTML3 that we hide earlier has a script that needs to be disabled also. Lets do that now!
1 Inside your template locate the script by searching it near <head> opening and </head> closing tags.
2 Once you find it then enclose the entire script code using isMobileRequest conditional expression as shown below
Use the following syntax:
<b:if cond='data:blog.isMobileRequest == "false"'>
JavaScript to Hide
</b:if>
3 Save your template and you are all done! That simple!
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! =)
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.
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:
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.
Sectionid is main in the above screenshot
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.
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.
From the URL above you can see that the widgetid is HTML3 and sectionid is sidebar
That simple!
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
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!
4. You will be taken to the location where the HTML DOM for your widget exists enclosed inside <b:widget> tags.
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.
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
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!
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.
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.
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.
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.
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.
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.
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.
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.
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. :)
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.
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.
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.
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.
This Magic Data Tag has helped us receive a 100/100 score on Google PageSpeed tool for MBT;
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.
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 :)
