Cara Membuat Menu Horisontal

Selamat bertemu kembali. Posting kali ini merupakan pembahasan yang sebenarnya sudah tidah baru lagi. Tapi untuk lebih memahaminya, saya mencoba untuk mempostingnya kembali......

Langsung saja ke pokok bahasannya. Menu horizontal. Menu ini adalah menu mendatar dan bertingkat ke bawah. Lihat aja contohnya di bagian menu blog ini. Kalau masih ada yang belum paham, silahkan baca tulisan ini sampai akhir.

  1. Langkah pertama yang haru dilakukan adalah. Login ke blog Anda seperti biasa.
  2. Klik Rancangan kemudian Edit HTML.
  3. Jangan lupa download dulu template Anda untuk menjaga kemungkinan gagal.
  4. Centang Expand Template Widget.
  5. Letakkan kode berikut di atas ]]></b:skin>. Untuk memudahkan mencari kodenya, tekan control F.

    #menublog {
    width:919px;
    float:left;
    margin:0;
    padding: 10px;
    background: aqua;
    }
    #menu {
    margin:0;
    padding:0;
    }
    #menu a {
    font-family: Comic Sans MS;
    color: black;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    padding: 10px;
    }
    #menu a:hover {
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    background: black;
    }
  6. Selanjutnya, cari kode berikut:

    <div id='header'>
    ...............
    ...............
    </div>
  7. Kemudian letakkan kode berikut di bawah kode tadi.

    <div id="menublog">
    <div id="menu">
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Halaman Utama Anak Pesisir">Home</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Template Galeri">Template Galeri</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Belajar">Belajar</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Profil">Profil</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Kontak">Kontak</a>
    </div>
    </div>
  8. Silahkan ganti tulisan berwarna hijau sesuai dengan selera dan ukuran blog Anda. Untuk kesesuaian selera, silahkan ubah jenis huruf, ukuran huruf dan lainnya. Okey!
  9. Langkah terakhir adalah Save Template. Selesai

Terima kasih. Selamat belajar. Jangan lupa komentarnya ya.......!!!!
Baca Lengkap....

Damai Dalam Sukmaku


Bantimurung,
Kelak kisah ini jadi puncak
Di antara kebahagiaan kita
Tersenyum
Tertawa
Hanya kau dan aku di sana
Telah kuberikan indahnya padamu
Yang kau mau
Yang kau impikan
Yang lahir dari hatimu

Melihatmu tertawa dan bahagia
Adalah semangat dan tanda kasih untukku
Yang terindah
Kau hati
Seperti damai yang menyusup ke dalam relung sukmaku
Antarkanku pada satu waktu yang tak terlupa
Beribu kesan
Kaulah satu untukku
Di dalam sanubari
Pada semua sisi hatiku
Hanya namamu

Makassar, 2 Februari 2011
Baca Lengkap....

Satu Di Hatiku

Persembahan lagu untuk seseorang

Cipt: Ian Konjo
Intro: G C D (3x) G
G C G
Engkau satu di hatiku
G C D
Tak kan pernah terganti
G C D
Kau terangi hariku
G C D
Dengan cerita tulusmu

Intro: G C D (2x) G
G C D
Kuberjanji padamu
G C D
Kan slalu bersamamu
G C D
Moga esok kan abadi
G C D
Cerita cinta ini

Reff: C D G D/F# Em
Jangan pernah kau ragu....ho.......wo...oo
C D
Cinta ini untukmu selalu
C D G D/F# Em
Meski bumi ini terhen........ti
C D G
Aku akan tetap ada untukmu


Baca Lengkap....

Lebur Jadi Abu

Semalam, tatkala jarum jam menunjuk angka dua belas
Tibalah waktu dimana usia kian menua

Masih dengan senyuman yang rekah di bibirmu
Meleburkan segala resah dan penat
Menghalau hingga raib bersama malam
Yang terbunuh sang fajar pagi tadi
Semoga saja tetap seperti itu

Saat binar matamu berkaca,
Mengenang satu masa hidup yang naas
Bergegaslah, hempaskan pada batu karang
Tumpahkan pada samudera
Lalu biarkan terbawa arus hingga memuara


Makassar, Oktober 2010
Baca Lengkap....

Antologi Puisi & Cerpen

Buku antologi Puisi & Cerpen "Enam Mata Badik". Hasil karya dari sebuah keresahan dan kegelisahan yang ada.


Tunggu ya!!!!
Baca Lengkap....

Menu Tab View Tanpa Edit HTML 2

Selamat Bertemu Kembali!!! Postingan ini adalah update dari postingan saya sebelumnya. Postingan ini saya buat karena style menu tab view sebelumnya, terkesang sangat sederhana dan itu-itu saja. Jadi, saya membuat dua style baru yang. Langkahnya sudah tau kan? Kalau belum, gampang kok. tidak terlalu susah. Oke, kita mulai saja.

Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.

  • Copy kode berikut untuk Menu Tab View dengan border yang melengkung.


    Hasilnya seperti gambar di bawah.

  • Copy kode berikut untuk Menu Tab View biasa.




    • Hasilnya akan seperti ini.
    Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.


Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.
Baca Lengkap....

Membuat Menu Tab View tanpa Edit HTML

Para blogger mungkin sudah pernah mencoba membuat tab view menu atau menu dengan tab (lihat gambar di atas) yang tentu saja dalam pembuatan tab view menunya kita harus mengedit HTML template. Bagi yang belum dan ingin mencobanya, tidak perlu takut. Tulisan kali ini akan membahas cara membuat tab view menu tanpa mengedit kode HTML template.

Caranya sangatlah gampang, tidak perlu susah-susah. Sobat blogger tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.
Silahkan login ke Blogger, pilih RANCANGAN, kemudian pada Elemen Halaman, klik Tambah Gadget. Silahkan pilih HTML/Javascript. Copy paste kode di bawah ini ke dalamnya:

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Tulisan warna kuning adalah judul dari menu Anda, sedangkan tulisan warna merah adalah isi dari menunya. Untuk lebar, huruf (font), dan tingginya, silahkan sesuaikan dengan lebar sidebar blog Anda. Hasilnya bisa Anda lihat di sini!

Kalau belum jelas, silahkan berkomentar. Ditunggu ya???
Selamat Belajar!!!
Baca Lengkap....

Mengenal Kode HTML

Bagi teman-teman yang baru belajar dan ingin tahu tentang kode-kode HTML, silahkan pelajari kode-kode dasar berikut.

HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa dari World Wide Web (WWW) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser

Tag-tag dasar HTML:
<html>           : Definisi sebuah dokumen HTML
<title>            : Definisi judul dalam dokumen
<body>          : Definisi body dokumen
<h1> - <h6>  : Definisi heading 1 s/d 6
<p>                : Definisi sebuah paragraf
<br>               : Sisipan line break
<!-- >             : Definisi kompentar dalam source code

Tag-tag pemformatan:
<b>         : Teks yang ditebalkan
<big>       : Teks dengan ukuran yang besar
<em>       : Teks yang diberi tekanan
<i>           : Teks yang dimiringkan
<small>    : Teks yang kecil ukurannya
<strong>  : Teks yang ditebalkan
<sub>      : Subscipt
<sup>      : Superscript
<ins>        : Teks yang disisipkan
<del>       : Teks yang dihapus
<u>          : Teks yang diberi garis bawah

Tag-tag Link dan List:
<a>       : Definisi untuk ancor
<link>    : untuk warna text sebelum diklik
<vlink>  : untuk mengubah warna text link setelah diklik
<alink>  : akan mengubah warna link aktif
<ol>      : Ordered list / untuk penomoran
<ul>      : Unordered List / bullet
<li>       : List item
<dl>      : Definition term
<dd>     : Definition description

Karakter khusus dalam file HTML :
& quot ;   ( " ) 
& amp ;   ( & ) 
& frasl ;    ( ⁄ ) 
& lt ;         ( < )
& gt ;        ( > ) 
& nbsp ;    ( spasi )
& copy ;    ( © )

Selamat belajar dan sukses selalu!!!
Baca Lengkap....
Langganan: Postingan (Atom)