eBlog Tips » save-templates http://www.eblogtips.com Blogging Tips, Guides, News, and Resources Wed, 08 Sep 2010 19:23:51 +0000 http://wordpress.org/?v=2.8.3 en hourly 1 How To Add Slide Show to Blogger Using Mootools http://www.eblogtips.com/how-to-add-slide-show-to-blogger-using-mootools.htm http://www.eblogtips.com/how-to-add-slide-show-to-blogger-using-mootools.htm#comments Fri, 21 Aug 2009 20:21:00 +0000 admin http://www.eblogtips.com/how-to-add-slide-show-to-blogger-using-mootools.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. /* slideshow */ .sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solidified #e1e1e1} #box2{ position:absolute; } #box2 span{ display:block; float:left; } .buttons{text-align:center;padding:5px;} .buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana} .buttons span.active, .buttons span:hover{background:#0080FF;color:#fff} .mask2{ position:relative; width:240px; height:180px; overflow:hidden; } 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag. <!– mootools –> <script src=’ http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js ‘ type=’text/javascript’/> <!– Slideshow –> <script type=’text/javascript’> //<![CDATA[ var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:['left','width'],vertical:['top','height']};this.size=a.size||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+’px’);this.button_event=a.button_event||’click’;this.handle_event=a.handle_event||’click’;this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])==’array’?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case’previous’:b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case’next’:b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case’play’:b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case’playback’:b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case’stop’:b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+’px’)}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,’next’,true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}}); //]]> </script> <script type=’text/javascript’> window.addEvent('domready',function(){ //SAMPLE 2 (transition: Bounce.easeOut) var nS2 = newborn noobSlide({ box: $('box2'), items: [0,1,2,3,4,5,6.7], interval: 3000, fxOptions: { duration: 1000, transition: Fx.Transitions.Bounce.easeOut, wait: simulated }, addButtons: { previous: $('prev1'), next: $('next1') } }); }); </script> 7.Now Click on “Save Templates” 8.Now go to Layout–> tender elements and Click on ‘Add a Gadget’.

Read more from the example source: 
How To Add Slide Show to Blogger Using Mootools

]]> http://www.eblogtips.com/how-to-add-slide-show-to-blogger-using-mootools.htm/feed 0 How To Add Beautiful Page Peel Effect with jQuery http://www.eblogtips.com/how-to-add-beautiful-page-peel-effect-with-jquery.htm http://www.eblogtips.com/how-to-add-beautiful-page-peel-effect-with-jquery.htm#comments Fri, 21 Aug 2009 11:52:00 +0000 admin http://www.eblogtips.com/how-to-add-beautiful-page-peel-effect-with-jquery.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. #pageflip { position: relative; } #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; position: absolute; z-index: 50; right: 0; top: 0; background: url( http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png ) no-repeat correct top; text-indent: -9999px; } Note : Please patron ‘ subscribe.png ‘ ikon yourself

Read more from the example source:
How To Add Beautiful Page politico Effect with jQuery

]]> http://www.eblogtips.com/how-to-add-beautiful-page-peel-effect-with-jquery.htm/feed 0 How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images http://www.eblogtips.com/how-to-add-jquery-thumbnail-hoverzoom-effect-to-blogger-images.htm http://www.eblogtips.com/how-to-add-jquery-thumbnail-hoverzoom-effect-to-blogger-images.htm#comments Fri, 21 Aug 2009 09:48:00 +0000 admin http://www.eblogtips.com/how-to-add-jquery-thumbnail-hoverzoom-effect-to-blogger-images.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the unconditional orientating humble number */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the diminutive thumbnail filler */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solidified #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url( http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png ) no-repeat edifice center; /* Image utilised as scenery on waver gist border: none; /* Get disembarrass of abut on waver */ } Note : Please patron ‘ thumb_bg.png ‘ ikon yourself. 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag.

Read the original:
How To Add jQuery Thumbnail Hover/Zoom Effect to blogger images

]]> http://www.eblogtips.com/how-to-add-jquery-thumbnail-hoverzoom-effect-to-blogger-images.htm/feed 0 How To Add jQuery Tooltips Effect To Blogger Links http://www.eblogtips.com/how-to-add-jquery-tooltips-effect-to-blogger-links.htm http://www.eblogtips.com/how-to-add-jquery-tooltips-effect-to-blogger-links.htm#comments Thu, 20 Aug 2009 22:10:00 +0000 admin http://www.eblogtips.com/how-to-add-jquery-tooltips-effect-to-blogger-links.htm Tooltips are diminutive boxes that materialize when you listing over an picture or Link that contains a short book communication identifying the object. 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t utter on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. #easyTooltip{ padding:5px 10px; border:1px solidified #EF6D21; background: #181C18; color:#E0EFE0; } 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag.

More:
How To Add jQuery Tooltips Effect To Blogger Links

]]> http://www.eblogtips.com/how-to-add-jquery-tooltips-effect-to-blogger-links.htm/feed 0 How To Create jQuery Content Slider in Blogger http://www.eblogtips.com/how-to-create-jquery-content-slider-in-blogger.htm http://www.eblogtips.com/how-to-create-jquery-content-slider-in-blogger.htm#comments Thu, 20 Aug 2009 13:11:00 +0000 admin http://www.eblogtips.com/how-to-create-jquery-content-slider-in-blogger.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on “Expand Widget Templates” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. /* Slideshow call rules. */ #contentSlide { border: 1px solidified #000; background:#212421; height:263px; padding:10px 0; } #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url( http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg ) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* earmark scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* turn by 20 pixels of #slidesContainer to refrain flat holograph */ height:263px; } .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url( http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg ) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url( http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg ) no-repeat 0 0; } .slide h2, .slide p { margin:15px; } .slide h2 { font:italic 24px Georgia, “Times New Roman”, Times, serif; color:#212421; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; padding: 1px; background-color: #212421; border: 1px solidified #999; } 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag.

See the rest here: 
How To Create jQuery Content Slider in Blogger

]]> http://www.eblogtips.com/how-to-create-jquery-content-slider-in-blogger.htm/feed 0 How To Add jQuery Text/Font Size Resizer to blogger http://www.eblogtips.com/how-to-add-jquery-textfont-size-resizer-to-blogger.htm http://www.eblogtips.com/how-to-add-jquery-textfont-size-resizer-to-blogger.htm#comments Thu, 20 Aug 2009 11:17:00 +0000 admin http://www.eblogtips.com/how-to-add-jquery-textfont-size-resizer-to-blogger.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t Click on ” Expand Widget Templates ” 3.Scroll downbound to where you wager ]]></b:skin> tag: 4.Copy beneath cipher and adhesive it meet before the ]]></b:skin> tag. /* resizeFont */ #resizeFont{ text-align:right; margin-right:10px; } 5.Scroll downbound to where you wager </head> tag: 6.Copy beneath cipher and adhesive it meet before the </head> tag. <script src=’ http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ‘ type=’text/javascript’/> <!– begin ResizeFont –> <script type=’text/javascript’> $(function(){ $('input').click(function(){ var ourText = $('#content-wrapper'); var currFontSize = ourText.css('fontSize'); var finalNum = parseFloat(currFontSize, 10); var stringEnding = currFontSize.slice(-2); if(this.id == 'large') { finalNum *= 1.1; } added if (this.id == 'small'){ finalNum /=1.1; } added if (this.id == 'reset'){ finalNum =13; } ourText.animate({fontSize: finalNum + stringEnding},500); }); }); </script> 7.Now Click on “Save Templates” 8.Now go to Layout–> tender elements and Click on ‘Add a Gadget’

Read more from the example source:
How To Add jQuery Text/Font Size Resizer to blogger

]]> http://www.eblogtips.com/how-to-add-jquery-textfont-size-resizer-to-blogger.htm/feed 0 How To Create jQuery Draggable Image in blogger http://www.eblogtips.com/how-to-create-jquery-draggable-image-in-blogger.htm http://www.eblogtips.com/how-to-create-jquery-draggable-image-in-blogger.htm#comments Wed, 19 Aug 2009 11:55:00 +0000 admin http://www.eblogtips.com/how-to-create-jquery-draggable-image-in-blogger.htm 1.Login to your blogger dashboard–> layout- -> Edit HTML 2.Don’t utter on “Expand Widget Templates” 3.Scroll downbound to where you wager </head> tag: 4.Copy beneath cipher and adhesive it meet before the </head> tag. <script src=’ http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ‘ type=’text/javascript’/> <script src=’ http://jqueryui.com/latest/ui/ui.core.js ‘ type=’text/javascript’/> <script src=’ http://jqueryui.com/latest/ui/ui.draggable.js ‘ type=’text/javascript’/> <script type=’text/javascript’> $(document).ready(function(){ $(&quot;.draggable&quot;).draggable(); }); </script> 5.Now Click on “Save Templates” 6.Now go to Layout–> tender elements and Click on ‘Add a Gadget’. 7.Now Select ‘HTML/Javascript’ and add the cipher presented beneath and utter save.

Read more here: 
How To Create jQuery Draggable Image in blogger

]]> http://www.eblogtips.com/how-to-create-jquery-draggable-image-in-blogger.htm/feed 0