nGe Hank

Tampilkan postingan dengan label menu. Tampilkan semua postingan

Sabtu, 07 Desember 2013

Cara Membuat Menu dTree

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:
cara membuat menu dtree

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini

Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Langkah pertama:

Seperti biasa loggin ke akun blogger sobat=> Lalu klik tata Letak =>> Klik Edit HTML

Letakkan kode/ script berikut di atas kode </head>

<link href=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css rel=StyleSheet type=text/css/>
<script src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js type=text/javascript/>

Klik Simpan template.

Langkah ke dua:
Klik elemen halaman=> Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten:

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">

</script>
</div>

Maka Preview dari kode di atas adalah seperti berikut ini

Kalau belum ngerti berikut contoh mengisi menu dan linknya dari daftar menu blog saya;

<h2>Arsip</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">

</script>
</div>

Silahkan ganti nama folder dan linknya! Tambahkan yang perlu ditambahkan! Untuk hasilnya bisa lihat blog saya disini
Jangan lupa save kalau dah selesai ya!
Selamat mencoba dan semoga bermanfaat!

Selengkapnya

Glossy Horizontal Menu

menu tab navigasi horizontal

View Demo

Banyak trik yang bisa kita gunakan untuk memodifikasi tampilan tab menu navigator horizontal pada template blogger. Kalau tidak salah sudah ada tiga pembahasan dengan category tersebeut pada blog ini, yang pertama cara membuat menu tab navigator horizontal sederhana, selanjutnya 30 widget tab navigator horizontal, dan sebelum postingan ini multi level drop down menu using JQuery.

InsyaAllah pada postingan kali ini, tutorial yang ingin saya ketengahkan cara membuat glossy horizontal menu seperti screenshot diatas atau livedemo lihat pada blog saya yang lain disini

Berikut tutorial membuat glossy horizontal menu

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>

/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB (http://www.amatullah83.blogspot.com/) */

.glossymenu{
    position: relative;
    padding: 0 0 0 34px;
    margin: 0 auto 0 auto;
    background: url(http://sites.google.com/site/amatullah83/background/menub_bg.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: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 46px;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_left.gif) no-repeat; /*left tab image path*/
    background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
    color: #fff;
    background: url(http://sites.google.com/site/amatullah83/background/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Untuk image bisa sobat ganti sesuaikan dengan template blogger sobat, contoh image lainnya yang bisa sobat gunakan:

Silahkan upload dulu ya image diatas ketempat hosting masing-masing. Oke lanjut...

3. Terakhir tambahkan kode HTML berikut diatas <div id=header-wrapper>

<ul class="glossymenu">
    <li class="current"><a href="http://www.amatullah83.blogspot.com/"><b>Home</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam/"><b>Agama</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Teknologi/"><b>Teknologi</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Kesehatan"><b>Kesehatan</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger/"><b>Tutorial Bogger</b></a></li>
    <li><a href="http://amatullah83.blogspot.com/search/label/Widget"><b>Blogger Widgets</b></a></li>
</ul>

Silahkan sobat edit link dan anchor teks kode HTML diatas

4. Simpan tempalate.

Mudah bukan? Selamat mencoba, semoga bermanfaat! Jangan lupa komentar!!!

Thanks to Dinamic Drive

Selengkapnya