Wednesday, September 25, 2013

Page peel effect using jQuery

Page Peel is a popular page flip effect that when your cursor is passing over it, will show "what's behind" as if it would be a book. There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.

Usually, the content that is "behind", is an image for subscribing to feed, but you can put any image and link to any page.

page peel, blogger gadgets
Demo

You can see an example in this demo blog.

How to Add the Page Curl Effect on Blogger


1. Log in to your Blogger dashsboard, select your blog > then go to Template > Edit HTML


2. Click anywhere inside the code area and search for the below tag by pressing the CTRL + F keys:
</head>
3. Just before </head> copy and paste this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>
4. Then before ]]></b:skin> (CTRL + F to find it - if necessary, click on the left arrow) paste these styles:
/* Page Flip
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
5. Finally, paste after <body> tag or if you can't find it, after this code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
The following code:
<div id='pageflip'>
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
- In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size).
- You need to replace the url in red with the address of your blog, that will be the link to the blog's feed when the user clicks on the image behind, but you can put any URL in case you want to link to another page.

6. And that's it. To save the changes, click the Save template button.
Remember that this Page Peel effect uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.

Customize the scroll bar (scrollbar) with JScrollPane

JScrollPane is a jQuery script that allows you to change the blog' scroll bar, ie the browser scrollbar.
Although we can use CSS to change it, the problem is that is not standardized, because with CSS we can make it work only in Chrome and Safari; and in the case of Internet Explorer it also has its own code but obviously it only works in that browser (I don't know which versions). So what we will do then is to give a new look to the scrollbar but by using jQuery, so the change will be visible in all browsers.

Demo

You can see an example in this test blog where the scroll bar has a different shape and color.

How to change the scrollbar on Blogger


1. Go to Template > Edit HTML and before </head> paste this code:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<style>
.jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;}
.jspVerticalBar {position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;}
.jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;}
.jspVerticalBar *,.jspHorizontalBar * {margin: 0;padding: 0;}
.jspCap {display: none;}.jspHorizontalBar .jspCap {float: left;}

.jspTrack {
background: #fff; /* background color of the bar */
position: relative;
}
.jspDrag {
background: #CC0000; /* Color of the scrollbar */
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
float: left;
height: 100%;
}
.jspArrow {
background: #888; /* The color of the scrollbar limits */
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled {
cursor: default;
background: #333; /* Color of the limits when the srollbar is reaching them */
}
.jspVerticalBar .jspArrow {
height: 16px;
}
.jspHorizontalBar .jspArrow {
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus {outline: none;}.jspCorner {background: #eeeef4;float: left;height: 100%;}* html .jspCorner {margin: 0 -3px 0 0;}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#blog-container {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
</style>
<script>
//<![CDATA[
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
* Version: 3.1.3
*/

(function (factory) {
if ( typeof define === 'function' && define.amd ) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;

if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},

teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
fn = delta > 0 ? 'floor' : 'ceil';
delta = Math[fn](delta / lowestDelta);
deltaX = Math[fn](deltaX / lowestDeltaXY);
deltaY = Math[fn](deltaY / lowestDeltaXY);
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
}));

/*
* jScrollPane - v2.0.0beta5 - 2010-09-18
* http://jscrollpane.kelvinluck.com/
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT and GPL licenses.
*/
(function(b,a,c){b.fn.jScrollPane=function(f){function d(C,L){var au,N=this,V,ah,v,aj,Q,W,y,q,av,aB,ap,i,H,h,j,X,R,al,U,t,A,am,ac,ak,F,l,ao,at,x,aq,aE,g,aA,ag=true,M=true,aD=false,k=false,Z=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aE=C.css("paddingTop")+" "+C.css("paddingRight")+" "+C.css("paddingBottom")+" "+C.css("paddingLeft");g=(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingRight"))||0);an(L);function an(aH){var aL,aK,aJ,aG,aF,aI;au=aH;if(V==c){C.css({overflow:"hidden",padding:0});ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css({width:ah+"px",height:v+"px"}));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}else{C.css("width",null);aI=C.outerWidth()+g!=ah||C.outerHeight()!=v;if(aI){ah=C.innerWidth()+g;v=C.innerHeight();aj.css({width:ah+"px",height:v+"px"})}aA=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W){if(aB||av){V.css("width",aA+"px");C.css("width",(aA+g)+"px")}return}V.css("width",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());aK.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av)){C.removeClass("jspScrollable");V.css({top:0,width:aj.width()-g});n();D();O();w();af()}else{C.addClass("jspScrollable");aJ=au.maintainPosition&&(H||X);if(aJ){aG=ay();aF=aw()}aC();z();E();if(aJ){K(aG);J(aF)}I();ad();if(au.enableKeyboardNavigation){P()}if(au.clickOnTrack){p()}B();if(au.hijackInternalLinks){m()}}if(au.autoReinitialise&&!aq){aq=setInterval(function(){an(au)},au.autoReinitialiseDelay)}else{if(!au.autoReinitialise&&aq){clearInterval(aq)}}C.trigger("jsp-initialised",[aB||av])}function aC(){if(av){aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows){am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover){am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))}ai(al,au.verticalArrowPositions,am,ac)}t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});ap.hover(function(){ap.addClass("jspHover")},function(){ap.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-U-g);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);
if(au.arrowScrollOnHover){at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))}ai(F,au.horizontalArrowPositions,at,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG){T(aG.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});l=aj.innerWidth();ae()}else{}}function ae(){aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});F.width(l+"px");X=0}function E(){if(aB&&av){var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()}if(aB){V.width((aj.outerWidth()-g)+"px")}W=V.outerHeight();q=W/v;if(aB){ao=1/y*l;if(ao>au.horizontalDragMaxWidth){ao=au.horizontalDragMaxWidth}else{if(ao<au.horizontalDragMinWidth){ao=au.horizontalDragMinWidth}}h.width(ao+"px");j=l-ao;ab(X)}if(av){A=1/q*t;if(A>au.verticalDragMaxHeight){A=au.verticalDragMaxHeight}else{if(A<au.verticalDragMinHeight){A=au.verticalDragMinHeight}}ap.height(A+"px");i=t-A;aa(H)}}function ai(aG,aI,aF,s){var aK="before",aH="after",aJ;if(aI=="os"){aI=/Mac/.test(navigator.platform)?"after":"split"}if(aI==aK){aH=aI}else{if(aI==aH){aK=aI;aJ=aF;aF=s;s=aJ}}aG[aK](aF)[aH](s)}function az(aF,s,aG){return function(){G(aF,s,this,aG);this.blur();return false}}function G(aH,aF,aK,aJ){aK=b(aK).addClass("jspActive");var aI,s=function(){if(aH!=0){T(X+aH*au.arrowButtonSpeed,false)}if(aF!=0){S(H+aF*au.arrowButtonSpeed,false)}},aG=setInterval(s,au.arrowRepeatFreq);s();aI=aJ==c?"mouseup.jsp":"mouseout.jsp";aJ=aJ||b("html");aJ.bind(aI,function(){aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI)})}function p(){w();if(av){al.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageY-aI.top;if(H+A<aJ){S(H+au.trackClickSpeed)}else{if(aJ<H){S(H-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}if(aB){F.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ){T(X+au.trackClickSpeed)}else{if(aJ<X){T(X-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}}function w(){F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")}function ar(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")}function S(s,aF){if(!av){return}if(s<0){s=0}else{if(s>i){s=i}}if(aF==c){aF=au.animateScroll}if(aF){N.animate(ap,"top",s,aa)}else{ap.css("top",s);aa(s)}}function aa(aF){if(aF==c){aF=ap.position().top}aj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(W-v);if(ag!=aI||aD!=aG){ag=aI;aD=aG;C.trigger("jsp-arrow-change",[ag,aD,M,k])}u(aI,aG);V.css("top",s);C.trigger("jsp-scroll-y",[-s,aI,aG])}function T(aF,s){if(!aB){return}if(aF<0){aF=0}else{if(aF>j){aF=j}}if(s==c){s=au.animateScroll}if(s){N.animate(h,"left",aF,ab)}else{h.css("left",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().left}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");
x[s?"addClass":"removeClass"]("jspDisabled")}}function J(s,aF){var aG=s/(W-v);S(aG*i,aF)}function K(aF,s){var aG=aF/(Q-ah);T(aG*j,s)}function Y(aN,aL,aF){var aJ,aH,s=0,aG,aK,aM;try{aJ=b(aN)}catch(aI){return}aH=aJ.outerHeight();aj.scrollTop(0);while(!aJ.is(".jspPane")){s+=aJ.position().top;aJ=aJ.offsetParent();if(/^body|html$/i.test(aJ[0].nodeName)){return}}aG=aw();aK=aG+v;if(s<aG||aL){aM=s-au.verticalGutter}else{if(s+aH>aK){aM=s-v+aH+au.verticalGutter}}if(aM){J(aM,aF)}}function ay(){return -V.position().left}function aw(){return -V.position().top}function ad(){aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF){var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H})}function n(){aj.unbind(Z)}function ax(){return false}function I(){V.unbind("focusin.jsp").bind("focusin.jsp",function(s){if(s.target===V[0]){return}Y(s.target,false)})}function D(){V.unbind("focusin.jsp")}function P(){var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ){if(aJ.target!==C[0]){return}var aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode){case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(W-v);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);break}if(!(aH==X&&aG==H)){aF=true;clearTimeout(s);s=setTimeout(function(){aF=false},260);return false}});if(au.hideFocus){C.css("outline","none");if("hideFocus" in aj[0]){C.attr("hideFocus",true)}}else{C.css("outline","");if("hideFocus" in aj[0]){C.attr("hideFocus",false)}}}function O(){C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")}function B(){if(location.hash&&location.hash.length>1){var aG,aF;try{aG=b(location.hash)}catch(s){return}if(aG.length&&V.find(aG)){if(aj.scrollTop()==0){aF=setInterval(function(){if(aj.scrollTop()>0){Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF)}},50)}else{Y(location.hash,true);b(document).scrollTop(aj.position().top)}}}}function af(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function m(){af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aF;if(s.length>1){aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0){Y("#"+aF,true);return false}}})}b.extend(N,{reinitialise:function(aF){aF=b.extend({},aF,au);an(aF)},scrollToElement:function(aG,aF,s){Y(aG,aF,s)},scrollTo:function(aG,s,aF){K(aG,aF);J(s,aF)},scrollToX:function(aF,s){K(aF,s)},scrollToY:function(s,aF){J(s,aF)},scrollBy:function(aF,s,aG){N.scrollByX(aF,aG);N.scrollByY(s,aG)},scrollByX:function(s,aG){var aF=ay()+s,aH=aF/(Q-ah);T(aH*j,aG)},scrollByY:function(s,aG){var aF=aw()+s,aH=aF/(W-v);S(aH*i,aG)},animate:function(aF,aI,s,aH){var aG={};aG[aI]=s;aF.animate(aG,{duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH})},getContentPositionX:function(){return ay()},getContentPositionY:function(){return aw()},getIsScrollableH:function(){return aB},getIsScrollableV:function(){return av},getContentPane:function(){return V},scrollToBottom:function(s){S(i,s)},hijackInternalLinks:function(){m()}})}f=b.extend({},b.fn.jScrollPane.defaults,f);var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFreq:100,arrowScrollOnHover:false,trackClickSpeed:30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false}})(jQuery,this);
//]]>
</script>

<script>
$(document).ready(function() {
$('.scroll-pane').jScrollPane({showArrows: true});
});
</script>

2. Then locate this tag:
<body>
Or this line:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Under any of these two add this:
<div class='scroll-pane' id='blog-container'>
3. Finally search for the </body> and above it paste this:
</div>
Save the changes and that's all. In green you will see where you can change the scrollbar colors and its different areas, or add other styles, such as shadows, rounded corners, etc..
If you want the top and bottom limits to not appear (as in the example) then remove what is in red.

Remember that the script uses jQuery, so if you already have it, then don't put the script again (the first line of code). If you are using Scriptaculous or Mootools, then you should make some slight changes in order to make it work.

Maybe the code might appear long but better add the scripts directly in the template, so the scripts will always be available and load faster. Regardless of all of this the end result is quite aesthetic, don't you think?

Friday, September 20, 2013

Customizing Numbered Lists in Posts + 3 Examples

From the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool.

blogger gadgets, blogger widgets

A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:
   <ol>
<li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
    etc...
  </ol>
This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code.

Using ordered lists in posts

Creating numbered lists is very suitable for giving any instructions. It is ideal for cooking blogs where the steps in a recipe has to be numbered, or in those blogs that share tutorials... but can be used in any type of blog that need to number something.

By default, when using this tool, the numbered elements will look like:
  1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
  2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
  3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
  4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 
However, we can customize the elements on the list with CSS. To achieve this, we will rely on this interesting tutorial from 456 Berea ST, that explains a technique in which using some key properties of CSS, we could customize both the numbers of each element in the list, also the content of each element.
The trick basically involves canceling the default numbering with "list-style: none", and then use automatic numbering properties: "counter-reset" and "counter-increment". Then the property "content" is added to the index of the counter that is created using the previous two properties.

How to Add Some Amazing Styles to Blogger ordered lists

Simply choose one of the styles below, then copy and paste the CSS code by going to Template > Customize > Advanced > Add CSS.

Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)


Examples

Here are three examples that I have prepared for those of you who want to customize numbered lists:
 
Style 1
  1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
  2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
  3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
  4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 
.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Style 2
  1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
  2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
  3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
  4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 
.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* bottom border of each element */
background:#f2f2f2; /* background color of each element */
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */
}

Style 3
  1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
  2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
  3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
  4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 
.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: -30px;
top: 50%;
margin-top: -1em;
background: #bada55; /* background color of the numbers */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;  
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/
}
Note: In blue are highlighted the values that can be edited in the CSS of these three examples, and added some comments highlighted in /* green */, so that you can know what each thing does.

Compatibility:

This will work in all browsers including IE8 - in the case of Internet Explorer 7, the number' styles will not be seen as it does not support the :before or :after pseudo-elements. However, I have added a line in the CSS that's specific for that browser and will bring up the default numbering of the ordered list.

Hopefully this will be useful for you ;)

4 Different Styles For the Popular Posts Widget

Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog.

This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in four possible combinations: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet.

This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content.

Preliminary steps: Add the gadget, if you haven't done it yet.


1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget".

2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.

3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.

How to add the CSS to create the style of the Popular Posts widget


1. Choose a style, then copy the CSS that appears below the image that shows the style.

2. Select the "Template" tab, then click on Customize > Advanced > Add CSS and then paste the CSS style that you like the most.

blogger tutorials
3. Once you add the CSS, Save changes by clicking on the "Apply to Blog" button.

Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)

And that's it! You've already customized the popular posts widget when it shows only post titles.

Styles

Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog:

http://demo-blog343.blogspot.com

Style 1:
blogger gadgets, blogger widgets, popular posts widget
#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;  
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;  
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);  
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Style 2:
blogger gadgets, blogger widgets, popular posts widget
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;  
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}  
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Style 3:
blogger gadgets, blogger widgets, popular posts
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Style 4:
blogger gadgets, blogger widgets
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Final Notes

All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles.

Thursday, September 19, 2013

Adding a Youtube Video in the Background of a Blogger blog

Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the jQuery plugin Tubular that lets you use a YouTube video as a background of a web page.

Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly.
Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks.

blogger gadgets, blogger tricks, blogger widgets

You can see it working on this demo blog

Steps 

1. The first step is to just above the </head> tag, 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 tubular plugin
|* by Sean McCambridge
|* http://www.seanmccambridge.com/tubular
|* Copyright 2012
|* licensed under the MIT License
|* Enjoy.
|*
|* Thanks,
|* Sean */

var videoWidth = 853;
var videoRatio = 16/9;
var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {
wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;
t = setTimeout("resizePlayer()",1000);

jQuery('html,body').css('height','100%');
jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');
jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;
var pageWidth = 0;
var pageHeight = 0;
var videoHeight = videoWidth / videoRatio;
var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

jQuery('#ytapiplayer').html(iframe);
jQuery(window).resize(function() {
resizePlayer();
});
return this;
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.setPlaybackQuality('medium');
ytplayer.mute();
}

function resizePlayer() {
var newWidth = jQuery(window).width();
var newHeight = jQuery(window).height();
jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);
if (newHeight > newWidth / videoRatio) {
newWidth = newHeight * videoRatio;
}
jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);
}

//]]>
</script>
And this one too:
<script type='text/javascript'>
//<![CDATA[
$().ready(function() {
$('body').tubular('61BLn00AN_w','wrapper-video');
});
//]]>
</script>
2. Then locate the <body> tag (CTRL + F)
Or if you are using a template from Template Designer, find this line:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
3. Under either of these two, add this:
<div id='wrapper-video'>
4. Now search for the </body> tag, and before it put this:
</div>
Save the changes and that's it. In red you must put the ID of Youtube video, the ID are the characters that appear at the end of the URL:


Remember: There is no option to mute, so if you don't want to have sound as in the demo blog, you have to choose a video that has no sound. I also recommend using a video in HD in case you don't want any black parts to show around it.

If you are using jQuery, remove other versions that you have to avoid duplication and have problems.

Author | jQuery Tubular

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.

slideshow for blogger, blogger widgets

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

Wednesday, September 18, 2013

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

Tuesday, September 17, 2013

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.

blogger tricks, blogger tutorials, blogger blogspot

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.

vertical menu, menu for blogger



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:'http://4.bp.blogspot.com/-S-5sFIYmp10/Ujicdk9YD3I/AAAAAAAAD3w/qeYbssSuoEo/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="http://3.bp.blogspot.com/-QrgzdQBGGr8/Ujib65T5CSI/AAAAAAAAD3k/iIGjrS6sdC8/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="http://1.bp.blogspot.com/-lLtw6X6PDms/Ujib69-y3OI/AAAAAAAAD3g/nM5YUjzDQ7M/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(http://3.bp.blogspot.com/-n6XI5wLg8og/UjiLQ10dQpI/AAAAAAAAD3Q/cOVY1gTiruc/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.

Search This Blog

Recent Post

Recent Posts Widget