Ada beberapa pilihan untuk mempercantik blog. Contoh penggunaan Java Script JQuery UI Accordion adalah salah satunya. Disebut javascript JQuery UI Accordion tampaknya karena tampilannya seperti accordion, sebuah menu yang berkedip a hover dan bisa disesuaikan tampilan warna, latar belakang, file input dari anchor yang akan dijadikan link-link ke halaman yang dimaksudkan. Sebuah blog yang tampilannya bagus layak menggunakan javascript yang satu ini.
Saya sudah beberapa kali mempertimbangkan untuk mengaplikasikan script ini untuk dibenamkan ke sistem blog ini, mengutak-atik tampilannya di halaman blog corat-coret yang tidak ditampilkan ke google, meski pada akhirnya saya memilih tidak menggunakannya dengan pertimbangan bahwa filosofis blog yang saya inginkan adalah blog dengan template minimalis. Jika pilihannya adalah blog yang keren, tampilan blog yang indah, maka javascript jQuery UI Accordion adalah satu cara membuat blog menjadi indah.
Jadi jika anda menginginkannya, inilah trik mempercantik blog dengan javascript jsQuery UI Accordion:
Pertama: Login ke blog anda.
Kedua: Masuk ke >> Elemen Halaman selanjutnya >> Edit HTML.
Ketiga: Cari <head>. Agar lebih mudah cari dengan mengetik F3 atau Control + F.
Kemudian Ketik kode berikut ini sesudah <head>
<link href="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
Keempat Simpan: Template anda.
Kelima: Klik lagi Rancangan.
Keenam: Pilih lokasi gadged yang anda inginkan, lalu tambahkan HTML/Javascript.
Ketujuh: Masukkan kode berikut ke dalamnya:
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Text Anda
</p>
</div>
<h3>>a href="#">Section 2>/a></h3>
<div>
<ul>
<li>List item 1>/li>
<li>List item 2>/li>
<li>List item 3>/li>
</ul>
</div>
<h3>>a href="#">Section 3>/a></h3>
<div>
<p>
Text Anda.
</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<h3>>a href="#">Section 4</a></h3>
<div>
<p>
Text Anda.
</p>
<p>
Text Anda
</p>
</div>
</div>
Itu Saja, simpan dan lihat hasilnya. Tentu saja masih ada yang perlu anda sesuaikan, tapi saya tahu itu sangat mudah dilakukan.
