slide header

Wanna make ur own slide header?

just follow the steps below.

Step 1:

design(old version)/layout(new version)> add a gadget> HTML/JAVAscript

copy the code below and paste it at HTML/JAVAscript

<center><div class="main_view">

    <div class="window">

        <div class="image_reel">

            <img src="image direct link of picture" width="470" height="330"/>

            <img src="image direct link of picture" width="470" height="330"/>

            <img src="image direct link of picture" width="470" height="330"/>

            <img src="image direct link of picture" width="470" height="330"/>

        </div>

    </div>

    <div class="paging">

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

<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() {

 $(".paging").show();

 $(".paging a:first").addClass("active");

 var imageWidth = $(".window").width();

 var imageSum = $(".image_reel img").size();

 var imageReelWidth = imageWidth * imageSum;

 $(".image_reel").css({'width' : imageReelWidth});

 rotate = function(){

  var triggerID = $active.attr("rel") - 1;

  var image_reelPosition = triggerID * imageWidth;

  $(".paging a").removeClass('active');

  $active.addClass('active');

  $(".image_reel").animate({

   left: -image_reelPosition

  }, 500 );

 };

 rotateSwitch = function(){

  play = setInterval(function(){

   $active = $('.paging a.active').next();

   if ( $active.length === 0) {

    $active = $('.paging a:first');

   }

   rotate();

  }, 4000);

 };

 rotateSwitch();

 $(".image_reel a").hover(function() {

  clearInterval(play);

 }, function() {

  rotateSwitch();

 });

 $(".paging a").click(function() {

  $active = $(this);

  clearInterval(play);

  rotate();

  rotateSwitch();

  return false;

 });

});

</script></center>

red font= image direct link of pictures

orange font= height and width of pictures.you can adjust by yourself.

Step 2:

i)design(old version) /template(new version)>edit HTML

ii)CTRL+F look for /* header

iii)copy the code below and paste it above the /* header

/* 美化图片外的框框 */
.window {
height:330px;
width: 470px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid #272727;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {
float: left;
}
/* 更改数字调整分页的位置 */
.paging {
position: absolute;
top: 320px; right: 160px;
width: 160px; height:5px;
z-index: 100;
text-align: center;
line-height: 80px;
display: none;
}
/* 美化分页 */
.paging a {
padding: 3px 8px;
text-decoration: none;
border: 2.5px solid #BEBEBE;
color: black;
}
.paging a.active {
color: #FFFFFF; 
background: #000000; 
}
/* 鼠标指向分页的时候的效果 *//
.paging a:hover {
font-weight: bold;
color: #FFFFFF;   
background: #000000;    
}

orange font：must same as step 1

blue font    :adjust the number according to your blog due to the slide might different in every blog.

pink font    :thickness of frame.the larger the number,the thicker the frame  

green font   :colour code

red font      :type of frame

type of frame: