Membuat Menu Hidden (2) di Blog
Lagi lagi.. lagi.. saya menemukan sebuah menu hidden yang unik dan sangat menarik untuk di pasang di blog kalian. Kali ini tampilan menu hidden berada di atas, kalau yang sebelumnya kan disebelah kiri blog. Mau coba yang terdahulu dulu ? Cek aja disini http://dopind.blogspot.com/2011/12/membuat-menu-hidden-di-blog.html. Sebenarnya sistem kerjanya sama yang sebelumnya sama juga pada menu hidden yang kali ini, ya.. tapi kan selera orang berbeda - beda, kadang ingin di sebelah kanan ataupun di atas blog, kalian pilih aja selera hati kalian.
Sekarang sudah siapkah kalian melihat menu blog yang unik daripada yang lain ? Silahkan menuju ke sini untuk melihat demo nya http://sasacullens.blogspot.com/ . Gimana ? Baguskan ? Sudah pasti banyak yang bilang menu hidden itu bagus. Menu yang dilengkapi kode JavaScript ini mampu bekerja lebih cepat daripada yang lainnya.
- Login ke Blogger
- Klik Design > Edit HTML
- Letakkan kode berikut di atas kode ]]></b:skin>
ul#deopradipta2 {
position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
left: 200px;
list-style: none;
z-index:999999;
width:721px;
}
ul#deopradipta2 li {
width: 103px;
display:inline;
float:left;
}
ul#deopradipta2 li a {
display: block;
float:right;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#transparent;
background-repeat:no-repeat;
background-position:50% 10px;
border:2px solid #000;border-radius:5px;top:0px;box-shadow:0 0 5px #000;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#deopradipta2 li a:hnver{
background-color:#FF0000;
}
ul#deopradipta2 li a span{
letter-spacing:2px;
font-size:11px;
color:#000;
}
ul#deopradipta2 .aa a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgijEiurpulOvhtTZoHRkABeuwO_Oy4QsT3SLgp5lp4gmm7-mpYJFqZrUAea8-9uQtVOSMZtDKITdODKuekDxdIKLkuy6ZUrX0cAvfuZ_qqa0-xl3LtzMRG_AAeuYRci0-f9ZZCOwlctro/s1600/1deo.png);
}
ul#deopradipta2 .ab a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarD2u0bPIQMkKenuBfXSIOtrIOFoH8JmQ_cGPTsIwycfLxei50TzW5OGiqUUAki-0AJr2Tuv3Egc3iqFGr6_9sN5CmRD5FaLQHQZ3WDhIHSO4z_HX-tXnkSzg8bNAkY-yiFfRuBqa_Ck/s1600/3deo.png);
}
ul#deopradipta2 .ac a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZuz1_TWZzu_O09YuFWCJCdW-mFAI5R5VvYQZunS0yQ0tHS3rZc9bfUlZvBkg7dzJ62CdTHshRMP8_SkF6JxH-Estfvn_7LwnWREOWh8RsnA-Sv6d1z8ShF5x3V3G3oaX8jlxiqmN8Xig/s1600/2deo.png);
}
ul#deopradipta2 .ad a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkQ_zilWSMU_dMfbLItEkuOtItDn47m1dZgoPDNV_kQ9H63hXTklmSgMGikmAtaapNicr81UHC4m-AOrmcFWDCUP6fRfJ210MO65aymjUz_Qb7xhKPMNTW8ABKwqGKTVq35wV-Ot4lYto/s1600/6deo.png);
}
ul#deopradipta2 .ae a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlkLykLLztLsKYbK6cZ35fqboben5XPJreOybQis3eU9ZhZ1oiwdln8BJeYiRDDeRADRHlNDxNCdgOll0j1NLRomEbhQe8rkBE3zGgCZ5hu1DJzF5AQ-8aYAn0ro8zb3gWIjaMpcLqvM/s1600/4deo.gif);
}
#Ganti kode berwarna Orange dengan link gambar yang kalian inginkan - Letakkan kode berikut di bawah ]]></b:skin>
<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$('#deopradipta2 a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#deopradipta2 > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script> - Terakhir letakkan kode berikut di atas kode </body>
<script src='http://idub.007sites.com/smile1.js' type='text/javascript'/>
<ul id='deopradipta2'>
<li class='aa'><a href='http://dopind.blogspot.com/feeds/posts/default'><span>RSS</span></a></li>
<li class='ab'><a href='http://www.facebook.com/manchesterunitedd'><span>FACEBOOK</span></a></li>
<li class='ac'><a href='http://twitter.com/49919491'><span>TWITTER</span></a></li>
<li class='ad'><a href='http://www.alexa.com/siteinfo/http://dopind.blogspot.com/?p=rwidget#'><span>ALEXA</span></a></li>
<li class='ae'><a href='http://dopind.blogspot.com/view'><span>VIEW</span></a></li>
</ul>
#Ganti kode warna Hijau dengan kode link yang kalian ingin pasang
#Ganti kode warna Putih dengan tulisan keterangan menu
#Jika ingin mengganti gambar *li class='aa'* kalian bisa ganti di kode *deopradipta2 .aa a* yang ada di langkah ke 3, begitu seterusnya - Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D
Menambah Efek Saat Mouse di Gerakkan
Kalian ingin menampilkan kondisi cuaca di kota kalian dan kota lain saat pengunjung mengakses blog kalian, kalian bisa menyajikannya dalam widget yang cukup ramping dan ringkas. Tampilan widget ini beraneka ragam, sehigga selain blog kalian berisi informasi mengenai cuaca, tentu juga akan lebih menarik. Disini kita akan menggunakan Wearher for Blog untuk menapmilkan cuaca di blog. Kelemahan dari Weather for Blog adalah tidak dapat mendeteksi suhu dengan benar. Kalian dapat mengunjungi situs ini untuk mendapatkannya [link].
- Buka link berikut http://www.weatherforblog.com/.
- Pilih Negara kalian dan kota kalian.
- Lalu tentukan ukuran widgetnya, hanya ada 2 pilihan 300x250 dan 160x600.
- Pilih background yang anda sukai untuk menjadi background widget Weather for Blog.
- Isi informasi dengan benar, pertama isilah email, kedua isilah URL blog kalian, lalu klik tombol Get Weather Widget di bawah sendiri.
- Copy Paste kode yang muncul setelah meng-klik tombol Get Weather Widget ke Blogger.com >> Rancangan >> Tambah Gadget >> HTML/ JavaScript, lalu klik Save.
Gimana ?? bagus tidak ?? semoga bermanfaat bagi kalian ya !! jangan lupa komentarnya !! thanks !!
