Cara membuat menu Dropdown dengan CSS

Pada artikel kali ini saya akan mencoba berbagi tutorial tentang membuat menu dropdown dengan CSS. Sesuai dengan judulnya jadi disini kita hanya menerapkan code CSS dan tidak menggunakan javascript.

Pertama buatlah struktur HTML dari menu yang ingin di gunakan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Diatas adalah menu utama dan sekarang coba buat submenu, misalkan:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Artikel</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Profile</a></li>
</ul>
</nav>

Setelah anda membuat submenu, silahkan anda cek menu yang anda buat tadi. Memang terlihat kurang menarik dan biasa saja karena kita belum menambahkan style pada menu tersebut. Berikut code css yang membuat dropdown anda berjalan dengan baik:
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Berikut penjelasan dari code css:

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

Code ini mengartikan, bahwa elemen yang memiliki submenu, tidak akan di tampilkan. Dan akan tampil ketika terjadi hover pada li yang mempunyai submenu.

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}

Code ini adalah styling untuk submenu. Artikel mempunyai submenu WordPress, Photoshop dan Web Design. Nah style ini dimaksudkan untuk submenu.
Jika sudah maka tampilan akhir dari code diatas adalah seperti ini:

Dropdown menu dengan CSS


Sekian tutorial tentang membuat menu dropdown dengan CSS, jika ada yang salah atau yang ingin ditanyakan silahkan comment saja.

Bisa di download disini

Tutorial membuat template website

Sebuah template website memang berbeda-beda, namun dibalik perbedaan itu ada satu hal persamaan pada setiap website. Ya, mereka selalu mempunyai struktur yang sama, yaitu header, content dan footer. Apakah membuat template website itu susah? Dibilang susah ngga, dibilang gampang juga tidak! Ini tergantung dari kreatifitas orang yang membuatnya. Kali ini saya akan berbagi tutorial membuat dasar sebuah template website.

Goal dari tutorial ini adalah sebagai berikut:

Dasar membuat layout website
Langsung saja, silahkan buka code editor yang sering anda gunakan misalnya notepad++, sublime dkk. Buat sebuah file misalnya diberi nama index, jangan lupa format dari file ini ada html. Berikut code yang digunakan untuk index.html:

<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>

Klik save, kemudian kita tambahkan style untuk index.html . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut code untuk style.css:

.container{
margin:0 auto;
max-width:978px;
}

.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}

.footer{
background:#333;
height:200px;
}

Kemudian buka lagi index.html di browser anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat.

Cara menambah code css di Blogger

Cara menambah code css di Blogger
Pada artikel sebelumnya yang berjudul "Cara membuat box code di blogger" kita diharuskan menambahkan code css pada blogger, namun muncul sebuah pertanyaan. Bagaimana cara menambahkan code css di blogger?

Ya, memang banyak pada kalangan beginner di blogger yang mencari-cari dimana tempat untuk menambah/mengganti code css untuk website nya. Berbeda halnya dengan platform lain yang code stylenya di pisahkan dengan file-file lain yang biasanya disimpan dalam file bernama "style.css", namun di Blogger ini kita hanya mengedit 1 file saja karena memang format yang digunakan adalah xml. Berikut adalah cara menambah code css di blogger:

  1. Masuk ke blogger dashboard
  2. Pilih website anda
  3. Masuk ke menu Template
  4. Pada option Live on Blog, klik Edit HTML. Kemudian akan muncul barisan code xml, klik pada field tersebut(maksudnya kolom code tersebut).
  5. Tekan Ctrl+F , kemudian ketik ]]></b:skin>
  6. Jika berhasil, anda bisa menambahkan code css anda di atas code ]]></b:skin>

Contoh penambahan code css:

.kotak{
width:200px;
height:200px;
background:#000;
}

]]></b:skin>

Selamat mencoba dan semoga bermanfaat.

Cara membuat box code di blogger

Cara membuat box code di blogger
Ada sebagian orang yang senang berbagi pengalaman ngoding pada sebuah artikel. Namun bagaimana agar code yang ingin kita sampaikan itu menarik atau berbeda dengan isi kontennya? Disini kita akan mencoba sebuah code agar code itu tampak berbeda dengan tulisan biasa.

Mungkin pada sebagian orang yang menggunakan WordPress sudah tidak asing menampilkan code pada kontennya, hanya tinggal klik code pada WYSIWG editor, kemudian masukan code yang ingin anda share dan muncullah code yang sudah otomati di wrap oleh style css yang berbeda dengan isi konten. Namun bagaimana caranya kita menampilkan code tersebut di blogger?

Di blogger ini teman-teman harus membuat style css untuk si code, berikut adalah salah satu contoh ketika ingin berbagi code misal struktur dasar HTML:


<html>
<head>
<title>Struktur Dasar HTML</title>
</head>
<body>
Halo Dunia
</body>
<html>


Code diatas terlihat tidak menarik karena tidak menonjolkan bahwa itu adalah code, bandingkan dengan yang diberi style:

<html>
<head>
<title>Struktur Dasar HTML</title>
</head>
<body>
Halo Dunia
</body>
<html>


Terlihat lebih menarik dari sebelumnya(menurut saya hee..), jika anda ingin membuatnya silahkan anda tambahkan code css berikut pada website blogger anda:

.code {
background: #F5F8FA;
background-repeat: no-repeat;
border: solid #0098FF;
border-width: 1px 1px 1px 20px;
color: #000; font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}


Jika sudah menambahkan code css diatas, cara menggunakan nya, ketika anda membuat sebuah artikel masuk ke tab HTML, lalu tambahkan seperti:

<div class="code">
Disini anda tambahkan code yang ingin anda bagikan.
</div>

Begitulah yang dapat saya sampaikan dalam Cara membuat box code di blogger, semoga bermanfat!

NOTE:
*WYSIWG singkatan dari What You See Is What You Get, bar yang ketika kita bikin post, icon bold, italic, dll.

Perbedaan Back-end dan Front-end Developer

Perbedaan Back-end dan Front-end Developer
Dikalangan developer mungkin kedua kata ini sudah biasa terdengar, baik Back-end ataupun Front-end keduanya adalah bagian penting dalam pembuatan suatu aplikasi baik berupa aplikasi desktop, web ataupun mobile.Dalam dunia developer biasanya akan dibagi menjadi dua bagian atau dua tim berbeda, misalkan:

Sebuah developer website menerima pesanan pembuatan website, perusahaan tersebut hanya memberikan gambar website yang mereka inginkan (atau yang biasa disebut mockup). Disinilah peran Back-end dan Front-End developer dibedakan, yang pertama memulai pekerjaan adalah Front-End, para Front-End developer akan memulai tugas mereka yang pertama yaitu merubah gambar(mockup) tadi menjadi sebuah halaman web static berbentuk HTML (atau yang biasa disebut dengan slicing), tugas ini cukup berat karena seorang Fron-End developer harus memastikan hasil slicing mereka sama persis dengan gambar(mockup) baik itu tampilan, animasi, dan lain-lain. Seorang Fron-End developer biasanya harus memahami beberapa bahasa programming yaitu HTML, CSS, Javascript dan Jquery. Setelah para Fron-end developer selesai maka mereka akan memeberikan hasil berbentuk Web Static yang kemudian akan dirubah menjadi Web Dinamis oleh Back-End Developer. Setelah menerima file web static maka Back-End developer akan segera merubah file tersebut menjadi Web Dinamis, tugas Back-End Developer biasanya adalah memastikan semua fungsi berjalan dengan baik dan benar dan para Back-end ini harus memamahi beberapa bahasa programming yaitu php, sql, java dan sebagainya.

Jika disimpulkan dan dipersingkat ini adalah perbedaan dari kedua developer tersebut:

Front-End Developer
Programmer yang lebih fokus pada tampilan luarnya (layout), jika kalian melihat web-web yang bagus layout/tampilanya itu biasanya dibuat oleh para front-end web developer untuk itu mereka harus bisa memahami beberapa bahasa programming diantaranya HTML, CSS, Javascript dan Jquery. 


Back-End Developer 
Programmer yang lebih fokus pada fungsi-fungsi dari website tersebut, misalnya membuat form registrasi, pembayaran dan lain sebagainya, karena itu mereka harus bisa memahami beberapa bahasa programming juga diantaranya php, sql, java dan lain sebagainya.

Begitulah informasi yang saya ketahui tentang Back end dan Front-end developer, buat yang sudah berpengalaman jika ada kata-kata saya yang salah mohon dimaafkan karena memang masih newbie dan hanya ingin berbagi pengalaman :D