Membuat Efek Salju dalam Blog

Eng..Ing...Eng... Ketemu lagi untuk bahasan menarik dalam Kompikita.
Dalam bahasan kali ini saya akan membahas tentang efek salju untuk mempercantik Blog.
Tentunya dengan efek salju ini akan semakin mempercantik tampilan Blog, dan warna saljunya juga bisa dirubah-rubah lho. Keren kan. Hehehehehe
Oke, langsung aja kita bahas.
1. Pertama seperti biasa Login kemarkas Blogger masing-masing. Pilih Tata Letak >> Tambah Widget.

2. Pilih HTML/JavaScript.

3. Copy Kode-Kode Berikut (Pilih salah satu sesuai keiginan anda)
Untuk salju berwarna putih

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju.js"></script>

Untuk salju berwarna merah

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju-tes.js"></script>

Untuk salju berwarna biru

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju-Biru.js"></script>

Untuk salju berwarna Hijau

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju-hijau.js"></script>

Untuk salju berwarna Kuning

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju-Kuning.js"></script>

Untuk salju berwarna Pink

<script src="http://dapurtutorial.googlecode.com/files/Hujan-salju-Pink.js"></script>

Simpan dan Lihat hasilnya.
Untuk membuat efek warnanya bermacam-macam tinggal copy dan masukan semua code dalam satu Widget. dan Sementara pilihan warnanya cuma itu dulu ya, yang lainya menyusul. Hehehehehe

Selamat mencoba, semoga berhasil. 

Read More

Memasang Twitter Box Follower di Blog

Hellow... Salam sukses Kompikita. Hehehehehe
Anda mempunyai Blog/Web?? dan Blog anda sudah mempunyai traffic tinggi? tentunya banyak cara memperkenalkan Blog anda kedalam dunia internet dan kebanyak orang. Salah satunya melalui Sosial Media seperti Facebook dan Twitter. Nah, jika anda sudah mempunyai akun twitter dan ingin menampilkan Follower anda kedalam sebuah Blog, itu bisa kok menggunakan widget.
Tentunya dengan adanya Widget Box Twitter ini memudahkan para pembaca untuk Follow akun Twitter anda, sehinggal meningkatkan jumlah Follower Twitter anda. Kira-kira begitulah (Saya juga kurang paham karena belum nyoba Hehehehe ).
Langkahnya sebagai berikut,
1. Seperti biasa, Login kemarkas Blogger masing-masing. Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript.

2. Copy kode dibawah dan letakan didalam kolom HTML/JavaScript yang tadi kamu pilih

Simpan dan Lihat hasilnya.
Keren dan pasti mudah kan.. Nah, selamat mencoba.

Read More

Membuat Navbar Blog menjadi Auto Hidden

Salam Blogger. Jumpa lagi dalam bahasan bahasan tentang dunia komputer dan internet.
Kali ini saya akan membahas tentang Navbar, Navbar merupakan komponen bawaan dari Blogger yang otomatis tampil dibagian atas blog, itu merupakan standar yang diperkenankan oleh Blogger kepada penggunanya. Tampilan nya seperti gambar diatas.
Nah pertanyaanya, apakah navbar bisa dihilangkan? Jawabanya BISA, dan itu tidak melanggar ketentua dari Blogger kok. karena nyatanya, banyak pengguna Blogger yang menghilangkan Navbarnya tetapi sampai sekarang tidak mendapatkan peringatan dari pihak Blogger. (termasuk saya Hehehehe ).
Oke, mari kita bahas. pertama-tama saya beritahukan metode ini bukan menghilangkan ya, tapi lebih disebut menyembunyikan/auto hidden. Hal ini untuk menghindari Blog kita dihapus oleh Blogger karena menghilangkan komponen standarisasinya. (ga tau juga sih, nebak aja mungkin seperti itu Hehehehe ).

1. Pertama seperti biasa, Login kemarkas Blogger masing-masing. Masuk Template >> Edit HTML (jangan lupa centang expand template widget untuk mengurangi resiko hilangnya widget anda).
2. Cari Kode body { (Gunkan Tombol CTRL+F dan F3 untuk mempermudahkan mencari kode).
3. Sudah ketemu Copas kode dibawah ini dan letakan diatas kode body {

4. Terakhir klik Klik Tombol Simpan Template.

Selesai, dan lihatlah hasil eksperimen yang baru anda coba. (mudah-mudahan berhasil ya Hehehehehe )
kira-kira hasilnya seperti ini,

Nah, gampang kan. Semoga berhasil

Read More

Menghilangkan/Menyembunyikan Judul Blog

Halo.. Halo.. Ketemu lagi Hehehehe
Kemarin ada sesuatu yang saya temukan waktu surfing di internet, ketika seorang blogger ingin membuat banner Header tetapi posisi Judul Blog nya berada dibelakang header tersebut, secara normal dan standarisasi dan SNI dari Blogger (cie.. ) kan sebuah Header itu berada dibelakang Judul Blog.
Nah, gimana coba? apakah bisa Judul Blog ditaruh atau diposisikan berada dibelakang header, sehingga terkesan tidak tampak/hilang.
Jawabanya BISA. Mari kita bahas.
Solusi satu-satunya yaitu mengganti gambar header blog melalui Edit HTML dan menghilangkah Judul Blog tersebut. Nah buat sobat blogger Dan Seo yang mengalami kasus serupa bisa menggunakan metode ini yaitu menyembunyikan atau menghilangkan Title blog. Berikut Cara Menyembunyikan Judul Blog.
1. Pertama, seperti biasa langsung Login kemarkas Blogger masing-masing.
2. Disebelah kanan, pilih menu Template >> Edit HTML.
3. Jangan lupa download template lengkap anda dulu ya, barangkali aja eksperimen nya gagal. Hehehehe
4. Jika sudah, cari kode berikut : "header h1" kurang lebih rangkaiannya sebagai berikut.

5. Kalau sudah ketemu, terus tambahkan kode berikut "visibility:hidden;". Kurang lebih susunanya akan menjadi seperti ini.

Setelah itu simpan template nya.
Dan lihat eksperimen nya.
Semoga berhasil ya eksperimen nya. Hehehehe

Read More

Menambahkan Chatbox dan Buku Tamu di Blog

Surfing..Surfing... berkeliling lagi didunia maya, melihat berbagai blog-blog yang sangat bagus-bagus, dan ada juga yang tidak bagus pastinya. Hehehehehe
Sering kali ketika kita berkunjung kesebuah blog atau website, ada semacam widget buku tamu. Nah ini penting lho, karena ini merupakan salah satu widget yang menghubungkan antara pembaca dengan pembaca atau bisa pembaca dengan penulis. (meskipun saya tidak pakai hahahaha )
Nah, buku tamu yang biasa digunakan atau yang sering dijumpai adalah Chatbox dan Shoutmix. Gimana tuh cara nempelkan diblog nya? Gini nih caranya...
1. Kamu harus mendaftar dulu di Chatbox untuk mendapatkan widget buku tamu, bisa daftar di www.cbox.ws
2. Klik Sign Up.

3. Isi Formulir untuk melengkapi data pendaftaran.

4. Setelah pendaftaran berhasil, dan anda disuruh membuka email untuk aktifasi/konfirmasi pendaftaran.
5. Setelah dikonfirmasi, anda baru bisa login di Chatbox. Setelah masuk segera cari page Code Generator.

6. Segera ambil code script untuk dipasang diblog. Jika anda ingin melakukan pengaturan Seperti Lebar Kotak ChatBox Klik pada Bagian Look & Feel >> Layout Option kemudian untuk mengganti style cheatBox anda masuk ke Look & Feel >> Style Presents.
7. Kemudian memasukan kedalam Blog, Login ke Blogger >> Tata Letak >> Tambah widget >> HTML/Javascript.
8. Masukan kode yang anda dapat dari Chatbox tadi, kemudian simpan.
9. Widget sudah jadi, dan buku tamu anda siap digunakan.

Selamat Mencoba...

Read More

Membuat Gambar Iklan Di Pojok Blog Web

Sebuah iklan atau gambar mungkin sangat berperan penting dalam struktur komponen Blog/Web, selain membuat Web semakin enak dilihat juga menambah pengunjung untuk tertarik dengan adanya iklan dan gambar tersebut.
Dulu pernah saya coba beberapa metode pemasangan iklan yang tepat, tapi saya anggap belum saatnya saya pasang iklan (karena traffic belum memenuhi) Hehehehe
Tapi saya tertarik untuk mencoba memasang beberapa widget yang posisinya berada di pojokan kanan-kiri web. dan ini cukup menarik karena saat scroll mouse kita gerakan posisi widget tetap berada dalam posisi FIX. menarik bukan? Nah berikut caranya.
Pertama seperti biasa Login ke Blogger, lalu Tata Letak(Layout), lalu Add Gadget (Tambah Gadget), pilih tanda  HTML/Javascript.
masukan kode berikut,
untuk posisi diatas


dan untuk posisi dibawah


Nah untuk keteranganya,
URL(LINK) : link yang akan dituju, misalnya link blog anda.
Right     : posisi gambar, bisa diganti “left”, jika gambar mau ditampilkan di kiri pojok.
Keterangan Gambar: jika gambar disentuh, maka akan muncul tulisan yang anda cantumkan.
URL Gambar/lainya: url gambar yang akan anda buat di pojok, yang apabila gambar tersebut di klik akan menuju link tersebut.
kurang lebih screenshoot nya seperti gambar dibawah,

klik gambar untuk memperbesar

gambar diatas saya coba dengan widget follow twitter, karena script ini bisa menerima fitur apa aja. contohnya seperti memasukan gambar,iklan,follow facebook dan lainya. tinggal memasukan kode script kedalam nya.
Selamat mencoba yaaa...

Read More

Menjadikan Blog/Web ringan saat diakses

Setelah banyak yang membahas tentang cara-cara mempercepat traffic blog/web dengan cepat, sekarang saya akan membahas tentang bagaimana optimasi blog/web supaya proses atau penampilan website kita ringan. Dalam arti sebuah website dianggap bernilai itu tidak berdasarkan tampilan atau konsep saja,tapi berdasarkan dengan kecepatan proses penampilan website tersebut. Jika website/blog tersebut ringan,maka tak jarang banyak orang-orang yang tertarik dengan website yang kita buat. Belum lagi sekarang banyak user internet yang menggunakan akses via Handphone/ponsel, tentu saja itu akan mempengaruhi kecepatan data yang menampilkan website kita saat dikunjungi.

Nah,tips ini saya dapat ketika saya mengikuti perkuliahan dimata kuliah Struktur Data. Bahwa setiap program itu dianggap berkualitas bukan dari mampu mencetak sebuah hasil saja, tapi dilihat juga dari kecepatan dari program tersebut saat mencetak sebuah nilai, dalam bahasa IT nya biasanya disebut saat RUN.

Jadi saya berfikir, mungkin metode tersebut bisa saya gunakan didalam membangun sebuah blog/website. Nah untuk cara-caranya banyak sekali,mulai dari Compress HTML,mengambil Hosting yang cepat dan sebagainya. Nah kali ini saya akan membahas satu dari sekian cara tersebut,yaitu dengan cara Compress image yang ada didalam tampilan HOME blog/website kita.

Pada tampilan HOME kita terdiri dari beberapa image atau bisa juga berupa tampilan slide, yang paling familiar adalah image pada HEADER dan FOOTER. Nah perlu kita tahu bahwa waktu orang mengunjungi blog/website kita maka secara tidak langsung orang tersebut akan mendownload konten-konten yang terkandung dalam tampilang blog/website kita, berupa image,chace,slide,plugin dan lain sebagainya. Semakin besar file yang kita taruh dalam komponen blog/website kita maka sebesar itulah file yang akan didownload oleh pengunjung blog kita. Nah untuk mengantisipasi supaya pengunjung tidak terlalu lama menunggu tampilan blog/website kita maka kita harus meminimkan ukuran file-file dalam kandungan blog/website. Misalkan file header kita berupa image yang semula kita upload kedalam blog berukuran 90MB bisa kita minimkan menjadi 15MB, itu akan semakin mempercepat tampilan website kita sewaktu dibuka oleh pengunjung. Belum lagi sekarang sedang marak akses internet berbasis broadband atau modem yang rata-rata mempunyai kecepatan dibawah koneksi ISP, maka pengunjung akan lebih banyak memilih blog/website yang koneksinya ringan sewaktu dikunjungi.

Banyak sekali  website yang menyediakan layanan Compress image secara online, jadi kita tak perlu susah payah mendownload software Compress image untuk memperkecil ukuran image Header/Footer kita. Misalnya www.jpeg-optimizer.com www.imageoptimizer.net dan lain sebagainya. Dan ingat, bukan memperkecil gambar tetapi meng-kompress gambar,yang hanya memperkecil resolusi dari gambar tersebut,karena jika anda memperkecil gambarnya maka hasilnya akan berbeda.

Selamat mencoba….

Read More

Google Fonts dalam Wordpress

Jika sebelumnya saya telah menerbitkan postingan bagaimana menggunakan dan menampilkan Google Fonts dalam blogger dalam postingan Google Fonts untuk Blogger, sekarang saya akan membahas bagaimana menggunakan Google Fonts tersebut kedalam Wordpress.

Kita tahu bahwa Google memiliki ratusan jenis fonts yang dapat kita gunakan dalam mempercantik tampilan website kita, karena tampilan fonts dalam website kita tentu saja akan mempercantik tampilan website kita.

Keunggulan lainya menggunakan Google Fonts adalah, bahwa koleksi-koleksi fonts tersebut tersimpan dalam server Google yang pastinya ga akan pernah mati, juga load previewnya kenceng.

Dalam Wordpress berbeda dengan Blogger, Wordpress menggunakan semacam Plugin khusus untuk Google Fonts dalam editor HTML nya, Plugin tersebut dapat didownload disini.

Setelah anda mendownload dan menginstalnya, maka akan lansung terkoneksi dengan editor yang tersedia di Wordpress, seperti tampilan dibawah.

Nah, selamat mengotak-atik dan mencoba sendiri sesuka anda. :)

Read More

Menggunakan Google Font untuk Blogger

 

Google mempunyai salah satu layanan berupa karakter fonts yang sangat beragam, kita bisa memilih ratusan fonts yang disediakan Google untuk digunakan dalam web atau blog kita.

Langsung saja kita praktek kan, pertama kita kunjungi dulu web Google Fonts.

Setelah masuk, disana kita dapat memilih banyak fonts yang akan kita gunakan untuk mempercantik tampilan web/blog kita.

Setelah kita memilih salah satu, atau kita bisa memilih banyak fonts. klik Quick use dibawah sample font tersebut.

Setelah itu akan muncul kotak dialog berupa kode CSS yang akan kita tempatkan pada blog kita.

Ada 2 kode CSS, pertama kita buka dulu blogger - Rancangan - Edit HTML
cari kode <head> dan taruh kode CSS yang pertama dibawah kode <head> tersebut.
Jangan lupa kita tambahkan / diakhir penulisannya.
Contoh,

<link href='http://fonts.googleapis.com/css?family=Metal+Mania' rel='stylesheet' type='text/css'/>

Setelah itu langsung saja kita gunakan kode CSS yang kedua didalam blog kita, tinggal kita ketik aja dibagian CSS yang kita inginkan,seperti mengedit font biasa.
Contoh,

a {font-family: 'Metal Mania', arial, serif;}
 

Selain digunakan dalam tautan atau postingan, Google Fonts juga bisa kita gunakan dalam Header,Body,Sidebar dan mana saja, tinggal kita atur dan tempatkan didalam kode HTML blogger kita.

Selamat Mencoba.

Read More

Penggunaan Meta Tag (HTML)

Meta tag adalah tag-tag HTML yang membantu anda mengendalikan search engines ketika meng-inddex situs anda, dengan menggunakan keywords dan deskripsi yang telah anda sediakan. Keyword dan deskripsi meta tag yang anda masukan kedalam html dari halaman-halaman anda, menyediakan informasi bagi search engine mengenai bagian yang tidak boleh di tampilkan dalam web browser.
Ada beberapa komponen dalam rangkaian meta tag, mari kita bahas.

Meta Tag Description
Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :

<meta name="description" content="kompikita.net Belajar Komputer,HTML,JAVA,Programing,Jaringan dan Download.">

Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagai deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada pada halaman tersebut. Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi dari meta tag description sebagai kalimat pembuka. Dan jika bagian paling awal dari web Anda berupa sebuah menu, maka deskripsi yang ditampilkan pada hasil pencarian Northern Light adalah seperti ini :
Home | Komputera | JAVA | HTML ...Selamat datang di Kompikita.net....

Meta Tag Keyword
Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword adalah sebagai berikut :

<meta name="keywords" content="keyword1 keyword2 keyword3 ...">

contoh:

<meta name="keywords" content="komputer jaringan java html programing...">

atau ada juga yang menulis dengan pemisah tanda koma :

<meta name="keywords" content="komputer, jaringan, java, html, programing...">

Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming.
Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan web Anda memuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan "MP3" atau "Britney Spears" sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di internet dan banyak dicari orang.

Meta Tag Robots
Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine. Format dasar dari meta tag robots adalah sebagai berikut :

<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :

<meta name="robots" content="index follow">

Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).
Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.

<meta name="robots" content="noindex nofollow">

Read More

Teks berjalan (Marquee)

Untuk membuat teks berjalan digunakan tag <marquee>. Tag marquee diperkenalkan oleh Microsoft IE, jadi tag tersebut bukan merupakan bagian dari HTML maupun XHTML. Jika ingin membuat website yang mendukung HTML/XHTML maka kita harus melupakan tag ini dan mencari alternatif pengganti dengan menggunakan flash, animasi atau javascript.

Untuk menuliskan tag marquee kedalam dokumen HTML adalah seperti berikut:

<marquee>konten</marquee>

Seperti judulnya “membuat teks berjalan” sebenarnya bukan cuma teks, namun untuk konten kode diatas dapat juga dimasukkan gambar, links, embed flash, iframe dsb.
Untuk pengaturan tampilan dari konten tersebut dapat menambahkan atribut-atribut pada tag marquee.

<marquee atribut>konten</marquee>

Dimana atribut-atribut dari marquee tersebut adalah sebagai berikut:
width, height, direction, behavior, scrolldelay, scrollamount, loop, bgcolor, hspace, vspace, style, title, id, class, datafld, dataformats, datasrc, language, truespeed.
Atribut-atribut untuk javascript
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup, onfocus, onstart.

Standar tag marquee tanpa atribut
 

<marquee>Standar tag marquee tanpa atribut</marquee>

Standar tag marquee tanpa atribut

Marquee dengan atribut direction

<marquee direction="up">marquee direction="up"</marquee>
<marquee direction="right">marquee direction="right"</marquee>
<marquee direction="down">marquee direction="down"</marquee>
<marquee direction="left">marquee direction="left"</marquee>

marquee direction="up"
marquee direction="right"
marquee direction="down"
marquee direction="left"

Marquee dengan atribut behavior

<marquee behavior="alternate">marquee behavior="alternate"</marquee>
<marquee behavior="scroll">marquee behavior="scroll"</marquee>
<marquee behavior="slide">marquee behavior="slide"</marquee>

marquee behavior="alternate"
marquee behavior="scroll"
marquee behavior="slide"

Marquee dengan atribut scrolldelay

<marquee scrolldelay="100">marquee scrolldelay="100"</marquee>
<marquee scrolldelay="200">marquee scrolldelay="200"</marquee>
<marquee scrolldelay="300">marquee scrolldelay="300"</marquee>

marquee scrolldelay="100"
marquee scrolldelay="200"
marquee scrolldelay="300"

Marquee dengan atribut scrollamount

<marquee scrollamount="10">marquee scrollamount="10"</marquee>
<marquee scrollamount="20">marquee scrollamount="20"</marquee>
<marquee scrollamount="30">marquee scrollamount="30"</marquee>

marquee scrollamount="10"
marquee scrollamount="20"
marquee scrollamount="30"

Marquee dengan atribut width

<marquee width="75%">marquee width="75%"</marquee>
<marquee width="160">marquee width="160"</marquee>

marquee width="75%"
marquee width="160"

Marquee dengan atribut height

<marquee height="75%">marquee height="75%"</marquee>
<marquee height="30">marquee height="30"</marquee>

marquee height="75%"
marquee height="30"

Marquee dengan atribut bgcolor

<marquee bgcolor="red">marquee bgcolor="red"</marquee>
<marquee bgcolor="#ddd">marquee bgcolor="#ddd"</marquee>

marquee bgcolor="red"
marquee bgcolor="#ddd"

Marquee dengan atribut style

<p><marquee style="padding:4px;font-size:18px;color:#0C9;background:#000;">Kompikita.net<br />
<span style="font-size:12px;color:#ff3;">Web design, Belajar Komputer, CSS, Javascript, tips, triks dan tutorial bagi pemula.</span></marquee></p>

Kompikita.net

Web design, Belajar Komputer, CSS, Javascript, tips, triks dan tutorial bagi pemula.

Marquee dengan beberapa atribut

<p style="background: #366;text-align:center;padding:4px;font-size:20px;color:#0fc;">
<marquee direction="left" scrollamount="5" width="200"><<< MACAM-MACAM</marquee>
<marquee direction="right" scrollamount="5" width="200">MACAM-MACAM >>></marquee><br />
<marquee behavior="alternate" width="400" style="font-size:14px;color: #fff;" >Contoh Marquee</marquee></p>

<<< MACAM-MACAM
MACAM-MACAM >>>

Contoh Marquee

Marquee dengan link dan mouseover atribut

<marquee onmouseover="this.stop();" onmouseout="this.start();">Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui <a href="/membuat-teks-berjalan-dengan-tag-marquee#comment" title="Tinggalkan pesan">comment</a></a></marquee>

Ketika kita menggeser mouse ke area teks dibawah maka teksnya akan berhenti.
Jika ada komentar anda tentang marquee ini silahkan sampaikan melaui comment

Marquee dengan gambar
Untuk gambar kita cupup memasukkan lokasi gambarnya dan lakukan pengaturan dengan atribut-atribut marquee tersebut.

<marquee><img src="../images/marquee1.jpg" /> <img src="../images/marquee2.jpg" /> <img src="../images/marquee3.jpg" /></marquee>

Read More

Favicon dan cara menampilkanya

Dalam pelajaran HTML kali ini kita akan mempelajari tentang bagaimana cara menampilkan Favicon di browser.
Favicon adalah sebuah icon image yang berukuran kecil yang ditampilkan di address bar dan tab browser.

Dengan adanya favicon ini memang kelihatan menarik, bahkan kita bisa hafal suatu situs web dengan hanya melihat favicon-nya, jika kita memiliki banyak bookmark di browser kita, maka kita akan melihat beraneka ragam favicon disana.

Pertama, anda harus memiliki gambar yang ber-ekstension .ico tersebut yang standart ukurannya sekitar 16X16px, program grafik seperti Photoshop atau Corel Draw bisa membuat jenis file ini, namun jika anda ingin yang siap saji anda bisa mendownload dari freefavicon, ratusan favicon menarik dapat anda temukan disana.

Jika anda sudah menemukan yang anda sukai, download dan simpan icon tersebut ke komputer anda dengan nama “favicon.ico”

Selanjutnya agar dokumen html dapat menampilkan icon ini, kita harus menambahkan kode berikut ini di antara tag elemen <head> dan </head>:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

Setelah dimasukkan kedalam dokumen html maka akan seperti dibawah ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel Websiteku</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico">
</head>
<body>
<p>Harap tenang... saya sedang belajar tentang favicon</p>
</body>
</html>

Buka Notepad kemudian salin kode diatas dan simpan ke komputer dengan nama “testicon.html” jangan lupa agar menyimpannya di folder yang sama dengan favicon.ico tadi.

Memasukkan kode favicon secara manual.
Wordpress 
Caranya adalah dengan memasukkan favicon.ico tersebut ke folder themes favourite kita, kemudian buka file “header.php” dan masukkan kode berikut ini diantara tag elemen <head> dan </head>:

<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

Cara ini tidak bisa dilakukan di WordPress.com, karena kita tidak diizinkan untuk mengedit template.

Blogger

Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikan di ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.
Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, gif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon  anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya:

• Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
• Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
• Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Anda bisa menggunakan situs Hosting gratis untuk mengupload favicon anda. misal  Picturestack , HostAnyImage dan lainya.
• Copy terlebih dahulu direct link dari gambar yang telah diupload.
• Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.

Untuk favicon file ico:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Untuk animated favicon file gif:

<link href='url gambar gif anda' rel='icon' type='image/gif'/>

Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<link href='url gambar gif anda' rel='icon' type='image/gif'/>

• Preview dan save.

Read More

Tabel HTML

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
<tr>
<td>Cell 1 - Baris 1 Kolom 1</td>
<td>Cell 2 - Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Cell 3 - Baris 2 Kolom 1</td>
<td>Cell 4 - Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Cell 5 - Baris 3 Kolom 1</td>
<td>Cell 6 - Baris 3 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Cell 1 - Baris 1 Kolom 1	Cell 2 - Baris 1 Kolom 2
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
<tr>
<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 1</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
<tr>
<td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
</tr>
<tr>
<td style="width:50%">Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
<tr>
<td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
<tr>
<td style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
<tr>
<td style="width:50%">Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
<tr>
<th style="width:50%;">Header Kolom 1</th>
<th>Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Disini adalah titel tabel ini

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.
Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>

Maka Hasilnya,

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Read More

IMAGE HTML

Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai digunakan format JPG.Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti dengan src (source) sebagai sumber atau lokasi dari gambar.

<img src="lokasi gambar" />

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting harus selalu disertakan dengan elemen img yaitu alt, width dan height.
Alt (alternate) adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat ditampilkan atau ditemukan sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).

<img src="lokasi gambar" alt="teks alternatif" width="lebar" height="tinggi" />

Contoh:

<img src="http://kompikita.net/images/gambar-ronaldo.jpg" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,



Untuk memposisikan gambar ke kiri dan ke kanan digunakan atribut style dengan properti float di ikuti dengan nilai (value) left (kiri) atau right (kanan).
Contoh membuat gambar disebelah kanan

<img src="http://kompikita.net/images/gambar-ronaldo.jpg" style="float:right;" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,








Membuat gambar di tengah dokumen
Untuk membuat gambar berada ditengah dokumen HTML kita harus memasukkan gambar tersebut di dalam blok elemen seperti p, div, table dsb. Kemudian kita masukkan atribut style dengan properti text-align kedalam elemen blok tersebut, dalam contoh kita akan menggunakan elemen div.

<div style="text-align:center;"><img src="http://kompikita.net/images/gambar-ronaldo.jpg" alt="Gambar Ronaldo" width="100" height="100" /></div>

Maka Hasilnya,

Membuat border gambar
Untuk membuat border pada gambar anda dapat menambahkan atribut style dengan properti border dengan nilai dalam px atau jika ingin menghilangkan border anda cukup menuliskan style="border:none"
Berikut adalah contoh gambar dengan border 4px warna hitam.

<img src="http://kompikita.net/images/gambar-ronaldo.jpg" style="border:4px solid #000" alt="Gambar Ronaldo" width="100" height="100" />

Maka Hasilnya,

Read More

Background HTML

Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:

<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>

Preview

Untuk nilai dari atribut bgcolor diatas anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:

<body bgcolor="#FFFF00">
<body bgcolor="rgb(250,250,0)">
<body bgcolor="yellow">

Hasilnya akan sama.Ikuti link berikut ini untuk mengetahui Kode Hexadecimal dan Nilai RGB dari suatu warna, dan untuk nama warna bisa ikuti link berikut, Nama warna.

Selanjutnya membuat latar belakang dengan grafik atau gambar.

Pertama anda harus punya gambar yang ber-extention .gif, .jpg atau .png yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg

<html>
<head></head>
<body background="background.jpg">
<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">
<p><font face="Verdana" size="4" color="black">Hai... Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Biar bagaimanapun anda diwajibkan harus menyukainya...</font></p>
</body>
</html>

Preview

Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:

<html>
<head></head>
<body background="http://i52.tinypic.com/nmm2cz.jpg">
<p>Hai.. Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain! hua ha..ha..ha..</p>
<p>Mudah-mudahan yang punya website ngamuk sekalian deh...siapa takut!!</p>
</body>
</html>

Preview

Read More

Hyperlink HTML

Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:

<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>

Preview

Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html anda dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :

<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>

Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.

<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>

Sekarang coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi:

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>

Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.

<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>

Dalam contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya ditampilkan,
maka hasilnya adalah: Text Langsung ke Yahoo

Read More