13/09/13

Cara membuat jequery multi level hotizontal

Sekarang saya akan mempostingkan cara membuat jequery multi level horizontal atau menu navigasi di blog kita, 


langsung saja tak usah berlama-lama, kita lihat langkah dibawah :




1. Langkah pertama masuk ke blogger.

2. Pilih template lalu edit html

3. Cari kode <head> dan masukan kode dibawah, tepat di bawah kode <head>



<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

4. Cari kode ]]></b:skin> dan letakan script CSS dibawah ini tepat di atas kode ]]></b:skin>



jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}
.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: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
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:#B30000; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}
/*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;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

nah kode di atas adalah style dari menu anda, silahkan edit sesuai keinginan anda,
kalau sudah cari kode dibawah ini 




<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

5. Lalu taruh script dibawah tepat dibawah kode yang diatas

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

6. Kalau sudah semua save

7. Cari tata letak lalu klik add gadget kemudian pilih HTML/JavaScript dan masukan kode dibawah ini..



<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</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>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

nah script diatas adalah widgetnya silahkan edit sesuai keinginan kalian,
kalau sudah tinggal SAVE




Cara memasang widget statistic bola dunia di blog

kali ini saya akan mencoba memberi tahu kepada kalian, apa itu statistic blog.
Widget statistic adalah widget yang menampilkan jumpah visitor atau statistik di blog kita, selain statistic visitor ada juga statistic bola dunia atau globe, jadi pengunjung yang online di blog kita akan di tampilkan pada titik-titik didalam globenya nanti.







langsung saja lihat caranya di bawah :

1. Buka, http://www.revolvermaps.com/?target=home











2. Pilih get your globe di atas bar

3. Selanjutnya kalian tinggal pilih ukuran sesuai keinginan kalian, ukuran normalnya 220px











4. Pilih warna globe dan lihat previewnya di sebelah kanan layar, dan jangan lupa centang sesuai yg kalian inginkan.

5. Lalu copy paste skrip yang berada di bagian bawah page revolver ke notepad









6. Lalu login ke blogger

7. Masuk ke dashboard

8. Pilih tata letak

9. Pilih add gadget

10. Pilih HTML/JavaScript

11. Copy pastekan script yang tadi di notepad ke dalam box konten

12. Lalu save dan selesai...
lihat hasilnya....

selamat mencoba, semoga berhasil ya...

12/09/13

Cara menambahkan visitor pada blog















mau tau berapa kali blog kita di kunjungi.??
kalian bisa melihat itu dari data statistik di acuan blogger kita, tapi yg hanya bisa melihat cuma pengguna bloggernya saja, jadi orang lain tidak bisa melihatnya. Agar semua orang dapat melihatnya maka blog kita harus di pasang visitor, gadget ini bisa menarik pangunjung untuk mengunjungi bloh kita, karena jika visitor kita tinggi maka pengunjung akan tertarik pada blog kita..
tak usah berlama-lama langsung saja kita lihat caranya :


1. Seperti biasa masuk dulu ke blog anda
2. Kalau sudah pilih rancangan/Tata letak
3. selanjutnya pilih tambah gatget
4. kemudian pilih HTML/Javascript, lalu copy script di bawah ini :






<p style="align: center"><a href="http://www.amazingcounter.com"><img 
border="0"                       src="http://cb.amazingcounters.com/counter.php?i=2935143&amp;c=8805742" alt="dream weaver tracker"/></a><br/><a href="http://www.allonlinecoupons.com/st/directv/">DirecTV DSL</a> <a href="http://www.allonlinecoupons.com/ct/internet-services/">Internet</a>
</p>

5. kalau sudah selesai tinggal save kemudian lihat blog
semoga berhasil.....