Membuat menu Slide N Rolling

Posted by : Unknown Selasa, 17 Desember 2013

Nah Buat Sobat Blogger Yang Berminat Menerapkan Pada Blog Sobat Semua, Sobat Bisa Ikuti Caranya

Dibawah ini:

Login Ke Akun Blogger Sobat.
Pilih Rancangan => Edit HTML Dan Jangan Lupa Centang Expand Template Widget
Lalu Carilah Kode ]]> Dan Taruhlah Kode Berikut Diatasnya.

Klik Untuk Liat Kode

<center>
.menu{
width:800px;
height:52px;
position:relative;
top:200px;
left:100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.link{
left:2px;
top:2px;
position:absolute;
width:48px;
height:48px;
}
.icon_home{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/home.png) no-repeat top left;
}
.icon_mail{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/mail.png) no-repeat top left;
}
.icon_help{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/help.png) no-repeat top left;
}
.icon_find{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/find.png) no-repeat top left;
}
.icon_photos{
background:transparent url(http://i1230.photobucket.com/albums/ee498/filiex/filiex/photos.png) no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
background:transparent;
display:none;
}
.item_content h2{
color:#aaa;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}
.item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content p {
background-color:transparent;
display:none;
}
.item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

Selanjutnya Cari body Lalu Taruh Kode di Bawah ini Tepat diatasnya

</script>

Setelah itu Sobat Bisa Menyimpan Template nya.
Terakhir Seperti Biasa Sobat Pikir Pikir Dulu Dech Lokasi Penempatan Yang Cocok Untuk Sliding Dan Rolling Menu nya Dan Bila Sudah Ada Ide Sobat Sekarang Masuk Ke Element Halaman Dan Tambah Widget Lalu Pilih Yang HTML/JavaScript.
Taruh Kode Berikut Dan Simpan.

Thanks All buat yang dah mau mampir ............ !!!

Sisip kan Saran, Pesan dan Komentar anda .. Mudah-mudahan dengan Komentar yang anda berikan Akan memberikan Motivasi buat saya untuk membuat blog ini menjadi lebih menarik Lagi.

Subscribe to Posts | Subscribe to Comments

Membuat menu Slide N Rolling

Leave a Reply

Post-post Terpopuler

Anda yang Ke ...

Tanslate

Blog Archive

BloG ku Yang Lain

Tips "N Trick Blogger

Selamat Datang Di Tips 'aNd TriCK BloGGeRs DiTHa SoB

Sekilas Tentang Admin NicH