Aizzan Blog -- Pada kesempatan malam ini saya akan posting bagaimana cara membuat jQuery Accordion Widget untuk blog, dimana ada kerabat saya yang menginkan tutorial itu :) Screenshot ada dibawah ini dan ada disebelah samping postingan ini
 |
| Aizzan Blog: jQuery Accordion Widget for Blogger |
Berikut ini adalah langkah - langkah untuk membuat jQuery Accordion Widget for Blogger
1. Login di blogger
2. Masuk ke Template pilih Edit HTML
3. Cari ]]</b:skin>tag.4. Masukkan kode dibawah ini sebelum ]]</b:skin>
/* TechTasks accordian CSS*/
#TTAccordian {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width:100%;
float: left;
_float: none;
background: #E0E0E0; /* Default Background Color*/
border: 1px solid #999;
border-bottom: 1px solid #ccc;
cursor: pointer;
border-radius:5px;
}
.accHead
{
padding:5px 5px 5px 10px;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
}
.accordionContent {
width: 100%;
float: left;
_float: none;
background: #ffffff;
border-radius:5px;
}
.on {
background: #0080FF; /* Selected Accordion Background Color*/
border-radius:5px;
color:#ffffff;
}
.over {
background: #5CAEFF; /* Mouse Over Background Color*/
color:#fff
border-radius:5px;
color:#ffffff;
}
/* End TechTasks accordian CSS*/
5. Cari kode </head> dan paste kode dibawah ini tepat sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Tabber Script--------------*/
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/*** CLOSES ALL S ON PAGE LOAD ****/
$("div.accordionContent").hide();
/* OPENS THE DIV THAT IS ASSIGNED WITH THE ID open */
$("#open").trigger('click');
});
/*----------End TechTasks Tabber Script--------------*/
</script>
<!-- Start accordian -->
<div id='TTAccordian'>
<div class='accordionButton' id='open'><div class='accHead'>Facebook</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion1' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>Future Widgets</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion2' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>About Author</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion3' preferred='yes'>
</b:section>
</div>
</div>
<!-- end accordian -->
0 Komentar