Selasa, 25 Oktober 2016

Apa itu bahasa pemograman CSS ?

Apa itu bahasa pemograman CSS ?

Apakah anda sudah mendengar tentang CSS? Apa itu dan seperti apa kode-kodenya? CSS kepanjangan dari Cascading Style. Jika kita ingin belajar membuat website, ada baiknya kita mengerti tentang bahasa pemograman CSS meski sedikit. Hampir semua website menggunakan bahasa CSS.

Bahasa pemograman CSS adalah suatu susunan kode-kode yang berfungsi untuk membuat tampilan website jadi keren, seperti tata letak ataupun warna website itu sendiri. Seiring dengan kemajuan teknologi, bahasa CSS juga mengalami perkembangan. Yang tadinya dari CSS1, CSS2 dan hingga artikel ini ditulis sudah mencapai CSS3.

Tentunya kode-kode CSS berdiri diatas bahasa HTML seperti yang sudah saya paparkan pada artikel ini. Anda akan menemui kode CSS pada tag <head> dan </head>. Biasanya didahului dengan kode <style> dan </style> atau jika pada template blogspot berada di antara kode <b:skin><![CDATA[ dan ditutup dengan kode ]]></b:skin>.

Kode bahasa pemograman CSS

Jenis kode bahasa pemograman CSS sangatlah banyak dan tidak mungkin kami tulis semua kode-kode CSS tersebut. Beberapa kode dibawah hanyalah contoh saja. Silahkan baca lebih lanjut!

width
width adalah sebuah kode CSS yang berfungsi untuk menentukan ukuran lebar website. Satuannya adalah px (pixel). Contoh penggunaannya seperti dibawah ini.
#outer-wrapper{width:940px;}

Outer-wrapper merupakan ID pada tata letak tertentu. Dan biasa dipakai pada tata letak terluar yang mencakup semua ID lainnya.

margin
Margin adalah kode CSS yang berfungsi untuk menentukan jarak suatu area terhadap area lain. Berlaku diluar ID.

padding
Padding adalah sebuah kode CSS untuk memberikan suatu jarak terhadap ID didalamnya.

float
Float juga termasuk salah satu kode CSS dimana berfungsi untuk menentukan dimana suatu ID akan ditempatkan. Biasanya digunakan pada beberapa ID pada satu baris. Misalnya ID = content-wrapper dan ID sidebar. content-wrapper akan kita letakkan di sebelah kiri dan sidebar akan kita letakkan di sebelah kanan. Maka kode CSS-nya seperti dibawah ini :
#content-wrapper{float:left;}
#sidebar{float:right;}

background-color
Kode yang satu ini nampaknya sudah jelas. Seperti namanya yaitu background-color, maka fungsinya juga seperti namanya yaitu untuk memberikan warna background website anda. Value yang bisa digunakan bisa kode HTML atau namanya langsung. Misalnya :
body{background-color:#ffffff;}
body{background-color:white;}

Kedua kode diatas akan memberikan output yang sama yaitu warna background website anda adalah putih. Kode yang atas adalah kode HTML sedangkan kode yang dibawah adalah namanya langsung dengan bahasa inggris.

color
Untuk kode color, adalah berlaku untuk warna text. Jadi untuk warna ada background-color dan color. Ingat itu.

font-family
font-size
Kedua kode CSS diatas nampaknya juga sudah jelas dari namanya. Dimana font-family merupakan jenis huruf yang digunakan. Ada banyak jenis huruf yang bisa anda gunakan pada website anda seperti arial, verdana, dan lain-lain. Sedangkan font-size merupakan ukuran font pada website anda.

font-weight
Untuk kode CSS adalah kode untuk ketebalan huruf pada website anda. Biasanya valuenya adalah bold atau bisa dengan angka yaitu 400,500,600 atau 700.

Nah kesembilan kode CSS diatas adalah kode-kode yang sering digunakan dalam pembuatan website. Jadi sebisa mungkin anda pahami dan kalau bisa diingat.

Sabtu, 22 Oktober 2016

Mengenal kode dasar bahasa HTML

Anda tahu bahasa pemograman HTML? HTML kepanjangan dari HyperText Markup Language. Bahasa HTML adalah bahasa pemograman dasar yang digunakan pada sebuah website. Selain HTML, sebuah website bisa menggunakan bahasa pemograman yang bermacam-macam seperti XML, Javascript, JQuery, dan lain-lain masih banyak lagi. Akan tetapi semua bahasa pemograman tersebut tetap berpijak diatas HTML. Artinya sebuah website tidak mungkin disusun tanpa pemograman bahasa HTML, kecuali jika ada bahasa pemograman website yang super canggih nantinya.


Untuk itu, jika anda ingin coding sebuah website, yang pertama harus anda perhatikan adalah dasar dari bahasa HTML itu sendiri. Seperti apa kode dasar bahasa HTML itu? Lihat kode dibawah ini !

<html>

</html>

2 kode diatas adalah kode HTML pembuka pada baris pertama dan kode HTML penutup pada baris dibawahnya. Silahkan lihat website manapun pasti diawali dengan kode HTML pembuka yaitu <html> dan diakhiri dengan kode HTML penutup </html>.

Kemudian kode dasar selanjutnya yaitu

<html>
<head>
</head>
</html>

Kode selanjutnya yaitu kode untuk menuliskan kode perintah suatu website. Semua kode perintah suatu website berada diantara kode <head> dan </head>. Sebuah website bisa diperintah dengan beberapa bahasa pemograman. Yang paling sering digunakan yaitu CSS dan Javascript atau JQuery.
Untuk CSS maka kode harus berada diatara kode <style> dan </style>, jadi akan menjadi seperti ini :

<html>
<head>
<style>
Kode perintah CSS disini
</style>
</head>
</html>

Akan tetapi jika berbicara pada template blogspot agak sedikit berbeda. Untuk CSS pada template blogspot berada pada kode <b:skin><![CDATA[ dan ditutup dengan kode ]]></b:skin>.
Jadinya seperti ini :

<html>
<head>
<b:skin><![CDATA[
Kode perintah CSS disini
]]></b:skin>
</head>
</html>

Sedangkan untuk kode perintah yang berupa javascript atau JQuery maka kode harus berada diantara kode <script> dan </script>, jadi akan menjadi seperti ini :

<html>
<head>
<script> Kode perintah Javascript / JQuery disini </script>
</head>
</html>

Nah kode dasar HTML terakhir yang perlu anda ketahui adalah kode body. Apa itu? Kode ini adalah kode untuk menampilkan semua konten website. Kodenya adalah seperti ini :

<html>
<head>
<style>
Kode perintah CSS disini
</style>
</head>
<body>
Konten website
</body>
</html>

Jadi semua konten website berada diantara kode <body> dan </body>.

Sekali lagi kode-kode HTML diatas wajib anda pelajari dan sebisa mungkin anda hafal jika anda ingin menjadi seorang developer website yang handal. Semoga bermanfaat.

Kamis, 20 Oktober 2016

Memilih template blogspot untuk blog dummy

Hello sobat, jika anda sudah cukup lama berbisnis online khususnya yang bermain blog/website, tentunya anda tidak akan jauh-jauh dari yang namanya SEO. Betul bukan? Yup, jika anda bermain SEO tentu juga tidak luput dari backlink.

Saat kita bermain backlink tentunya akan memiliki web/blog pembantu atau bisa juga kita namakan web support. Sebagian yang lain menamakan blog dummy. Oke, apapun namanya yang penting sama tujuannya yaitu untuk mendukung web utama kita menempati peringkat atas di mesin pencari google.

Saat kita membuat blog dummy diweb 2.0 seperti misalnya blogspot.com atau wordpress.com, di kedua platform tersebut adalah platform web 2.0 papan atas yang banyak digunakan oleh para pemain SEO guna menanam backlink. Maka dari itu, banyak developer template yang secara cuma-cuma mendevelop template blogspot ataupun template wordpress. Dari sekian banyak template yang disediakan, entah itu template gratis ataupun template berbayar, tentunya anda harus pintar-pintar memilih template mana yang bagus digunakan sebagai blog dummy.

memilih template blogspot untuk blog dummy

Memilih template blogspot untuk blog dummy


Untuk hasil yang maksimal saat anda membuat blog dummy, tentunya anda tidak boleh sembarangan terutama saat pemilihan template blogspot. Menurut hemat saya, minimal ada 2 poin yang harus anda perhatikan saat memilih template blogspot untuk blog dummy anda. Apa itu?

1. Pilih artikel ada di sisi kiri (Sidebar kanan)
Tata letak sebuah website bermacam-macam. Ada yang menempatkan artikel di sisi kanan ada juga yang menempatkannya disisi kiri. Anda harus tahu bahwa google bot melakukan crawler pada sebuah halaman urut dari atas dan kiri. Artinya jika artikel anda diletakkan disebelah kiri tentunya akan lebih ter-crawler google bot daripada isi dari sidebar anda.

2. Hindari paragraf/artikel yang terpotong
Di satu sisi, tampilan website yang menampilkan artikel terpotong akan tampil lebih elegant dari pada sebuah website yang menampilkan artikel semua. Tapi jangan salah, apa tujuan anda membuat blog tersebut. Jika itu merupakan web utama, maka tak masalah anda memotong artikel anda. Sebalinya jika blog tersebut adalah blog dummy, maka hindari artikel yang terpotong. Mengapa?
Penggunaan summary mengharuskan artikel terpotong secara otomatis, dengan demikian maka link yang anda tanam pada blog dummy tersebut tidak akan muncul di homepage, melainkan muncul di inner-page. Padahal kekuatan homepage jauh lebih besar jika dibandingkan inner-page.

Anda mau template blogspot yang bisa menampilkan full artikel pada homepage? 

Minggu, 16 Oktober 2016

Menentukan type template blogspot

Jika persiapan awal membuat template blogspot sudah oke, kini saatnya anda menentukan type template blogspot yang akan anda buat. Sebelum anda memulai aktivitas untuk membuat template blogspot, anda harus tentukan terlebih dahulu type template yang akan dibuat. Hal ini nantinya berhubungan dengan layout / tata letak. Dan secara umum type-type template atau tampilan website ada beberapa diantaranya seperti dibawah ini.

type template blogspot

Type template blogspot (Jenis tampilan website)

Beragam jenis tampilan website dapat kita lihat saat kita berkunjung ke marketplace produk digital seperti themeforest.net. Disana anda bisa menemukan berbagai desain yang profesional dan harganya lumayan mahal. Nah dari banyak desain tersebut, secara garis besar saya bagi kedalam 4 kategori. Kategori ini urut dari tampilan website yang banyak digunakan diinternet.

1. Blogging style
Tidak diragukan lagi bahwasannya website dengan tampilan blogging paling banyak digunakan oleh para blogger. Salah satu alasannya karena tampilan ini cukup simple dan ringan jika diakses. Rata-rata pengguna tampilan blogging style adalah personal bukan suatu badan usaha.

2. Magazine
Tampilan magazine menduduki peringkat dibawah tampilan blogging style. Pengguna tampilan ini kebanyakan suatu instansi media seperti detik, berita satu, suara merdeka dan lain-lain.

3. Online Shop
Jelas untuk tampilan magazine style banyak digunakan oleh para UKM. Mereka yang memiliki toko offline sekarang semakin banyak yang mencoba ekspansi ke toko online. Tampilan online shop lebih mengedepankan gambar dari pada penjelasan gambar. Karena gambar yang menarik tentu saja akan menarik simpatik dari pengunjung di website tersebut.

4. Landing page
Tampilan ini biasanya hanya memiliki satu kolom. Kolom itulah yang digunakan untuk menulis sales letter. Tampilan landing page bisa untuk menjual produk fisik ataupun produk digital.
Walaupun website dengan tampilan landingan page menempati urutan terbawah, tapi jangan salah karena sekarang semakin banyak digunakan untuk menjual satu produk.

Nah, dari ke-4 type tampilan website diatas, anda harus menentukan terlebih dahulu template type mana yang akan dibuat. Jika anda sudah tentukan, maka langkah selanjutnya harus membuat layout yang akan digunakan.

Silahkan anda pelajari dan pikirkan terlebiih dahulu mengenai type template blogspot yang akan dibuat nantinya.