CARA MEMBUAT MENU CAROUSEL OVER MOUSE

1. Masuk dashbor blog sobat.
2. Klik Tata Letak.
3. Klik add gadget/tambah gadget di sidebar dimana sobat akan menempatkan Menu Carousel tersebut.
4. Pilih HTML/Java Script.
5. Copast kode html Menu Carousel di bahwa ini ke kotak baru tersebut lalu klik simpan.
6. Silahkan lihat blog sobat.

kode html Menu Carousel

#outer_container{
	padding: 0;
	margin: 1px;
	width: 100%;
	position: relative;
}
#outer_container .thumbScroller{
	position: relative;
	overflow: hidden;
	background: url(fs_img_g_bg.png);
	margin: auto;
}

#outer_container .thumbScroller .container{
	position: relative;
	left:0;
}
#outer_container .thumbScroller .content{
	float: left;
}
#outer_container .thumbScroller .content div{
	height: 100%;
}
#outer_container .thumbScroller img{
	border: 6px double #FFFFFF;
	border-radius: 5px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 0px;
}
#outer_container .thumbScroller .content div a{
	padding: 2px;

}

.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:40px; height:40px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(prevImgBtn.png) center center no-repeat;}
</style>

<div class="content">
         <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
         <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
         <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
         <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsutv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
<div class="content">
          <div>
<a href="http://kepsuktv.blogspot.com" target="blank" title="kepsuktv"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png" border="0" height="60" width="80"></a></div>
</div>
</div>
</div>
</div>
</div>
<script>
//config
//set default images view mode
$defaultViewMode="none"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 
$scrollEasing=600; //scroll easing amount (0 for no easing) 
$scrollEasingType="easeOutCirc"; //scroll easing type 
$thumbnailsContainerOpacity=100; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=100; //thumbnails area opacity on mouse out
$thumbnailsOpacity=100; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {
 $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
 if($defaultViewMode=="full"){
  $toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
 } else {
  $toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
 }
 ShowHideNextPrev($nextPrevBtnsInitState);
 //thumbnail scroller
 $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
 sliderLeft=$thumbScroller_container.position().left;
 sliderWidth=$outer_container.width();
 $thumbScroller.css("width",sliderWidth);
 var totalContent=0;
 fadeSpeed=200;
 
 var $the_outer_container=document.getElementById("outer_container");
 var $placement=findPos($the_outer_container);
 
 $thumbScroller_content.each(function () {
  var $this=$(this);
  totalContent+=$this.innerWidth();
  $thumbScroller_container.css("width",totalContent);
  $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
 });

$thumbScroller.mousemove(function(e){
  if($thumbScroller_container.width()>sliderWidth){
     var mouseCoords=(e.pageX - $placement[1]);
     var mousePercentX=mouseCoords/sliderWidth;
     var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
     var thePosA=mouseCoords-destX;
     var thePosB=destX-mouseCoords;
     if(mouseCoords>destX){
      $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
     } else if(mouseCoords<destX){
      $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
     } else {
    $thumbScroller_container.stop();  
     }
  }
 });

$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
 $thumbnails_wrapper.hover(
  function(){ //mouse over
   var $this=$(this);
   $this.stop().fadeTo("slow", 1);
  },
  function(){ //mouse out
   var $this=$(this);
   $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
  }
 );

//load 1st image
 var the1stImg = new Image();
 the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
 the1stImg.src = $bgimg.attr("src");
 $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
 $outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
});

//next/prev images buttons
$nextImageBtn.click(function(event){
 event.preventDefault();
 SwitchImage($outer_container.data("nextImage"));
 var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
 GetNextPrevImages($this);
 GetImageTitle($this);
});

$prevImageBtn.click(function(event){
 event.preventDefault();
 SwitchImage($outer_container.data("prevImage"));
 var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
 GetNextPrevImages($this);
 GetImageTitle($this);
});

//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
    if(ev.keyCode == 39) { //right arrow
        SwitchImage($outer_container.data("nextImage"));
  var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  GetNextPrevImages($this);
  GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    } else if(ev.keyCode == 37) { //left arrow
        SwitchImage($outer_container.data("prevImage"));
  var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  GetNextPrevImages($this);
  GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    }
});
}

function ShowHideNextPrev(state){
 if(state=="hide"){
  $nextImageBtn.fadeOut();
  $prevImageBtn.fadeOut();
 } else {
  $nextImageBtn.fadeIn();
  $prevImageBtn.fadeIn();
 }
}

//function to find element Position
 function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
   curleft = obj.offsetLeft
   curtop = obj.offsetTop
   while (obj = obj.offsetParent) {
    curleft += obj.offsetLeft
    curtop += obj.offsetTop
   }
  }
  return [curtop, curleft];
 }
</script>

N/B:
1.Ganti link url http://kepsuktv.blogspot.com dengan link menu anda
2.Ganti link image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvYBkv3aJO0D6h0SvhyphenhyphengDdd3DZgEjbWxBjIyi8qyn90L9ecGkmcw9q52dODMuY_N2HwPxz0E0wvYe32pfTJpGx2ZB626wxKs0ntlyVfMcUYnTJqbK1HfebxhZyfmtjwNOmsskujv97V4/s320/LOGOKEPSUK.png dengan url image anda

Di bahwa ini contoh Menu Carousel nya

11 October 2013

CARA MEMBUAT MENU CAROUSEL OVER MOUSE

Unknown

0 komentar:

Search Bar

Popular Posts

Labels

Followers

11 October 2013

CARA MEMBUAT MENU CAROUSEL OVER MOUSE

Unknown

Related Posts

0 komentar:

Search Bar

Popular Posts

Labels

Followers