 |
| Menu Horizontal |
Berikut tuotorialnya.
langkah pertama yaitu masuk pada bagian Design lalu Edit HTML
Masukkan code dibawah ini dibawah code <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'/>
Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>
Masukkan code dibawah ini dibawah code <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'/>
Lalu masukkan CSS dibawah ini diatas code ]]></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;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.
Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini
Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah 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>
Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
lalu taruh code dibawah ini dibawah code yang diatas tadi
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
Kalau sudah SAVE
Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"
Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code 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>
<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 code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.
Ket :
Nah, dari kode-kode tersebut terlihat bahwa saya menggunakan dua jenis link arahan.
Berikut dua jenis link arahan yang saya gunakan dalam kode tersebut :
1. Link arahan nama label, ditandai dengan penulisan format link sebagai berikut:
http://www.domainanda.com/search/label/Nama Label
dalam menu blog ini, salah satunya saya menggunakan
http://www.c3r1t4-ku.blogspot.com/search/label/Tutorial
2. Link arahan menuju suatu posting, ditandai dengan penulisan format link sebagai berikut :
http://www.domainanda.com/direktori file/nama file.html
dalam menu blog ini, salah satunya saya menggunakan
http://c3r1t4-ku.blogspot.com/2011/11/link-exchange.html
dari penjelasan dia atas kita tahu bahwa kalau kita sedang posting artikel, kemudian kita masukkan artikel tersebut ke dalam nama label yang sudah kita pasang di menu, maka otomatis postingan tersebut akan masuk ke dalam menu blog. Istilah lain label di sini adalah kategori.
Selanjutnya, misalnya ada pengunjung yang masuk ke dalam menu "Tukar Link" di blog saya ini, maka pengunjung tersebut akan diarahkan menuju link http://amronbadriza.blogspot.com/2011/11/tukar-link-di-blogaul.html yang kemudian masuk ke postingan yang berjudul "Tukar Link di Blogaul", postingan tersebut masuk di label Admin. Jadi bila saya posting artikel kemudian saya masukkan ke label Admin, maka artikel baru tersebut tidak akan masuk di menu "Tukar Link" dikarenakan dalam menu Tukar Link tersebut saya menggunakan link arahan menuju suatu posting (http://c3r1t4-ku.blogspot.com/link-exchange.html), bukan menuju suatu Nama Label. Tapi sebaliknya, apabila saya memasukkan postingan baru tersebut ke dalam nama label yang sudah saya pasang di menu, maka postingan tersebut akan masuk di menu, misalnya postingan tersebut saya masukkan ke Label "Tutorial", maka postingan tersebut akan masuk di menu Tutorial > Tutorial Blogger.
dari penjelasan saya di atas, pasti muncul suatu pertanyaan "Lho, beberapa nama label (kategori) kan sudah dibuat, tapi kenapa yang dimasukkan ke dalam menu, tidak masuk di bagian widget kategori?
Itu mudah saja, kuncinya adalah disembunyikan. Jadi beberapa nama label yang sudah saya pasang di menu blog, di bagian widget kategori saya sembunyikan, jadi tidak muncul dua kali di halaman blog, berikut ini caranya :
Masuk ke Dasbor > Rancangan > Klik edit pada widget Kategori > Pada bagian Tampilkan, klik edit > Centang pada nama label yang tidak masuk menu blog (akan mencul di Kategori) > Klik Selesai > Simpan.
Saya kira cukup penjelasannya mengenai Cara Memasukkan Posting Artikel ke dalam Menu Blog, kurang lebihnya saya mohon ma'af....
Semoga bermanfaat. ;-)
Nah, dari kode-kode tersebut terlihat bahwa saya menggunakan dua jenis link arahan.
Berikut dua jenis link arahan yang saya gunakan dalam kode tersebut :
1. Link arahan nama label, ditandai dengan penulisan format link sebagai berikut:
http://www.domainanda.com/search/label/Nama Label
dalam menu blog ini, salah satunya saya menggunakan
http://www.c3r1t4-ku.blogspot.com/search/label/Tutorial
2. Link arahan menuju suatu posting, ditandai dengan penulisan format link sebagai berikut :
http://www.domainanda.com/direktori file/nama file.html
dalam menu blog ini, salah satunya saya menggunakan
http://c3r1t4-ku.blogspot.com/2011/11/link-exchange.html
dari penjelasan dia atas kita tahu bahwa kalau kita sedang posting artikel, kemudian kita masukkan artikel tersebut ke dalam nama label yang sudah kita pasang di menu, maka otomatis postingan tersebut akan masuk ke dalam menu blog. Istilah lain label di sini adalah kategori.
Selanjutnya, misalnya ada pengunjung yang masuk ke dalam menu "Tukar Link" di blog saya ini, maka pengunjung tersebut akan diarahkan menuju link http://amronbadriza.blogspot.com/2011/11/tukar-link-di-blogaul.html yang kemudian masuk ke postingan yang berjudul "Tukar Link di Blogaul", postingan tersebut masuk di label Admin. Jadi bila saya posting artikel kemudian saya masukkan ke label Admin, maka artikel baru tersebut tidak akan masuk di menu "Tukar Link" dikarenakan dalam menu Tukar Link tersebut saya menggunakan link arahan menuju suatu posting (http://c3r1t4-ku.blogspot.com/link-exchange.html), bukan menuju suatu Nama Label. Tapi sebaliknya, apabila saya memasukkan postingan baru tersebut ke dalam nama label yang sudah saya pasang di menu, maka postingan tersebut akan masuk di menu, misalnya postingan tersebut saya masukkan ke Label "Tutorial", maka postingan tersebut akan masuk di menu Tutorial > Tutorial Blogger.
dari penjelasan saya di atas, pasti muncul suatu pertanyaan "Lho, beberapa nama label (kategori) kan sudah dibuat, tapi kenapa yang dimasukkan ke dalam menu, tidak masuk di bagian widget kategori?
Itu mudah saja, kuncinya adalah disembunyikan. Jadi beberapa nama label yang sudah saya pasang di menu blog, di bagian widget kategori saya sembunyikan, jadi tidak muncul dua kali di halaman blog, berikut ini caranya :
Masuk ke Dasbor > Rancangan > Klik edit pada widget Kategori > Pada bagian Tampilkan, klik edit > Centang pada nama label yang tidak masuk menu blog (akan mencul di Kategori) > Klik Selesai > Simpan.
Saya kira cukup penjelasannya mengenai Cara Memasukkan Posting Artikel ke dalam Menu Blog, kurang lebihnya saya mohon ma'af....
