Saat ini kita saari bahwa setiap space dalam blog kita sangat berguna. Banyak yang menggunakan space baik untuk promosi ataupun untuk hal hal lainnya. Kali ini saya akan mengulas bagaiman cara menggunakan space yang kadang tak bermanfaat menjadi lebih bermanfaat yaitu dengan mengisinya menggunakan menu. Menu ini termasuk unik karena menggunakan efek jQuery. Menu ini dibuat oleh Adam Becker. Silahkan bagi yang berminat untuk mencobanya membuat sweet menu dengan efek jQuery. cara ini menggunakan blogger new interface. Untuk blogger dengan interface lama bisa menyesuaikan. Selamat mencoba!!
·
- Login ke blogger
- Masuk ke template
- Pilih Edit HTML
- Cari kode <head> dan letakkan kode dibawah ini tepat diatas kode < head > tersebut
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.easing.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.sweet-menu-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#backMenu').sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/back.png'
]
});
$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/home.png',
'http://playground.adambecker.info/sweet-menu/images/comments.png',
'http://playground.adambecker.info/sweet-menu/images/red_heart.png',
'http://playground.adambecker.info/sweet-menu/images/male_user.png',
'http://playground.adambecker.info/sweet-menu/images/yellow_mail.png',
]
});
});
</script>
<style type="text/css">
body
{
background: #000000 url('images/bg.jpg') top center no-repeat;
}
.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
}
.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
</style>
- Cari kode <body> letakkan kode dibawah ini diatas kode <body>
<ul id="backMenu">
</ul>
<ul id="exampleMenu">
<li><a href="www.pradipha.com">Beranda</a></li>
<li><a href="alamat url">Blog</a></li>
<li><a href="alamat url">Favorit</a></li>
<li><a href="alamat url">Tentang saya</a></li>
<li><a href="alamat url">Kontak</a></li>
Catatan
Untuk tulisan berwarna Merah ganti dengan link yang anda inginkan
Untuk tulisan berwarna biru jika mau anda ganti anda dapat merubahnya dengan link image url yang anda inginkan dengan ukuran 48 pixel
Happy Blogging !!!!!!
0 comments:
Post a Comment
Tinggalkan komentar anda...