Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Horizontal Sliding Menu - Simple Larva Menu

Horizontal Sliding Menu atau simple larva menu merupakan sebuah slide menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript. Untuk sebuah slide menu, dengan penggunaan kode css dan javascript sesederhana ini menjadi sangat menarik dan ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah xHTML untuk slide menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman -> Tambah Gadget -> HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya! (maaf masih dibuat karena demo yang lama udah di banned).

D E M O

Kode CSS :
<style type="text/css">
*{
        margin:0; 
        padding:0;
}
.myGRslidemenu{
        position:relative; 
        background:url(https://lh6.googleusercontent.com/-7an5ttHiUhw/T2Im9yow2PI/AAAAAAAAAX8/yvK75bKIKkQ/s128/GR_red-black-grad-8x41.gif) center repeat-x;
        height:32px; 
        width:4px;
        margin:0;
        border-radius:4px;
}
.myGRslidemenu ul{
        list-style-type:none !important; 
        z-index:10;
  margin:0 !important;
        position:absolute; 
        z-index:100; 
        padding:7px 5px !important;
        border:2px solid #888;
}
.myGRslidemenu li{
        list-style-type:none !important;
        float:left;
        font-size:10px;
        font-family: verdana;
        font-weight: bold;
        text-decoration:none;
}
.myGRslidemenu a, .myGRslidemenu a:active, .myGRslidemenu a:visited{
        font-family:Arial;
        font-size:12px;
  font-weight:bold;
        text-decoration:none; 
        color:#eee;
        text-shadow:1px 1px 1px #000; 
        padding:8px;
}
.myGRslidemenu a:hover{
        color:#fc0;
} 
#GRslide{
        position:absolute; 
        top:4px; 
        height:24px; 
        background:#00f url(https://lh3.googleusercontent.com/-eRCgVCazU1g/T2bbToO-2nI/AAAAAAAAAcg/qEkAwg_GkFE/s128/bgBlueFadeV57H4.jpg) top left repeat-x;
        z-index:10;
}
</style>

Javascript :
<script type="text/javascript">
/* boggerstuars.blogspot.com - gubhugreyot.blogspot.com */ //<![CDATA[
var myGRslidemenuSlider = function () {
    var m, e, g, s, q, i;
    e = [];
    q = 5;
    i = 6;
    return {
        init: function (j, k) {
            m = document.getElementById(j);
            e = m.getElementsByTagName('li');
            var i, l, w, p;
            i = 0;
            l = e.length;
            for (i; i < l; i++) {
                var c, v;
                c = e[i];
                v = c.value;
                if (v == 1) {
                    s = c;
                    w = c.offsetWidth;
                    p = c.offsetLeft
                }
                c.onmouseover = function () {
                    myGRslidemenuSlider.mo(this)
                };
                c.onmouseout = function () {
                    myGRslidemenuSlider.mo(s)
                };
            }
            g = document.getElementById(k);
            g.style.width = w + 'px';
            g.style.left = p + 'px';
        },
        mo: function (d) {
            clearInterval(m.tm);
            var el, ew;
            el = parseInt(d.offsetLeft);
            ew = parseInt(d.offsetWidth);
            m.tm = setInterval(function () {
                myGRslidemenuSlider.mv(el, ew)
            },
            i);
        },
        mv: function (el, ew) {
            var l, w;
            l = parseInt(g.offsetLeft);
            w = parseInt(g.offsetWidth);
            if (l != el || w != ew) {
                if (l != el) {
                    var ld, lr, li;
                    ld = (l > el) ? -1 : 1;
                    lr = Math.abs(el - l);
                    li = (lr < q) ? ld * lr: ld * q;
                    g.style.left = (l + li) + 'px'
                }
                if (w != ew) {
                    var wd, wr, wi;
                    wd = (w > ew) ? -1 : 1;
                    wr = Math.abs(ew - w);
                    wi = (wr < q) ? wd * wr: wd * q;
                    g.style.width = (w + wi) + 'px'
                }
            } else {
                clearInterval(m.tm)
            }
        }
    };
} ();
//]]>
</script>

Tambahkan di <body>
<body onload="myGRslidemenuSlider.init('myGRslidemenu','GRslide')">

xHTML :
<div class="myGRslidemenu">
<ul id="myGRslidemenu">
<li value="1"><a href="#">| Home |</a></li>
<li><a href="#">| CSS Tutorial |</a></li>
<li><a href="#">| Javascript |</a></li>
<li><a href="#">| Image Gallery |</a></li>
<li><a href="#">| Horizontal Menu |</a></li>
<li><a href="#">| Vertical Menu |</a></li>
<li><a href="#">| JQuery |</a></li>
<li><a href="#">| Template |</a></li>
<li><a href="#">| Floating Menu |</a></li>
</ul>
<div id="GRslide"><!-- --></div>
</div>

Cara Membuat Sliding Menu - Simple Larva Menu
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
      Lakukan Backup Template sebagai langkah preventif sebelum melakukan berbagai perubahan kode html baik berupa penambahan ataupun pengurangan kode css, javascript dan xHTML.
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari kode ]]></b:skin> pada "Box Edit Template".
  6. Copy kode CSS dan letakkan di atas ]]></b:skin>
  7. Letakkan javascript di bawah ]]></b:skin>
  8. Rubah kode :
    <body> (untuk Old Template) atau
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>(untuk Blogger Designer), menjadi :

    body onload (Old Templates):
    <body onload="myGRslidemenuSlider.init('myGRslidemenu','GRslide')">
    body onload (Template Designer):
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='myGRslidemenuSlider.init("myGRslidemenu","GRslide")'>
  9. Klik "Simpan Template (Save Template)".
  10. Klik "Rancangan (Design)".
  11. Klik "Add a Gadget" yang terletak di atas "elemen Blog Post" (di bawah elemen header blog) .
  12. Setelah semua gadget terlihat, pilih dan klik "HTML/Javascript".
  13. Copy xHTML dan pastekan dalam "box HTML/Javascript".
  14. Klik "SIMPAN/SAVE"
  15. Selesai! Buka blog dan lihat hasilnya!
Catatan/Keterangan :
  • Untuk merubah lebar menu » lakukan perubahan nilai pada syntax:
    .myGRslidemenu{width:844px;}
    Perubahan bertujuan untuk membuat lebar menu agar tepat dengan jumlah menu dan panjang pendeknya title menu.
  • Panduan cara backup template, cara menyimpan kode css, javascript dan xHTML serta cara mencari kode di tempalte bisa anda baca di Special Tutorials di deret menu kolom sebelah kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - gubhugreyot «

4 komentar:

  1. muantap bos artikelnya, ntar tak coba deh diblogku. kl sempat mampir ya n kasi komen.

    BalasHapus
  2. Tag body (pembuka) adalah <body>
    Cari tag tersebut. Gunakan Ctrl + F (Cari di blog ini ada tutorial "cari cepat kode html")
    Sehingga penulisan kode menjadi :
    <body onload="menuSlider.init('menu','slide')"> --> jadi kode yang di posting di sisipkan di tag body milik sampeyan. Oke ?!

    gubhug reyot blogDETIK

    BalasHapus
  3. POSTINGAN ANDA membingungkan pembaca seperti saya karena keterangan tidak mudah di pahami masa kedua script di taroh di antara code <.body> n semua ????
    harusnya di atasnya keeee atau di bawahnya . . . .

    BalasHapus

 
GR | Edited by | gubhug reyot