Alama Iqbal Urdu Shayri Pics,Alama Iqbal Bang e Dara,Alama Iqbal Jwab E Shikwa,Alama Iqbal 2lines shayri Pics,Alama Iqbal 2lines urdu Shayri Pics,Iqbal Poetry Pics, Alama Iqbal Towline Shayri Pics
Friday 31 July 2015
Thursday 30 July 2015
jon elia sad poetry pics in urdu
jon elia urdu poetry images,sad poetry of jon elia,urdu poetry pics jon elia,jon elia poetry pics,jon elia urdu images poetry,2 lines urdu poetry of jon elia,tow lines jon elia poetry,sad 2lines poetry,jon elia sad towlines poetry
Customize Blogger EU Cookies Notification Bar
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:
If you have chosen to hide the navbar then the message will display like this:
Lets Customize the EU Cookies Notice Bar!
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:
- 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! :)
Tuesday 28 July 2015
Create a Mobile Responsive Multi-level Drop Down Menu
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:
- It is Fully Responsive - will auto adjust to any mobile screen size
- It will appear Only in Mobile devices - thanks to isMobileRequest Conditional Tag
- It has a Responsive Search Form - Users can now easily navigate through your site
- It supports Infinite Nesting - Its nested structure allows you to add infinite sub-menus!
- 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
4. Design a Mobile Responsive Drop Down Menu for Blogger
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 > 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>
- Replace 6FC415 with your preferred hexadecimal color code so that the menu may match your blog color theme
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>
- 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! =)
Saturday 25 July 2015
Auto Update Credits Info in Template Footer
It makes a lot of sense to always add your website name along with Copyrights Date/time in Footer credits to let your users get accustomed to your brand identity and also know that you reserve full copyrights of the content you share on your blog. A credit link consists of mostly your Trademark/benchmark name (i.e. Blog Title) and the Time interval for which you deserve full ownership of your Blog resources and of its use and distribution. When we design Blogger templates we often add Credit links or attribution links at the bottom of the blog footer to let everyone know who designed and developed the template.
In your case if you want to remind your visitors of who owns the content and resources then you can surely use the simple script shared below which will dynamically insert your Blog Title, Blog link and current Year in your blog to let everyone know of your Copyrights. After using this XHTML + JavaScript, no matter how many years may pass by, your footer credits will always show the current Copyrights Legal Date, thus preventing you from manually updating the Date each year and Blog Title each time you update the Site Title. If it is 2015 it will show � 2015 and in 2020 it will automatically get updated to � 2020. Therefore this tutorial will help you Auto Insert Copyrights Legal Date and Trademark in Blogger Footer Credits. Lets get started
Update Blogger footer Credits
1 Go To Blogger > Template > Backup your Template
2 Click Edit HTML
3 Search your Footer Credits code and replace the contents with this Simple code.
INPUT:
<a expr:href='data:blog.homepageUrl'><data:blog.title/>� </a>� <script type='text/javascript'>document.write(new Date().getFullYear());</script>, All Rights Reserved.
OUPUT:
My Blogger Tricks� � 2015, All Rights Reserved.
Things to note:
- data:blog.homepageUrl will be replaced with your Blog Homepage URL
- <data:blog.title/>� will be replaced with your Homepage title i.e. Your Trademark
- The green highlighted script will be replaced with Current new Date of the year. getFullYear() returns the year in four digits. You can learn more about it at JavaScript Date Reference
- You can replace the bold black text with any custom message you may like
4 Finally save your template!
Your Footer will now be automatically updated each time you change your blogspot blog title or when the new year arrives!
Need Help?
Let me know if you needed any help with this simple XHMTL trick that uses Blogger layout tags and some simple JavaScript. Wish you great weekend buddies. Have fun with friends and family. Peace buddies! =)
Thursday 23 July 2015
Disable rendering of JavaScript and Widgets Using isMobileRequest [2]
Now that you have learnt how to hide HTML content in Blogspot blogs using the conditional tag "isMobileRequest", Its time to learn how to prevent blogger Widgets from loading inside Mobile devices for Responsive Blogger Templates. It is really important that your mobile site may load as faster as possible due to slow internet speed of Mobile browsers. In order to achieve this purpose, we need to hide some widgets that makes no sense in small screen devices. These Sidebar widgets could include your Fancy Subscription boxes, search boxes, Labels, Archives, PopularPosts, Blog ROLL, Recent comments and so on. Most of these widgets use jQuery or JavaScript that really slows down the site. Therefor we will not just hide the Widget HTML content but would also disable its javaScript. You can continue showing them in Desktop/Laptop devices but it is really advisable that you hide such widgets for mobile devices in order to speed up your Page load time as much as possible in order to rank higher on Mobile Search results. We have experienced a tremendous positive impact of this technique on our Blogger blog (mbt) and it has really helped increasing our mobile traffic a lot. Lets get started!
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]
How to Find and Hide Widgets?
Before hiding widgets first learn how to find Widget ID. We published a post yesterday solely to help you out.
- Must Read: 2 Ways to Find Widget ID in Blogger
After you have explored how to locate widgets inside Template, you are ready to learn how to disable them in mobile devices so that they may not load in background and may not slow down your blog speed in smartphones and tablets, thus giving a speedy mobile experience to your readers.
Disable Widgets in Responsive Templates
In order to understand how it is done, we will assume that our widgetid is HTML3, which is the 'Back at Home' widget on our blog and we will discuss it throughout this tutorial.
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>
- We have set the isMobileRequest Boolean value to false, so that the widget may load only in Desktop devices and it must be kept hidden in Mobile devices. If you visit our blog using a Mobile browser (not a desktop simulator), you will observe that the 'Back at home' widget is not loaded at all.
- If you want the widget to display only in Mobile devices but not desktop then set the Boolean value to true
- This Slideshow widget contains up to 12 images which could have really slowed down our blog in mobile devices but thanks to this conditional tag, things are much neater now.
6 Save your template and you are all done!
Disable Widget Scripts From Loading in Background
Almost every widget that you install on your blog has a JavaScript or jQuery attached to it to bring about the dynamic front-end fancy effects. Just by hiding the widget HTML content wont help you speed up your blog unless you also hide/disable the scripts that make them work. If you hide a widget but forget to disable the script, then the JavaScript will still be loaded and rendered in background thus slowing down your site.
JavaScript of your widgets in blogger is either located above </head> tag or below <head> tag.
You must know where you widget script is located because you installed it yourself! Normally officially blogger widgets scripts load only when the HTML loads so you don't need to worry about most of blogger official widgets like PopularPosts, archives, Poll, Comments, Label List etc.
The Slideshow widget HTML3 that we hide earlier has a script that needs to be disabled also. Lets do that now!
1 Inside your template locate the script by searching it near <head> opening and </head> closing tags.
2 Once you find it then enclose the entire script code using isMobileRequest conditional expression as shown below
Use the following syntax:
<b:if cond='data:blog.isMobileRequest == "false"'>
JavaScript to Hide
</b:if>
- The condition is set to false which means the script will not be loaded in Mobile devices but it will load in Desktop and Laptops.
- If you want the opposite then set the condition to true
3 Save your template and you are all done! That simple!
Need Help?
Let me know if you could not understand any part of the tutorial by leaving your comments below. I hope this rarely used yet recommended technique may help you better optimize your blogger blogs for mobile.
Wish you peace and love buddies! =)
Wednesday 22 July 2015
2 Ways to Find Section ID and Widget ID in Blogspot
We 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:
- Blog ID : You can create up to 100 blogs in blogger. Each blog is identified using this ID.
- Widget Type: It's the Official name used for blogger widgets such as Header, Main, PopularPosts, Label etc.
- Widget ID
- 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.
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.
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.
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
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.
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
Friday 17 July 2015
Eid-ul-Fitr 2015 Mubarak To All Readers!
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!
Thursday 16 July 2015
5 Ways to Improve Your Online Shop
Most 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.
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.
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.
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
Even 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. :)
