March 07, 2011
2



Alhamdulillah, finally i can publish this post, this time i want to explain how to modify your tab with slide show efect, for more details please see successful example of widget tab with slide show that I've created at this link
Already ?, links above will enter you into my blog that there are examples of the tab with the slideshow effect, you'll see a box with text inside it and there are two direction arrows beside it, one to left and right for an other, please cklick on one of the direction arrows beside the box and you'll see the menu changes inside it.
Now i thought you already understand what will i explain in this post, alright let's start it..



1st -->>
The HTML structure, this is the content of the tab you later

/* HTML Structure */




<a class="backward">prev</a>
<!-- container for the slides -->
<div class="images">
<!-- first slide -->
<div>
<h3>Fist Pane title</h3>
<img src="your image" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
<p style="font-weight:bold">
Sub Title
</p>
<p>your menu content</p>
</div>

<!-- second slide -->
<div>
<h3>Second Pane title</h3>
<img src="your image" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
<p style="font-weight:bold">
Sub Title
</p>
<p>your menu content</p>
</div>

<!-- third slide -->
<div>
<h3>Thirth Pane title</h3>
<p style="font-weight:bold">
Sub Title
</p>
<p>your menu content</p>
</div>
</div>

<!-- "next slide" button -->
<a class="forward">next</a><p>

<!-- the tabs -->
<div class="slidetabs">
<a href="#"></a>

<a href="#"></a>
<a href="#"></a>
</div></p>
.
 Note : you can change the writing that I give color with what you want,

Now the CSS structure, this is used to set the background, width and height of your tabs, you can coloring it as you want

/* The CSS Structure */


/* container for slides */
.images {
background:#fff url(http://i1191.photobucket.com/albums/z464/izoel1/h300.png) repeat-x;
border:1px solid #ccc;
position:relative;
height:300px;

width:650px;
float:left;
margin:15px;
cursor:pointer;

/* CSS3 tweaks for modern browsers */
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:0 0 25px #666;
-webkit-box-shadow:0 0 25px #666;
}

/* single slide */
.images div {
display:none;
position:absolute;
top:0;
left:0;
margin:7px;
padding:15px 30px 15px 15px;
height:256px;
font-size:12px;
}

/* header */
.images h3 {
font-size:22px;
font-weight:normal;
margin:0 0 20px 0;
color:#456;
}

/* tabs (those little circles below slides) */
.slidetabs {
clear:both;
margin-left:330px;
}

/* single tab */
.slidetabs a {
width:8px;
height:8px;
float:left;
margin:3px;
background:url(http://i1191.photobucket.com/albums/z464/izoel1/hori_large.png) 0 0 no-repeat;
display:block;
font-size:1px;
}

/* mouseover state */
.slidetabs a:hover {
background-position:0 -8px;
}

/* active state (current page state) */
.slidetabs a.current {
background-position:0 -16px;
}


/* prev and next buttons */
.forward, .backward {
float:left;
margin-top:140px;
background:#fff url(http://i1191.photobucket.com/albums/z464/izoel1/hori_large.png) no-repeat;
display:block;
width:30px;
height:30px;
cursor:pointer;
font-size:1px;
text-indent:-9999em;
}

/* next */
.forward { background-position: 0 -30px; clear:right; }
.forward:hover { background-position:-30px -30px; }
.forward:active { background-position:-60px -30px; }


/* prev */
.backward:hover { background-position:-30px 0; }
.backward:active { background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
visibility:hidden !important;
}
Note : you can modify the css above as you wish.

Now the JavaScript coding

/* JavaScript coding */
$(function() {
$(&quot;.slidetabs&quot;).tabs(&quot;.images &gt; div&quot;, {
// enable &quot;cross-fading&quot; effect
effect: &#39;fade&#39;,
fadeOutSpeed: &quot;slow&quot;,
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
.
jQuery slideshow pluggin
<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>

How To :
Now i'll explain how to put it on your blospot.com.
  1. First you sign in to your blogger account.
  2. On dashboard choose design option, than click on edit HTML menu and add check in expand widget templates check box
  3. First you must add the jQuery slideshow pluggin right after or below code <head>
  4. Second, search code ]]></b:skin> and place /* The CSS Structure */ just before or at the above code ]]></b:skin>
  5. Thirth, scroll down and look for the code </body> , then put the /* JavaScript coding */ above code code </body>
  6. Save your template changes.
  7. The last. Exit from and entry into the edit html page elements.
  8. Select add a gadget and select menu html / javascript .
  9. Put the code /* HTML Structure */ in the box  html / javascript.
  10. Than click save
Now open your blog and if successful, the menu tab will look like in the example.
Please try

2 komentar:

Saya sangat berterimakasih apabila sahabat sekalian bersedia untuk tidak meninggalkan spam dan meninggalkan komentar yang berhubungan dengan artikel di atas.