Untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh
dengan teks artikel yang menempel sehingga membuat blog terasa sumpek,
biasanya di sederhanakan dengan tampilan menu dropdown horizontal bawah
header atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown vertikal di sidebar untuk mempercantik blog anda bisa di copy scriptnya di bawah ini.
2. Edit html blog.
3. Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>l>
4. Masuk ke tata letak, dan tambah gadget atau add gadget JAVA/HTML
5. Copy kode script di bawah ini kedalam gadget - HTML/JAVA/SCRIPT
Sekian dulu ya tutorialnya..sampai bertemu Tutorial selanjutnya.. ^_^
Untuk cara memasang scriptnya sebagai berikut :
1. Masuk blogger.2. Edit html blog.
3. Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>l>
<style type='text/css'>
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url(http://kentut.googlecode.com/files/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 8px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: bottom;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: bottom;
}
.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(http://kentut.googlecode.com/files/arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(http://kentut.googlecode.com/files/glossyback2.gif);
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<script src='http://kentut.googlecode.com/files/cssvertikalmenu.js' type='text/javascript'>
</script>
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url(http://kentut.googlecode.com/files/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 8px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: bottom;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: bottom;
}
.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(http://kentut.googlecode.com/files/arrow.gif) no-repeat center right;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(http://kentut.googlecode.com/files/glossyback2.gif);
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<script src='http://kentut.googlecode.com/files/cssvertikalmenu.js' type='text/javascript'>
</script>
4. Masuk ke tata letak, dan tambah gadget atau add gadget JAVA/HTML
5. Copy kode script di bawah ini kedalam gadget - HTML/JAVA/SCRIPT
<ul id="verticalmenu" class="glossymenu">
<li><a href="#">Menu 1</a></li>
<li><a href="url artikel anda" >Sub Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
<li><a href="url artikel anda">Sub Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 4</a></li>
<li><a href="url artikel anda">Sub Menu 5</a></li>
<li><a href="url artikel anda">Sub Menu 6</a></li>
<li><a href="url artikel anda">Sub Menu 7</a></li>
<li><a href="url artikel anda">Sub Menu 8</a></li>
<li><a href="url artikel anda">Sub Menu 9</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
<li><a href="url artikel anda">Sub Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
</ul>
</li>
</ul><br/>
<a href="http://rikajazuli.blogspot.com/></<h5 style="opacity: 0; filter: alpha(opacity=10); width: 100%; font-size: 8pt;">gaptect</h5></a>
<li><a href="#">Menu 1</a></li>
<li><a href="url artikel anda" >Sub Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
<li><a href="url artikel anda">Sub Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 4</a></li>
<li><a href="url artikel anda">Sub Menu 5</a></li>
<li><a href="url artikel anda">Sub Menu 6</a></li>
<li><a href="url artikel anda">Sub Menu 7</a></li>
<li><a href="url artikel anda">Sub Menu 8</a></li>
<li><a href="url artikel anda">Sub Menu 9</a></li>
</ul>
</li>
<li><a href="#">Menu 6</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
<li><a href="url artikel anda">Sub Menu 3</a></li>
<li><a href="url artikel anda">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 7</a>
<ul>
<li><a href="url artikel anda">Sub Menu 1</a></li>
<li><a href="url artikel anda">Sub Menu 2</a></li>
</ul>
</li>
</ul><br/>
<a href="http://rikajazuli.blogspot.com/></<h5 style="opacity: 0; filter: alpha(opacity=10); width: 100%; font-size: 8pt;">gaptect</h5></a>
Sekian dulu ya tutorialnya..sampai bertemu Tutorial selanjutnya.. ^_^
Tidak ada komentar:
Posting Komentar