Wednesday 20 March 2013

Tutorial Slide Accordian (Slide di Blog Catatan Ngajar)

Karya baru lagi saya buat dan kupersembahkan untuk anda yang selalu setia mampir di blog ini.  Widget ini saya beri nama Fitur Slide Accordion. Selain tampilannya yang elegan, Fitur Slide Accordion ini banyak menampilkan animasi slide, yang tentunya banyak sekali manfaatnya buat melengkapi web ataupun blog anda. Misalnya web atau blog anda bergerak dibidang desain interior, eksterior, otomotif, pakaian, makanan, musik, atau bahkan web atau blog anda menampilkan game online. Yang jelas Fitur Slide Accordion ini bisa anda gunakan untuk menerangkan profil web atau blog anda. Dan Fitur Slide Accordion ini menggunakan fitur CSS dan beberapa HTML, sehingga widget ini bekerja sangat ringan. Mantab kan.....?

Silahkan anda LIHAT DEMONYA DISINI

Bila nda berminat menggunakan Fitur Slide Accordion ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :
<style type='text/css'>
/*widget Fitur Slide Accordion by noer Ceo http://www.carabuatwebgratis.com */

ul.accordion li.bg1{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJWf4QEDP8JClYx9EGo7OlPrIJcmihZfibidcuZKPYgmk49M6bzBh7fLUaYjJVPlzU4ZiIbLccGktMn4oWsNIw_LqLmS03VwhFQZM5qeVZjVYFyUV4kkNZndDmBG2f4TTYXhkEDgYfKZD/s500/RUANG+mandi.jpg);
}

ul.accordion li.bg2{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MMH-_rJWNr2L9rHZ3q5JgUKKwCRmRWPQogsHHHMP_nwRXTG-lBiMR7-O4kVR83ok49xaEcXqPUHR-OuLpIPyz8kyR6-DWdFa34eLQJdI5uQDJhFs_UX7oHD0Z6TeBqO1LfyznUoVftbl/s500/DAPUR.jpg);
}
ul.accordion li.bg3{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCCTobyyaw5UIOrB_S2JFMAI6Wn4NlzY-7dXkSJBO_d36xyqKYi7UTXtBLjw4PPrHaVyp_KSxShyphenhyphenYj3CV2_JCWuN6eJJ2M7A7-lLIvAAjKR__oLwAaUE1hBNXEInk-xAEL_9XLeCd8oY9l/s500/RUANG+makan.jpg);
}
ul.accordion li.bg4{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnfSRQz22jmuLn-0BOyHIUs9I95JwyHQRaa_QLMj-teDSGaOpq_dS9x5hDUWx5OO33c8vydKCe8L16DGQ4_un7c1KBuFhDVdOnbYn7wl3KYy3aNncz5ry9VFU4tWkaC2oxfU-7M73rHrOG/s500/KAMAR+TIDUR.jpg);
}
ul.accordion li.bg5{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ep-DU5WLIeJHLfNpJh3jl9ovJgP2n2CrS5BFRzTPUEG9mOjVDWmtdRzi3qWPNcGTBNXoUtP_lhMmzF6QSsDyGqyWHpIS_WIHMGGlce2bGkaUd0hhLUPuw8pvnJN2szDRcffmlyBaGgwA/s500/RUANG+SANTAI+KELURGA.jpg);
}
</style>
Catatan :
Teks warna merah diatas adalah ULR gambar yang akan tampil pada Fitur Slide Accordion. Silahkan ganti dengan milik anda.

9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget yang ada dibawah header, ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript


4. Copy dan paste kode dibawah ini pada gadget tersebut :
<div class="ElegantAccordion">
<div class="titel-ElegantAccordion">
<a href="ULR BLOG">NAMA BLOG</a>
</div>
<div id="content">
<div class="title"></div>

<div class="reference">
<p><a href="ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="
ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="
ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="
ULR ARTIKEL">JUDUL ARTIKEL</a></p>
<p><a href="
ULR ARTIKEL">JUDUL ARTIKEL</a></p>
</div>


<ul class="accordion" id="accordion">

<li class="bg1">
<div class="heading">JUDUL ITEM 1</div>
<div class="bgDescription"></div>
<div class="description">
<h2>
JUDUL ITEM 1</h2>
<p>INFORMASI SINGKAT ITEM 1</p>
<a href="ULR ITEM 1 ">Read More</a>
</div>
</li>
               
<li class="bg2">
<div class="heading">JUDUL ITEM 2</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 2</h2>
<p>INFORMASI SINGKAT ITEM 2</p>
<a href="
ULR ITEM 2">Read More</a>
</div>
</li>

<li class="bg3">
<div class="heading">JUDUL ITEM 3</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 3</h2>
<p>INFORMASI SINGKAT ITEM 3</p>
<a href="
ULR ITEM 3">Read More</a>
</div>
</li>
               
<li class="bg4">
<div class="heading">JUDUL ITEM 4</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 4</h2>
<p>INFORMASI SINGKAT ITEM 4</p>
<a href="
ULR ITEM 4">Read More</a>
</div>
</li>

<li class="bg5">
<div class="heading">JUDUL ITEM 5</div>
<div class="bgDescription"></div>
<div class="description">
<h2>JUDUL ITEM 5</h2>
<p>INFORMASI SINGKAT ITEM 5</p>
<a href="
ULR ITEM 5">Read More</a>
</div>
</li>

</ul>
</div>
</div>
</div>
Catatam :
  • Silahkan anda ganti Teks berwarna diatas.
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....

BILA ANDA BERMINAT DENGAN FITUR SLIDE ACCORDION SEPERTI PADA BLOG INI, ANDA BISA DOWNLOAD FILE KODENYA DISINI.

catatan pak guru

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 komentar:

Post a Comment