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