0 Membuat Tombol Dengan Efek Berkilau CSS3

Banyaknya efek yang bisa di ciptakan dengan kode CSS3 keliatannya semakin mempermudah para web designer di seluruh dunia saat ini. Selain bisa membuat tampilan real atau nyata, penggunaan kode CSS3 juga membuat loading page sebuah situs jauh lebih ringan karena gx perlu ditambah embel” image macem” lagi.
Diantara banyaknya efek” keren tersebut,kali ini gw bakalan bagi sedikit cara aja buat bikin tombol/button dengan efek kilau.Tadinya sih,gw pikir gx perlu.. tapi berhubung gw liat beberapa tutorial di luar sana agak susah di pahami alias setengah” dalam ngasih tutorial.Gw rasa sih gx perlu sampe sebutin nama situs nya deh, tapi yg jelas,tutorial” tersebut gx ngajarin cara masang tombol/button ini ke dalam kode HTML blog.Bahkan yg di ajarin cuma cara bikin tombol satuan alias bukan dalam bentuk navigation bar ( Navbar ).
Alhasil,gw pun ngotak-atik sendiri deh buat bikin navbarnya.

Nah,buat bikin navbar dengan efek berkilau kyk gambar di atas,caranya gx rumit” banget koq sebenarnya.Cukup ikuti langkah” berikut ini.
1. Login dulu ke account blogger sobat, kemudian ke Tab EDIT HTML. (jangan lupa backup dulu template nya dengan meng-klik link Download Template Lengkap)
2. Cari kode ]]></b:skin> dan taruh kode di bawah ini sebelum kode tersebut.

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.biru {
text-align:center;
background:-moz-linear-gradient(top, #005aff, #8bcdff);
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #005aff;
}
.kilau {
background:#fff;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

3. Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut.

<div id="bgmenu">
<ul id="menu">
<li><div class="kilau"><div class="kilau"></div><div class="text">
<a href="#">Menu 1</a></div></div></li>
<li><div class="kilau"><div class="kilau"></div><div class="text">
<a href="#">Menu 2</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 3</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 4</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 5</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 6</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="#">Menu 7</a></div></div></li>
</ul></div>

4.  Sobat tinggal mengganti tanda berwarna merah “#" dengan URL link tujuan, dan mengganti tulisan berwarna hijau “Menu 1-7” dengan judul dari link tersebut. Contoh:

<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="http://anggaleoputra.blogspot.com">InfoGaul</a></div></div></li>
<li><div class="biru"><div class="kilau"></div><div class="text">
<a href="http://anggaleoputra.blogspot.com/search/label/Templates”>
Free Template</a></div>
</div></li>

5. Lihat dulu previewnya, klo udah mantep , langsung save aja sob.. ^^.
See u..

16 Cara Membuat Navbar Dengan Code HTML CSS 3

Membuat Navigasi Menu Cantik Dengan CSS3

Menindak lanjuti posting sebelumnya,kali ini kita akan ngebahas tentang cara membuat nvabar menu dengan code HTML CSS 3.
Sebelum mulai proses memasukkan code ke template blog sobat,untuk lebih mudah nya,download dulu file Code CSS,Code HTML dan Preview Panduan nya disini.
Udah…?,sobat sekarang punya 3 file yg telah di download tadi kan? Yaitu file:

Code CSS.TXT
Code HTML.TXT
Preview.HTM

Nah,berhubung semua udah lengkap,sekarang kita lanjut ke tahap pemasangannya.
1. Login ke account blog sobat.
2. Pilih EDIT HTML (Jangan lupa klik Download Template Lengkap untuk berjaga” apabila ada kesalahan dalam mengedit nantinya)

3. Cari kode:

]]></b:skin>

Kemudian letakkan kode yg terdapat di file Code CSS.TXT tepat diatas kode tersebut.
4. Cari kode:

<div id='content-wrapper'>

Kemudian letakkan kode yg terdapat di file Code HTML.TXT tepat diatas kode tersebut.
5. Selesai deh pemasangannya.
Untuk mengedit nya agar sesuai dengan keinginan sobat,gw udah sediain file Preview.htm supaya sobat bisa ngeliat tampilan navbar ini.
Untuk menghapus/mengedit link-link pada navbar ini,coba perhatikan terlebih dahulu kode di bawah ini… 
 

 <li class="current"><a href="http://Namablog.blogspot.com">Home</a></li>

Contoh:
1. Sobat ingin mengganti Home dengan link menuju blog ini… maka kode HTML yang perlu sobat ganti di blog sobat adalah:
http://namablog.blogspot.com di ganti menjadi http://anggaleoputra.blogspot.com.
Sedangkan judul link Home di ganti menjadi InfoGaul.
2. Sobat ingin menghapus Link1-1 , maka sobat tinggal menghapus kode dibawah ini.

<li><a href="LINKTUJUAN">Link1-1</a></li> 

Kalo ada yg bingung en mw nambahin ataupun ngasih saran,di tunggu commentnya yach..
Thx ^^

5 Horizontal Menu Rounded Version

Menjawab request dari beberapa sobat blogger,kali ini kita akan membahas mengenai cara membuat navigasi rounded yang dapat anda lihat pada bawah header blog ini.Berhubung dalam template asli blog ini,saya menggunakan google adsense search sebagai search engine.. Maka untuk berjaga-jaga bila ada sobat-sobat yang tidak mempunyai account google adsense,menu search pada navigasi yang akan saya bagikan kali ini telah saya modifikasi sedikit agar bisa di pakai oleh semua sobat-sobat blogger.Berikut adalah tampilan hasil modifikasi tersebut.

 
Ingin mencoba membuatnya di blog anda ?,Sok atuh.. di lanjutin bacanya
1. Login terlebih dahulu ke account blogger anda.
2. Pilih TATA LETAK –> EDIT HTML.
(Simpan dulu template anda dengan cara mengklik link Download template lengkap.Untuk Berjaga-jaga apabila terjadi kesalahan dalam pemasangan script)
3. Tambahkan kode di bawah ini diatas kode #outer-wrapper {

#NavbarMenu {
    background: #ffffff ;
    width: 680px; /*samakan kode ini dgn lebar outer wrapper anda*/
    height: 35px;
    font-size: 13px;
    font-family: Arial, Tahoma, Verdana;
    color: #fff;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}
#NavbarMenuleft {
    width: 400px; /*Lebar menu sebelah kiri*/
    float: left;
    margin-top: 3px;
    padding: 0;
}
#NavbarMenuright {
    background:#ff7604 url(http://Alamat link background);
    width: 260px; /*lebar menu search sebelah kanan*/
    font-size: 11px;
    float: right;
    margin: 0px;
    padding-left: 3px;
        padding-right: 0px;
        padding-top: 3px;
        padding-bottom: 3px;
        border:2px solid #ffffff;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav {
    margin: 0;
    padding: 0;
}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
        background: #ff7604 url(http://Alamat link background);
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-family: trebuchet ms, Times New Roman;
    font-weight: bold;
    text-transform: none;
    margin: 0;
        padding-top:6px;
        padding-bottom:5px;
        padding-left:13px;
        padding-right:13px;
        border: 2px solid #ffffff;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active {
    background: #ff7604 url(http://Alamat link hover background);
    color: #ffffff;
    margin: 0;
    padding-top:6px;
        padding-bottom:5px;
        padding-left:13px;
        padding-right:13px;
    text-decoration: none;
        -moz-border-radius-topleft:15px;
        -moz-border-radius-topright:15px;
        -moz-border-radius-bottomleft:15px;
        -moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ff7604 url(http://Alamat link background);
    width: 150px;
    color: #ffffff;
    font-size: 14px;
    font-family: trebuchet ms, Times New Roman;
    font-weight: normal;
    text-transform: none;
    float: none;
    margin: 0;
    padding: 7px 10px;
        border: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
    background: #ff7604 url(http://Alamat link hover background);
    color: #ffffff;
    padding: 7px 10px;
}
#nav li {
    float: left;
    padding: 0;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#nav li ul a {
    width: 140px;
}
#nav li ul ul {
    margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}
#searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
}
#searchbox {
    background: #ffffff !important;
    width: 210px; /*Lebar kolom search*/
    color: #202020;
    font-size: 12px;
    font-family: Trebuchet MS;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 3px 5px;
    border: 2px solid #c0c0c0;
    display: inline;
        -moz-border-radius-topleft: 21px;
        -moz-border-radius-topright: 21px;
        -moz-border-radius-bottomleft: 21px;
        -moz-border-radius-bottomright: 21px;
}
#searchbutton {
        cursor: pointer;
    background: #ffffff;
    color: #FF8000;
    font-size: 11px;
    font-family: Trebuchet MS;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border: 2px solid #c0c0c0;
        -moz-border-radius-topleft: 18px;
        -moz-border-radius-topright: 18px;
        -moz-border-radius-bottomleft: 18px;
        -moz-border-radius-bottomright: 18px;
}

Nb: Anda dapat mengganti text “http://Alamat link background” dengan Link gambar anda sendiri.Atau dengan beberapa alternatif warna dari saya.

Warna biru :
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-3.png

Warna orange :
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-orange-ok.png

Warna hijau:
http://i730.photobucket.com/albums/ww306/gozhilaq/Navbar-hijau.png
Kemudian jangan lupa untuk mengganti text “http://Alamat link hover background” dengan link gambar anda sendiri.Atau dengan warna yang telah saya siapkan.*Hover background adalah perubahan warna background saat menu di sorot oleh mouse*

Hover untuk warna biru:
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-hover.png

Hover untuk warna orange:
http://i730.photobucket.com/albums/ww306/gozhilaq/navbar-orange-hover-ok.png

Hover untuk warna hijau:
http://i730.photobucket.com/albums/ww306/gozhilaq/Navbar-hijau-hover.png
4. carilah kode :

<div id='content-wrapper'>

5. Letakkan kode di bawah ini tepat diatas kode tersebut..

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>
    <div id='NavbarMenuright'>
      &lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
    </div>
  </div>

6. Selesai deh.. sekarang anda tinggal mengganti text ‘#’ dengan ‘Alamat link yang anda ingin pasang’.
7. Selanjutnya,ganti text berwarna hijau dengan judul dari link anda tersebut.
contoh:

<li><a href=’http://anggaleoputra.blogspot.com>Info Gaul</a></li>

8. Akhir kata,selamat berkreasi dengan menu ini.. Happy Blogging

12 Membuat Navigasi Menu Di Bawah Header (2)

Kembali lagi ke topik tutorial blog,kali ini kita akan belajar cara membuat menu navbar seperti yang terlihat pada gambar di atas.. dimana kegunaan dari navbar ( Navigation Bar ) ini adalah untuk membantu pengunjung melakukan akses jalan pintas langsung menuju ke sebuah kategori dalam blog kita.Berikut adalah step-stepnya..

1. Sign in ke account blog anda,kemudian pilih TATA LETAK –> EDIT HTML


NB: Backup dulu template anda untuk mencegah hal-hal yang tak diinginkan nantinya..

2. Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}

3. Kemudian masukkan kode dibawah ini diatas kode <div id='content-wrapper'>

<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>

<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>
<li><a href='URL-Link-Tujuan8'><b>Judul-Tujuan8</b></a></li>
</ul>

-Ganti kode berwarna Orange dengan URL Alamat Link Tujuan Anda.
-Ganti kode berwarna Merah dengan Judul Dari Link Tujuan Anda.
Info GauL

Simpan pekerjaan anda ( Simpan template ).. Lalu lihatlah hasil akhirnya.

Contoh Navbar ini bisa dilihat disini

Bagaimana? sudah tampil ? kalau sudah,selesai deh... ^^

InFo GauL

12 Cara Membuat Menu Navbar Horizontal

Menanggapi pertanyaan dari salah seorang teman tentang menu navbar horizontal ini,gue mau kasih tau cara nya melalui posting kali ini... ( To:Someone.. Maaf yah bro,ga lewat email tips nya ini,itung-itung biar yang lain juga bisa baca juga^^).Cara paling mudah untuk membuatnya,setau gue yah seperti ini nih..

Untuk membuat tampilan seperti yang di atas,pertama-tama anda harus menambahkan sebuah elemen baru di persis di bawah header.Jadi,yang blog-nya belum punya elemen baru tsb (dah kayak maen game online aja hehehe..),baca cara membuatnya di postingan sebelumnya disini..

1. Login dulu ke blogspot com.Lalu ke TATA LETAK --> EDIT HTML.

2. Kemudian masukkan kode di bawah ini di atas kode <body> :

<style type="'text/css'"> .h_mnu_01{ width: 100%; font-family: sans-serif; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none; } .h_mnu_01 ul{ margin: 0; padding: 0; float: left; width: 100%; background: #FFFFFF; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: #0080FF; border-left-style: #0080FF; border-top-color: #0080FF; border-right-color: #0080FF; border-bottom-color: #0080FF; border-left-color: #0080FF; } .h_mnu_01 ul li{ display: inline; } .h_mnu_01 ul li a{ float: left; color: #8000FF; padding: 4px 11px; text-decoration: none; border-right-width: 1px; border-right-style: solid; border-right-color: #808080; } .h_mnu_01 ul li a:visited{ color: #FF0000; } .h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{ color: #FFFFFF !important; padding-top: 4px; padding-bottom: 5px; background: #3333FF; } </style>

--> Float adalah posisi navbar tsb.jika anda menginginkan link-link dalam navbar tsb berurut dari kanan,anda tinggal merubah left menjadi right.atau center bila anda ingin dari tengah.

--> Color adalah warna dari menu tsb.jika anda ingin mengganti warna tsb,anda tinggal mengganti kode nya sesuai dengan keinginan anda.Jika bingung dengan kode-kode html warna,sobat dapat melihatnya di postingan saya terdahulu disini

--> Dalam kode di atas,saya memberikan contoh yang persis dengan yang saya miliki.jadi background menu tsb warna-nya putih.Rubah sesuai dengan background blog anda yach...

--> Anda tinggal memodifikasi nya sehingga lebih menarik dari kepunyaan saya..^^

3. Sudah?next step.. Lalu simpan hasil kerja anda tersebut.

4. Selanjutnya anda masuk ke Elemen Halaman.

5. Klik Tambahkan elemen/add gadget di bagian bawah header.Pilih gadget HTML/JAVASCRIPT.

6. Masukkan kode dibawah ini ke dalam halaman yang muncul tersebut.

<center><div class="h_mnu_01"><br /> <ul><li><a href="http://MasukkanLinkURLyangAndaInginkanDisini">Judul-Link</a></li> <li><a href="http://MasukkanLinkURLyangAndaInginkanDisini">Judul-link</a></li> <li><a href="http://MasukkanLinkURLyangAndaInginkanDisini">Judul-link</a></li> </ul><br /> </div></center>

--> Anda tinggal mengganti tulisan "MasukkanLinkURLyangAndaInginkanDisini" dengan link yang ingin anda tuju
--> Anda tinggal mengganti tulisan "Judul-Link" dengan judul dari link tsb.cthnya:
<li><a href="http://Anggaleoputra.blogspot.com">koleksi pengetahuan</a></li>

7. Terakhir,anda tambahkan link anda sendiri yah.. Jumlahnya terserah anda.kalau contoh saya diatas kan hanya 3 link.. ^^ tinggal di tambahkan saja koq codenya..

8. Simpan hasil Kerja anda,dan lihat hasilnya...

9. Sudah mantap dengan tampilanya?kalau belum,Percantik saja lagi dengan kreasi anda... coz punya gue jelek warnanya..^^

See u..

Update :
- Navbar menu horizontal - Rounded Version
- Navbar menu horizontal - CSS 3