Cara Membuat Menu Floating Cobasanasini DiBlog


Cobasanasini - Pada kali ini saya akan mempostingkan mengenai : Cara Membuat Menu Floating Cobasanasini DiBlog Langsung saj pada floating ini menggunakan script javascrip jadi mudah ungtuk di edinya dari pada basa basi langsung aja dech nich tutornya :
  1. Login ke Blogger
  2. Klik Design > Edit HTML
  3. 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(http://2.bp.blogspot.com/-Ji6q1sKijRU/TzUcTqFViYI/AAAAAAAAAsg/0opjdDXDBq0/s1600/1deo.png);
    }
    ul#deopradipta2 .ab a {
    background-image: url(http://3.bp.blogspot.com/-1jyeR5djAv8/TzUcuIw6UBI/AAAAAAAAAsw/DrhFr-nOsAs/s1600/3deo.png);
    }
    ul#deopradipta2 .ac a {
    background-image: url(http://1.bp.blogspot.com/-KiCRSV017mc/TzUckSo8jUI/AAAAAAAAAso/Mt-3z_W4yb8/s1600/2deo.png);
    }
    ul#deopradipta2 .ad a {
    background-image: url(http://2.bp.blogspot.com/-umyl4sw9oRk/TzUe2Ya01PI/AAAAAAAAAtY/tZ3EYNNhmVE/s1600/6deo.png);
    }
    ul#deopradipta2 .ae a {
    background-image: url(http://2.bp.blogspot.com/-ha4GRLroFXM/TzUc2nhEeaI/AAAAAAAAAs4/R5tkmqkOwIQ/s1600/4deo.gif);
    }

    #Ganti kode berwarna Orange dengan link gambar yang kalian inginkan

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


    $(&#39;#deopradipta2 &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>

  5. 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://ahmadrijal-blog.blogspot.com/feeds/posts/default'><span>RSS</span></a></li>
    <li class='ab'><a href='http://www.facebook.com/ahmad.strong1'><span>FACEBOOK</span></a></li>
    <li class='ac'><a href='http://twitter.com/CSSLover'><span>TWITTER</span></a></li>
    <li class='ad'><a href='http://www.alexa.com/siteinfo/http://ahmadrijal-blog.blogspot.com/?p=rwidget#'><span>ALEXA</span></a></li>
    <li class='ae'><a href='http://ahmadrijal-blog.blogspot.com/view'><span>VIEW</span></a></li>
    </ul>

    #Ganti kode warna Hitam dengan kode link yang kalian ingin pasang
    #Ganti kode warna Putih dengan tulisan keterangan menu

  6. Klik 'Save Template' , lihat hasilnya dan beri komentar di artikel ini .. makasih :D
Selamat mencoba dan semoga artikel ini bermanfaat bagi kalian salam sobat blogger Cobasanasini ..!!!

4Coment :

  1. Terima kasih atas artikelnya.
    o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya

    anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi

    anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada

    waktu saya akan berkunjung lagi.

    ditunggu kunjungan baliknya :D


    #Semoga sehat selalu :D

    BalasHapus
    Balasan
    1. Makasih sob katanya katany motivasi banget,,!!!

      Hapus
  2. menunya Javascript banget.. :)

    asik :)

    BalasHapus
    Balasan
    1. jelas sob,,
      makasih telah berkunjung,,!!

      Hapus