Cloud Menu 3D Menu Jquery for Blogger

DEMO

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   </head>

3. Paste below code Before </head> tag

<style type="text/css" media="screen">
      #list{
        margin:0 auto;
        height:200px;
        width:200px;
        overflow:hidden;
        position:relative;
        background-color: #000;}
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;}
    #list a{
        position:absolute;
        text-decoration: none;
        color:#666;
        font-size:20px;}
    #list a:hover{
        color:#ccc;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='http://bloggertrix.googlecode.com/files/Cloud.js' type='text/javascript'/>

* You can change Background color by changing #000  color code.
    Use One of this for get a color code.

Hex color Generator for Blogger
Hex Color Generator for Blogger Part 2

4. Now Go to Design >  Page Element.

5.Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<div id="list">
    <ul>
        <li><a href="#">Ajax</a></li>
        <li><a href="#">Css</a></li>
        <li><a href="#">Design</a></li>
        <li><a href="#">Firefox</a></li>
        <li><a href="#">Flash</a></li>
        <li><a href="#">Html</a></li>
        <li><a href="#">Chrome</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Safari</a></li>
        <li><a href="#">Web</a></li>
        <li><a href="http://www.bloggertrix.com/">Add This</a></li>
   
    </ul>
</div>

Replace # with your Links
Replace Links name with your any name.
7. Now save your HTML/Javascript'.

let a comment plz.

by Lord Alio

Read more »

Add slideshow To Blogger with nice Effetc

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
#slideshow {margin:50px auto;position:relative;width:240px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<div id="slideshow">
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
</div>

After paste above code
* Replace Image URL with your Image URLs
* Better to you 250x250 resolution images

4. Now save your HTML/Javascript'.

by Lord Alio

Read more »

Photo Gallery with Jquery Zoom Effect

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

/* Blogger Zoom Gallery  */
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 absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKsPtLtVn-bvcA1UA9FFGc-MOdcOP4SusZs1V3JUkRjAQrx4fOHdHKubri4jz1cn5HYyYWuXM5ZGWmASdPCuHe-q6z5LT4EieD1guDMpzkUGNNXvLvCNpVzlf61VE7EnBzMSNLpu9AsWZG/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

3. Paste below code Before ]]></b:skin> tag

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<ul class="thumb">
<li><a href="#"><img src="picture Link 1" alt="" /></a></li>
<li><a href="#"><img src="picture Link 2" alt="" /></a></li>
<li><a href="#"><img src="picture Link 3" alt="" /></a></li>
<li><a href="#"><img src="picture Link 4 " alt="" /></a></li>
</ul>

*Replace Picture Link With your image URL

7. Now save your HTML/Javascript'.


ENJOY THE SLIDER.

by Lord Alio

Read more »

create Slider show for blogger

Installing the slider follow the steps:

1.  Log in to your Blogger account 
2. Go To Design > Page Elements
3. Select HTML/JavaScript widget
4. Paste the following code insideit,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 1px solid #666;
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font: 10px normal verdana, arial;
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={
    loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj24HXu6-zJtbaJxlxTMeKLh5_aibblbOqk-ZrxdUgOn61vDKvEdTuDlxDMKvSCkBIML44qPdOodQhyphenhyphen34x2_Hfu_WJjkFi7rqV7Q5v8VhsKcGxl8xi0wVLS44o58APXmR4rd6kBPqnnD90/s400/ajaxload.gif', //full path or URL to loading gif image
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
    images: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtA6deZKuPkgHNtqMBPdqfDkPPkYLXPuBDadQgicn6Dqh8zMXKwIvi5_RvSGCS0B-_GtUIDBt3EZ4oSJvP4rH65O3csBTOQThkvsnP022T7c6LZx1aeD9Hv3j5i0fxQYOgd3I3Xs5szdY/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ3lpfuz1VfMBsE8NyGLn30r1HXO_HxKWJ23plnh6QCJlrFtbf3ZECu8Mjuy27jWAivGAzKT1v4r2WHCsK3_KpGzZL9sAbIzE2JkWUVcx19C6J2UgIhfznl1t2YLKuC7_h0dGXoB2JIQ/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcqzb7st4mUkkENKj7pJqTDBAWan9NDlgcUsNj53KiourhYZKuv8NyjIgT3Fa6gm4W4pPIJRwv9n8JTeilhIaOstCBsRhFDUBhoqdoyu7jtXTcHkRi5ZpVlGGMpPVmOCCVvDQGgPG7Xqg/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJYExLmeP79Sw_91FlGvOHAfEpve9BST3GPe6vFtV0CaWixmRKjCQcUcfB8MCeZCZUJw4PcejmFqRdtI_bR-CuXqPkga9RFZCfwBUEnHrcPmRp0YvYeNLZTOp9H54JVCSS14WfJaeb8s/s400/pause.gif'], //nav panel images (in that order)
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
    slideduration: 500 //duration of slide up animation to reveal panel
}
function simpleGallery(settingarg){
    this.setting=settingarg
    settingarg=null
    var setting=this.setting
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
    setting.fadeduration=parseInt(setting.fadeduration)
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
    setting.currentstep=0 //keep track of # of slides slideshow has gone through
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
    setting.oninit=setting.oninit || function(){}
    setting.onslide=setting.onslide || function(){}
    var preloadimages=[], longestdesc=null, loadedimages=0
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif
        var loadgif=new Image()
        loadgif.src=simpleGallery_navpanel.loadinggif
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
    })()
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images
        preloadimages[i]=new Image()
        preloadimages[i].src=setting.imagearray[i][0]
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
            setting.longestdesc=setting.imagearray[i][3]
        jQuery(preloadimages[i]).bind('load error', function(){
            loadedimages++
            if (loadedimages==setting.imagearray.length){
                dfd.resolve() //indicate all images have been loaded
            }
        })
    }
    var slideshow=this
    jQuery(document).ready(function($){
        var setting=slideshow.setting
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
            return
        }
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
            .css({position:'absolute', left:0, top:0})
            .appendTo(setting.$wrapperdiv)
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            setting.descdiv=simpleGallery.routines.adddescpanel(setting)
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
            .bind('mouseover mouseout', function(e){
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
            })
            .bind('click', function(e){
                var keyword=e.target.title.toLowerCase()
                slideshow.navigate(keyword) //assign behavior to nav images
            })
        dfd.done(function(){ //execute when all images have loaded
            setting.$loadinggif.remove()
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
            slideshow.showslide(setting.curimage) //show initial slide
            setting.oninit.call(slideshow) //trigger oninit() event
            $(window).bind('unload', function(){ //clean up and persist
                $(slideshow.setting.navbuttons).unbind()
                if (slideshow.setting.persist) //remember last shown image's index
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
                jQuery.each(slideshow.setting, function(k){
                    if (slideshow.setting[k] instanceof Array){
                        for (var i=0; i<slideshow.setting[k].length; i++){
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
                                slideshow.setting[k][i].innerHTML=null
                            slideshow.setting[k][i]=null
                        }
                    }
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
                        slideshow.setting[k].innerHTML=null
                    slideshow.setting[k]=null
                })
                slideshow=slideshow.setting=null
            })
        }) //end deferred code
    }) //end jQuery domload
}
simpleGallery.prototype={
    navigate:function(keyword){
        clearTimeout(this.setting.playtimer)
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number
        if (!isNaN(parseInt(keyword))){
            this.showslide(parseInt(keyword))
        }
        else if (/(prev)|(next)/i.test(keyword)){
            this.showslide(keyword.toLowerCase())
        }
        else{ //if play|pause button
            var slideshow=this
            var $playbutton=$(this.setting.navbuttons).eq(1)
            if (!this.setting.ispaused){ //if pause Gallery
                this.setting.autoplay[0]=false
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
            }
            else if (this.setting.ispaused){ //if play Gallery
                this.setting.autoplay[0]=true
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})
            }
            slideshow.setting.ispaused=!slideshow.setting.ispaused
        }
    },
    showslide:function(keyword){
        var slideshow=this
        var setting=slideshow.setting
        var totalimages=setting.imagearray.length
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
            : Math.min(keyword, totalimages-1)
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
                clearTimeout(setting.playtimer)
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
                try{
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)
                }catch(e){
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
                }
                setting.currentstep+=1
                if (setting.autoplay[0]){
                    if (setting.currentstep<=setting.totalsteps)
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
                    else
                        slideshow.navigate("play/pause")
                }
            }) //end callback function
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
        setting.fglayer=setting.bglayer
        setting.bglayer=(setting.bglayer==0)? 1 : 0
        setting.curimage=imgindex
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description
            setting.$descpanel.css({visibility:'visible'})
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3]
        }
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
            setting.descdiv.innerHTML=null
            setting.$descpanel.css({visibility:'hidden'})
        }
    },
    showhidenavpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
            this.showhidedescpanel(state)
    },
    showhidedescpanel:function(state){
        var setting=this.setting
        var endpoint=(state=="show")? 0 : -setting.descpanelheight
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
    }
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
        layerHTML+=(imgelement[1])? '</a>' : ''
        return layerHTML //return HTML for this layer
    },
    addnavpanel:function(setting){
        var interfaceHTML=''
        for (var i=0; i<3; i++){
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '
        }
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'
        setting.$navpanel=$('<div class="navpanellayer"></div>')
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})
            .appendTo(setting.$wrapperdiv)
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div
            .appendTo(setting.$navpanel)
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
    },
    adddescpanel:function(setting){
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div
            .eq(2).html(setting.longestdesc).end().end()
            .appendTo(setting.$wrapperdiv)
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
        setting.descpanelheight=$gallerydesctext.outerHeight()
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object
    },
    getCookie:function(Name){
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return null
    },
    setCookie:function(name, value){
        document.cookie = name+"=" + value + ";path=/"
    }
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
    wrapperid: "simplegallery1", //ID of main gallery container,
    dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
        ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 2", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 3","#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 4", "#", "_new", "DESCRIPTION"],

        ["IMAGE LINK 5", "#", "_new", "DESCRIPTION"]     ],
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
        //Keyword "this": references current gallery instance
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
})
</script>
<div id="simplegallery1"></div>

 and edit the image link, the description, and the url.
for any questions I'm here.

by Lord Alio

Read more »

Slider show with Jcarousel

   . You can easily customize it and install it on your BlogSpot blogs with just a single copy and paste of the code we would share today. You can use the same code to install it on any blogging platform may it be Joomla, wordpress or even a Static HTML website.

Live Demo

Why use it?

You can use it to showcase your photos, ebooks,  icons, products, or even thumbnails of your featured posts. So it serves multi-purpose, it can be used as a featured post widget and also as a scrolling image gallery. You can add it on your sidebar, header, post body, footer, almost anywhere you want. The installation has been made extremely easy. All it aims is at increasing pageviews and page impressions. 

Installation

We are sharing here only the horizontal style though these images can be scolled in vertical direction too. You can create that easily if you understand this tutorial. If incase you could not understand how to do it then let us know and we would publish a new tutorial on it. Lets install it on your blog now.

1. Go To Blogger > Layout
2. Click Add a Gadget
3. Choose HTML/JavaScript widget
4. Paste the following code just inside it:

<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
<script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
  <style>
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;
   
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;     padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;     height: 75px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}
/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

  </style>
 
  <ul id="mycarousel" class="jcarousel-skin-tango">
   
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>
   
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 


  </ul>

Make these changes:

• Replace IMAGE LINK with the image URL of your thumbnail image.
• Replace Description with at most a three-word description of the image so that search engine robots could crawl your image well.
• Clicking an image will take user to the desired page. Replace # with that Page URL for each image.
• To change the widget width edit width:425px;
• To change the image clips width (Combined length of all images)  edit width:425px;

To add an extra image just repeat this code:

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

          5.   Save the widget and you are all done!

From www.mybloggertricks.com

Read more »