Cara membuat zFP menu di Blog

zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan

Berikut ini Langkah langkah tersebut :
1. Masuk ke blog anda masing-masing
2. Buka Rancangan>>Pengaturan
3. Cari kode </body>
4. Kemudia Copy Paste Code Tersebut tepat diatas </body>

Cara Membuat Beautiful Slide Out Navigation

Cara membuat tampilan menu seperti diatas:
1. Login keblogger anda
2. Masuk Rancangan, Edit Html, kemudian

1. Yang Peratama Cari kode ]]></b:skin> :
    Dan Simpan kode berikut diatasnya : 

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:600px;
            height:56px;
            position:absolute;
            top:50%;
            left:10px;
            background:#fff url(title.png) no-repeat top left;
        }
ul#navixed {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navixed li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navixed li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#000;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -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#navixed li a:hover{
     background-color:#000;
}
ul#navixed li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#FFF;
     
}
ul#navixed .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLfqX851QKGHLLlEXUkJ0j2Tr9UoO-CPFUim1ffjxnaQF44Vqf0SNmXE2pHDBbWcPDyYcGH5a4n3xiWArHmJYOUAo_PsvVJ00z-NqtBFzBHbVVMtp3gflTnGBVhJtU05Y8ahbx-6elE4I/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddfvmFUx0r0r5rbpxyZJrSZ3jpz9NJzhvGK2RWptSYx0KUN6UBlj7QAYDCWgiTJcp9ugnxHmp1EKsLYoekS9UANbmXsTerS0zp4aAU4qXk6fY8I8JYxcaDx-L56_UUUTapQvyAetEpSg/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheamymgCAZNmHSMJpjT4NBNw3b9dKwDOUovrR4yWYNOgYlZA05nC3lME98a4TEdcAUN3_OGhDr9YUB_C4mYa4R5lrUrFOazRPPspVoNCCYNl2XRRvYPRUOg1kI43ccaXaeURvUMcA_8QY/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdgQmnQMfbphTFVOOw2KqcQ4Y2DGYSfHB3BtV66-QEq4ehVs27krTteK6Lt5MX5Kgpau0L13Bprwa1co7YlkXZKfJlOm89KXSgdQNUxHse6EN0d16ez_VKhOQZsvnM9ZK25lntUw9AUhU/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixCr27JE9qBvczL7gVR3zbUwmxAAI54rhQf1AF2-wfQg1-pP-yUXDtG49xJyZQzNMEh9GbI2RCEechBNYKRhfpEMZXcCrqIobH8RNqb8mRn2XprWIvwCtV2vYHJtM0azuc-Uix57HjpU/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBCmQzofYBSnbTfNWhOLvo3BL6uVxgx5Tlcjf2X_dSwSEkechlxUEPTl66zDW37-Gvx5Ggn9LUH709nLB_cBZ_RSUvx5njeMtjr3rN9jftFAu_t4SCMciF1Z6a7t8g8BnvUds6eCo_MU/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9Di-kUBzqBBwkwIyZJhomoFRNI5BL8uKGmpEz2t-XiGN765UFx9-WGHGsBNhAR_F_zoc7eL6ZTMMkgk5mXpxrHF_ciuVF07SiW5d3RX8n4zsH_LvrWhCRHK5AvWFbv5CIslLCLWPa0U/s1600/mail.png);

2. Cari kode </head>,,kemudian copy paste code tersebut tepat diatas kode </head> :

<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;
                $(&#39;#navixed a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navixed &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

3.Cari code <body>:kemudian simpan tepat di atas kode <body>:

<ul id='navixed'>
            <li class='home'><a href='#'><span>Home</span></a></li>
            <li class='about'><a href='#'><span>About</span></a></li>
            <li class='search'><a href='#'><span>Search</span></a></li>
            <li class='photos'><a href='#'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

ket : silahkan ganti # dengan link anda

Cara Membuat Link Nudging

Link Nudging disini yang dimaksud adalah salah satu fasilitas dari jQuery yang memberikan effect pada link. Effect Link Nudging ini di kembangkan oleh David Walsh Blog,,jadi link yang terdapat pada label jika kita arah kan krusor kelink nya(kita sorot) maka dia akan bergeser ke samping,seperti gambar yang disamping ini,,,

Untuk cara membuatnya:
1. Silahkan login blogger, Rancangan, Edit HTMl,
2. Cari kode </head> lalu simpan kode berikut diatas kode tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Selanjutnya copy paste kode dibawah ini tepat diatas script yang diatas :

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

cara membuat anti kilk kanan pada blogger

kali ini saya akan posting tentang cara membuat anti kilk kanan pada blogger ,jadi dalam hal ini kita akan menonaktifkan fungsi klik kanan .. Langsung aja cekidot...

langkah-langkah Sbb :

1. login ke blogger > lalu pilih  rancangan > add gadget >HTML/ java script .

2. kemudian copy paste script di bawah ini ke dalam HTML/java script anda

<script>//FriendsterMagic.net
function nrcIE(){
if (document.all){return false;}}
function nrcNS(e){
if(document.layers||(document.getElementById&&!document.all)){
if (e.which==2||e.which==3){
return false;}}}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=nrcNS;
}else{document.onmouseup=nrcNS;document.oncontextmenu=nrcIE;}
document.oncontextmenu=new Function("return false");
</script>

Cara Mendisable Keyboard di tombol tertentu

hei para blogger mania kali ini saya memberi tips untuk mendisable fungsi keyboard di blog. Jadi ketika seorang menekan tombol keyboard di blog nya, akan ada pesan/alert kalo tombol keyboard di disable pada halaman tersebut

Langsung aja cekekidot :
1. Masuk (Login) ke Dashboard Blogger anda.
2. Pilih Rancangan >> Element laman
3. Kemudian Tambahkan Gadged/Widget, pilih HTML/JavaScript.
4.Masukan Kode dibawah ini pada halaman HTML/JavaScript  
5. Tulisan yang berwarna merah kamu bisa menggantikan dengan kata-kata yang kamu inginkan,,

 <script>
function keypress() {
alert("Maaf, Fungsi Keyboard anda Telah Di Non-aktifkan untuk Halaman Ini !!");
}
document.onkeydown=keypress;
</script>

Buat Menu Melayang

Hai para Blogger mania kali ini saya akan memberikan tips untuk kamu jika ingin membuat menu melayang di blog kamu ,menu yang selalu mengikuti layar kita bergerak.langsung aja cekidot,,,,
kamu tinggal mengopy paste coding dibawah ini :

Langkah Awal,buka blogger kamu,kemudian Rancangan => Edit HTML

lalu masukan CSS dibawah ini ke template kamu,Kemudian kamu cari kode  ]]></b:skin> dan paste diatas code tersebut :

#floatMenu {

position:absolute;

top:150px;

left:50%;

margin-left:235px;

width:80px;}

#floatMenu ul {list-style-type: none;}

#floatMenu ul li a {

display:block;

background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));

border:1px solid #999;

border-left:6px solid #999;

text-decoration:none;

color:#ccc;

padding:5px 5px 5px 25px;

width:80px;

-webkit-transition: all 0.6s ease-out;

box-shadow: #333 0px 0px 10px;

-moz-box-shadow: #333 0px 0px 10px;

-webkit-box-shadow: #333 0px 0px 10px;

}

#floatMenu ul li a:hover {

color:#fff;

background-color:#333333;

border-right:6px solid #999;

width:150px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

}

#floatMenu ul.menu1 li a:hover {border-color:#09f;}

Kemudian Langkah Kedua, Selanjutnya kamu masukan script di bawah ini tepat di bawah kode ]]></b:skin>

<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

Dan Langkah yang terakhir, buka halaman blog kamu,kemudian buka rancangan,tambahkan gadget, tambahkan HTML/JAVA SCRIPT,lalu paste kan Code dibawah ini halaman HTML/JAVASCRIPT tadi :

<div id="floatMenu">
<ul class="menu1">
<li><a href="http://www.e-download-anything.tk/search/label/software"> Software </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Game"> Game </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Anime"> Anime </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Tips dan Trick> Tips&Trick </a></li>
<li><a href='http://www.e-download-anything.tk/' onclick='mgjs.gotop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Note:
-Yang berwarna merah Ganti dengan Url kamu dan yang berwana hijau ganti juga dengan alamat URL kamu.