Membuat Widget Daftar Isi Tersembunyi


Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding
2. Tidak Tahu Computer Programming
3. Tidak Paham Bahasa Pemrograman Android
4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...
Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan
2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan
3. Susun blok-blok kode programnya, dan
4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?
Mudah kok, karena sudah hadir untuk Anda Di Sini :


Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

Membuat Widget Daftar Isi Tersembunyi | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Daftar Isi Blog, pada tutorial kali ini daftar isi tersebut akan kita pasang pada widget di sidebar blog dengan mode Show Hide.
Buat yang ingin mencobanya, silakan ikuti tutorial berikut :
  1. Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
    Membuat Widget Daftar Isi Tersembunyi
  2. Klik Add a Gadget, pilih HTML/Java Script
    Membuat Widget Daftar Isi Tersembunyi
  3. Lalu masukkan kode berikut :
    <div class="widget-content">
    <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

    <script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>

    </div></div></div></div></div></div></div>
    Keterangan :
    blue : warna background, silakan ganti sesuai keinginan Anda.
    width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.
    alamatblog.com : Ganti dengan alamat blog Sobat.
    Widget diatas daftar isi berdasarkan label, untuk Daftar Isi Berdasarkan Tanggal berikut kodenya :
    <div class="widget-content">
    <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

    <script src="http://post-xml.googlecode.com/files/feed-dates.js"> </script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

    </div></div></div></div></div></div></div>
  4. Lalu klik Save.
    Membuat Widget Daftar Isi Tersembunyi
    hasilnya akan seperti ini, silakan di klik.

    Daftar Isi

    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Dan Seterusnya
Sekian tutorial tentang Membuat Widget Daftar Isi Tersembunyi.

Pengelola Blog : ABDUL WAHAB

Judul : Membuat Widget Daftar Isi Tersembunyi
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Membuat Widget Daftar Isi Tersembunyi
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2011/12/membuat-widget-daftar-isi-tersembunyi.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Previous
Next Post »