Jumpa lagi sob,, dah lama gak posting.
Maklum sibuk..nah nie misteri akan bahsa masalah membuat menu vertikal untuk bloger, dibaca ya sob.
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> .
Pokoknya ditaruh di dalam Barisan kode CSS deh. hehe.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika sobat ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://misteridesign.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://misteridesign.blogspot.com/2010/09/4th-award.html">Penghargaan The 4th award</a></li>
<li><a href="http://news.palcomtech.com/">Kampus</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalo Mao Menambah menunya..tinggal di copy saja bagian ini :
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
Ganti alamat ( http://misteridesign.blogspot.com/ ) dengan alamat yang sobat dijadikan menu dan untuk (Home)itu adalah judul dari menu tersebut.
Tips Membuat gambar Berjatuhan (falling snow effect)
Jumpa lagi sob,, dah lama gak posting.
Maklum sibuk..nah nie misteri punya posting bagus.. dibaca ya sob.
Tips Membuat gambar Berjatuhan ini memiliki kelebihan dimana kita dapat mengubah gambar untuk falling effect-nya sesuai yang kita inginkan. Kita juga dapat mengatur tingkat kecepatan dan banyaknya gambar yang jatuh (falling snow) sesuai yang kita mau
ika sobat blogger tertarik untuk membuat falling snow ini, sobat bisa mengikuti langkah-langkah berikut:
1. Login ke akun blogger sobat.
2. Dari halaman Dashboard, pilih Tata Letak lalu pilih Edit HTML.
3. Kopikan script di bawah ini dan letakkan (paste) di bawah kode <head> (yang letaknya di awal-awal script template blog).
<script language='JavaScript'>
var no = 7;
var speed = 5;
var snowflake = " http://i34.photobucket.com/albums/d107/ImanBG/GIF%20pic/ROowlTest1.gif ";
</script>
<script language='JavaScript' src='http://sites.google.com/site/ruangsc/enes/fallinsnow.js'/>
4. sobat bisa mengganti
Dengan gambar yang jatuh (var snowflake) dengan gambar yang sobat inginkan.
5. sobat juga bisa mengatur banyaknya gambar (var no) dan tingkat kecepatan (var speed) sesuai keinginan sobat.
5. Lakukan Pratinjau (Preview) sebelum menyimpan template sobat.
6. Jika sudah OK. Save template sobat.
Selamat mencoba...Semoga Bermanfaat.
Tidak ada komentar:
Posting Komentar