™Galery™: harizontal

Tampilkan postingan dengan label harizontal. Tampilkan semua postingan

Light Hover Horizontal Menu With CSS For Blogger

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :
Untuk demo nya bisa dilihat disini
Cara membuat nya yaitu sebagai berikut :

Login Blogger2
Pilih Rancangan ---> EDIT HTML

Kemudian Cari kode:

Simpan kode berikut di bawah kode di atas(Sesuai tema blog kawan):

Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan......

Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya:

Lavalamp navigation menu

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
lavaLamp With Image
---------------------------------- */
.lavaLampWithImage {
            position: relative;
            height: 29px;
            width: 421px;
            background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/s1600/lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/s1600/lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

4. Simpan java script berikut tepat diatas kode </head> :

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

sebenarnya ini sesuai template kawan karena pasti ada kemungkinan perbedaan template...

jQuery Background Right left effect

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
jQuery Background Right left effect
---------------------------------- */
#Rightleft {
   list-style:none;
   margin:0;
   padding:0;
   }
#Rightleft li {
   float:left;
   width:100px;
   margin:0;
   padding:0;
   text-align:center;
   }
#Rightleft li a {
   display:block;
   padding:5px 10px;
   height:100%;
   color:#FFF;
   text-decoration:none;
   border-right:1px solid #FFF;
   }
#Rightleft li a:hover, li a:focus, li a:active {
   background-position:-150px 0;
   }
#Rightleft a {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSOTgl9H-zXNs_M9uuAQwSvhzyFa0PQ3ASlAEKb3DBsWUWzO-a4Kr3JrydP6FyXzCzbBBFeyRRg0iIvAbCPGdjb9bQ6u_pTlvfBp9S4nxxrBhlfz25uAmyJx_t-4wvCZc3ppquMTxqqs/s1600/bg2.jpg) repeat 0 0;
   }

selanjutnya simpan script berikut diatas kode </head>:

terakhir cara pemanggilannya pada Html atau pada template kalau saya biasa diletakkan di bawah tag <div id='head-nav'> (sesuaikan dengan template kawan) :

<ul id="Rightleft">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Tutorial</a></li>
</ul>

selesai... jangan lupa simpan template...
Catatan : Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi

Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb... :)

Jquery Navigation Color Fading Hover

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/*----------------
Jquery Color Fading Hover
-------------------------------*/
#pageBody {
   width:500px;
}

.hoverBtn {
   position:relative;
   float:left;
   background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-dSLdMZiyUeACShAfyR-Yf7kE5U3Yya-Zdakug-YWFi0gGaqAYGOQ0EYisLq1foroIPsq83TibSCG6Pk3tH4Q0c8OzsMg27nhojgN5igziac8t72oigfRoHCGe2WL5HhpZuoqtkTng4/s1600/navBG.png) repeat-x 0 0 scroll;
}
.hoverBtn a {
   position: relative;
   z-index:2;
   display: block;
   width:100px;
   height:30px;
   line-height:30px;
   text-align: center;
   font-size:1.1em;
   text-decoration:none;
   color:#000;
   background:transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
   display:none;
   position:absolute;
   z-index:1;
   top:0px;
   background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVevbNsoCPn4RzwB4gurgY0ID5-yJvmhoWPN83lqlz9c9fxErz1couYMSueEdJFCLJPSC3KPFfm8a1w27s_qKJ_SO8uyR4KpSttBbZmvSnquWX1EeY5cSUrHzsV0A657d5uYTC2Bw3E0/s1600/navHover.png) repeat-x 0 0 scroll;
}

4. Simpan script berikut diatas kode </head> :

5. Untuk pemanggilannya, kalau saya disimpan dibawah tag Head-nav (seuaikan dengan template sobat tata letak nya):

<div id='pageBody'>
<a class='hoverBtn' href='#'>Home</a>
<a class='hoverBtn' href='#'>Mobile</a>
<a class='hoverBtn' href='#'>Tutorial</a>
<a class='hoverBtn' href='#'>About</a>
<a class='hoverBtn' href='#'>Contact</a>
</div>

Simpan template dan selesai......

Multi Level Drop-Down Menu Dengan CSS dan JQuery

View Demo
Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini
Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery pada template blogger
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan script JQuery berikut sebelum tag </head>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery yadi

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
</li>
</ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini

Semoga bermanfaat!

30 Tab Menu Navigation Horizontal Untuk Blogger

Sebelumnya saya pernah posting cara membuat menu tab navigation horizontal. Mungkin ada diantara teman-teman blogger yang menemukan kesulitan dalam meletakkan kode CSS pada tahapan pengeditan template, untuk itu pada postingan kali ini saya mencoba memberikan solusi ringan berupa sajian 30 tab menu horizontal instant yang siap pakai hanya dengan menambahkan gadget HTML/JavaScript dan meletakkan kode tab pada konten, sekaligus menekankan akan urgennya fungsi tab navigation pada sebuah template.
Langkah-langkah membuat tab menu navigation horizontal
1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman
2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header
2. Pilih HTML/JavaScript
3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten
Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:

<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut: