Formulir Kontak

Nama

Email *

Pesan *

jQuery Accordion Widget for Blogger

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

6. Cari kode <div id='sidebar-wrapper'> atau <div id='sidebar'> dan copy kode dibawah ini tepat dibawah kode tersebut.

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





7.Setelah selesai silahkan save template dan lihat hasilnya, seperti dibawah ini:

Previous
Next Post »
0 Komentar