3:34 PM
Seputar Informasi Internet Pilihan
Sebelum anda mencoba membuatnya ada baiknya anda melihat screenshot contoh widgetnya:
Apakah anda tertarik?
berikut caranya:
1.Masuk dasbor
2.Pilih rancangan ->> elemen halaman
3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript
4.Berikut codenya:
<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://www.ardi33.web.id/
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02q4cCQjxQq9NznmgFWPiIjXF72p97YZRuLGrYbazPYYJ6RSE1qGm6FYW5pt8gnfhcA1RE53gyXpm_OmDKl6sEHrTWRlZIMNKWw-CWpxKujxnxQ_VAJTGJMDcEeUrviPchAx4r57RCUY/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5wGkO8bFEt5H8ILOdk1aZ4d-gJgxk-wL0g83J7Hy_fZQO2CmwO4Z5sjc1txbA5_SJf3BuePTH6v1gnP7HgikliwxZpOZVK6aAu6dy8-KQscwi26TlvQgJoPoAdcbw99QPfGNah2WawU4/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
berikut caranya:
1.Masuk dasbor
2.Pilih rancangan ->> elemen halaman
3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript
4.Berikut codenya:
<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://www.ardi33.web.id/
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02q4cCQjxQq9NznmgFWPiIjXF72p97YZRuLGrYbazPYYJ6RSE1qGm6FYW5pt8gnfhcA1RE53gyXpm_OmDKl6sEHrTWRlZIMNKWw-CWpxKujxnxQ_VAJTGJMDcEeUrviPchAx4r57RCUY/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5wGkO8bFEt5H8ILOdk1aZ4d-gJgxk-wL0g83J7Hy_fZQO2CmwO4Z5sjc1txbA5_SJf3BuePTH6v1gnP7HgikliwxZpOZVK6aAu6dy8-KQscwi26TlvQgJoPoAdcbw99QPfGNah2WawU4/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPljZKEMAjq8COz_WFU3lsbbmUXE-IgUGDJaGG5KltYEFR08Q-TBpl2Q1WQNEm4aRswAKQD-2FlqtuEKir96lariGd7IIDT69fKP3_rxojK9ias7LK3BHRj2EgxCNn84HTOBAqj32mTg0/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
Posted in: tips
0 komentar:
Post a Comment