17 Top jQuery Featured Content Sliders Collection

17 Top jQuery Featured Content Sliders Collection


jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML.Also jQuery is the most popular JavaScript library in use today.In this article,I have listed most popular 17 jQuery featured content slideshows/sliders for your blog or website.You can visit authors websites for configuration instructions and can view live demos of these sliders using the URLs given below.But if you can not add these sliders to your website or blog yourself,you can contact me,I can do it for you.
Using the Wonderful jFlow Plugin

Article : http://net.tutsplus.com/articles/news/using-the-wonderful-jflow-plugin-screencast/
Demo : http://nettuts.s3.amazonaws.com/078_screencast2/jFlowTutorial/index.htm
Automatic Image Slider w/ CSS & jQuery

Article : http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
Demo : http://www.sohtanaka.com/web-design/examples/image-slider/
Easy Slider 1.7 - Numeric Navigation jQuery Slider

Article : http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
Demo : http://cssglobe.com/lab/easyslider1.7/02.html
Beautiful jQuery slider tutorial

Article : http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Demo : http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html
jCarousel Lite

Article : http://www.gmarwaha.com/jquery/jcarousellite/
Demo : http://www.gmarwaha.com/jquery/jcarousellite/
Featured Content Slider Using jQuery UI

Article : http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
Demo : http://demo.webdeveloperplus.com/featured-content-slider/
jQuery Tools Scrollable

Article : http://flowplayer.org/tools/demos/scrollable/index.html
Demo : http://flowplayer.org/tools/demos/scrollable/index.htm
AnythingSlider jQuery Plugin

Article : http://css-tricks.com/anythingslider-jquery-plugin/
Demo : http://css-tricks.com/examples/AnythingSlider/
Animate Panning Slideshow with jQuery

Article : http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/
Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm
Moving Boxes

Article : http://css-tricks.com/moving-boxes/
Demo : http://css-tricks.com/examples/MovingBoxes/
Making a Content Slider with jQuery UI

Article : http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/
Demo : http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/slider.html
Supersized – Full Screen Slideshow jQuery Plugin

Article : http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
Demo : http://buildinternet.com/live/supersized/
Sliding Boxes and Captions with jQuery

Article : http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
Demo : https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm
Creating a Slick Auto-Playing Featured Content Slider

Article : http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
Demo : http://css-tricks.com/examples/FeaturedContentSlider/
Simple Controls Gallery v1.3

Article : http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
Demo : http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
loopedSlider

Article : http://github.com/nathansearles/loopedSlider
Demo : http://nathansearles.com/loopedslider/example-1.html
CrossSlide

Article : http://tobia.github.com/CrossSlide/
Demo : http://tobia.github.com/CrossSlide/

Attractive Photo Gallery With Jquery Zoom Effect

Attractive Photo Gallery With Jquery Zoom Effect

 

In this tutorial im present a how to add photo
galley with Jquery zoom effect.Its nice effect
for your blog. So, you can add this feature with
HTML/Javascript gadget. You can get earlier
photo effect form below link.
Awesome CSS Filter Effects For Blogger

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/AVvXsEi8At2tzoeb_GSYg2XAEo5Pbu_CK01cxh_5aNU416j9-K6Zo3itFOgBJVTssJjTx2IR2d-5A5p7tk_q9dccxua1Wmt8faCtbSpJXeItKRzfE76KSaNTVNOmLdTKC7pK7NsirmjqhPdng4Cz/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

3. Paste below code Before </head> 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'.

    You are done...

 

How To Add Css3 Fade Slide Show For Blogger

How To Add Css3 Fade Slide Show For Blogger 

In this post, im gonna explain, how to  add  nice
fade slider with using Css3 and HTML.Actually
Slideshow make  your blog  attractive,  you can
add some blog related image for  slideshow. Its
included moving title too.So it will make  your
blog attractive.Try to add to your blog. its easy.
Get my earlier slideshow post here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* fade slider www.bloggertrix.com*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.bloggertrix.com*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4ggij5n_GQynq7iGOxiKX-jeBR8cA2Zi9EY0jeuzrCdZQgOLXL4AFasskFaMF3fck8gQQZFIUo0-H_-fElTha8-jcFKHtwRptvM07L1ocDJ7weXyHsbugSbrT9qkpy3nUi7RrrZpy2g/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTzspv6v_tHhY-_sn2T3uDE6fMPMm2EfrIb-Td2BTyvXKvohLklGac6ToPevDyzxxcPnjWDfZAice0Rb_qXFMNQuPoUCETw8Xwunjq3Af2Ixpb_Ep7MF4dS3i1X0jdmbmI0ugE-QQkx8/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnf0HJmi9EZ8gsh8hFp4096oD4nxjw872LMKZl75kqRjrR9CpPOSG4a0Y6mouJiLcAXZqNXDi7B6lNzQVvcMpexyStMzj2B-ovm7ADq4Kl4b0eGYwPx4wrP_nrGyhZtdt2faQ122I4tg/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qwl4OxwMKKLNex-kHDt2I9Lbbns-LA4sNH5-vxOERyoZiopqyLBc_5ntvJe4jTWxGPyt8DYdhD5l-dpKIlxpLNCoxLm2Fk_0-2rxGPn-FXaAgD3r9_KNRdkfTZ3H7PEJ847BTz-7h5o/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Title 4</div>
                </li>
            </ul>
        </div>

Replace Title and image links.
10. Now save your HTML/Javascript'.

    You are done...

 

Attractive jQuery Image Gallery For Blogger

Attractive jQuery Image Gallery For Blogger 

In this post  im  gonna  explain  how  to   add cool image
slider  for  blogger. For   this  tutorial   using  jQuery and
Css3.Important   thing  is this is  easily to add  your blog.
Its just widget.easy to configure. You can add or remove
without having any problem.Follow  these  step to add to
your blog.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style type="text/css">

.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilzc2ZCqnSzytSWgmMhUIgnzDQ_-ZQSSWMILFIA20hdsxLZP_OlRLb3GTo_O09ECNh7iWNExbfXzf-_sGcZifWFmxrSRK19ef5GBCdf9Pk6HImv9j1W9KkUHyWCUh8Zn6023VbQbcBcBw/s1600/paging_btrix_bg2.png) no-repeat;
 display: none; 
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MYW1pDav9jgUIJkQCWG-mltzI7Dcsm-ts0R8CKDmLSjt_CCI_XGeoMP9_gnrFNLB8vvGhJ_q6nZcz4PDfT5Y3JSHYKy3GMBrdY9mD_au3c5gq-z8inPRS43adE6WaWO6YjoxNicxjc4/s1600/bloggertrix_imge1.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivwJb2eXD8kfqtlulIK09kvjSX49hNuDj0nweKWC1eJDc5mG6BfGPyJbZTq8X5QdIFzq5CFiNo4peHrlGfUg-B9seSmyugzVmhdrgMkfRQ8WCicPy52rQv7p3Dvb_cAVmxo6IbIDi9q0Q/s1600/bloggertrix_imge3.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpt9oahqlsvSATmd7sHEP-xwjGLHKB8cEaqF7gUwh3SSGUFaEz2xHYyFNpLmp9dWbe3AFiGQhogRCxv0VpOEQZTn-mc-TtPyCROcbmT0mHOYOUt-0Ps8z29iHHgUvLB3d2EAiu4Mne7U/s1600/bloggertrix_imge2.jpg" alt="" /></a>
            <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG_rVCmInLWGzX759oxtTRqGv471JlC46aglHhKBpsHkb-rmtUpNep1y6AbbDUwONyQjl0-sn1qdhfT6V8EocVsFAHNIX6WBIds3GzFDdRvuDWdkD2ftirEtZIPmfJlLdVEQP6KvsUGPY/s1600/bloggertrix_imge4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");
  
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;
 
 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 
 //paging_btrix + Slider Function
 rotate = function(){ 
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
  
  //Slider Animation
  $(".image_reel").animate({ 
   left: -image_reelPosition
  }, 500 );
  
 }; 
 
 //Rotation + Timing Event
 rotateSwitch = function(){  
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };
 
 rotateSwitch(); //Run function on launch
 
 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 }); 
 
 //On Click
 $(".paging_btrix a").click(function() { 
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 }); 
 
});
</script>

You can change photos by changing Image URLs
If you want to add links to your image. # replace with your image links.
7. Now save your HTML/Javascript'.

    You are done...

 

Attractive Simple CSS3 Navigation for Blogger

Navigation bar  helps  to make  your blogger attractive.
So, in this post im gonna explain how  to add attractive
simple Css3 navigation  bar for your  blogger. Actually
this is simple menu.Its  include  nice  hover colors.This
is easy to customize who are  good at  HTML and CSS.
You can take look in demo  page. Get mega navigation
bar collection here.


Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

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

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

/* The CSS3 Code for the menu starts here bloggertrix.com */
#btrixsimplemenu{
 clear:both;
 margin:5px auto;
 border:0px solid #000;
 font-size:12px;
 font-family: verdana;
 height: 236px;
}

ul#li{color:black;}
ul#level-one{
 width:700px;
 height: 36px;
 position: relative;
 list-style: none;
 line-height:36px;
 background:#f0f0f0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip6XCp65xUoEV2rcwYrhdUFECR5p4xeMqRJj34bNwMjAIBN3T-unP-FPwnYQMYUd9b-98VAxMUtgBLI2_FVFnDu5tb7w5Z0GA0399bR4j-dQ5adgCnpVL8qt-4JCQ_NBn44fdCyipDRn4/s1600/btrix_menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
 background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0); /* for firefox 3.6+ */ 
 border:solid 1px #4d4d4d;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li{
 width:80px;
 float: left;
 font-weight: bold;
 font-family: Arial;
 padding-left: 12px;
 border:solid 0px #000000;-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover{
 background:#FFA500;
 border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-two,ul#level-three,ul#level-four{
 list-style: none;
 background:#FFA500 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC72UPKAvVzCTUAi27bdgaso4akqVklgfmDnQsjhj0njXr3rHyVMDS4ppo7eipq3jdsYsMgWpX0L32TUVEjlm9LHt5jHxqaU9cRHGIhUiumq0LPntc0W9raMVAUjHy4eCf0O8_w1DwmbA/s1600/btrix_menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
 background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
 background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */ 
 display:none;
 position:absolute;
 top:36px;
 padding:0;
 width:200px;
 height:240px;
 border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
 width:196px;
 padding-left:4px ;
 line-height: 30px;
}
ul#level-two li:hover{
 background:#f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5m3KI5x5kksmW6XykUcQO6aFM0lZLNLp3Wux4a2OMqC4MEFnKYoihewhBXu9wLUxjlaV2k-9IIx7ViPMnvB1Ro69Qt92A_APBnoxZzoNfGO3Ug-uNi2FOZUfyEZ7_FbeWQyCKkIsSRVE/s1600/btrix_menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* for firefox 3.6+ */ 
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
 display: block;
}
a{
 width:200px;
 text-align: center;
 text-decoration: none;
 color:#000000;
}
ul#level-three li:hover{
 background: #00BFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYGNsln0qbqj0dOjaAQxHt1UB_2hgXn8S7y5meui6gTi2iAAnhO-T5H_onHn823ap2HJ9eOBWehlBnzTNHjPL8rez8PoZuB9aQ97aWY-EiecVFGHUmpP1DDKu7cGw724uprBAszCUy3M/s1600/btrix_menu-li-blue.png) repeat-x bottom left;
 background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
 background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */ 
 border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}

7. Go to blogger and click Layout

6. Click Add Gadget and select 'HTML/Javascript

7. Paste below code.

<div id="btrixsimplemenu">
<ul id="level-one">
<li><a href="#">Home</a></li>
<li>Campaign 
 <ul id="level-two">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Download
 <ul id="level-three">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>List
 <ul id="level-four">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

8. Now save your HTML/Javascript'.

    You are done...

 

If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post or contact via contact Us form by Clicking Here Your Feedback always appreciated.