Rabu, 18 Juli 2012

Cara Membuat Favicon

Cara menambahkan favicon di blogger – Bila anda mengunjungi suatu website atau blog, disamping alamat website tersebut akan terlihat icon kecil. Nah, icon tersebut disebut sebagai favicon.

favicon KR tutor plus


Apabila kita membuat blog di blogger / blogspot, maka disamping alamat blog kita akan terlihat favicon logo blogger. Favicon logo blogger tersebut bisa anda ganti sesuai dengan keinginan. Ingin tahu caranya?




Berikut adalah langkah-langkah menambahkan favicon di blogger

Membuat banner


Langkah pertama, buatlah sebuah gambar yang akan di jadikan sebagai favicon. Dimensi gambar haruslah berbentuk persegi, misalkan ukurannya 100 x 100 px. Maksimal file 100Kb. Contoh seperti gambar di bawah ini :




Simpanlah gambar tersebut di komputer anda.

Upload favicon Ke Blogger

Langkah selanjutnya adalah mengupload gambar yang tadi sudah di buat ke blogger. Berikut langkah-langkahnya :

  • Silahkan login ke blogger dengan ID anda.
  • Klik dropdown menu, kemudian klik Tata Letak

    tata letak blogger

  • Klik Edit pada Widget favicon

    edit favicon

  • Klik Browse, lalu pilih gambar yang telah dibuat tadi
  • Klik tombol Simpan.

    upload favicon

  • Selesai.
Favicon anda telah berhasil di upload, namun untuk melihat perubahan perlu waktu beberapa jam. Tunggulah 5 – 12 jam dan favicon anda akan berubah sesuai dengan gambar yang anda upload.

Itulah panduan cara membuat blog mengenai Cara menambahkan favicon di blogger. Semoga bermanfaat bagi anda.

Revita Blogger Template

Revita Blogger Template



Key Benefits :

TEMPLATE FEATURES

Instructions URL    > How to install Blogger Template

Template Author     > Lasantha Bandara / premiumbloggertemplates.com

Designer                  > fthemes.com

Descriptions            > Template type : 1 Sidebar, 2 Column, 3 Column footer, Adapted from Wordpress, Brown, Elegant, Featured Section, Fixed width, Header Banner, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White
Revita is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Blue, Bookmark Ready, Brown, Fixed, Slideshow, White, Wordpress Look, and you can download Revita blogspot template for free only in ZoomTemplate.


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 !


    Baca lebih banyak Panduan Blogger disini !!!

    Cara Membuat Blog


    Cara membuat Blog di Blogger - Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama. 

    Pada awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan website pada umumnya yang ada di internet. 

    Flatform blog atau seringkali disebut dengan mesin blog dibuat sedemikian rupa oleh para designer/programer penyedia blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3.

    Cara Membuat Blog Di Blogger

    Salah satu penyedia blog gratis yang cukup populer saat ini adalah  blogspot atau blogger, dimana ketika mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub domain dari blogspot, contoh : contohsaja.blogspot.com

    Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di banding dengan penyedia blog lain. Beberapa contoh kelebihan blogger di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di ubah menjadicontohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.

    Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogger ini akan sedikit berbeda dengan apa yang anda lihat di blogger.com

    Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blog di blogger.com

    Membuat Email

    Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan daftar terlebih dahulu di gmail karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan baca terlebih dahulu postingan cara membuat email gmail

    Daftar Blog Di Blogger

    1. Silahkan kunjungi situs http://www.blogger.com
    2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan bawah, ubah bahasa ke Indonesia agar lebih mudah difahami. 
      pilih bahasa
    3. Silahkan langsung masuk/login dengan menggunakan username/nama pengguna serta password/sandigmail anda ( akun email anda bisa untuk login ke blogger). 

      login gmail 
    4. Isilah formulir yang ada :
      1. Nama tampilan : isi dengan nama yang ingin tampil pada profile blog anda.
      2. Jenis Kelamin : pilih sesuai dengan jenis kelamin anda, misal : pria.
      3. Penerimaan Persyaratan : Beri tada ceklis sebagai tanda anda setuju dengan peraturan yangtelah di tetapkan oleh pihak blogger. Saran: sebaiknya anda membaca terlebih dahulu persyaratan yang ada agar anda tahu dan mengerti apa yang boleh dan tidak diperbolehkan ketika menggunakan layanan blogger.
      4. Klik tanda panah bertuliskan “Lanjutkan”. 

        lanjutkan membuat blog
    5. Klik tombol “Blog Baru”. 

      buat blog baru 
    6. Isilah formulir :
      1. Judul : Isi dengan judul blog yang di inginkan, misal : Coretan sang penghayal
      2. Alamat : isi dengan alamat blog yang di inginkan. Ingat! Alamat ini tidak dapat di edit kembali setelah dibuat, apabila anda ingin serius, maka pilihlah nama yang benar-benar anda inginkan.
      3. Template : pilih template (tampilan blog) yang disukai (ini dapat ganti kembali).
      4. Lanjutkan dengan klik tombol “Buat blog!”. 

        buat blog 
      5. Sampai disini blog anda telah berhasil di buat.
    7. Untuk menghindari spam filter, sebaiknya anda langsung posting sembarang saja. Klik tulisan “Mulai mengeposkan”. 

      mulai posting 
    8. Isi judul serta artikel. Akhiri dengan klik tombol “Publikasikan”. 

      publikasikan 
    9. Silahkan lihat blog anda dengan klik tombol “Lihat Blog
    10. Selesai.
    Kini blog anda telah tercipta dan dapat di buka di berbagai belahan dunia. Umumkan pada teman-teman anda bahwa anda kini telah mempunyai blog.

    Untuk tahap awal sepertinya sudah cukup, silahkan baca artikel lainnya tentang cara membuat blog di KR Tutor Plus.

    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 !




    Baca lebih banyak Panduan Blogger disini !!!

    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 !


    Baca lebih banyak Panduan Blogger disini !!!

    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.

    Baca lebih banyak Panduan Blogger disini !!!

    Jumat, 13 Juli 2012

    Menu Navigasi degan CSS

    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 !

    Baca lebih banyak Panduan Blogger disini

    Kamis, 12 Juli 2012

    Membuat 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 !

    Baca lebih banyak Panduan Blogger disini

    Cara memasang tools Pengunjung Online


    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...

    Baca lebih banyak Panduan Blogger disini

    Rabu, 11 Juli 2012

    Comodo Dragon

    Kali ini saya akan post software web browser yaitu Comodo Dragon. Apakah Comodo Dragon ? adalah web browser yang ringan dan enteng seperti web browser Google Chrome. Menurut saya browser ini sangatlah ringan dan cepat daripada web browser yang sebelumnya saya gunakan yaitu Mozilla Firefox, yang malah bikin laptop lemot atau berat, mungkin spesifikasinya yang rendah kali ya bikin lemot hehe. Comodo Dragon adalah browser berbasis teknologi chromium yang menawarkan semua fitur seperti google chrome, plus fitur keamanan dan privasi anda hanya dari comodo, termasuk tingkat yang lebih besar daripada teknologi privasi yang ditawarkan kromium.


    System Requirement of Comodo Dragon

    • Sistem Operasi : 32 Bit - Windows 7/ Vista/ Windows Xp
    • Memory           : 128 mb RAM
    • Hard Disk        : 40 mb ruang kosong

    Screenshot :


    Download :



    NB : Cara Download  Comodo Dragon  via Adf.ly = Klik salah satu link download  Comodo Dragon  di atas, kemudian tunggu 5 detik !! terus klik SKIP AD di pojok kanan atas, tunggu sebentar dan download siap di mulai > namun jika keluar link mediafire, Sharebeast, atau Jumbofiles udah tau kan cara downloadnya !! kalu masih belum tau anda dapat berkomentar di bawah ini !!


    Jika ada masalah hubungi :


    Admin | Sheenz
     Facebook  : Sheenz Foldz CFazz
    Email : seenz_arifin@yahoo.com

    Cara Membuat Read More [ SIMPLE ]

    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.