Create a Background Slideshow for Blogger

In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor. The method that we'll use now with jQuery is a plugin called BackStretch which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.

What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.
You can see an example in this demo blog.

To put this slideshow in the blog's background, just go to Template - Edit HTML and before </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>

<script>
//<![CDATA[
var images = [
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
 "Image URL",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

Here add the URLs of the images that will be the background of your blog.
If you would like to add more pictures, just add after the var images = [ another line like this:

 "Image URL",

The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:

<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="Image URL";
images[ 2 ]="Image URL";
images[ 3 ]="Image URL";
images[ 4 ]="Image URL";
images[ 5 ]="Image URL";

  Array.prototype.shuffle = function() {
  var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
  }
};

  images.shuffle();
  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

You can also add more pictures by adding a line like this:

images[ 6 ]="Image URL";

But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..

In both cases you can change the duration of each image which is in the 5000 value that is at the end of the script.
The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.

It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave only one version.

Author page | Backstretch

Rounded Corners and Shadows for Images using CSS

Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four corners simultaneously or applying the rounded border only to some of them.

One of the advantages of CSS3 is that we can apply rounded borders without complicating things too much and one of the options would be to use these edges or borders to images in the blog posts, to which we can also add some hover effects such as shading and rounded borders accompanied by transitions.

Note: if you need more info about how to add rounded corners on images, follow these links:
- CSS Basics. How to Apply Rounded Corners On Images #1
- CSS Basics. How to Apply Rounded Corners On Images #2

Below are a few examples of these borders and how the images behave when you hover over them.
If you want to use one of these styles, just copy the code below the image, then go to Template, click on the Edit HTML button and paste that code before ]]></b:skin> (CTRL + F to find it)

.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* background color around the image */
padding:15px; /* space between border and image */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* the background color around the image */
padding:15px; /* The Space Between Border and Image */
border-radius: 50% 0; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* With this we remove the shadow (value 0) */
border-radius: 0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* This removes the roundness of border (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

So these effects will apply to all images uploaded to your Blogger posts. But if you want to apply them only on certain pictures then change .post-body img with .rounded  and .post-body img:hover with .rounded:hoverThen add the rounded class selector in the image's code:

<img class="rounded" src="Image URL"/>

These are just some examples, however, you can modify them anytime by adding or deleting more CSS styles, it depends on everybody's tastes or needs. But as you have seen, we can make the images look way more attractive and this has been done only with CSS ;)

Fundraising for GPL game Plee the Bear

This is a guest post by Julien Jorge, developer, artist and musician behind the open source indie games Plee the Bear and Andy's Super Great Park, here to present the fundraising campaign he launched for the former.

Some years ago, with the help of three of my friends and anonymous people on the web, I have created Plee the Bear, a great platformer in which you play an angry bear whose son has been kidnapped by god. Here is a guy hard to brave! You sure will jump in this amazing journey to find and rescue your son. Because you want to rescue him, don't you? Or to slap him? Maybe both….

The game was a spare time project for a long time, then we recently decided to create a real, full, complete, fun and original version out of the prototype. We have thus created our company, Stuffomatic, published a first game and now we are launching a fundraising campaign for Plee the Bear!

The prototypes of the game have always been released for Windows and Linux as free software, available under the terms of the GNU GPL and the CC by-sa licenses. The latest version contains three levels of the storyline and four mini-games; and has already generated very positive criticisms (e.g. on The Linux Game Tome). Players loved the fun, the graphics and the music; other indie developers were pleasantly surprised by the technical skills and the details of the game; and people in the free software movement appreciated the overall process and the quality of the resources, remarkable for a free game.

All these feedbacks motivated us to complete the game and to launch a fundraising campaign to help the development. The campaign is organized in order to implement the new contents of the game one after the other, each time with a new fundraiser. So, for the initial one, the feature you are welcome to support is a complete refresh of the existing work. You can see the details on the project's page on OpenFunding but let me show you how the game will look:

To be compared with the current release:

(The screen is larger in the new version, it's not just Plee who is smaller…) 

The animations will also be reworked. For example, here is a comparison of the changes in the animation of Plee walking. The old version is on the bright stripes, the new one is in the black stripes:

If you are a game developer, you may have already used some free resources from websites like OpenGameArt.org or Freesound.org. If you are a gamer, you may have played games using the resources of such websites. In both cases, you are certainly interested by our process consisting of releasing each part of the game under a free license. Actually, we have recently started to supply OpenGameArt.org with our assets.

So, if you like our project:

• give us some money for the next development steps,
• give us feedback about the process to help us improving it,
• share this announcement with your neighbors.

This way, we will all go toward a fun and good game :)

How to make the background image of the blog fill the entire screen

A constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monitor. And that is when we put a background image as measured by our monitor forgetting that there are actually monitors of all resolutions, very small and very large. So if we put an image according to our screen, there will be someone with a bigger monitor that surely will not see the whole picture or it will be repeated, and in this case, using very small monitors, the image will be seen incomplete.

Here I will talk about two solutions for this, one is using CSS3, and another is using jQuery. With either of these two, we'll make the background image of the page to fill the entire screen regardless of the resolution of it.

CSS3

The first option is using CSS3, the advantage with this method is that we do not overload the blog with scripts, we use only the background-size property that is responsible for doing what we want.
The disadvantage is that this property is supported only by modern browsers, so in the case of Internet Explorer, it will only be seen for version 9 and above, in other browsers there shouldn't be any problem.
The method is very simple, just go to Template - Edit HTML, locate the background that is within body { and replace it with this:

background: url(Image URL) no-repeat center center fixed;
background-size: cover;

Note: to find the body { tag, click anywhere inside the code area then press the CTRL + F keys and paste it inside the search box. If you can't find it, remove the space between "body" and "{" then search again.

It would look something like this:

body {
background: url(URL of the image) no-repeat center center fixed;
background-size: cover;
margin:0;
}

Just put the URL of the image and that's it.

jQuery

With this method we will use jQuery with BackStretch plugin, the advantage is that it works in all browsers, including IE7 and above. And if you already use jQuery, you don't have to worry about the loading time of your blog, because the plugin is actually small.

To use this method in your blog, go to Template - Edit HTML and before </head> paste this script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
$.backstretch("URL of the image");
</script>

Put the URL of the image where indicated and ready.

As you can see both options are easy to apply, each with its pros and cons, but the result is the same, stretching the background image to fit the screen of any monitor regardless of the resolution of it.

Remember that in the case of jQuery method, you should verify that you are not using Mootools or Scriptaculous, and if you already have it, you will have to implement some changes in the script to make it compatible. And if you already use jQuery remember having only one version - the last one.

Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere. In addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch.

One of the advantages is that it can store a large number of links and can be removed anytime by clicking the 'Close' button.

Vertical Dropdown Menu for Blogger Demo

To understand this jQuery dropdown menu better and see it in action, please visit the demo blog below. There we can drag the menu, navigate through its tabs or close it.

Demo blog

How to Add Vertical Drop down Menu with jQuery in Blogger

To add a vertical drop-down menu with jQuery in a Blogger blog, follow these steps:

1. From your Blogger dashboard, go to 'Template' and click the 'Edit HTML' button. Once the template editor opens, click anywhere inside the code area and press the CTRL + F keys to open the search box.

Type </head> inside the search box and just before this tag, add the following scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery.jGlideMenu={useDropShadow:new Boolean(),useDragDrop:new Boolean(),defaultScrollSpeed:new Number(0),defaultScrollBackSpeed:new Number(0),slideRight:new Boolean(),useSmoothScrolling:new Boolean(),easeFx:new String(''),closeLinkMarkUp:new String(''),menuShowFx:new String(''),menuHideFx:new String(''),tileWidth:new Number(0),tileInset:new Number(0),itemsToDisplay:new Number(8),useTileURL:new Boolean(),tileSource:new String(''),URLParams:new Object(),loadImage:new String(''),loadImageStyle:new Object(),initialTile:new String(''),alertOnError:new Boolean(),captureLinks:new Boolean(),imagePath:new String(),tileCount:new Number(0),animation:new Boolean(),helperImage:new Boolean(),currentElement:new Object(),currentElementID:new String(''),hasDragDropSupport:new Boolean(),hasShadowSupport:new Boolean(),displayToggle:new Boolean(),tileScrollPosition:new Array(),smoothScrollTimer:new Array(),mouseHover:new Boolean(),demoMode:new Boolean(),initialize:function(o)
{return this.each(function(){jQuery.jGlideMenu.animation=false;jQuery.jGlideMenu.helperImage=false;jQuery.jGlideMenu.hasDragDropSupport=false;jQuery.jGlideMenu.hasShadowSupport=false;jQuery.jGlideMenu.tileCount=0;jQuery.jGlideMenu.displayToggle=false;jQuery.jGlideMenu.mouseHover=false;jQuery.jGlideMenu.demoMode=false;jQuery.jGlideMenu.currentElement=jQuery(this);if(this.id)jQuery.jGlideMenu.currentElementID=this.id;var s={itemsToDisplay:8,tileInset:7,tileWidth:227,useDropShadow:false,slideRight:true,useDragDrop:true,useSmoothScrolling:true,useTileURL:false,defaultScrollSpeed:750,defaultScrollBackSpeed:800,tileSource:'myTiles',URLParams:{},closeLinkMarkUp:'Close',menuShowFx:'fadeIn',menuHideFx:'fadeOut',easeFx:'linear',loadImage:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_chQ0lh1GpQUDtjk6HEK_aqJLQLoX6LZmZfvvrdLMpTbKDqdFpvPR7-oS5hzYX6uO7S-Pqayj-AYqVu3F9Yu0_YoP5RvjXQmzXzN9zNMcA5np-PGrd13Q1AQO4AXZAGxERJ1nnCVQw8/s1600/ajax.gif',initialTile:'tile_001',alertOnError:false,captureLinks:true,loadImageStyle:{'position':'absolute','bottom':'10px','left':'10px','z-index':'999'},imagePath:'img/',demoMode:false};if(o)jQuery.extend(s,o);jQuery.jGlideMenu.checkFeatures();if(s.closeLinkMarkUp.length<1)s.closeLinkMarkUp='x Close';if(parseInt(s.itemsToDisplay)<1)s.itemsToDisplay=1;if(s.initialTile.length<0)jQuery.jGlideMenu.errorTrap('Invalid Configuration');for(i in s)jQuery.jGlideMenu[i]=s[i];if(jQuery.jGlideMenu.useTileURL==false&&jQuery.jGlideMenu.tileSource.length>0)
{jQuery(jQuery.jGlideMenu.tileSource).css('display','none');jQuery(jQuery.jGlideMenu.currentElement).children().not(jQuery.jGlideMenu.tileSource).remove();}
else jQuery(jQuery.jGlideMenu.currentElement).html('');jQuery(jQuery.jGlideMenu.currentElement).append('<div class="jGM_header"><a href="#">'+jQuery.jGlideMenu.closeLinkMarkUp+'</a></div>').append('<div class="jGM_wrapper" id="jGM_wrapper_'+this.id+'"></div>');var img=document.createElement('img');img.src=jQuery.jGlideMenu.loadImage;img.style.display='none';img.id='jGM_helper'+jQuery.jGlideMenu.currentElementID;jQuery(jQuery.jGlideMenu.currentElement).append(img);jQuery('img#'+img.id).css(jQuery.jGlideMenu.loadImageStyle);jQuery.jGlideMenu.helperImage=true;if(jQuery.jGlideMenu.hasDragDropSupport==true&&jQuery.jGlideMenu.useDragDrop==true)
{if(jQuery.isFunction(jQuery('body').Draggable))
jQuery(this).Draggable({handle:'.jGM_header'});else
jQuery(this).draggable({handle:'.jGM_header'});}
if(jQuery.jGlideMenu.hasShadowSupport==true&&jQuery.jGlideMenu.useDropShadow==true)
{if(jQuery.isFunction(jQuery('body').dropShadow))
jQuery(this).dropShadow();else
jQuery(this).shadow({color:'#cccccc'});}
jQuery(jQuery.jGlideMenu.currentElement).find('div.jGM_header a').bind('click',function(){if(jQuery.jGlideMenu.displayToggle==true)return false;jQuery.jGlideMenu.toggleDisplay(true);return false;});jQuery(this).hover(function(){jQuery.jGlideMenu.mouseHover=true;},function(){jQuery.jGlideMenu.mouseHover=false;});jQuery(document).keydown(function(e)
{return false;var key=e.charCode?e.charCode:e.keyCode?e.keyCode:0;if(key==32&&jQuery.jGlideMenu.mouseHover==false){jQuery.jGlideMenu.toggleDisplay();return;}
if(jQuery.jGlideMenu.mouseHover==false)return false;switch(key)
{case 37:break;case 38:break;case 39:break;case 40:break;case 13:break;case 32:jQuery.jGlideMenu.toggleDisplay();return;break;}});jQuery.jGlideMenu.loadTile(jQuery.jGlideMenu.initialTile,jQuery.jGlideMenu.URLParams);});},toggleDisplay:function(r)
{jQuery.jGlideMenu.displayToggle=true;jQuery.jGlideMenu.mouseHover==false;if(jQuery(jQuery.jGlideMenu.currentElement).css('display')=='block')
var toggle_value=0;else
var toggle_value=1;jQuery(jQuery.jGlideMenu.currentElement).animate({opacity:toggle_value},'slow',function()
{if(r==true)
{jQuery.jGlideMenu.scrollToTile(0,jQuery.jGlideMenu.defaultScrollBackSpeed);jQuery.jGlideMenu.tileScrollPosition[0]=0;}
if(toggle_value>0)
jQuery(this).css('display','block');else
jQuery(this).css('display','none');jQuery.jGlideMenu.displayToggle=false;});},checkFeatures:function(){jQuery.jGlideMenu.hasDragDropSupport=jQuery.isFunction(jQuery('body').Draggable);if(jQuery.jGlideMenu.hasDragDropSupport==false)
jQuery.jGlideMenu.hasDragDropSupport=jQuery.isFunction(jQuery('body').draggable);jQuery.jGlideMenu.hasShadowSupport=jQuery.isFunction(jQuery('body').dropShadow);if(jQuery.jGlideMenu.hasShadowSupport==false)
jQuery.jGlideMenu.hasShadowSupport=jQuery.isFunction(jQuery('body').shadow);return;},parseURL:function(u){if(!$.browser.msie)
{return u;}
if(u.indexOf('#tile_')<0)
{return u;}
var bits=u.split('#');return'#'+bits[(bits.length-1)];},countTiles:function(){jQuery.jGlideMenu.tileCount=parseInt(jQuery('div.jGM_tile').size());},loadTile:function(u,p)
{var ptr=document.createElement('div');var ctr=jQuery.jGlideMenu.tileCount+1;ptr.id='jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+ctr;if(jQuery.jGlideMenu.slideRight==true)
var off=jQuery.jGlideMenu.tileWidth*jQuery.jGlideMenu.tileCount+jQuery.jGlideMenu.tileInset;else
var off=jQuery.jGlideMenu.tileWidth*jQuery.jGlideMenu.tileCount*-1+jQuery.jGlideMenu.tileInset;jQuery('#jGM_wrapper_'+jQuery.jGlideMenu.currentElementID).append(ptr);jQuery('#'+ptr.id).addClass('jGM_tile').css({top:0,left:off+'px',height:'288px',width:'213px',position:'absolute',overflow:'hidden',margin:0,padding:0,border:0,display:'block'});var tmpl='<div style="height:100%;margin:0;border:0;width:100%;padding:0;text-align:center;">'
+'<h3>Missing Tile</h3><p>Unable to locate the requested Tile</p></div>';if(jQuery.jGlideMenu.useTileURL==false)
{if(jQuery('ul#'+u).size()<1)
{jQuery.jGlideMenu.errorTrap('Invalid Tile Request');return false;}
var title=jQuery('ul#'+u).attr('title');var desc=jQuery('ul#'+u).attr('alt');var items=jQuery('ul#'+u+' li').size();var links=[];jQuery('ul#'+u+' li').each(function(){if(jQuery('a',this).size()>0)
links[links.length]=[jQuery('a',this).attr('href'),jQuery('a',this).text(),1];else
links[links.length]=[jQuery(this).attr('rel'),jQuery(this).text(),0];});var tmpl=jQuery.jGlideMenu.buildTile(title,desc,links);}
else
{if(jQuery.jGlideMenu.tileSource.length<1)
{jQuery.jGlideMenu.errorTrap('Invalid AJAX Request');return false;}
var mon='img#jGM_helper'+jQuery.jGlideMenu.currentElementID;jQuery(mon).ajaxStart(function(){jQuery(this).animate({opacity:'show'},'fast');}).ajaxStop(function(){jQuery(this).animate({opacity:'hide'},'slow');});p.tile=u;jQuery.ajax({type:"POST",url:jQuery.jGlideMenu.tileSource,data:p,async:false,success:function(xhtml){jQuery('body').append('<div id="jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+'" style="display:none;">'+xhtml+'</div>');if(jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).size()<1)
{jQuery.jGlideMenu.errorTrap('AJAX: Invalid Tile Request');return false;}
var title=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).attr('title');var desc=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u).attr('alt');var items=jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u+' li').size();var links=[];jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile+' ul#'+u+' li').each(function(){if(jQuery('a',this).size()>0)
links[links.length]=[jQuery('a',this).attr('href'),jQuery('a',this).text(),1];else
links[links.length]=[jQuery(this).attr('rel'),jQuery(this).text(),0];});jQuery('#jGM_temp_'+jQuery.jGlideMenu.currentElementID+p.tile).remove();tmpl=jQuery.jGlideMenu.buildTile(title,desc,links);jQuery(mon).ajaxStart(function(){}).ajaxStop(function(){});},error:function(rslt){jQuery.jGlideMenu.errorTrap('Invalid AJAX Tile Request');jQuery(mon).ajaxStart(function(){}).ajaxStop(function(){});}});}
jQuery('#'+ptr.id).html(tmpl);jQuery('#'+ptr.id+' div.jGM_content a').bind('click',function(){var target='';target=jQuery.jGlideMenu.parseURL(jQuery(this).attr('href'));if(target.length<1){return false;}
if(target.substr(0,1)=='#')
{if(jQuery.jGlideMenu.animation==true)return false;var dest=target.substr(1,target.length-1);jQuery.jGlideMenu.loadTile(dest,jQuery.jGlideMenu.URLParams);return false;}
else
{if(jQuery.jGlideMenu.demoMode)
{alert('Navigation Requestion: '+target);}
else
{window.location.href=target;}
if(jQuery.jGlideMenu.captureLinks==true)return false;}
return true;});jQuery.jGlideMenu.countTiles();if(jQuery.jGlideMenu.tileCount>1)
{jQuery('#'+ptr.id).append('<div class="jGM_back"><a href="#">&laquo; Back</a></div>');jQuery('#'+ptr.id+' div.jGM_back').bind('click',function(){if(jQuery.jGlideMenu.animation==true)return false;jQuery.jGlideMenu.scrollToTile((ctr-1),jQuery.jGlideMenu.defaultScrollBackSpeed);return false;});if(jQuery.jGlideMenu.tileCount>2)
{jQuery('#'+ptr.id).append('<div class="jGM_reset"><a href="#">&laquo; Home</a></div>');jQuery('#'+ptr.id+' div.jGM_reset').bind('click',function(){if(jQuery.jGlideMenu.animation==true)return false;jQuery.jGlideMenu.scrollToTile(1,jQuery.jGlideMenu.defaultScrollBackSpeed);return false;});}}
jQuery.jGlideMenu.tileScrollPosition[ctr]=0;jQuery.jGlideMenu.drawPagers(ptr.id,jQuery('#'+ptr.id+' .jGM_content a').size());if(jQuery.jGlideMenu.useSmoothScrolling==false)
{jQuery('#'+ptr.id+' .jGM_pager a').click(function(){var dir=1;if(jQuery(this).attr('rel')=='Up')dir=0;jQuery.jGlideMenu.scrollItems(dir);});}
else
{jQuery('#'+ptr.id+' .jGM_pager a').hover(function(){var dir=1;if(jQuery(this).attr('rel')=='Up')
dir=0;jQuery.jGlideMenu.smoothScrollTimer[jQuery.jGlideMenu.tileCount]=window.setInterval('jQuery.jGlideMenu.scrollItems('+dir+')',250);},function(){window.clearInterval(jQuery.jGlideMenu.smoothScrollTimer[jQuery.jGlideMenu.tileCount]);});}
jQuery.jGlideMenu.scrollToTile(ctr,jQuery.jGlideMenu.defaultScrollSpeed);},scrollItems:function(d)
{var x='#jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+jQuery.jGlideMenu.tileCount;var s=jQuery(x+' .jGM_content a');var c=jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount];if(c<=0&&d==0)return;if(c+jQuery.jGlideMenu.itemsToDisplay>=jQuery(s).size()&&d==1)return;if(d==0)
jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]--;else
jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]++;jQuery(s).show();jQuery(x+' .jGM_content').children('a:lt('+jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]+')').hide();jQuery.jGlideMenu.drawPagers(x.substr(1,x.length),jQuery(s).size());},drawPagers:function(p,c)
{jQuery('#'+p+' .jGM_pager').find('a').each(function(){if(jQuery(this).attr('rel')=='Up')
{if(jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]>0)
jQuery(this).css('display','block');else
jQuery(this).css('display','none');}
else
{if(jQuery.jGlideMenu.tileScrollPosition[jQuery.jGlideMenu.tileCount]+jQuery.jGlideMenu.itemsToDisplay<jQuery('#'+p+' .jGM_content a').size())
jQuery(this).css('display','block');else
jQuery(this).css('display','none');}});},cleanTiles:function(n)
{var start=n+1;var stop=jQuery.jGlideMenu.tileCount;if(n>=stop)return false;for(var i=start;i<=stop;i++)
{jQuery('#jGM_tile_'+jQuery.jGlideMenu.currentElementID+'_'+i).remove();jQuery.jGlideMenu.tileScrollPosition[i]=0;}
jQuery.jGlideMenu.countTiles();return;},scrollToTile:function(n,s)
{jQuery.jGlideMenu.countTiles();var t=jQuery.jGlideMenu.tileCount;if(n>t)n=t;if(n<1)n=1;if(!s)s=jQuery.jGlideMenu.defaultScrollSpeed;var b=(jQuery.jGlideMenu.tileWidth*n)-jQuery.jGlideMenu.tileWidth;var a=(jQuery.jGlideMenu.slideRight==true)?b*-1:b;jQuery.jGlideMenu.animation=true;jQuery('div#jGM_wrapper_'+jQuery.jGlideMenu.currentElementID).animate({'left':a},s,jQuery.jGlideMenu.easeFx,function(){if(n<t)
jQuery.jGlideMenu.cleanTiles(n);if(a!=0)a+='px';jQuery(this).css({'left':a});jQuery.jGlideMenu.animation=false;});},buildTile:function(t,d,l)
{if(jQuery.jGlideMenu.imagePath.length>1&&jQuery.jGlideMenu.imagePath.substr(-1,1)!='/')
jQuery.jGlideMenu.imagePath+='/';var template=new String('');template='<div class="jGM_cats"><h4>'+t+'</h4><p class="jGM_desc">'+d+'</p></div>';template+='<div class="jGM_pager"><a href="#" rel="Up" style="display:none"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiWglgPAJ_vwPs_lByTSIVYzPIXczSRyjwshN9X4Fb_jFnm8l-fl1PQodT0shgNB7Fna-Z86ItwXho7bxlh4aUwX1-C1TAQNx_W6qcNkHd7hLhEnxhQoc8IDajX0ANUxH0hxIORrZrRk/s1600/arrow_up.gif" alt="Scroll Up"/></a></div>';template+='<div class="jGM_content">';for(var i=0;i<l.length;i++)
{var hash=(l[i][2]==1)?'':'#';var type=(l[i][2]==1)?'':' class="jGM_more"';template+='<a href="'+hash+l[i][0]+'"'+type+'>'+l[i][1]+'</a>';}
template+='</div>';template+='<div class="jGM_pager"><a href="#" rel="Down"  style="display:none"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCBLqEXLwmR-oHiObZms5GqV3CvGw5DRIlq86lXem6bbOzUoWEILPYTC5CXPPSQqxQTOgwFCaCmm9hyTLgvTniabkiUEERYPggNIMCp1EKIjhpPzvjzTMYUFWkAZPfa0bcHdlyuSmr3hI/s1600/arrow_dn.gif" alt="Scroll Up"/></a></div>';return template;},errorTrap:function(m)
{if(jQuery.jGlideMenu.alertOnError==true)
alert(m);return;}}
jQuery.fn.jGlideMenu=jQuery.jGlideMenu.initialize;jQuery.fn.jGlideMenuToggle=jQuery.jGlideMenu.toggleDisplay;jQuery.fn.reverse=function(){return this.pushStack(this.get().reverse(),arguments);};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

2. Search for the ]]></b:skin> tag and just before it, paste the CSS code:

.jGM_box {
position: absolute; /* Change 'absolute' with fixed if you want it to float */
top: 50px; /* Distance from the top of the window */
right: 760px; /* Distance from right */
width: 227px;
height: 317px;
background: #fff; /* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Border color */
overflow: hidden;
}
.jGM_header{position:absolute;top:0;left:0;height:18px;width:227px;background:#d1d1d1;color:#fff;text-align:right;vertical-align:middle;line-height:18px;cursor:move}.jGM_header a{margin-right:12px;text-decoration:none;color:#000 !important;cursor:pointer}.jGM_wrapper{position:absolute;top:19px;left:0;width:2270px;height:288px;margin:0;padding:0;border:0}.jGM_tile{position:absolute;top:0;left:7px;width:213px;height:auto;overflow:hidden;margin:0;padding:0;border:0;display:block}.jGM_cats{width:100%;height:64px;overflow:hidden;vertical-align:middle;text-align:left}.jGM_cats h4{font-family:Verdana,Arial,serif;font-size:1.8em;margin:0;padding:2px 0;line-height:1.8em;color:#414141;font-weight:normal}.jGM_cats p{font-family:Verdana,tahoma,arial;font-size:1em;margin:0;padding:0;line-height:1.2em;color:#858585;font-weight:normal}.jGM_pager{height:18px;width:213px;line-height:18px;margin:0;border:0;padding:0;background:#f6f6f6;text-align:center;vertical-align:middle}.jGM_pager a{text-decoration:none;font-weight:bold;text-decoration:none;display:block}.jGM_pager a:hover{background:#d1d1d1}.jGM_pager img{border:0;margin:6px 0}.jGM_content{width:213px;height:150px;margin:1px 0;padding:0;border:0;overflow:hidden}.jGM_content a{font-family:Tahoma,arial;text-decoration:none;color:#333 !important;height:18px;width:100%;display:block;line-height:18px;padding:0 0 0 10px;background-color:#e6e7e9;margin:1px 0}.jGM_content a:hover{color:#fff !important;background-color:#4D4E67}.jGM_more{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-OQ6lize2vDgSOSdv4nfUNUOrVA6yljRcH4OqkJhijiKHOhE712tqn0aqsQiRxDRabdq8t2est2snixeGNWndR1upc7_YhstKGckOaydqUQanEuVoHu1To8pwaibqZ8s-GqgIGdBwn8/s1600/arrow.gif);background-repeat:no-repeat;background-position:203px 50%}.jGM_back{position:absolute;top:255px;right:0;height:18px;width:52px;background:#d1d1d1;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99}.jGM_back a{height:100%;width:100%;text-decoration:none;color:#000 !important;display:block}.jGM_back a:hover{color:#fff !important;background:#4D4E67}.jGM_reset{position:absolute;top:255px;right:62px;height:18px;width:52px;background:#d1d1d1;line-height:18px;vertical-align:middle;text-align:center;margin:10px 0 0 0;padding:0;border:0;z-index:99}.jGM_reset a{height:100%;width:100%;text-decoration:none;color:#000 !important;display:block}.jGM_reset a:hover{color:#fff !important;background:#4D4E67}

Note:

The notes in green show you some parts that can be customized. If you want the menu to be static, let's say that you want to add it in the sidebar, then remove the script in red. Also, you will need to remove the snippet below as well in the CSS code:

position: absolute; /* Change 'absolute' with fixed if you want it to float */
top: 50px; /* Distance from the top of the window */
right: 760px; /* Distance from right */

Finally, click the 'Save Template' button to save the changes.

3. Go to 'Layout', click on 'Add a gadget' link and paste the structure of the menu inside a 'HTML/Javascript' gadget:

<div class="jGM_box" id="jGlide_001">

<!-- First level links -->
<ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description of the first level">
<li rel="tile_002">Link 1</li>
<li rel="tile_003">Link 2</li>
<li rel="tile_004">Link 3</li>
<li rel="tile_006">Link 4</li>
<li rel="tile_007">Link 5</li>
<li><a href="URL address">Link 6</a></li>
<li><a href="URL address">Link 7</a></li>
<li><a href="URL address">Link 8</a></li>
<li><a href="URL address">Link 9</a></li>
<li><a href="URL address">Link 10</a></li>
<li><a href="URL address">Link 11</a></li>
</ul>

<!-- Links for the second level -->
<ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li rel="tile_005">Link 1.1</li>
<li><a href="URL address">Link 1.2</a></li>
<li><a href="URL address">Link 1.3</a></li>
<li><a href="URL address">Link 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 2.1</a></li>
<li rel="tile_008">Link 2.2</li>
<li><a href="URL address">Link 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 3.1</a></li>
<li><a href="URL address">Link 3.2</a></li>
<li><a href="URL address">Link 3.3</a></li>
</ul>

<ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 4.1</a></li>
<li><a href="URL address">Link 4.2</a></li>
<li><a href="URL address">Link 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="URL address">Link 5.2</a></li>
</ul>

<!-- Links for the third level -->
<ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description of the third level">
<li><a href="URL address">Link 1.1.1</a></li>
<li><a href="URL address">Link 1.1.2</a></li>
</ul>

<ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description of the third level">
<li><a href="URL address">Link 1.2.1</a></li>
<li><a href="URL address">Link 1.2.2</a></li>
</ul>

</div>

Add the URLs of the links and the titles that you want to appear in the menu and Save the changes.

How the Vertical drop down menu works?

If you want to add more links to the first level, then add another line like this:

<li><a href="URL address">Link 12</a></li>

To add one more level to the link, then the line should be like this:

<li rel="tile_0010">Link 5</li>

Then in the area of ​​the second or third level, add it like this:

<ul id="tile_0010" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">
<li><a href="URL address">Link 5.1</a></li>
<li><a href="Url address">Link 5.2</a></li>
</ul>

If you look closely here, the link takes the REL attribute which must be the same as the ID we put on the second level. These IDs should not be repeated and always be unique. It may sound complicated, but once you understand the concept, you'll see that it's actually pretty simple.

When you add enough links, there will be some arrows on the top & bottom of the list which will help you navigate through the rest of the links - either up or down - on mouseover.

Throughout the menu structure, we can change the Menu name and the descriptions, as well.

Final note

As this menu is made with JQuery, please make sure to have only one version of it.