Dhecun Blog: Menu

Showing posts with label Menu. Show all posts

Slide Menu Vertikal

Cara pembuatannya sangat mudah , yaitu menggunakan fitur CSS dan beberapa kode HTML.
Anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda , dan sedikit kode HTML pada sidebar blog anda.

Demo

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas kode </head>

<style type='text/css'>
/*widget Slide Menu vertikal by noer cara buat web gratis.com*/
ul#Slide-Menu-vertikal-cbwg {
list-style: none;
z-index:999999;
margin:0;
padding:0;
}
ul#Slide-Menu-vertikal-cbwg li {
width: 200px;
display:inline;
margin:0;
padding:0;
}
ul#Slide-Menu-vertikal-cbwg li a {
display: block;
position:relative;
width: 200px;
height: 25px;
background-color:#aaa;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #aaa;
text-decoration:none;
text-align:center;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0;
padding:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
ul#Slide-Menu-vertikal-cbwg li a:hover{
background-color:#fff;
border:1px solid #bbb;
padding-top: 80px;
}
ul#Slide-Menu-vertikal-cbwg li a span{
background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));
border-top:2px solid #bbb;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
display: block;
width: 200px;
height: 25px;
font-size:14px;
font-weight:bold;
color:#000;
margin:0;
padding:0;
}
ul#Slide-Menu-vertikal-cbwg li a span:hover{
text-decoration:none;
text-align:center;
font-size:14px;
font-weight:bold;
color:#40954E;
background-color:#eee;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

8. Kemudian masukkan script dibawah ini tepat dibawah script diatas

<style type='text/css'>
ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7IEYbF5Nv13G7HJuQkr7kK2TuEmD1wCwRbo167cIIhj2qRjgWNSO3NbxDHjUpsx4e47t_hQ2kM9hptmJD3NdrwNF1L0098EKq2BLFaHtjat-kXCOUvJ-T-3SlSZfnhozo4c3o7jXWPPR/s104/home+2.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKmwIOLe1MF94d7C4jeTuuocnw6xmdNuDsgEzRsz9Gi3-rhMC7sZjC0YwEyPTNY_8zcoPH7eraLBlzAecGBaHMLeZZu2x_4XuqfmB2cvBW_tv-GftQwrIoHwrs6qbdyROGRL9Nd32LR0F/s104/id_card.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJ3TaEUo7o0fmvrtH4ybC4mDRAN5EXsqh6Qg2-tPt-Jla8hxMfZNHymcsO4ikiDjKFrcK0vLq3IMDuxYHwJu6JAX6JGkIpwNSSgRgf5e_d3d0p9JgCfcxzAwtdGqS2BqBwuLzJsdFqkQ-/s104/html_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS6ud3x1f_g-9doNz1ko9mT4oOVnrdHH9-8dkg8O2oJ7lETK0xHt7Aeeirg_w3RW_poWxRMBrI0oavW_3VhNK3fbIRRkyU2cliTUvMYRPj1_rHUvPtzD8ITKM9k6NyMqHxhxHW6sGJ4aw/s104/css_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6muVRWXPCJi68krv72H-7S_APdbvoFhd0YsHWyPuvRUEXkv9fdUVwPAkIfQfuJhPcuQnXgNzao4n1sYb8U6WhATTbXeL_hZqiMg0bKOsFYTP7Jbby4Eq9njjAMMVVywF_Z-m6nlp7JfJ/s104/js_file.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoZYA4wDvFeBqvBT4ezX9a8gfOSv_qQLB7_trwg_9amIqJpqdaiVWkkZNg7TGkqUEN_LTRocHkiO-NlxjwyCL9RQVnI1FBtDxpzvud0vzM7Kggh-8f0SqpLcmu7GuhXTKlf25YPmBaRkI/s104/edit_page.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1Lfs2_XI-Wz4m9vUQnmK71kwfF46rUL87CC2HWMlpAYHe50V48mVXpbuLd6Pj-UKBYdYxTFno9ZiKKoyooK4Z8wbF-byuBPRcaK3x9D7nUElEjINWqJZ6htL1sj8gHr2VX4Iwqk8ALOM/s104/book_accept.png);}
ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_NHZKtzWjs56ml-Vbt_XmhHOS_9ByfzCm2qpDF2Euo0RytUbE67SSqJxoJ-BLIDUFu3Erlg3HkoumkkAw0vIvXgV642GxFpILW_5GSIe4YJzXXa9t46r9QUdGfatyon85QGS-hS0Oe0/s104/mail.png);}</style>

Catatan :
- Tulisan warna merah adalah ULR Icon yang ada pada setiap menu.
- Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda inginkan.
- Sebagai referens i, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons
- Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. Klik simpan template

Langkah selanjutnya tinggal menaruh Slide Menu Vertikal ini pada Sidebar atau Gadget blog anda.
Ikuti langkah berikut ini :

1. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
2. Masukkan script dibawah ini
3. Klik simpan

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="http://AlamatLinkAnda"><span>Judul Menu 1</span></a>
</li>
<li class="ITEM 2">
<a href="http://AlamatLinkAnda"><span>Judul Menu 2</span></a>
</li>
<li class="ITEM 3">
<a href="http://AlamatLinkAnda"><span>Judul Menu 3</span></a>
</li>
<li class="ITEM 4">
<a href="http://AlamatLinkAnda"><span>Judul Menu 4</span></a>
</li>
<li class="ITEM 5">
<a href="http://AlamatLinkAnda"><span>Judul Menu 5</span></a>
</li>
<li class="ITEM 6">
<a href="http://AlamatLinkAnda"><span>Judul Menu 6</span></a>
</li>
<li class="ITEM 7">
<a href="http://AlamatLinkAnda"><span>Judul Menu 7</span></a>
</li>
<li class="ITEM 8">
<a href="http://AlamatLinkAnda"><span>Judul Menu 8</span></a>
</li>
</ul>

Catatan :
- Tulisan warna biru pada kode ini harus sama dengan tulisan warna biru yang ada pada kode diatas.
- Tulisan warna merah ganti dengan URL halaman anda.
- Tulisan warna pink ganti dengan Judul Menu yang sesuai keinginan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Menu Dropdown Multi Level

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </head>
6. Masukkan script dibawah ini tepat diatas kode </head>

<!--MULTI-LEVEL-DD-MENU-STARTS-http://dhecun.blogspot.com-->
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script>
<!--MULTI-LEVEL-DD-MENU-http://dhecun.blogspot.com-->

7. Klik simpan template
8. Langkah selanjutnya pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
9. Masukkan script dibawah ini

<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-multi-level.html" target="_blank" title="Menu Dropdown Multi Level"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

<!--MULTI-LEVEL-DD-MENU-

STARTS-http://dhecun.blogspot.com-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-multi-level.html" target="_blank" title="Menu Dropdown Multi Level"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

10. Klik simpan

Catatan :
Untuk penjelasan mengganti link dan teks , saya rasa anda sudah tau , silahkan edit sesuai keinginan anda.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Menu Dropdown JQuery

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

Keterangan :
Ganti tulisan warna merah , biru , pink dengan teks sesuai keinginan anda.

<style>

/*------ CSS3 Drop Down Menu By RL (dhecun.blogspot.com)---------*/

#rl-menu, #rl-menu ul {

margin: 5;

padding: 5;

list-style: none;

}

#rl-menu {

width: 533px;

margin: 5px auto;

border: 1px solid #3b5998;

background-color: #4b67a1;

background-image: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#3b5998));

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#rl-menu:before,

#rl-menu:after {

content: "";

display: table;

}

#rl-menu:after {

clear: both;

}

#rl-menu {

zoom:1;

}

#rl-menu li {

float: left;

border-right: 1px solid #3b5998;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#rl-menu a {

float: left;

padding: 5px 5px;

color: white;

text-transform: uppercase;

font: normal 11px Verdana, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#rl-menu li:hover > a {

color: white;

}

*html #rl-menu li a:hover { /* IE6 only */

color: #3b5998;

}

#rl-menu ul {

margin: 5px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 9999;

background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#rl-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#rl-menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 5px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#rl-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#rl-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#rl-menu ul a {

padding: 5px;

width: 400px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#rl-menu ul a:hover {

background-color: #0186ba;

background-image: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#0186ba));

}

#rl-menu ul li:first-child > a {

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

-webkit-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

#rl-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -5px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 5px solid #444;

}

#rl-menu ul ul li:first-child a:after {

left: -5px;

top: 0%;

margin-top: -5px;

border-left: 0;

border-bottom: 5px solid transparent;

border-top: 5px solid transparent;

border-right: 5px solid #3b3b3b;

}

#rl-menu ul li:first-child a:hover:after {

border-bottom-color: #3b5998;

}

#rl-menu ul ul li:first-child a:hover:after {

border-right-color: #0299d3;

border-bottom-color: transparent;

}

#rl-menu ul li:last-child > a {

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

-webkit-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

</style>
<ul id="rl-menu">
<li><a href="#">Recent Post ▼</a>
<ul>
<li><a href="http://dhecun.blogspot.com/2012/12/mengganti-tampilan-scroll-bar-keren-di.html">► Mengganti tampilan scroll bar keren</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/memasang-widget-share-button-facebook.html">► Memasang widget share button facebook 1</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html">► Memasang widget share button facebook 2</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-formulir-kontak-di-blog.html">► Membuat formulir kontak</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/membuat-buku-tamu-bergaya-absolute.html">► Membuat buku tamu bergaya absolute vertical sliding panel</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/membuat-egg-share-slide-open-widget-di.html">► Membuat widget egg share slide open</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/membuat-recent-post-dan-recent-comment.html">► Membuat recent post dan recent comment</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/kumpulan-widget-social-share-keren-ala.html">► Kumpulan widget social share keren</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/membuat-snipping-pada-gambar-komentator.html">► Membuat snipping pada gambar komentator</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro.html">► Membuat widget email subscription pro 1</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-email-subscription-pro_4.html">► Membuat widget email subscription pro 2</a></li>
<li><a href="http://dhecun.blogspot.com/2012/12/memasang-backsound-musik-di-blog.html">► Memasang backsound musik keren</a></li>
</ul>
</li>
<li><a href="#">About me ▼</a>
<ul>
<li><a href="http://www.blogger.com/profile/12312624184375807154">► Profil</a></li>
<li><a href="http://www.facebook.com/dhecun">► My Facebook</a></li>
<li><a href="http://dhecun.blogspot.com/2012/11/kirim-sms-gratis.html">► Kirim SMS Gratis</a></li>
<li><a href="http://dhecundoank.blogspot.com/">► Download Gratis</a></li>
<li><a href="http://feeds.feedburner.com/DhecunBlog">► RSS</a></li>
</ul>
</li>
<li><a href="#">Contact us ▼</a>
<ul>
<li><a href="http://dhecun.blogspot.com/2012/11/hubungi-dhecun-blog.html">► Contact via Email</a></li>
<li><a href="http://www.facebook.com/dhecun.blog">► Contact via Facebook</a></li>
</ul>
</li>
<li><a href="#">Follow ▼</a>
<ul>
<li><a href="http://www.blogger.com/follow-blog.g?blogID=2726093644608416144">► Follow this blog</a></li>
</ul>
</li>
</ul>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-jquery.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Menu Tab View JQuery

target="_blank"><span style="font-size: xx-small;">[ Get Widget ]

</span></a></div>

4. Klik simpan widget tanpa judul dan preview blog anda

Keterangan :
1. Widget yang berisi kode pada langkah 3 harus ditempatkan diatas widget yang akan dibuat menjadi organic tab.
2. Untuk mengatur berbagai hal yang berhubungan dengan tampilan JQuery Easy Organic Blogger Tabs silahkan anda edit atau modifikasi kode-kode CSS nya.
3. Untuk mengatur jumlah tabs , ubah nilai 3 pada kode organic tabs , angka 3 berarti kita akan memasukkan 3 widget kedalam organic tabs.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Menu Dropdown Dengan JQuery Warna - Warni

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode <head>
7. Masukkan script dibawah ini tepat dibawah kode <head>

<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script> 
    <script src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js' type='text/javascript'> </script> 
    <script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script>

8. Kemudian cari kode body {
9. Masukkan script dibawah ini tepat dibawah kode body {

margin:0px
padding:0px;

10. Kemudian cari kode berikut

 <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

11. Masukkan script dibawah ini tepat dibawah kode tersebut

<style>
/*------- Colourful Tabs Menu by dhecun.blogspot.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg528C6nW1m5VUzu_Ji_yYYfK9_sroN75L3fdjXI6hFURWO6nKju-9Arwb_GpouEZHr0dp1abSOVqM_2mnPaKdQ_vHAesiCU0FCHYmk3YvA2tvdH_FEpI4RGaWTCmEJpdQ5JPkLzF5Bxag/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
margin: 0; padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
border-left: 1px solid #cfcfcf;
border-right: 0px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg528C6nW1m5VUzu_Ji_yYYfK9_sroN75L3fdjXI6hFURWO6nKju-9Arwb_GpouEZHr0dp1abSOVqM_2mnPaKdQ_vHAesiCU0FCHYmk3YvA2tvdH_FEpI4RGaWTCmEJpdQ5JPkLzF5Bxag/s400/menu-bgd.png) bottom left repeat-x;
position: relative;
font-size: 12px; font-family: helvetica, arial, sans-serif;
list-style: none; margin: 0 auto; padding: 0;
width: 960px;
}
#nav ul {
margin: 0;

}
:focus {
outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
display: block;
float: left;
text-transform: uppercase;
font-weight: bold;
line-height: 33px;
padding: 0 13px 0 10px;
color: #333;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLkCipbs89nk3tOaVPSlJDXlKxs_Td3oJLzuhhBxski_o1GaCJrslJuLHhAZs3RYgCJ_1kfFNGEi4Gwku2U6pb9InUTVmdTwi32ri5-lD-fezifUC65Gp6kzCi9WUPGZyE_rbECN0SVOM/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
padding: 0 33px 0 10px;
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnVOFAEnR1pBREZbAW-90PrXKfVwws7Xi3DtQfhgx1DXyT7kNkazvjks4KeL6NNqZpKu_IkVny0W9ToPb0wW_nr5-casU9szT6vSdY26KJ3vgqnoZo9pGFAcapUxoIKJu98GPV83B4Dw/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnVOFAEnR1pBREZbAW-90PrXKfVwws7Xi3DtQfhgx1DXyT7kNkazvjks4KeL6NNqZpKu_IkVny0W9ToPb0wW_nr5-casU9szT6vSdY26KJ3vgqnoZo9pGFAcapUxoIKJu98GPV83B4Dw/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
position: absolute;
top: 33px;
left: -1px;
overflow: hidden;
width: 960px;
display: none;
z-index: 999;
list-style: none;
padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eVQ6ojasna8VWEuCAd_PtsqmSIqTLikWl_2qn3fUXGGlmTnSvANVTsSt1UY0hR56vMPvQg69i8UOYY2U0qSv-JafF2IztKY4z5rC3ed4POsqwpXpiYwrt4w20fBGwUudNSQyp9BPytM/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_appXJGYV6d_bsks3qvWQU9HXBMfTRDvQZGetRsygqB4jqd44kkBKAWLdBnoOARRwdV6XOiG9aeUpyIL9OsplcVVESEDR_bqxR-1ig5Z_PHCPOh1BYZFr6qIOSqL0iFWlKRmLC2Q15c/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJnPCUoHq-dfEgOyERLRhiy8NIvZMKye8L0Gltf5llRYENh_H0ijQTWfSbTUctCVA2GZ1VnXM8nXBQncVk26KTXmcbs76AKSieKnW_4yaUwU8bs5LCPSHFiN3r_anMQ4rGRBGJwdXOY28/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zqWj1Euq77oQDPOWuhsiFiyn1H7Qce2NRGpmQdvz0988uPe54qnsfoawtmPsr4kFEiGW5z2YHE-cWc4x699SYp3w-fp8QHjdyTtd9aI2gSHLm5OHefrziuFdSJioh-XqFseeGFH6dik/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZvw3PWFbCheZeNkf9TGyIM1MxSBr8i_GDYj3Hs6z8clJtg6tit-hBPryeJYV88PMRn_3wW_Rj7V9B0epvc1it6zmoZ7S2qVD4-DukncFktETilNHCRwCGOYrU2x7WZrbtPGtVojpxkk/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left; }
ul#nav li ul.sub-nav li a {
float: none;
background: none;
font-size: 11px;
text-transform: none;
color: #fff;
line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-nav-container'>
<ul id='nav'>

<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

<li class='top-link' id='mbt'><a href='#'>TAB 1</a>
<ul class='sub-nav'>
<li><a href='#'>SUB TAB 1.1</a></li>
<li><a href='#'>SUB TAB 1.2</a></li>
<li><a href='#'>SUB TAB 1.3</a></li>
<li><a href='#'>SUB TAB 1.4</a></li>
</ul>
</li>

<li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 2.1</a></li>
<li><a href='#'>SUB TAB 2.2</a></li>
<li><a href='#'>SUB TAB 2.3</a></li>
<li><a href='#'>SUB TAB 2.4</a></li>
<li><a href='#'>SUB TAB 2.5</a></li>
</ul>
</li>

<li class='top-link' id='link-news'><a href='#'>TAB 3</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 3.1</a></li>
<li><a href='#'>SUB TAB 3.2</a></li>
<li><a href='#'>SUB TAB 3.3</a></li>
<li><a href='#'>SUB TAB 3.4</a></li>
</ul>
</li>

<li class='top-link' id='link-life'><a href='#'>TAB 4</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 4.1</a></li>
<li><a href='#'>SUB TAB 4.2</a></li>
<li><a href='#'>SUB TAB 4.3</a></li>
<li><a href='#'>SUB TAB 4.4</a></li>
<li><a href='#'>SUB TAB 4.5</a></li>
<li><a href='#'>SUB TAB 4.6</a></li>
<li><a href='#'>SUB TAB 4.7</a></li>
</ul>
</li>

<li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 5.1</a></li>
<li><a href='#'>SUB TAB 5.2</a></li>
<li><a href='#'>SUB TAB 5.3</a></li>
<li><a href='#'>SUB TAB 5.4</a></li>
<li><a href='#'>SUB TAB 5.5</a></li>
</ul>
</li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>







<li style='clear: both;'/>
</ul>
</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-dengan-jquery.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

Keterangan :
- Ganti kode warna merah dengan alamat link yang anda inginkan.
- Ganti tulisan warna biru dengan teks yang anda inginkan.

12. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.

RSS feeds

Space Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

Follow this blog

RSS feeds

RSS
Post RSS
Comments RSS

Widget Populer

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Tukar Link

Traffic

Dhecun Blog Statistics summary for website

Semua Artikel

Tampilkan semua artikel

10 Artikel Terbaru

Gabungan

Ganti warna border

Ganti warna background

Ganti background dan border

Blogger templates

Pages

Beranda

My Facebook

Kirim SMS Gratis

Download Gratis

Contact us

Dhecun Blog

Slide Menu Vertikal

Sunday, December 30, 2012

Membuat Menu Dropdown Multi Level

Sunday, December 16, 2012

Membuat Menu Dropdown JQuery

Thursday, December 13, 2012

Membuat Menu Tab View JQuery

Membuat Menu Dropdown Dengan JQuery Warna - Warni

Tuesday, December 4, 2012

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut