mencoba buat menu seperti widget arsib blog

• ▼  KITAB
  • ▼  Riyadhus Shalihin
    • pakian
    • membuat kategori
    • kategory mengarti
    • macam kotak
  • ▼  Hadits
    • cede foot 123 label
    • code mengarti
    • codeku
    • Cara Membuat Menu Navigasi
    • Cara Membuat Multi

Islam Kisah & Cerita Al-qur’an kosong Hadits kosong kitab> Riyadhus Shalihin Lihat Bab Klik Pakian Kesopanan Tidur Bersalam Sakit & Mati Adab Bepergian Fadhila/Keutamaan pelajaran kosong bisnis kosong penyakit & solusi kosong berita kosong mp3 kosong game kosong aplikasi kosong lain-lain kosong

vcuaxsc uvygcSD yudscv ydub vuydy uydcsOH YUB uyfew yurebd yuaer yue yu yrbgvf vgeberauighf yugfaviu bvhydsl hvyd bhDSYbv

membuat kategori

Islam

Kisah & Cerita

Al-qur’an

kosong

Hadits

kosong

kitab>

Riyadhus Shalihin

Lihat Bab Klik

Pakian
Kesopanan Tidur
Bersalam
Sakit & Mati
Adab Bepergian
Fadhila / Keutamaan

pelajaran

kosong

bisnis

kosong

penyakit & solusi

kosong

berita

kosong

mp3

kosong

game

kosong

aplikasi

kosong

lain-lain

kosong

kategory mengarti

islam

Kitab
>>Riyadhus Shalihin

Klik show untuk melihat

• Pakian
• Kesopanan Tidur
• Bersalam
• Sakit dan Mati
• Adab Bepergian
• Fadhilah Dan Keutamaan

macam kotak

mencoba

dan

KODE/TEKS

Dashed

KODE/TEKS

Double

KODE/TEKS

Grove

KODE/TEKS

Solid

KODE/TEKS

Outset

KODE/TEKS

Insert

KODE/TEKS

Ridge

KODE/TEKS

cede foot 123 label

tes satu dua tiga
<span class='post-author vcard'>

                <b:if cond='data:top.showAuthor'>

                  <b:if cond='data:post.authorProfileUrl'>

                    <span class='fn'>

                      <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>

                        <data:post.author/>

                      </a>

                    </span>

                  <b:else/>

                    <span class='fn'><data:post.author/></span>

                  </b:if>

                </b:if>

              </span>

              <span class='post-timestamp'>

                <b:if cond='data:top.showTimestamp'>

                  <data:top.timestampLabel/>

                  <b:if cond='data:post.url'>

                    <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

                  </b:if>

                </b:if>

              </span>

              <span class='post-comment-link'>

                <b:if cond='data:blog.pageType != &quot;item&quot;'>

                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

                    <b:if cond='data:post.allowComments'>

                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

                        <data:post.commentLabelFull/>:

                      </a>

                    </b:if>

                  </b:if>

                </b:if>

              </span>

<span class='post-labels'>

        <b:if cond='data:post.labels'>

          <data:postLabelsLabel/>

          <b:loop values='data:post.labels' var='label'>

            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

          </b:loop>

        </b:if>

      </span>

<span class='post-location'>

        <b:if cond='data:top.showLocation'>

          <b:if cond='data:post.location'>

            <data:postLocationLabel/>

            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>

          </b:if>

        </b:if>

      </span>

code mengarti tuk label klik

<div  style="border: 6px #ff0000 groove; padding: 2px; background-color: #00ff00;  text-align: left;color:black;">
<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">
<!--
d = new dTree('d');
d.add(0,-1,'ISLAM');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Kitab','http://mengarti.blogspot.com/search/label/kitab');
d.add(8,7,'Riyadhus Shalihin','http://mengarti.blogspot.com/search/label/riyadhus%20shalihin');
d.add(9,8,'Pakian','http://mengarti.blogspot.com/search/label/pakian');
d.add(10,8,'Kesopanan Tidur','http://mengarti.blogspot.com/search/label/kesopanan%20tidur');
d.add(11,8,'Bersalam','http://mengarti.blogspot.com/search/label/bersalam');
d.add(12,8,'http://mengarti.blogspot.com/search/label/sakit%20dan%20mati','Sakit dan Mati');
d.add(13,8,'http://mengarti.blogspot.com/search/label/adab%20bepergian','Adab Bepergian');
d.add(14,-1,'BISNIS');
d.add(15,14,'Folder 03',' #.html');
d.add(16,15,'Sub Folder 03',' #.html');
d.add(17,16,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
document.write(d);
//-->
</script>
</div> </div>

codeku

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtg97AEW-dS_ArvTIuXs_w81sAz79NZh05nnk6CwUxHeDKdWzhLGy8Y76rzO-YWmxgtMLW04wgLjA4cqoiDpBpYwG_F3shbxAzFZxywdtqX_jTQK6Np92ABL0Zf9xEngFy2iJHk0z3zfI/s1600/home_white.png' style='padding:0px;'/>HOME</a></li>
<li><a class='trigger'>ISLAM</a>
<ul>
<li><a href='http://instatus.blogspot.com/search/label/Al-Quran'>Al-Quran</a></li>
<li class='hr'/>
<li><a href='http://instatus.blogspot.com/search/label/hadits'>Hadits</a></li>
</ul>
</li>
<li><a class='trigger'>SERU</a>
<ul>
<li><a href='http://instatus.blogspot.com/search/label/kata-kata%20ucapan'>Kata-Kata Ucapan</a></li>
<li class='hr'/>
<li><a href='http://instatus.blogspot.com/search/label/setatus%20cinta'>Setatus Cinta</a></li>
<li class='hr'/>
<li><a href='http://instatus.blogspot.com/search/label/status%20gambar%20unik'>Status Gambar Unik</a></li>
<li class='hr'/>
<li><a href='http://instatus.blogspot.com/search/label/status%20menarik'>Status Menarik</a></li>
</ul>
</li>
<li><a class='trigger'>Tentang SITUS</a>
<ul>
<li><a href='http://instatus.blogspot.com/search/label/tutorial%20blogspot'>Tutorial Blogspot</a></li>
<li class='hr'/>
<li><a href='http://instatus.blogspot.com/search/label/tentang%20twitter'>Tentang Twitter</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://instatus.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://instatus.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD8AW3SDaURcA2xQKcU8prH2hX-7kxNOBbLqKfnUGk4D84POqBSnsMz8uJbiXRge_6MPedaBUFgadp_1lW7jrO_XmvqBgApREF4rTZeuII1XjXYH5TMqq6vtPCLwE3ziFEnms80jMtin4/s1600/field-bg.gif) no-repeat;' type='text' value='Cari di InStatus ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5yUnI0tTHQCCiMP8RhPITXNLtUgmDd_aNGZnJjaGEElb7epQGbx7Mn7yeit3AZCqqa2V1m3L2qa3RzMkunCGNguyxb4X9fy2FJV8QYac8HIBd50h944ZSbEAlU5-8pWi1Houxa87aOWA/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Cara Membuat Multi Menu Horizontal Drop Down Di Blog

Kali ini saya akan membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi anda yang ingin menyimpan link yang cukup banyak.

Cara Membuat Multi Menu Drop Down :
1. Login ke Blog kamu.
2. Pilih Menu Edit HTML, cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 3.

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu 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;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div>

Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://blazerracing.blogspot.com/'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</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>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://blazerracing.blogspot.com/'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>