Sample Text

This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Kamis, 24 Mei 2012

Tips menjalankan Google Earth


Sesaat anda di Paris kemudian terbang ke hutan tropic di Amazon Amerika Selatan. Memandangi Piramid Giza yang memukau tiba-tiba anda terbang melesat ke genangan banjir sepinggang di Kota Jakarta….Atau ingin melihat bagaimana bentuk rumah kita dari satelit? Atau bagi backpacker/traveller melihat selak beluk kota yang akan dikunjungi, mengetahui lokasi hotel, airport, stasiun MRT, dll..
Apakah cerita di atas sebuah mimpi atau lamunan? tidak, 100% tidak ini adalah kenyataan walau sifatnya adalah virtual travel menggunakan salah satu software gratisan (freeware) dari Google salah satu penyedia layanan mesin pencari (search engine) dunia yang sangat terkenal.
Apa itu Google Earth ?
Adalah software yang menyajikan globe dunia virtual yang menggabungkan beberapa sumber yaitu dari photo satelit, photo udara dan Sistem Geographic 3D. Software ini dibagi menjadi 3 bagian menurut license-nya:
- Free Version (gratis) dengan fasilitas terbatas
- Google Earth Plus dengan beberapa fasilitas tambahan (US$ 20/tahun)
- Google Earth Pro untuk kebutuhan komersial seperti perencanaan pembangunan bendungan, airport, tower listrik yang membutuhkan photo udara yang akurat (US$400/tahun)
Bagaimana mendapatkan Google Earth (GE)?
Untuk mendapatkan software GE free caranya sangat mudah tinggal klik ke situs berikut http://earth.google.com/download-earth.html . PC anda akan mendownload setup file dengan kapasitas sekitar 14 MB dengan lama waktu download tergantung dengan koneksi internet yang anda gunakan. Setelah download selesai anda klik 2x file setup dan ikuti semua instruksi sampai proses instalasi selesai.
Apakah PC saya bisa menjalankan GE?
Untuk dapat menampilkan image yang bagus spek minimum PC yang digunakan sbb:
• Operating System: Windows XP
• CPU: Pentium 4 2.4GHz+ or AMD 2400xp+
• System Memory (RAM): 512MB RAM
• Hard Disk: 2GB free space
• Network Speed: 768 Kbits/sec (Dial up: telkomnet, GPRS tidak rekomen, bikin frustasi, lambreta bgt. Speedy dan 3-G boleh lah)
• Graphics Card: 3D-capable with 32MB of VRAM
• Screen: 1280×1024, “32-bit True Color” screen
• Keyboard & mouse
Detail info
Bagaimana menentukan koordinat?
Pada waktu kita SMP/SMA dulu munkin pernah belajar menentukan koordinate dan bagaimana dunia dibagi menjadi Garis lintang dan Garis Bujur (detail)
300px_Coordinates
Garis Lintang (Latitude)
Garis ini adalah garis yang membelah bumi secara vertikal (tegak). Dimulai dari garis tengah bumi (equator/katulistiwa) 0° Dari equator ke atas disebut Lintang Utara 90°N (North) pada kutub utara dan ke bawah disebut Lintang Selatan 90° S (South) ada kutub Selatan. Garis Lintang ini biasanya digunakan untuk menentukan perbedaan musim, tropis (equator), sub tropis, dan dingin (mendekat ke kedua kutub).
Penulisan biasanya dengan memberi simbol derajat : 10° N atau 12 °S tapi untuk GE biasanya ditulis 10 (untuk North/Utara) dan -12 (untuk South/Selatan).
Garis Bujur (Longitude)
Garis ini membelah bumi secara horizontal (Barat ke Timur/West to East) dari Kanan (West) ke kiri (East). Titik mulai 0° West adalah di di Kota Greenwich dekat London Inggris. Garis Bujur ini biasanya digunakan untuk menentukan perbedaan waktu. Sehingga dikenal GMT + 7 (Greenwich Mean Time) untuk WIB yang berarti pada saat WIB Pukul 7.00 pagi, GMT pukul 00.00
Penulisan Koordinat
Penulisan koordinat suatu titik di bumi adalah pertemuan dari Garis Lintang dan Garis Bujur.
Contoh Kota Jakarta terletak di 6° 7′ 59.88″ S, 106° 45′ 0″ E (Titik Lintang, Titik Bujur) . Untuk entry ke GE koordinat ini ditulis sbb -6 7 59.88, 106 45 0. Ada spasi antara derajat, menit dan detik dari koordinat, tanda minus pada titik lintang menandakan South (Selatan).
Contoh lain koordinate Patung Liberty di USA 40°41’23.24″N, 74° 2’43.31″W,
ditulis 40 41 23.24, -74 2 43.31 tanda minus pada titik bujur menandakan West (Barat).
Ada beberapa cara penulisan koordinat lain seperti dalam bentuk desimal, UTM dll tapi sementara ini cara ini yang termudah untuk menentukan koordinat di GE.
Saya yakin 1 dekade yang akan datang penulisan alamat akan menggunakan koordinat ini mengingat sangat akurat dan unik untuk setiap titik di bumi ini. Jadi kalau kita ditanya alamat rumah cukup sebutkan deretan angka di atas. So simple isn’t it? Tidak perlu lagi RT sekian, RW sekian, Jalan anu, Kelurahan itu. Sehingga lagu “RT 5, RW 2, 10 nomor rumahku, Jalannya….” tidak didengung-dengungkan lagi.
Menjalankan Program GE
Cukup mengklik icon Google Earth di desktop anda, dan periksa kembali koneksi internet anda terhubung, karena GE ini sifatnya online apabila pada waktu boot program dideteksi tidak ada jaringan internet makan program ini akan memberikan warning.
Tampilan
Google Earth Front pageTampilan software GE terdiri dari peta bumi dengan tombol navigasi menggunakan mouse, klik mouse kiri untuk mengeser/memutar bola dunia ke kiri-kanan, atas-bawah. Untuk Zoom in, gunakan Tombol Tengah Mouse geser ke bawah. Zoom out, Tombol Tengah geser ke atas.
Dari setiap bagian image yang tampil dilayar monitor anda, GE akan men-streaming dari 0% (gambar kelihatan kabur/tidak detail) s.d 100% (gambar jelas). Lama streaming ini tergantung dengan koneksi internet anda.
GE mengambil photo satelit/photo udara secara berkala, sehingga image yang disajikan tidaklah realtime, bisa jadi image itu diambil beberapa bulan/tahun yang lalu tergantung dengan seberapa penting lokasi ini.
Untuk kota seperti Jakarta, Singapore, Newyork dll anda dapat melihat dengan jelas/detail sampai dengan ketinggian 10 m, namun untuk lokasi pedalaman bisa jadi gambar yang tampil tidak jelas (kabur) ini karena satelit tidak memphoto lokasi itu dengan detail.
Berapa lama PC saya men-streaming image?
Ini sangat tergantung dengan koneksi internet anda, bila anda menggunakan lease line dengan kecepatan lebih dari 100 kbps, streaming image bisa 2-5 detik dari 0-100%, namun bila menggunakan dial up < 56 kbps bisa jadi lebih dari 5 menit.
Navigasi
Tombol Navigasi
Bila anda tidak mempunyai mouse dengan tombol tengah dapat menggunakan Display Navigasi di sebelah kanan atas tampilan GE. Untuk Zoom In anda cukup klik pada tanda (+) dan zoom out pada (-), Sudut pandang juga tidak selalu dari atas 90° tegak lurus tapi bisa “tilt”(miring) sehingga ada kesan 3D dengan klik pada tombol Tilt ke kiri- kanan.
Search
Search Jakarta
Anda dapat mengetik kota atau lokasi yang akan dituju ke menu Search kemudian klik icon “kaca pembesar”. GE akan mencari beberapa alternatif tempat yang anda maksudkan, anda dapat memilih tempat yang anda maksudkan.
Dapat juga memasukkan koordinat pada menu Search. Copy dan paste koordinat Patung Liberty di atas 40 41 23.24, -74 2 43.31 maka GE akan mencari lokasi sesuai dengan koordinat yang dimasukkan. Anda akan melihat tampilan lokasi dimana Patung Liberty di Newyork berdiri
Search coordinate Liberty
Search Liberty Island
Dari setiap lokasi yang pernah dikunjungi akan terdaftar di dalam list pada Menu Search. Untuk mengunjungi kembali anda tinggal klik 2x lokasi tersebut. Namun list ini akan hilang bila GE di shutdown
Place
Places
Semua lokasi dan koordinat yang pernah dikunjungi akan terdaftar dalam menu place, dan list ini tidak hilang walau GE dishutdown.
Layers
Layers
Menu layers terdiri dari Core (layer utama GE) dan All layers sesuai dengan layer yang diaktifkan seperti Geographic web eg. Panoramio, Wikipedia, Road/Google map, 3D Building (gedung icon dunia tampil secara virtual), dll.
Dimulai Tanggal 20 Maret 2008, beberapa kota besar di Indonesia,seperti Jakarta, Bandung, Surabaya, Semarang, dan Bali telah tersedia Google Map. Fasilitas baru ini akan lebih mempermudah untuk meng-eksplore kota-kota sampai ke detail jalan dan gang. Sebelumnya hampir semua kota di Amerika, Eropa dan Singapore telah tersedia Peta (Google Map) dengan nama jalan dan tempat secara detail sehingga untuk persiapan travel atau mencari alamat anda dapat memasukan alamat atau nama jalan ke Menu Search dan GE akan otomatis menemukan alamat yang anda masukan.
Cookies
Semua lokasi/image yang pernah dikunjungi akan disimpan di cookies/Internet Temporary files PC anda sehingga bila anda membuka lokasi yang sama dikemudian hari, image akan langsung tampil tanpa harus di “streaming” dulu.
Menanda Lokasi/Marking a position
Pointer Anda dapat menandai lokasi sesuai dengan menggunakan “pointer” icon pin kuning yang terdapat di icon bar di atas.
Arahkan pointer ke tempat yang dikehendaki, akan muncul window dimana anda dapat menuliskan nama lokasi tersebut. Lokasi yang ditandai ini akan tersimpan di list “Places”
Tampilan 3D
Newyork 3D tiltSecara virtual GE dapat menampilkan kontur bumi secara 3 Dimensi, seperti gedung bertingkat (landmarks), gunung, menara dll secara virtual.
- Centang 3D Buildings pada Menu Layers
- Cari lokasi yang dikehendaki
- Klik tombol “Tilt” navigasi kanan atas pada sehingga anda akan merasakan pandangan anda “turun’ dari tegak lurus menjadi sedikit miring. Apabila kota/lokasi yang dipilih telah ada 3D Building maka anda akan melihat gedung pencakar langit dan landmark lain.
- Ketik New york pada Menu Search, anda akan dibawah ke Kota Newyork, pilih lokasi yang dikehendaki seperti disekitar patung Liberty atau ex gedung WTC, kemudian klik Tombol Navigasi Tilt sehingga anda dapat melihat gedung 3D.
- Apabila koneksi internet anda agak lambat, anda harus menunggu sebentar sampai semua gedung tertampil di GE.
Photo
Panoramio_PhotoDari setiap lokasi di GE, kita akan menemukan tanda bulat biru apabila di klik akan menampilkan photo kontribusi dari seluruh dunia. Feature ini dikelola oleh site bernama Panoramio
Anda dapat juga menyumbang photo hasil jepretan anda pribadi disini sehingga seluruh orang didunia dapat menyaksikannya.
Bagaimana Memasang Photo di GE/Panoramio?
Panoramio bekerjasama dengan GE dengan menampilkan photo dari user panoramio di semua lokasi di GE. Walaupun kadang kita harus menunggu 1 bulan s.d setahun untuk melihat photo yang kita upload ditampilkan di GE, hal ini dikarenakan setiap hari panoramio menerima ribuan photo dan photo-photo ini harus diseleksi sehingga tepat untuk ditampilkan. Photo yang diupload adalah photo view dari lokasi yang bersangkutan dan bukan photo diri (mejeng) dilokasi tersebut.
Bagaimana register ke Panoramio?
Panoramio_Sign_up Anda klik ke site panoramio
bila anda belum mempunyai account panoramio, dibutuhkan untuk Sign Up dulu dengan meng-klik icon Sign up dengan mengisi email, user name dan password.

Panoramio_setting Untuk menambah informasi personal anda dapat meng-klik “Setting”.
Bagaimana meng-upload photo?
1. Klik “Upload”, akan tampil windows Upload your photos, Klik Browse untuk mengambil photo dari direktori PC anda. Disarankan ukuran photo Panoramio_Upload1tidak lebih dari 600 px width karena semakin besar ukuran photo, semakin lama waktu upload dan download oleh user GE. Ukuran photo tidak selalu harus proposional (600 x 450 px), bisa saja dengan ukuran panorama (600 x 250px) tergantung dengan lokasi yang diphoto.
2.Ketik Nama Photo pada “Title”
Panoramio_Raffles1
3. Menentukan lokasi photo ini klik “Map this photo”.
Akan tampil Map this photo dengan field : City or Place. Anda dapat saja memasukan nama kota seperti “Jakarta” namun ini sangat lah umum/luas sehingga anda harus mencari kembali ke lokasi yang spesifik dimana photo ini diambil.
4. Cara termudah untuk menentukan lokasi photo ini a Panoramio_Raffles_Coordinate_GEdalah dengan melihat ke GE, anda cari koordinat photo ini. Klik Pointer dan arahkan pointer ke exact location photo.

Rabu, 23 Mei 2012

Cara membuat Scroll Box

Pada Tutorial blog kali ini saya akan kasih tips cara membuat Scroll Box. Scroll Box banyak digunakan di web atau blog. Scroll Box sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak artikel atau apa saja yang ingin tetap ditampilkan pada satu halaman. Scroll Box selain bisa digunakan untuk tempat artikel, banyak juga yang menggunakan Scroll Box sebagai tempat daftar isi.

Cara membuat Scroll Box sangat mudah, silahkan anda perhatikan contoh dibawah ini berikut kodenya :
JUDUL ARTIKEL
Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.

Berikut Kode untuk scroll box diatas :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col">JUDUL ARTIKEL</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 250px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">Silahkan anda bisa mengisi artikel atau daftar isi atau apa saja disini. Semakin banyak teks yang anda isikan dalam scroll box ini, dengan sendirinya akan membentuk kotak scroll box secara otomatis, sehingga dapat menghemat tempat. Lihat Contoh scroll box dibawah dengan isi teks yang lebih banyak.</div></div></td></tr>
</table>
</div>


Anda juga bisa memberi warna sesuka anda, seperti scroll box dibawah ini berikut kodenya :

CONTOH DAFTAR ISI TUTORIAL BLOG





Berikut Kode untuk scroll box diatas :

<div align="center">
<table width="250" border="1">
<tr> <th colspan="100%" scope="col"bgcolor="#F2F2F2">CONTOH DAFTAR ISI TUTORIAL BLOG</th> </tr><tr><td>
<div style="font-family: arial; font-size: 12px; overflow: scroll; background: #FFFFFF; border-color: #CCCCCC; width: 250px; height: 250px;"><div style="text-align:left; width: 100%; padding: 0 px; overflow: hidden; color: #FFFFFF; background: #EFEFFB;">


<ul>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-pasang-tombol-share.html">Cara pasang tombol share</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-mencari-kode-html.html">Cara mencari kode HTML</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-blog-menjadi-dofollow.html">Cara membuat Blog menjadi Dofollow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-textarea-dengan-tombol.html">Cara membuat textarea dengan tombol "select all"</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-effek-scroll-pada-titel.html">Cara membuat effek scroll pada Titel Bar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-tanggal-otomatis-update.html">Cara membuat tanggal otomatis update</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-pop-up-window.html">Cara Membuat Pop-up Window</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-navigasi-halaman.html">Cara Membuat Navigasi Halaman</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-subscribe-email-pada-blog.html">Cara Membuat Subscribe email pada blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-efek-shadow-pada-kotak-dan.html">Cara membuat efek shadow pada kotak dan gambar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-tabel-tahap-2.html">Cara Membuat Tabel (Tahap 2)</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-list-pada-daftar.html">Cara membuat List pada daftar</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-pasang-iklan-diatas-postingan.html">Cara pasang Iklan diatas postingan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-ulr-html-link-forum.html">Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/cara-membuat-artikel-berhubungan-atau.html">Cara membuat artikel berhubungan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/02/menambah-widget-pengatur-ukuran-dan.html">Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-menambahkan-efek-teks-pada-cursor.html">Cara Menambahkan Efek Teks pada Cursor Mouse</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-kotak-pencarian-untuk-web.html">Cara buat kotak Pencarian</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-menu-navigasi-drop-down.html">Cara buat Menu navigasi Drop-Down Horisontal</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/membuat-label-animasi.html">Cara Membuat Label Animasi "blogumulus"</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-tag-cloud.html">Cara membuat Tag Cloud</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/radio-online.html">Cara Pasang Radio Online</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-label-di-blog.html">Cara Membuat label di blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-slider.html">Cara membuat Slider</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-slideshow.html">Cara membuat slideshow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/membuat-variasi-font-pada-teks.html">Cara Membuat variasi Font pada Teks</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-buat-kotak-atau-teks-area.html">Cara Buat Kotak atau Teks Area</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-scroll-box.html">Cara membuat Scroll Box</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-tabel-tahap-1.html">Cara Membuat Tabel (Tahap 1)</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-membuat-link-terbuka-di-halaman.html">Cara membuat Link Terbuka di halaman Baru</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/01/cara-menambah-gadget-diatas-header.html">Cara Menambah Gadget diatas Header</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/cara-buat-sitemap-peta-situs.html">Cara Buat Sitemap / Peta Situs</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/cara-buat-tabel-kode-warna.html">Cara buat tabel kode warna</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/membuat-teks-berjalan-marquee.html">Cara Membuat Teks Berjalan ( Marquee )</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/12/membuat-refresh-otomatis-pada-blog.html">Cara Membuat Refresh Otomatis pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-rounded-corner.html">Cara Membuat Rounded Corner</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-text-shadow.html">Cara membuat Text-Shadow</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-memasang-background-gambar-pada.html">Cara Memasang Background Gambar pada postingan</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/11/cara-membuat-daftar-isi-otomatis.html">Cara membuat daftar isi otomatis</a></li>
<li><a href="http://www.carabuatwebgratis.com/2010/10/menambah-widget-jam-pada-blog.html">Cara Menambah Widget Jam pada Blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-read-more.html">Cara Membuat Read more</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-menghilangkan-navbar-pada-blogger.html">Cara Menghilangkan Navbar Pada blog</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-navbar-auto-hide.html">Cara Membuat Navbar Auto-Hide</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-forum-login.html">Cara Membuat Forum Login</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-agar-postingan-tidak-dapat-di-copy.html">Cara Membuat Anti Copy Paste</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/membuat-pesan-selamat-datang-pada-blog.html">Cara Membuat pesan selamat datang</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-animasi-status-loading.html">Cara Membuat Animasi Status Loading</a></li>
<li><a href="http://www.carabuatwebgratis.com/2011/04/cara-membuat-text-area-blok-otomatis.html">Cara Membuat Text Area blok Otomatis</a></li>
</ul>

</div>
</div>
</td></tr>
</tbody></table>
</div></div></div></td></tr>
</table></div>

Silahkan anda ganti teks berwarna merah dia atas dengan daftar isi milik anda. Untuk memilih warna beserta kodenya silahkan anda lihat tabel kode warna yang ada disebelah samping halaman ini. 
Dan cara penulisan  link untuk daftar seperti diatas, silahkan anda lihat artikelnya di : http://www.carabuatwebgratis.com/2011/03/penggunakan-atribut-hyperlinks.html

Demikian cara membuat scroll box,

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Cara membuat tab menu Accordion

Bentuk tampilan tab menu Accordion ini sangat menarik, sangat bagus bila kita pasang pada web ataupun blog kita. Tab menu accordion ini dilengkapi dengan efek animasi sliding. Yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang Link yang kita klik tadi.

Silahkan anda lihat contoh tab menu Accordion di bawah ini :


Selain fungsi menampilkan sebuah dokumen informasi singkat, tab menu accordion juga bisa kita gunakan untuk membuat daftar isi :


OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :


6. Simpan Template.
Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan 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 id="AccordionContainer" class="AccordionContainer">

<div onclick="runAccordion(1);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL ARTIKEL 1 ANDA
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<a href="ULR ARTIKEL ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (1) ANDA /  DAFTAR ARTIKEL  (1) ANDA
</a>
</div>

<div onclick="runAccordion(2);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL ARTIKEL ANDA
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<a href="ULR ARTIKEL (2) ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA
</a>
</div>

</div>
Catatam : 
  • Untuk menambah Tab menu accordion, anda tinggal menambah kode seperti dibawah ini sesuai kebutuhan anda, tapi jangan lupa mengganti dan mengurutkan nomor atau angka yang berwarna PING :
<div onclick="runAccordion(3);">
 <div class="AccordionTitle" onselectstart="return false;">
JUDUL ARTIKEL ANDA
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="ULR ARTIKEL (2) ANDA" target="_blank">
DISINI INFORMASI SINGKAT ARTIKEL (2) ANDA /  DAFTAR ARTIKEL (2) ANDA
</a>
</div>
  • Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda, dan diakhiri tag <hr> sebagai garis pembatas :
<a href="ULR ARTIKEL ANDA" target="_blank">
JUDUL ARTIKEL ANDA
</a>
<hr>

5. Simpan.
Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.