Mungkin teman-teman kalian masih pada bingung apa itu Tab Accordion Bubbling Library, sekarang blogger memperbolehkan kita untuk memakai tutorial ini pada semua blog di blogspot. Ok kalau kalian masih pada bingung coba kalian lihat contoh demonya :
Demo 1
Nah begini cara membuatnya :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini : (Untuk Lebih memudahkan kalian klik ctrl + f)
</head>
6. Tambahkan kode ini diatasnya :
<style type="text/css">
.myAccordion {
float: left;
margin-right: 15px;
}
h3{
padding: 8px;
color: #636363;
background-color: #ffffff;
background-image: url(http://alien.keren.googlepages.com/1.gif);
background-position: top;
background-repeat: repeat-x;
font-weight: normal;
}
.myAccordion .yui-cms-accordion .yui-cms-item {
border: 1px solid #cccccc;
width: 200px;
}
.myAccordion .yui-cms-accordion .yui-cms-item h3 {
margin: 0px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px 0px;
text-decoration: none;
padding-left: 20px;
display: block;
}
.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px -100px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd {
height: 0px;
overflow: hidden;
background-color: #fff;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
overflow: hidden;
padding: 5px;
height: 230px;
}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">
</script>
<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/accordion/accordion.js"></script>
7. Tambahkan Page elemen HTML / Javascript lalu tambahkan kode di bawah ini :
<div class="myAccordion">
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div>
</div>
<div style="text-align: right;">Widget by <u><a href="http://klinik-tutorial.blogspot.com/">klinik-tutorial</a></u></div>
</div>
8. Save dan lihat hasilnya.
Jangan lupa ganti tulisan berwarna hijau diatas dengan tulisan kalian.
untuk mempercepat prosesnya tinggal kalian ganti tulisan slow menjadi fast.
Selamat mencoba
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
Subscribe to:
Post Comments (Atom)
gk bisa mas
pas saya save keluar tulisan
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: XML document structures must start and end within the same entity.
gimana tuh mas kasih pencerahan donkk
kalau muncul seperti itu sebaiknya tanda petiknya yg semula ini (") ganti dengan kaya gini (') >> tanpa tana kurung, kalau tetep g bisa sebaiknya codenya di parse HTML aja