Tampilkan postingan dengan label Menu Navigasi. Tampilkan semua postingan
Tampilkan postingan dengan label Menu Navigasi. Tampilkan semua postingan

Senin, 14 Maret 2011

Membuat Menu Dtree

Hai sobat blogger? apa kabar?. Setelah sekian lama saya tidak memberikan tips, kali ini saya akan memberikan anda tips yang menyangkut dengan tips untuk membuat barisan Menu. Setelah sebelumnya saya sudah memberikan tips yang hampir sama dengan tips ini, yaitu:
1. Jquery Multilevel Menu Nagigasi
2. Menu Navigasi Green Library
3. Membuat Menu Navigasi Horizontal
4. Atau lihat DISINI.
Nah judul pembahasan kita kali ini adalah cara membuat menu Dtree. Mungkin sobat blogger masih ada yang belum mengerti apa itu menu Dtree. Oke sekarang saya ingin memberikan sedikit penjelasan tentang menu Dtree. Menu Dtree adalah menu yang memiliki struktur seperti pohon, yang punya cabang-cabang. Seperti Kalau misalnya kitamembuka windows Explorer.
Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Oke dengan penjelasan yang kurang jelas ini, sobat blogger dapat mengerti yah?. Untuk lebih jelasnya, ikuti langkah-langkah berikut



1. Login ke blogger dengan Akun anda.
2. Pilih Rancangan pada dasbor blog anda.
3. Kemyudian pilih Edit HTML
4. Cari kode seperti ini <head> dan letakkan kode berikut di atas kode tersebut
<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" /> <script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>
5. Terus Simpan Template
6. Setelah itu, silahkan anda pilih Elemen Laman
7. Pilih Tambah Gadget
8. Pilih lagi HTML/Javasript
9. Letakkan kode berikut ini dalam kotak scriptnya.
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

Hal yang harus dilakukan:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).

- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash.gif’);
ganti kode yang berwarna merah di atas dengan ikon yang  akan anda gunakan.
10. Kemudian Save.
Selesai. Semoga bermanfaat.

Kamis, 24 Februari 2011

Jquery MultiLevel Menu Navigasi

Begitu banyak model dari menu navigasi ini. Sampai-sampai kita bingung untuk membuatnya dalam blog. tetapi itu semua tergantung sobat blogger. Yang manapun anda coba, pasti itulah yang terbaik untuk anda.
Masih dalam membuat menu navigasi,saya sebelumnya sudah pernah memberikan tips yang berhubungan dalam menu navigasi. Untuk membacanya, silahkan BACA DISINI.
Sobat blogger, untuk tampilan dari menu ini lebih canggih dari yang sebelumnya. Dimana menu ini mempunyai cabang hingga tak terhingga, menurut keinginan kita.
Oke jika sobat ingin membuatnya dalam blog, silahkan ikuti tips ini sampai selesai, jangan tanggung-tanggung.
Berikut langkah-langkah dari membuat  menu multilevel ini.



1. Login ke blogger dengan akun anda
2. Pilih Rancangan
3. pilih Edit HTML
4. Cari kode <head> dan letakkan kode berikutdi bawah kode <head>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
5. Lalu letakkan kode css berikut di atas kode ]]></b:skin>
.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Kode tersebut adalah tampilan dari menu navigasi anda. Silahkan anda edit sesuai kebutuhan anda.

6. Nah sekarang kita menuju kebawah untuk menemukan kode seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>
Pastikan kode yang kita temukan seperti kode yang berwarna Biru. Karena kode yang berwarna hitam berbeda-beda setiap template.

7. Lalu letakkan kode berikut di bawah kode yang tadi
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
8. Kalau sudah, silahkan Simpan Template.

Pekerjaan belum selesai, sekarang kita menuju Elemen Laman.
Terlihat pada "Elemen Laman" muncul tempat gadget baru, lalu klik aja "Tambah Gadget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>
Nah kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.
Jika sudah selesai, silahkan anda SAVE.

semoga bermanfaat

Rabu, 23 Februari 2011

Membuat Menu Navigasi "Green Library"

Berhubung saya baru memberikan tips tentang menu navigasi, jadi saya ingin memberikan tips lagi nih buat sobat blogger cara untuk membuat menu navigasi "Green Library". Bentuk menunya ini secara vertikal dengan background warna hijau.



Untuk membuatnya, silahkan teman-teman ikuti langkah berikut. Tidak jauh berbeda ko dari cara-cara sebelumnya.



Langkah Pertama
1. Login ke blogger dengan akun anda sendiri
2. Pada Dasbor, pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode Script berikut tepat diatas kode ]]></b:skin>
/* vertikal menu hijau di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#menu-hijau{

border-bottom-width: 0;
}

#menu-hijau ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */
}

#menu-hijau a{
display: block;
padding: 3px 0;
padding-left: 9px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: white; /*warna hurup */
background-color: #28952D; /*warna background */
border-bottom: 1px solid #B6EDB9; /*warna border bawah */
border-left: 7px solid #245926; /*warna border samping kiri */
border-right:1px solid #000000; /*warna border samping kanan */
}

#menu-hijau a:hover {
background-color: #3BC642; /*warna background */
border-left-color: #357838;
}

#menu-hijau div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

Jika anda ingin mengeditnya, silahkan saja. Secukupnya.
6. Kemudian anda Simpan Template.

Langkah Kedua
1. Pilih Elemen Laman
2. Pilih Tambah Gadget
3. Sekarang Pilih HTML/JavaScript
4. Kopi Paste kode script Berikut
<!-- silahkan ganti dengan link milik sobat -->

<div id="menu-hijau">
<div class="menutitle">CSS Lybrary</div><!-- judul menu pertama di sini -->
<ul>
<a href="http://css-lybrary.blogspot.com">Home</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html">Blue menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html">Blue menu 2</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html">Double Line Menu</a>
<a href="http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html">Flip menu</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>

<div class="menutitle">Unique Template</div><!-- judul menu kedua di sini -->
<ul>
<a href="http://template-unik.blogspot.com/2007/07/white-minima-3-column.html">Minima 3 column</a>
<a href="http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html">Minima 3 column (beta)</a>
<a href="http://template-unik.blogspot.com/2007/07/1st-template-unik.html">1st template unik</a>
<a href="http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html">Scribe 3 column</a>
<a href="http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html">Blu Lover</a>
<a href="http://template-unik.blogspot.com/2007/08/gray-lover-template.html">Gray Lover</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>

<div class="menutitle">Blog Tutorial</div><!-- judul menu ketiga di sini -->
<a href="http://kolom-tutorial.blogspot.com/2007/09/buat-daftar-isi-blog.html">Buat daftar isi</a>
<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-buku-tamu-di-sidebar.html">Pasang buku tamu</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-kode-tuker-link.html">Kode tuker link</a>
<a href="http://kolom-tutorial.blogspot.com/2007/07/pasang-jadwal-sholat.html" style="border-bottom-color: black">Jadwal sholat</a>

</div> <!-- div penutup menu hijau -->
Silahkan anda ganti link dengan Link yang akan anda tuju.Coba anda perhatikan tulisan yang berwarna-warni di atas.

Jangan Lupa diSave yah...

Cara Lain Membuat Menu Navigasi Horizontal

Selamat sukses sobat blogger. Gimana kabar kalian semua?. Sehat-sehat saja kan?. (Banyak pertanyaan atuh kang.....). Haaaahaa...iseng yah. Biasa teman-teman saya lagi happy hari ini. Kenapa? soalnya saya ingin memberikan tips lagi nih buat sobat blogger. Sebelumnya saya sudah memberikan tips yang mirip seperti ini.
Jika sobat blogger berminat, Baca Artikel saya DISINI. Anda akan mendapatkan tips untuk membuat menu navigasi di sana.
Oke sobat blogger, kita tidak usah berpanjang lebar lagi ceritanya. Langsung saja kita ke pokok permasalahan. Membuat navigasi horizontal ini merupakan tips blogger yang paling gampang. kita akan membuat barisan menu pada bagian atas blog kita yang dapat mempermudah pengunjung untuk mencari yang mereka mau dalam blog kita. Jika blog sobat belum mempunyai menu navigasi Horizontal, sok atuh ikuti langkah-langkah berikut. Tetapi jika sudah gak apa-apa, tetapi jika ingin menggantinya silahkan saja.



Cara membuat menu navigasi horizontal.
1. Login dengan Akun anda sendiri
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode ini ]]></b:skin> (biar mudah tekan aja Ctrl+F atau tekan F3 pada keyboard)

/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
 Silahkan lakukan pengeditan, sesuai dengan template blog anda.
5. Anda bergerak menuju bagian bawah, Temukan kode seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
6. Kopi Paste kode script berikut ini tepat di bawah kode tadi
<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://kelolablog.blogspot.com/'>home</a></li>
<li><a href='http://kelolablog.blogspot.com/'>My Notes</a></li>
<li><a href='http://kelolablog.blogspot.com/'>Free Template</a></li>
<li><a href='http://kelolablog.blogspot.com/'>Electronic Rubric </a></li>

</ul>
</div>
</div>

<div id='navright'>

<form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

</div>

</div><!-- akhir bg_nav -->
Kemudian Silahkan anda ganti tulisan http://kelolablog.blogspot.com/ dengan alamat URL yang akan dituju.
Gati tulisan AlamatBlogAnda dengan Alamat Blog Anda.
7. Setelah selesai Simpan Template.

Senin, 21 Februari 2011

Cara Lain Membua Menu Navigasi Horizontal

Menu navigasi Horizontal, merupakan barisan menu-menu yang terdapat pada blog yang tersusun secara horizontal/mendatar. Sebelumnya saya sudah memberikan artikel mengenau MENU NAVIGASI.Jika sobat merasa tips ini kurang baik, silahkan kunjungi artikel saya tersebeut.
Langsung saja ke langkah-langkahnya yah!

1. Login ke blogger dengan Akun anda
2. Pilih Rancangan
3. Kemudian Pilih Edit HTML
4. Cari kode ini ]]></b:skin>
5. Letakkan kode script berikut tepat diatas kode ]]></b:skin>

#navigation {
list-style: none;
background: #b60002;
overflow: hidden;
width: 922px;
}
#navigation li {
float: left;
border-right: solid 1px #ca0002;
height: 35px;
}
#navigation li a:link, #navigation li a:visited {
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 9px 0 9px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover {
background: #990000;
color: #fff;
list-style: none;
}
#navigation li.first {
border-left: solid 1px #ca0002;
}
Silahkan anda edit sendiri Menu Navigasi Anda.
6. Kemudian silahkan Simpan Template anda
7. Kemudian anda beralih ke pada Elemen Laman
8. Pilih Tambah Gadget
9. Kemudian Pilih HTML/JavaScript
10. Letakkan kode script ini
<ul id="navigation">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">NewsPulse</a></li>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Justice</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Living</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Opinion</a></li>
<li><a href="#">iReport</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Sports</a></li>
</ul>
Silahkan anda, edit sendiri. Jika anda tidak mengerti silahkan tinggalkan pertanyaan anda di kotak komentar.
Terima kasih.
Biasanya, gadgetnya itu ditempatkan di bawah sidebar blog. Jika blog anda tidak mempunyai sidebar tunggu artikel dari saya selanjutnya.
11. Kemudian Save

Selamat Mencoba

Rabu, 16 Februari 2011

Cara Membuat Tab View Widget Pada Sidebar

Tab view adalah cara untuk menghemat sidebar kita dari tampilan sedibar yang banyak memakan tempat. Tips ini telah banyak dilakukan oleh orang-orang untuk memperindah blognya, termasuk blog ini. Untuk lebih jelasnya anda juga dapat membaca artikel saya yang ini
Cara Membuat Menu Tab View pada Blog
Nah kalau sudah membaca artikel saya yang diatas, pasti sobat blogger sudah mengerti apa itu Menu Tab View. Pada artikel saya yang pertama itu beda tampilan tab Viewnya, kalau yang ini bisa teman lihat setelah anda memasanganya pada blog anda.
Oke langsung saja, kita ke langkah-langkah untuk membuatnya.


1. Pertama sekali Login dulu ke blogger.com
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Letakkan kode berikut diatas kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}
Tulisan yang berwana merah, dapat anda edit dendiri kode-kodenya.

6. Kemudian letakkan kode berikut di bawah ]]></b:skin>
<script src="http://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>
7. Simpan Template
Setelah anda melakukan Simpan Template, Kemudian Pilih Elemen Laman>>>>Tambah Gadget>>>>Pilih HTML/JavaScript
Kemudian Letakkan Kode Berikut:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript" src="http://enes-sc.googlecode.com/files/tabview-tab.js"></script>
Silahkan Anda Edit tulisan yang berwarna merah dan hijau di atas. Sesuai keperluan anda.
8. Kemudian Silahkan anda SAVE

Senin, 14 Februari 2011

Cara Membuat Menu Tab View pada Blog

Sejak kemarin saya hanya terfokus dengan cara membuat menu navigasi pada blog. Kenapa yah?
Yang pasti semua tips yang saya berikan bermanfaat buat kita. Tips kali ini, saya ingin memberikan sebuah tips untuk membuat "Menu Tab View" dimana menu tab view ini biasanya dipasang pada sedebar blog, dimana menu Tab View ini terbagi 3 kolom dalam satu tempat. Biar lebih jelasnya, silahkan lihat ganbar di bawah ini.


Beginilah cara untuk membuat menu tab view tersebut?

Berikut caranya, silahkan ikuti langkah-langkah berikut.

1. Login ke Blogger.com dengan Akun anda
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian Pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Kemudian letakkan kode css berikut tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}
Perhatikan tulisan yang berwarna hijau di atas, itu adalah untuk mengatur tampilan Tab View, untuk melihat kode warna silahkan klik DISINI
6. Setelah itu silahkan letakkan kode berikut di atas kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

7. Kemudian "Di Simopan"
8. Lalu pergi ke menu "Elemen Laman"
9. Trus PIlih "TambahGadget" --> "HTML/Javascript" tempat peletakan Manu Tab View.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Merah Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna Hijau adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner,  script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Kemudian Silahkan DiSimpan
Selesai, semoga Bermanfaat

Membuat DropDown Menu

Hai sobat blogger...Kali ini saya akan memberikan tips yang sangat sederhana untuk membuat blog anda kelihatan cantik. Pada tulisan kali ini, saya akan memberikan tips tentang "cara membuat Dropdown Menu" pada blog. Bentuk menu dropdown ini dapat anda lihat seperti di bawah ini.


Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :


1. Seperti biasa Login ke blogger dengan akun anda.
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian anda pilih Halaman Laman
4. Setelah itu pilih Tambah Gadget
5. Pilih HTML/JavaScript
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
Teks yang berwarna merah, ganti dengan alamat link.
Tulisan yang berwarna Biru, ganti dengan Kalimat Link
Jika anda ingin menambah link lagi tinggal menambah kode berikut ini
<option value="Links 2">Text 2</option>
terus, lakukan pengeditan pada tulisan yang berwarna di atas.
Mengerti kan?, kalau tidak mengerti, silahkan berkomentar.

Minggu, 13 Februari 2011

Cara Membuat Menu Navigasi Horizontal

Bagi sobat Blogger, mungkin tidak asing lagi gambar di atas. Gambar di atas adalah merupakan barisan menu navigasi horizontal pada blog ini. Menu navigasi berikut merupakan menu navigasi bercabang. Jika sobat blogger ingin memasangnya pada blog anda, silahkan ikuti langkah berikut.



1. Login ke Blogger.com dengan Akun anda
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian Pilih Edit HTML
4. Cai kode seperti ini ]]></b:skin>
5. Letakkan kode berikut tepat sebelum (Di atas) kode ]]></b:skin>

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}

6. Kemudian Simpan Template.
7. Setelah itu silahkan pilih Elemen Laman
8. Pilih Tambah Gadget
9. Pilih HTML/JavaScript
10. Letakkan kode HTML di bawah ini
<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>
11. Silahkan Edit tulisan yang berwarna merah dan hijau di atas.
12. Silahkan pindahkan sodbar anda di atas header atau di bawah header.

Selesai. Semoga bermanfaat.