Rabu, 16 Mei 2012

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.

Biar agak seru, silahkan klik tombol di bawah untuk melihat demo :





Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

  • Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :









  • Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

    http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif



  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :



    1. Sign in di blogger.com dengan id sobat
    2. Klik menu LayOut
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
    5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
    6. Tunggu beberapa saat sampai proses selesai
    7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>
    8. <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    9. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya
    10. .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif'); text-align:center; width:90%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif'); text-align:center; width:90%; font-family: georgia, Helvetica, sans-serif; padding-left:20px; padding-right:20px; padding-top:13px; padding-bottom: 10px; display:block; text-decoration: none; color: #000000; height: 20px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}
    11. Klik tombol SAVE TEMPLATE
    12. Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.
    13. Klik menu Page Elements
    14. Klik tulisan Add a Page Element
    15. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript
    16. Masukan kode berikut :
    17. <a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a> <div id="ogahku1" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a>> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a> <div id="ogahku2" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a> <div id="ogahku3" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a> <div id="ogahku4" class="hide"> <a href="#" class="ogahniye">Link 1 di sini</a> <a href="#" class="ogahniye">Link 2 di sini</a> <a href="#" class="ogahniye">Link 3 di sini</a> <a href="#" class="ogahniye">Link 4 di sini</a> </div>
    18. Klik tombol SAVE CHANGES
    19. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )
    20. Klik tombol SAVE
    21. Selesai



    Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.


    Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.


    Mudah-mudahan dapat di mengerti. Selamat mencoba !

    Membuat Link Untuk Download

    Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.

    Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos .

    Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

    1. Silahkan buka http://www.SnapDrive.net
    2. Klik tulisan Register
    3. Isi formulir yang disediakan dengan data diri sobat
      • Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil
      • Password --> isi dengan password yang di inginkan. contoh : pakraden
      • Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden
      • Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id
      • First name -->isi dengan nama depan sobat
      • Last name --> isi dengan nama belakang sobat
      • Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia
      • Postcode --> isi dengan kode post daerah sobat
      • Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)
      • Date of birth --> pilih tanggal kelahiran sobat
      • Preferances isi dengan tulisan yang tertera di situ
    4. Klik tombol Register
    5. Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi
    6. Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum
    7. Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut
    8. Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih
    9. Klik tombol OK
    10. Silahkan Login dengan username serta password yang tadi di tuliskan saat register
    11. Setelah berada di halaman account sobat, klik tulisan Upload
    12. Klik tombol Add Files
    13. Pilih file yang ada dikomputer sobat yang mau di upload
    14. Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung
    15. Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya
    16. Klik tulisan HTML Code
    17. Copy kode yang di berikan lalu paste pada program notepad
    18. Klik tulisan Logout untuk keluar dari situs tersebut
    19. Silahkan tutup layar browser sobat



    Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :


    <a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>


    Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :


    <a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>


    Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

    Untuk men download program billing internet, silahkan anda klik link di bawah ini :
    <br/><br/>
    <a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>


    Maka nanti di blog kita akan tampil seperti ini :


    Untuk men download program billing internet, silahkan anda klik link di bawah ini :

    download


    Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!


    Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba !

    Membuat Penggalan Artikel

    Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

    Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya cuma hiks.... hiks masih dikit yang mau klik iklan aku tapi ga apa-apa berarti belum rezekinya (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ).

    Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

    http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

    Isi dari penggalan kalimatnya adalah sebagai berikut :

    Electronic Shopping

    Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?



    Maka kode yang kita buat adalah sebagai berikut :


    <span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
    <hr width="100%" align="left">
    <br/>
    Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
    <hr width="90%" align="left">
    <br/>


    Kode tersebut hasilnya akan seperti ini :


    Electronic Shopping

    Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...


    Biar lebih faham, sedikit saya uraikan :

    <span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
    <font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
    <hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
    <br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.


    Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

    Untuk template klasik :

  • Sign in di blogger dengan id sobat


  • Klik menu Template


  • Klik menu Edit HTML


  • Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template


  • Cari kode seperti di bawah ini :



  • <div class="post"><a name="<$BlogItemNumber$>"></a>
    <BlogItemTitle>


    Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :


    <span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>
    <hr width="100%" align="left">
    <br/>
    Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a>
    <hr width="90%" align="left">
    <br/>
    <div class="post"><a name="<$BlogItemNumber$>"></a>
    <BlogItemTitle>


  • Klik tombol Preview untuk melihat perubahan yang baru di lakukan


  • Apabila sudah OK, klik tombol save Template Changes


  • Selesai.



  • Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.


    Untuk template baru :

  • Sign In di blogger dengan id sobat


  • Klik menu Layout


  • Klik menu Page Elements


  • Klik Add a Page Element


  • Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript


  • Copy paste kode penggalan artikel yang telah kita buat tadi


  • Klik tombol SAVE CHANGES


  • Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)


  • Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi


  • Bila sudah OK, klik tombol SAVE


  • Selesai.




  • Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !

    Selasa, 15 Mei 2012

    Template baru VS Template Klasik

    Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

    Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

    Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

  • Template baru :



    1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

      Manage : Posts, Settings, Layout
    2. Jika kita klik menu Layout, akan ada menu seperti ini :

      Page Elements | Fonts and Colors | Edit HTML | Pick New Template
    3. Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :

      Tulisan --> download Full Template
      Tombol bertuliskan --> Browse..., Upload
      Ada kotak kecil di samping tulisan Expand Widget Templates
      Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
      Dibagian bawah terdapat tulisan :

      •  Revert to Classic Template
      •  View Classic Template


    Itu tadi sedikit ciri apabila kita memakai template baru.


    Apabila memakai template klasik, cirinya adalah :

    1. Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

      Manage : Posts, Settings, Template
    2. Jika kita klik menu Template, akan ada menu seperti ini :

      Edit HTML | Pick New | customize Design | Adsense
    3. Jika klik menu Edit HTML akan muncul beberapa ciri :

      terdapat tulisan --> Change the Blogger Navbar

      Tombol bertuliskan ---> Save Template Changes, Preview, Clear


    Itu tadi beberapa ciri jika kita memakai template klasik.


    Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.

    Apa kelebihan atau kekurangan dari kedua template tersebut?

    Template baru

    • Terdapat menu : Page Elements
      Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header.
    • Sistem Drag & Drop
      Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.
    • Terdapat menu : Fonts and Colors
      Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML


    Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

    bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).


    Sekarang apa kelebihan dari template klasik :

    • Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.


    Kekurangan :

    • Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.
    • Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.


    Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.


    Cara Migrasi Template

    Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

    Dari Template baru ke template klasik :

    • Sign in di blogger dengan id sobat
    • Klik menu Layout
    • Klik menu Edit HTML
    • Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
      Bila muncul kotak dialog, klik OK aja

    • Selesai, sobat memasuki dunia baru yaitu template klasik.



    Dari template klasik ke template baru :

    • Sign in di blogger dengan id sobat
    • Klik menu Template
    • Klik menu Customize Design
    • Klik tombol bertuliskan UPGRADE YOUR TEMPLATE
    • Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE
    • Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.



    Cara mengganti Template

    Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

  • Ganti template dengan template buatan blogger



  • Untuk template Klasik, ikuti langkah-langkah berikut :

    1. Sign in di blogger dengan id sobat
    2. Klik menu Template
    3. Klik menu Pick New
    4. Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar template
    5. Selesai. Blog sobat sudah punya wajah baru.



    Untuk template baru, ikuti langkah-langkah berikut :

    1. Sign in di blogger dengan id sobat
    2. Klik menu Layout
    3. Klik menu Pick New Template
    4. Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE
    5. Selesai.Blog sobat sudah mempunyai wajah baru



    Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang, dan judulnya Caaaaapppppee deeeeehhhhh .....


  • Ganti template dengan template bukan buatan blogger



  • Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

  • Template baru



    1. Sign in di blogger dengan id sobat
    2. Klik menu Layout
    3. Klik menu page Elements
    4. Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya
    5. Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML
    6. Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut
    7. Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template
    8. Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan
    9. Klik Tombol Upload
    10. Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)
    11. Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi
    12. Selesai. Blog sobat sudah mempunyai wajah baru.



  • Template Klasik



    1. Sign in di blogger dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll
    5. Delete semua data template yang lama
    6. Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi
    7. Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes
    8. Selesai. blog sobat sudah mempunyai wajah baru.



    Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

    Selamat mencari dan menemukan template yang sobat suka

    Menu Navigasi dengan CSS

    Update : Tutorial ini khusus pagi anda yang masih memakai template klasik
    Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

    Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:




    Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

    Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

    Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

  • buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.



  • Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini

  • .

    Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

    http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

  • Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :



    1. Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.
    2. .unyil{ text-align:left; display:block; width:180px; height:20px; background:#f0f0f0; padding:3px 4px 3px 8px; margin:7px 10px 7px 0; } .unyil:hover{ background:#97A4B9; text-decoration:none; }
    3. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :
    4. <a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span> <a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> <a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span> <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>


    biar tidak telalu bingung, sedikit saya uraikan :

    .unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

    text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

    display:block; --> kata block artinya di tampilkan di layar monitor.

    width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

    height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

    background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

    padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

    margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

    .unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

    background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

    text-decoration:none; --> text dekorasi jangan di rubah.

    Bagaimana sudah jelas? mudah-mudahan jelas.



    Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :



    http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

    http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

    prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :


    Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

    .cuplis{
    text-align:left;
    display:block;
    width:180px;
    height:20px;
    background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;
    padding:3px 4px 3px 8px;
    margin:7px 10px 7px 0;
    }

    .cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
    text-decoration:none;
    }



  • copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :



  • <a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

    <a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

    <a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>

    <a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>



    Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

    Selamat mencoba

    Daftar Mybloglog

    Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

    Apa itu Mybloglog ?

       Bingung kalau harus mendifinisikan apa itu mybloglog            biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya     ).

    Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru).

    Apa manfaat bergabung di mybloglog?

    Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

  • Untuk menambah traffic ke blog kita



  • Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri.

  • Mengetahui link mana yang banyak di klik



  • Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

  • Mempererat tali silaturahmi antar pemilik blog



  • Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog.


    Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini :

    1. Silahkan buka situs http://www.mybloglog.com
    2. Isi form yang telah di sediakan di bawah tulisan Sign Up Now
    3. Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24
    4. Email --> Isi dengan email sobat ( yang valid)
    5. Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe
    6. Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com
    7. Klik Tombol Register
    8. Terlihat beberapa form yang harus diisi lagi
    9. Blog/Site Title --> Isi dengan judul blog sobat
    10. Blog platporm --> pilih blogspot.com
    11. Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai
    12. Klik tombol yang bertuliskan Complete Registration
    13. Klik tulisan Go to Your page
    14. Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas
    15. Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)
    16. Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile
    17. Klik tulisam MY HOME untuk kembali ke home
    18. Klik tombol yang bertuliskan Get Widget
    19. Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading
    20. Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading
    21. Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link
    22. Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link
    23. Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom
    24. Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160
    25. Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh
    26. Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh
    27. Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)
    28. Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja
    29. Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu
    30. Kembali ke bagian atas
    31. Klik tombol bertuliskan Preview and Get Code
    32. Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad
    33. Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat
    34. Silahkan close window situs tersebut.



    Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai.

    Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat

    Ada Video di artikel

    Memuat video diantara artikel, selain untuk memperindah artikel itu sendiri, juga video ini bisa berfungsi sebagai media yang efektif dalam menyampaikan sesuatu kepada para pengunjung. Terlebih apabila anda merupakan seorang pebisnis yang dengan video ini dapat lebih memperjelas tujuan anda di banding dengan hanya sebuah tulisan. dibawah ini adalah contoh sederhana dari video , silahkan anda klik tombol icon Play untuk mengaftifkannya.





    Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

    1. Untuk daftar silahkan kunjungi http://www.youtube.com
    2. Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
    3. Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan  »»  Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
    4. Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
    5. Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
    6. Dengan meng klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
    7. Klik tulisan Upload Video yang berada pada layar sebelah atas
    8. Isi form yang di sediakan
    9. Klik tombol bertuliskan Continue Uploading
    10. Klik tombol Browse, masukan file video yang ingin anda masukan
    11. Beri tanda tik/cek pada radio button, public  »»  jika video anda bisa dilihat oleh umum. Private  »»  Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
    12. Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
    13. Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
    14. Silahkan klik Log Out untuk keluar dari situs tersebut
    15. Selesai. anda sudah mempunyai video yang bisa di simpan pada artikel anda



    Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. Cuma saat copy n' paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

    Selamat mencoba !

    Pasang Icon Yahoo ! Messenger

    Menanggapi pertanyaan sobat takdir yang di ajukan melalui shoutbox beberapa waktu yang lalu, beliau menanyakan tentang bagaimana cara menampilkan status online Yahoo ! Messenger pada halaman blog. Barangkali ada di antara para sobat juga berkeinginan yang sama namun belum mengetahui caranya,ada baiknya menyimak beberapa penjelasan yang akan saya utarakan.

    Sebenarnya jika saya pikir-pikir, kayanya agak merasa malu menerangkan ini, mungkin bagi para sobat yang sudah beberapa kali mengunjungi blog ini hampir atau bahkan belum pernah melihat Icon Yahoo ! Messenger saya menyala tanda sedang online chatting. Memang benar saya sangat jarang sekali ber chatting ria di dunia maya, paling-paling kalau ada perlu dan itupun janjian terlebih dahulu baru saya chatting (lho ko jadi cerita...kelamaan), oh iya lupa

    Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :



    Style ID 1                      Style ID 2                       Style ID 3         Style ID 4     Style ID 5






    masing-masing gambar mempunyai URL adddress sendiri yaitu :

    http://opi.yahoo.com/online?u=YahooID&m=g&t=1
    Untuk Style ID 1

    http://opi.yahoo.com/online?u=YahooID&m=g&t=2
    Untuk Style ID 2

    http://opi.yahoo.com/online?u=YahooID&m=g&t=3
    Untuk Style ID 3

    http://opi.yahoo.com/online?u=YahooID&m=g&t=4
    Untuk Style ID 4

    http://opi.yahoo.com/online?u=YahooID&m=g&t=5
    Untuk Style ID 5



    itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

    <img src="URL address">

    Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :

    <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">
    Untuk Style ID 1

    <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
    Untuk Style ID 2

    <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
    Untuk Style ID 3

    <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
    Untuk Style ID 4

    <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
    Untuk Style ID 5



    Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

    Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :


    Kirim Instant Messenger.

    Kodenya sebagai berikut :

    <a href="ymsgr:sendIM?YOURID">Kirim IM</a>

    Sehingga untuk kode lengkapnya jadi seperti ini :

    <a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>




    Kirim Instant Messenger dengan pesan

    Kodenya sebagai berikut :

    <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

    Sehingga untuk kode lengkapnya jadi seperti ini :

    <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>


    Menambahkan link ke chat room favorit

    Kodenya sebagai berikut :

    <a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>

    Sehingga untuk kode lengkapnya jadi seperti ini :

    <a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

    Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.


    Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :


    <a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>


    dan yang akan tampil seperti ini :







    Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila saya sedang online di Yahoo ! Messenger .


    Mudah-mudahan jelas. Selamat mencoba !

    Pasang Image pada judul Artikel

    Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

    Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

    Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :


  • Langkah pertama



  • Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.


  • Langkah kedua



  • langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.


  • Langkah ketiga



  • langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

    http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

    Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :

    <img src="URL image">

    Sehingga kodenya akan jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

    dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :







    tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    sehingga image yang tadi akan berubah jadi seperti ini :







    Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.


  • Langkah keempat



  • langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

    Untuk yang memakai template klasik :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
    5. Cari kode berikut pada kode HTML sobat :
    6. <$BlogItemTitle$> cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul : <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$> pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
    7. Klik tombol Preview untuk melihat perubahan yang dilakukan
    8. Jika sudah OK, klik tombol Save Settings
    9. Selesai


    Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.



    Untuk yang memakai templat baru :

    Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    kode image tersebut tag nya harus ditutup dengan tag penutup :

    </img>

    Sehingga kode image jadi bertambah menjadi :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>


    Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template
    5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
    6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
    7. Tunggu beberapa saat sampai proses selesai
    8. Cari kode berikut pada template sobat :
    9. <a expr:href='data:post.url'><data:post.title/></a> <b:else/>
    10. Sisipkan kode gambar yang kita miliki diantara kode :
    11. <a expr:href='data:post.url'> dan kode <data:post.title/></a> <b:else/> Sehingga bila di satukan kodenya menjadi : <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a> <b:else/>
    12. Klik tombol PREVIEW untuk melihat perubahan
    13. bila sudah OK, klik tombol SAVE TEMPLATE
    14. Selesai




    Untuk melihat contoh template baru yang memakai image pada judul postingan, silahkan klik di sini :


    Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba

    Blogroll Alternatif

    Judulnya lucu ya, kaya pengobatan saja pake kata altenatif segala, pengobatan alternatif kalee..

    Baiklah para sobat semua, dalam kesempatan kali ini saya akan membicarakan tentang yang namanya Blogroll.

    Apa itu Blogroll?

    Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita.

    Apa manfaat dari blogroll?

    Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik orang lain pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website. selain itu semakin banyak blog kita di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link addres milik kita pada blog mereka.

    Terus apa hubungannya dengan judul di atas?

    Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke lap....top (yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat. Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain :

  • Blogroll dengan marquee



  • yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog adalah dengan menggunakan perintah marquee.

    Contoh membuat blogroll dengan perintah marquee :

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

    <a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
    <br/><br/>
    <a href="http://user-online.blogspot.com" target="_blank">User Online</a>
    <br/><br/>
    <a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a>
    <br/><br/>
    <a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a>
    <br/><br/>
    <a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>
    <br/><br/>

    </marquee>




    Maka nanti yang akan tampil pada blog kita adalah seperti ini :


    User Online

    free Blog Template

    Authorize service

    Blog D'Tree





    Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

    scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

    direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

    width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

    height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .



    Ada variasi lain, yaitu dengan memakai tabel, contoh :

    <table border="3" width="155" height="130" cellpadding="2">

    <tr>

    <td align="left">

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

    <a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
    <br/><br/>
    <a href="http://user-online.blogspot.com" target="_blank">User Online</a>
    <br/><br/>
    <a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a>
    <br/><br/>
    <a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a>
    <br/><br/>
    <a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>
    <br/><br/>

    </marquee>

    </td>

    </tr>

    </table>




    Maka hasilnya akan seperti di bawah ini :




    User Online

    free Blog Template

    Authorize service

    Blog D'Tree





  • Blogroll dengan menu dropdown




  • Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :


    <form>

    <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

    <option> - Blogroll - </option>

    <option value="http://rubrik-elektronik.blogspot.com">Rubrik elektronik</option>

    <option value="http://user-online.blogspot.com">User Online</option>

    <option value="http://rohman-freeblogtemplate.blogspot.com">free blog template</option>

    <option value="http://kolom-authorized.blogspot.com">Authorize service</option>

    <option value="http://contoh-blog.blogspot.com/">Blog D'tree</option>

    </select>

    </form>


    Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :






    Contoh variasi lainnya :


    <h3> Blogroll </h3>

    <div align="left">

    <select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

    <option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--Teman-temanku--</option>

    <option value="http://rubrik-elektronik.blogspot.com">rubrik Elektronik</option>

    <option value="http://user-online.blogspot.com">User Online</option>

    <option value="http://rohman-freeblogtemplate.blogspot.com">Free blog template</option>

    <option value="http://kolom-authorized.blogspot.com">Authorized Service</option>

    <option value="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</option>

    </select>

    </form> </div>




    Hasilnya akan seperti ini :



    Blogroll





    Sedikit clue, kata left yang berada pada kode <div align="left"> menunjukan bahwa menu ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata "center" atau "right".



    Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian dulu yah, untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara memasukan kode HTML di atas pada blog milik sobat, silahkan simak di sini. Selamat mencoba !

    User Online Status

    english  English Version

    How many people is online at your blog? you know that or don't? If you don't know how many people is online at your blog, you can use a free tracker to know it. That is much site provide this service. Once of them is www.histats.com. If you use them tool, you can know how many people online at your blog, how many people was visited to your blog, and any function. This is once of example :

    histat.jpg


    How to get it? please following the steps :

    1. Please visit www.histats.com.
    2. If you was on the histats site, click Register at the top tab.
    3. Content the form with your information, such as email, password, your blog url and etc.
    4. Click Continue button.
    5. Choose the style of histats counter, click Choose a counter from this category.
    6. Please mark the radio button beside the counter style you wanted.
    7. Click Continue button at the bottom of page.
    8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today, Page views today, User online, Total visitors, and total page views. Choose empty if you want not to display them.
    9. Click Continue button.
    10. Wait a moment, your counter is updating.
    11. Until the process is done, copy your counter code and paste to the Notepad or other text editor. Save into your computer.
    12. Logout and close your internet browser.
    13. Done. Now you has have a counter code to add at your blog.



    Next step is add your counter code to your blog, please following the steps :

    1. Login to blogger with your ID.
    2. After entering the dasboard page , click Layout.
    3. Click at Page Element tab. See the picture below :
    4. page element
    5. Click at Add a Page element.
    6. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :
    7. javascript
    8. Open your Counter code, copy and then paste into available column.
    9. Click   save changes   
    10. Done. Please see the result.

    Now you have a Counter, and you will know how many people online at your blog.

    If you don't like with this counter, you can get at the other site, this is several site provide the same service :

    • http://www.neoworx.net
    • http://www.webfooted.net
    • http://www.fastonlineusers.com



    See you next time at my new tips. Happy blogging.

    bahasa indonesia  Versi Bahasa Indonesia

    Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

    Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

    Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

    1. Silahkan buka www.geovisite.com
    2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
    3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email
    4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com
    5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24
    6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy
    7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)
    8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet
    9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)
    10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik
    11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic
    12. Klik tombol yang berlogo disket
    13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad
    14. Silahkan close window browser sobat
    15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya
    16. Selesai.



    Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

    Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

    • http://www.neoworx.net
    • http://www.webfooted.net
    • http://www.fastonlineusers.com
    • http://www.histats.com



    Selamat menikmati tool baru...

    Blogger sudah support fungsi Readmore

    Untuk melengkapi hadiah perayaan hari ulang tahunnya yang ke 10, kini blogger menambahkan satu tombol yang sangat di tunggu-tunggu oleh ribuan blogger didunia yaitu tombol "Jump Breaks" atau tombol "More" atau tombol "Read more" yang mempunyai fungsi untuk memotong tulisan di halaman depan (home page) atau lebih populer dengan sebutan "fungsi read more".
    read more
    Ini artinya, untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read more" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun.
    Namun, sepertinya tombol ini hanya muncul pada post editor baru dan dalam posisi mode "Compose" dan tidak muncul pada mode "Edit HTML". Walaupun seperti itu, anda masih tetap bisa menggunakan fungsi "read more" pada post editor lama serta dalam posisi mode "Edit HTML" yaitu dengan mengetikkan secara manual kode    

    <!-- more -->
    edit HTML

    Untuk anda yang memakai template asli yang disediakan blogger akan langsung bisa menikmati fasilitas ini dan hasilnya akan muncul tulisan " Read more » "  seperti ini :
    read more

    Bagi anda yang memakai template bukan yang disediakan oleh blogger atau template hasil download dari situs lain, fungsi "  Read more " akan tetap berfungsi secara baik atau dengan kata lain artikel anda akan tetap terpotong namun tulisan " Read more » " tidak akan muncul. Untuk hal ini anda harus menambahkan kode tambahan pada template anda. Berikut langkah-langkahnya :

    1. Silahkan login ke blogger dengan ID anda.
    2. Klik Tata Letak.
    3. Klik tab Edit HTML.
    4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget " expand-template-widget
    5. Carilah kode yang mirip seperti Ini :

      <div class='post-body entry-content'>
            <data:post.body/>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>
    6. Copy lalu paste kode berikut persis di bawah kode yang tadi :
      <b:if cond='data:post.hasJumpLink'>
            <div class='jump-link'>
              <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
            </div>
          </b:if>

      code
    7. Klik tombol SIMPAN TEMPLATE
    8. Selesai.
    Dengan cara tersebut, tulisan " Read more » " akan muncul walaupun anda tidak menggunakan template yang disediakan oleh blogger.

    Secara default tulisan yang akan muncul adalah " Read more » ", namun anda bisa mengubahnya sesuai keinginan anda, caranya seperti ini :

    1. Silahkan login ke blogger dengan ID anda.
    2. Klik Tata Letak.
    3. Klik tab Elemen Halaman.
    4. Klik "Edit" pada elemen "Posting Blog" atau "Blog post" untuk yang bahasa inggris. posting-blog-element
    5. Setelah muncul jendela baru, gantilah tuisan Read more »  menjadi tulisan sesuai dengan keinginan anda. edit read more
    6. Klik Tombol SIMPAN
    7. Selesai.
    Untuk anda yang menggunakan trik membuat read more seperti yang kang Rohman posting disini! sebaiknya di hilangkan saja karena blogger sekarang sudah mempunyai sistem read more sendiri. Cara mengembalikannya silahkan baca saja trik tersebut secara terbalik yaitu di baca dari bawah ke atas.

    Tutorial HTML (2)

    Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut :


    <html> <head>
    <title>latihan</title>
    <body>
    Tulis apa-apa yang saya terangkan di sini !
    </body>
    </html>


    Kita langsung ke topik bahasan aja ya biar ga bosan.

    Elemen dasar HTML

    Ada beberapa elemen dasar HTML yaitu :

    Elemen Blok Level

    Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.

    Contoh :

    <h1>Ini heading 1</h1>
    <h2>Ini heading 2</h2>
    <h3>Ini heading 3</h3>
    <h4>Ini heading 4</h4>
    <h5>Ini heading 5</h5>
    <h6>Ini heading 6</h6>



    Hasilnya akan seperti ini :


    Ini heading 1



    Ini heading 2

    Ini heading 3

    Ini heading 4
    Ini heading 5

    Ini heading 6



    Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai tag <font size="...">.....</font>.

    Contoh :



    <font size="1">Ini font size 1</font>

    <font size="2">Ini font size 2</font>

    <font size="3">Ini font size 3</font>

    <font size="4">Ini font size 4</font>

    <font size="5">Ini font size 5</font>

    <font size="6">Ini font size 6</font>

    <font size="7">Ini font size 7</font>


    Hasil yang akan tampil seperti ini :



    Ini font size 1

    Ini font size 2

    Ini font size 3

    Ini font size 4

    Ini font size 5

    Ini font size 6

    Ini font size 7


    Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

    Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja       hiii.....pantesan dari tadi ada yang bau aneh  

    Nantikan seri berikutnya!

    Membuat menu D tree

    Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows explorer yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

    Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain, sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu. Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :


    pasanglah kode ini di atas kode </head> :

    <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

    kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya : copy kode sumber script ini lalu paste pada address bar browser internet sobat :

    http://amen24.googlepages.com/Readmore.js

    Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat. Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan script ini mempunyai alamat :

    http://juned.googlepages.com/Readmore.js

    Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

    <script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />



    Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

    <script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />

    Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

    Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri kode milik orang lain.


    Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

    Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com, silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

    Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

    Kode ini di simpan di atas kode </head> :

    <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="dtree.js"></script>


    Kode di bawah ini di simpan di bagian sidebar :

    <h2>Example</h2>
    <div class="dtree">
    <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'My example tree');
    d.add(1,0,'Node 1','example01.html');
    d.add(2,0,'Node 2','example01.html');
    d.add(3,1,'Node 1.1','example01.html');
    d.add(4,0,'Node 3','example01.html');
    d.add(5,3,'Node 1.1.1','example01.html');
    d.add(6,5,'Node 1.1.1.1','example01.html');
    d.add(7,0,'Node 4','example01.html');
    d.add(8,1,'Node 1.2','example01.html');
    d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
    d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
    d.add(11,9,'Mom\'s birthday','example01.html');
    d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
    document.write(d);
    //-->
    </script>
    </div>





    Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode di atas.

    Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya : source code dari menu yang saya buat seperti ini :


    Kode ini di simpan di atas kode </head> :

    <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
    <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>


    Kode di bawah ini di simpan di bagian sidebar :

    <div class="dtree">
    <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
    <script type="text/javascript">
    <!--
    d = new dTree('d');
    d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


    d.add(1,0,'Free template & navigation')

    d.add(3,1,'free template','');
    d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
    d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
    d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
    d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
    d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
    d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
    d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
    d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
    d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
    d.add(100,3,'template klasik');
    d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
    d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

    d.add(5,1,'Free css menu navigation');
    d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
    d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
    d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
    d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
    d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
    d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
    d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
    d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

    d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
    d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
    d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

    d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
    d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
    d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
    d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


    document.write(d);
    //-->
    </script>
    </div>


    Untuk melihat hasilnya, silahkan klik dulu di sini !

    Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

    Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

    d.add(1,0
    d.add(2,0
    d.add(4,0
    d.add(6,0
    d.add(7,0

    Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan angka nol.

    d.add(3,1
    d.add(5,1
    Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu) adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0


    d.add(10,5
    d.add(20,5
    d.add(30,5
    d.add(40,5
    d.add(50,5
    d.add(60,5

    Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
    begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1


    Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

    d.add(10,3,'','','','','');

    Jika di jabarkan denga isi menu, seperti ini :

    d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');



    isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
    isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
    isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
    isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
    isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
    isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5


    Misal :

    d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
    Blogroll = tulisan yang kan muncul pada menu induk
    http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll
    http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah tidak mengalami perubahan)


    dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.


    Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:


  • Untuk template Klasik



    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode HTML yang ada, lalu save untuk back up
    5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :
    6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>
    7. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):
    8. <div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d); //--> </script> </div>
    9. Klik tombol Simpan Perubahan Template
    10. Selesai.




  • Untuk Template Baru



    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
    5. Copy paste kode berikut di atas kode </head>
    6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>
    7. Klik tombol Simpan Template
    8. Klik menu Elemen Halaman yang ada di sebelah atas monitor
    9. Klik tulisan Tambahkan sebuah Elemen Halaman
    10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
    11. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)
    12. <div class="dtree"> <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p> <script type="text/javascript"> <!-- d = new dTree('d'); d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d); //--> </script> </div>
    13. Klik tombol Simpan
    14. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)
    15. Klik tombol Simpan yang berada di sebelah atas
    16. Selesai. Silahkan lihat hasilnya



    Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga di posting.

    Selamat mencoba !