Cara Membuat Menu Navigasi

Selamat malam sahabat blogger malam kali ini saya akan membahas CARA MEMBUAT MENU NAVIGASI,cara kali ini sanagat lah mudah karena kali ini saya akan berbagi dengan cara javascript yang simple tanpa harus mas bro harys mengedit html.sebelum mulai cara nya jika mas bro penasaran ddengan MENU NAVIGASI nya silakan klik di sini untuk melihat DEMO

1. Login Dashboard milik sahabat
2. Pilih HTML/JAVASCRIPT
3. Kemudian masukan kode ini di dalam nya

<div id="dimash">
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="
http://blogdimash.xtgem.com/adminarea.gif" alt="My Menu" title="Click here to open Menu" /></a>
<br/>
<style type="text/css">
#at{
position:fixed;
left:300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:80px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:1px solid #ff0000;
background:url(http://blogdimash.xtgem.com/hitam.png) #000000 repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://blogdimash.xtgem.com/hitam.png) no-repeat;">


<table
 style="background-color: rgb(0, 0, 0); width: 275px; height: 308px;"
 border="1" bordercolor="#cc0000" cellpadding="3"
 cellspacing="3">
  <tbody>
    <tr>
      <td style="height: 59px;">
      <center><a href="http://red3vil.xtgem.com/"><img
 src="http://blogdimash.xtgem.com/coollogo_com-43681747.png" alt="perbaikan"></img
></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
   
<td style="height: 59px;">
      <center><a href="http://red3vil-666.blogspot.com" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-163771401.png" border="0" alt="portal"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://dim4sh.wapdale.com" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-43661104.png" border="0" alt="my wap"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://facebook.com/reddevil_detected" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-163771455.png" border="0" alt="AboutMe"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>
<td style="height: 59px;">
      <center><a href="http://twitter.com/dim4sh" target="_blank"><img src="http://blogdimash.xtgem.com/coollogo_com-43661189.png" border="0" alt="contact"/></a><br />
      <font color="red"><br />
      </font></center>
      </td>
    </tr>
    <tr>

  </tr></tbody>

</table
></div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://blogdimash.xtgem.com/cooltext533782482.gif" alt="close" title="Click here to Close Cbox" /></a></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div></center></div>

4. Simpan dan lihat hasilnya semoga bermanfaat...........

Cara Membuat Iklan Melayang Dengan Tombol Close

1. Login Ke Blogger dengan Akun masbro masing-masing
2. Masuk ke Tab Tata Letak
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan Copy kode di bawah ini kedalamnya yah

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>


pada TEKS BERWARNA MERAH Silakan masukan kode script yang sahabat inginkan,save lalu lihat hasilnya.semoga bermanfaat.............

..:: Cara Pasang Energy Saving (Screen Saver blog) ::..

1. Log in blogger
2. Masuk ke menu Rancangan, Edit Html,
3. Centang Menu Expand Template Widget
4. Simpan kode berikut Diatas kode </head> :

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Jika sudah SIMPAN TEMPLATE dan 

untuk melihat contoh nya anda dapat melihat nya pada blog saya ini 

Untuk melihat hasilnya biarkan sebentar dan jangan menggerakkan mouse maka layar monitor komputer sobat akan tertutup dengan warna hitam tanda Energy Saving sudah berjalan. gerakkan mouse untuk menghentikkan saving screen nya......

Selamat mencoba ..............

..:: Membuat Tombol kembali ke atas (Back To Top) ::..

1. Login blogger
2. Pilih Rancangan --> Elemen Halaman
3. KLIK tambah Gadget --> HTML/Java Script
4. Simpan Kode berikut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://xtgem.com/filebrowser/file_open?file=BackToTopBlue.js"></script>

Untuk kode  http://xtgem.com/filebrowser/file_open?file=BackToTopBlue_1.js adalah Java script dengan tampilan gambar seperti di bawah ini :

Bisa diganti juga dengan http://xtgem.com/filebrowser/file_open?file=BackToTopGreen.js dengan tampilan gambar :

atau dengan http://xtgem.com/filebrowser/file_open?file=BackToTopYellow.js dengan tampilan gambar :

atau juga kawan-kawan ingin menggantinya dengan gambar keinginan masing-masing, bisa dilakukan dengan cara :

1. Download Java script http://xtgem.com/filebrowser/file_open?file=BackToTopBlue.js lalu edit dengan notepad cari link gambar http://dimash.waphall.com/back2top.png lalu ganti dengan link gambar yang diinginkan.... dan Save
2. lihat hasil nya
   

selamat mencoba..............

..:: Pasang penterjemah bahasa pada blog ::..

Contoh tampilan :

	Gadgets powered by Google

1. Log in blogger
2. Rancangan, elemen laman, tambah gadget, html/java script
3. Kopi pastekan kode di bawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

Simpan................

Selamat mencoba..................

..:: Icon burung follow twitter melayang mengikuti arah kursor ::..

Cara membuatnya :
1. Login blogger
2. Rancangan, tambah gadget, pilih Html/ java script 
3. Simpan kode berikut : 

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://xtgem.com/filebrowser/file_open?file=tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://dimash.waphall.com/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/dim4sh";var tweetThisText = "Twitter - UserID http://www.red3vil-666.blogspot.com/";tripleflapInit();
</script>

simpan............

yang berwarna Biru silahkan ganti sesuai kebutuhan kawan-kawan

..:: Membuat penunjuk online disisi layar ::..

Membuat penunjuk online yang melayang disisi layar....

1. Log in blogger
2. Rancangan, tambah gadget
3. pilih html/java script
4. lalu kopi pastekan kode di bawah ini :

<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('h0tor0ow36bg', 'left-middle')</script>

Simpan................

..:: Membuat Shoutbox melayang muncul dari sisi layar blog ::..

Untuk membuatnya :

1. Login blogger
2. Rancangan, Elemen laman, Tambah gadget, pilih Html/Java script
3. Lalu simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://dimash.waphall.com/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

yang berwarna biru silankan ganti sesuai kebutuhan..


Selesai Simpan dan lihat hasil nya........

..:: Buku Tamu Show/Hide dari Atas II ::..

Cara membuatnya :
1. Login blogger
2. Rancangan, Tambah Gadget,  Html/Java Script
3. Dan Simpan kode berikut :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid  #0F0;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!--  Script Chatbox nya disini -->

<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script></div>

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://dimash.waphall.com/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya