Membuat tab menu pada Blogger

Sebenarnya saya nggak begitu tau sih soal yang beginian. Tapi, salah satu teman saya merajuk untuk sharing soal ini. Akhirnya saya dapat refrensi dari blog Super-Bee untuk membuat tab menu.

Berikut caranya..

1. Login ke account blogger Anda

2. Untuk tampilan blog saat ini, klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget

untuk tampilan blog lama.
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget.

3. Temukan kode ]]></b:skin>. Gunakan fitur ctrl + f atau F3 (bukan fitri lho..hehee..) untuk mempermudah pencarian anda.

4. Jika sudah ditemukan, masukkan (copy-paste) kode berikut tepat diatas ]]></b:skin>:

/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}

#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}

.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}
#Live .dropmenu li div{
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
#Live .dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
#Live .dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}

#Live .dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}

#Live .dropmenu li div div a{
display: inline;
border: none;
color: #0657AD;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .dropmenu li div div a:hover{
color: #F67A00;
text-decoration: none;
border-bottom: 1px dashed #000;
}

#Live ul.left{
float: left;
width: 145px;
}
#Live ul.right{
float: right;
width: 145px;
}
#Live .small{
color: #666;
font-size: 11px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
#Live .products{
width: 300px;
padding: 15px !important;
}
#Live .products ul{
width: 100%;
}
#Live .products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
#Live .products img{
float: left;
padding-right: 10px;
}
#Live .products ul li a{
display: inline;
border: none;
color: #666;
padding: 0px;
margin: 0px;
text-transform: none; /*
text-decoration: underline; */
}
#Live .products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
border-bottom: 1px dashed #000;
}

#Live .tutorials{
width: 300px;
}

#Live .profile{
width: 300px;
padding: 15px !important;
}

#Live .profile ul{
width: 100%;
}
#Live .profile ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .profile h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .profile p{
color: #666;
font-size: 10px;
padding: 0px;
margin-left: 120px;
}
#Live .profile img{
float: left;
padding-right: 10px;
border: 1px solid rgb(226, 226, 226);
width: 100px;
height: 100px;
padding: 5px;
margin-top: 17px;
margin-right: 10px;
}

#Live .profile a:hover {
background:none;
}
#Live .login{
padding: 15px !important;
width: 180px;
}
#Live input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
#Live label{
padding: 0px 0px 4px 0px;
display:block;
}
#Live button{
background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}

5. Lakukan pencarian pada </head>. Setelah ketemu, masukkan kode berikut :

<!-- Live Menu by Blackhiden -->
<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>

6.  Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih standar letakkan pada bagian <div id='outer-wrapper'>. Tapi, beberapa template yang memiliki struktur kode yang berbeda, saya meletakkan kode berikut ini dibawah tag penutup </header> (masing-masing template berbeda).

<div id='Live'>
<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>

NB : yang saya cetak hijau, adalah label yang akan ditampilkan pada tab. Untuk tanda '#' (pagar), gantikan dengan url anda.

 7. Klik pratinjau untuk melihat hasil sementara, jika tidak mengalami masalah, kemudian save dan lihat hasilnya. Jika ada peringantan, save kembali. Blogger akan memperbaiki secara otomatis.

8. Selesai.

Selain cara ini, anda mungkin akan lebih mudah mendownload template yang telah tersedia tab menunya dan tinggal mengganti label dan urlnya.








Semoga cara ini berhasil dan tidak membuat anda bingung.
.

DARI SATU STATEMENT MENJADI SATU KESATUAN YANG SISTEMATIS (STRUKTUR KONTROL)

Bagi anda yang awam tentang bahasa pemrograman, ketika anda membuka program Java, anda hanya akan menyadari  bahwa itu hanya  sebuah program yang sedang berjalan. Tapi, untuk para pecinta Java dan mengerti seluk beluknya,mereka tak akan berkata demikian.

Pada aplikasi Java terdapat sub kecil bagian, yang terdiri dari statement, class, package dan akhirnya ter-compile menjadi 1 file .jar

Pada posting kali ini, saya akan menjelaskan tentang statement-statement yang terkumpul menjadi kesatuan yang sistematis,. Penyusunan statement ini dilakukank agar project terstruktur dan terkontrol serta dapat dieksekusi dan berjalan tanpa adanya bug. Selain itu, penggunaan keyword perintah harus disertakan agar antar statement dapat saling terhubung.

Berikut adalah 2 macam struktur control yaitu, percabangan dan perulangan.

Sebelum kita mempelajari struktur kontrol diatas, ada baiknya kita mengenal dahulu apa yang dinamakan blok.

Blok adalah pernyataan sederhana yang pada awalnya juga terdiri dari pernyataan-pernyataan lain. Dalam penulisannya, blok ditulis dengan diawali tanda‘{‘ (kurung kurawal buka) dan diakhiri dengan tanda ‘}’ (kurung kurawal tutup). Tujuannya yaitu mengelompok-kelompokkan  pernyataan  menjadi perintah yang lebih sederhana agar mudah dimengerti.  Pernyataan blok lebih sering ditemukan dalam struktur kontrol, tapi pada dasarnya tidak selalu. Kenyataannya, blok bukanlah bagian dari struktur kontrol, sehingga dapat berdiri sendiri . Contoh yang paling sering ditemukannya pernyataan blok tanpa stuktur kontrol yaitu pada subrutin main().

(Gambar 1)

Selanjutnya, setelah kita tahu blok, kita akan mempelajari struktur kontrol. Struktur kontrol meliputi :

1.       Percabangan :

a.       If

Statement ini merupakan statement percabangan paling dasar. Langkah awal dari percabangan ini adalah menguji kondisi dari if itu sendiri. If akan menjalankan perintah pada baris setelah baris kondisi if (baik beberapa pernyataan yang ada dalam blok maupun hanya terdiri dari 1 pernyataan), jika dan hanya jika kondisi if bernilai benar (true). Tapi, apabila kondisi if bernilai salah (false), maka alur if menuju akhir dari blok kemudian melanjutkan pada baris-baris selanjutnya.

(Gambar 2)

b.      If-else

Statemen ini merupakan pengembangan dari percabangan if. Pada percabangan sebelumnya, if berdiri sendiri. Untuk percabangan ini, if mempunyai percabangan lain, yaitu else. Hal inilah yang memungkinkan komputer diperintahkan untuk memilih beberapa tindakan yang akan diambil, tergantung nilai dari kondisi percabangan tersebut.

If akan akan menjalankan perintah yang ada dalam bloknya dan else akan dilewati (tidak dieksekusi), apabila nilai if adalah benar (true). Begitu pula else, else ini akan menangani dan menjalankan statemen yang ada dalam bloknya apabila nilai dari if adalah salah (false).

(gambar 3)

c.       If-else if

Untuk statement ini, merupakan pengembangan lebih lanjut dari percabangan if dan else. Pada percabangan ini, anda diizinkan untuk menambahkan lebih banyak percabangan, sehingga akan menambahkan lebih banyak pilihan untuk dieksekusi, tergantung nilai dari if itu sendiri.

(gambar 4)

d.      Switch

Switch adalah salah satu percabangan yang jarang sekali digunakan,namun sangat dibutuhkan jika anda akan membuat percabangan dengan berbagai arah.

Parameter dari switch adalah sebagai berikut :

(gambar5)

Pernxataan switch ini akan mengindeks dan mencocokkan nilai dari ekspresi dengan nilai yang ada dalam daftar case. Jika switch tak menemukan nilai yang sama pada daftar case, secara otomatis switch akan membawanya ke pernyataan default. Apabila switch menemukan nilai yang sesuai, maka switch akan menjalankan perintah yang ada dibaris case tersebut termasuk perintah yang ada di daftar case setelahnya maupun pernyataan default.

2.       Perulangan :

a.       while

while adalah sebuah perulangan yang tidak akan berhenti menjalankan perintah dalam bloknya apabila dia tidak bernilai false.

Parameter while :

//inisialisasi nilai

while (kondisi){

perintah

}

Penjelasan lebih lanjut tentang while yaitu, while mempunyai kondisi yang sedang dijalankan. Kondisi dari while tersebut hanya mempunyai 2 nilai,true dan false. Ketika kondisi itu bernilai true, while akan menjalankan perintah yang ada dalam bloknya. Hal ini akan berjalan terus-menerus, bahkan mungkin akan tak terbatas hingga kondisi dapat bernilai false. Ketika itu pula while akan membawa  alur menuju akhir blok.

(gambar6)

b.      do-while

untuk mengerti perulangan do-while, mungkin algoritma ini dapat membantu anda.

Seorang programmer sedang merencanakan sebuah permainan. Di akhir permainan itu, permainan akan selalu menanyakan pada pemain, apakah pemain akan memainkan game itu lagi?

Di rinilah peran do-while dibutuhkah. Ketika ada sebuah pernyataan dalam perulangan do,pernyataan tersebut akan tetap dijalankan hingga tiba pada baris perulangan while. Pada perulangan while, disediakan disediakan sebuah kondisi. Setelah kondisi diuji, dan ternyata bernilai benar, maka alur tidak kembali pada baris while, melainkan kembali ke baris do. Siklus tersebut akan terus berulang hingga kondisi while bernilai salah.

(gambar7)

c.       for

Perulangan yang terakhir adalah perulangan for. Perulangan ini dibutuhkan apabila misalkan kita ingin menampilkan angka 1-10 secara berurutan atau dari angka 10-1.

Perulangan ini mempunyai sifat yang sangat mirip dengan perulangan while. Itulah mengapa tak heran jika disebut juga dengan transformasi dari while.

Parameter for adalah sebagai berikut.

for (inisialisai_variabel;kondisi_ variabel;perubahan_variabel){

perintah

}

Perlu diperhatikan, pendeklarasian perulangan for dan while mempunyai perbedaan walaupun mempunyai sifat yang relatif sama. Pada while,inisialisai nilai, pengujian kondisi dan perubahan variabel di ungkapkan pada baris yang berbeda. Sedangkan for, inisialisai nilai, pengujian kondisi dan perubahan variabel di ungkapkan dalam satu baris.

(gambar8)

Dari sini, anda sudah dapat membuat sebuah aplikasi sederhana dan interaktif.

MENDAPAT INPUTAN DARI KEYBOARD

Pada posting sebelumnya, telah kita bahas tentang pengenalan Java yang meliputi sejarah Java dan  jatuh bangun James Gosling serta teman-teman untuk membangun bahasa pemrograman ini. Kita juga telah mempelajari Operator Java beserta logika-logika yang digunakan.

Untuk saat ini, paling tidak anda telah mengenal dan mengetahui konsep dasar dari Java untuk membangun aplikasi sederhana (setidaknya anda mengerti tentang System.out.println() ). Aplikasi yang mempunyai variable yang dapat diinputkan oleh user. Inputan tersebut juga harus dicegah dari syntax error maupun runtime error.

Salah satu device yang menginputkan data adalah keyboard,  dan sekarang kita akan mempelajari tentang bagaimana membuat edit text field untuk menginput data dari keyboard.

Ada dua cara untuk memberikan input melalui keyboard.

1.       class BufferedReader

class ini mengizinkan user untuk menginput data melalui layar console. Layar console adalah sejumlah baris perintah beserta input yang mungkin berbeda diberikan dalam 1 jendela.

untuk membuat class BufferedReader, kita harus membuat dahulu package java.io untuk mendapatkan input dari keyboard.

Berikut adalah langkah-langkah agar kita dapat membuat input data console.

1)    Ketikkan code berikut di atas public class atau di bawah package anda untuk menambah class BufferedReader, InputStreamReader, dan IOException.

import java.io.BufferedReader;

import java.io.InputStreamReader;

import java.io.IOException

Tapi pada Java, ada istilah API (Application Programming Interface), dimana pada Java telah diberikan kemudahan untuk mendeklarasikan beberapa class yang saling berhubungan hanya dalam 1 package.

Secara umum dapat ditulis:

import java.io.package;

dalam hal ini kita memakai :

import java.io.*;

class tersebut telah mewakili class BufferedReader, InputStreamReader, dan IOException

2)    Tambahkan metode main dengan mengetik source :

Public static void main (String [] args ){

3)    Tambahkan statement berikut:

BufferedReader variable = new BufferedReader (new InputStreamReader (System.in));

Kode diatas menunjukkan bahwa kita mendeklarasikan sebuah variabel dengan tipe class BufferedReader.

4)    Ketikkan String data = ”” ;

Ini diperlukan untuk memanggil data yang di inputkan oleh user yang nantinya mungkin akan diproses lebih lanjut.

5)    Ketikkan System.out.println(”perintah kepada user untuk menginputkan data”).

Isikan perintah kepada user untuk menginputkan data dengan ungkapan yang anda inginkan agar user nanti menginputkan data untuk memenuhi data yang akan diproses selanjutnya.

6)    Selanjutnya penangkapan sebuah error apabila data yang diinputkan bukan termasuk data yang diinginkan. Tuliskan source berikut :

try {

  data = variabel.readLine();

}

catch (IOException e) {

System.out.println(”pernyataan error”);

}

pada perintah try, perintah ini berguna untuk mencoba mengeksekusi perintah di baris bawahnya dan akan ditanggkap oleh catch apabila terjadi error.

.readLine()digunakan untuk mendapatkan input dari user dan disimpan pada variabel class BufferedReader dan akan dipanggil oleh data.

7)    Selanjutnya  System.out.println(”menampilkan hasil”);

Untuk menampilkan hasil yang diinginkan.

2.       JoptionPane

class ini digunakan untuk menyimpan/menampilkan data yang diinputkan oleh user melalui GUI (Graphic User Interface). Penggunaan class ini sangatlah interaktif, karena didukung oleh munculnya jendela baru untuk perintah yang baru.

Langkah –langkah membuat JoptionPane

1)      Ketikkan code berikut di atas public class atau di bawah package anda untuk menambah class JoptionPane

import javax.swing.JOptionPane;

sepertihalnya BufferedReader, pada JOptionPane terdapat kumpulan class yang saling terkait yang telah dipaketkan dan dideklarasikan secara bersamaan. Perintahnya adalah,

import javax.swing.package;

atau

import javax.swing.*;

2)      Tambahkan metode main dengan mengetik source :

Public static void main (String [] args ){

3)      Tambahkan String data = ”” ;

Mempunyai fungsi yang sama dengan BufferedReader.

4)      data = JoptionPane.showInputDialog(perintah untuk user agar menginputkan data);

5)      Terakhir, ketikkan JOptionPane.showMessageDialog(null, ”.....”+data);

Baris ini digunakan untuk menghasilkan output dengan memanggil variabel data.

Setelah anda mengerti cobalah untuk membuat aplikasi yang melibatkan user untuk memasukkan data melalui keyboard.
Kombinasikan aplikasi anda dengan beberapa Operasi dan gabungan-gabungannya.