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