Cara membuat menu penuh warna dengan effect jquery di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang 
berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini 
diberi nama Colorful JQuery Menu (menu jquery penuh warna). Menu ini didapatkan dari Mybloggertrick, dan semoga dengan menu ini tampilan blog anda lebih profesional. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Da7Dby2E-B9otfjCkhFO5tlcjsbmxUoavRlWZskt1hUVieF-CKeZ9cxXJUPws8_Kp1PYZJrJqfxnnNXsX7g5xpm7XCAuKdD-z0EeoaNYXHC1gQr6Mdb9T0Zqhz4zfd92MkBp_7jjicTK/s1600/colourful-menu_thumb4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Da7Dby2E-B9otfjCkhFO5tlcjsbmxUoavRlWZskt1hUVieF-CKeZ9cxXJUPws8_Kp1PYZJrJqfxnnNXsX7g5xpm7XCAuKdD-z0EeoaNYXHC1gQr6Mdb9T0Zqhz4zfd92MkBp_7jjicTK/s320/colourful-menu_thumb4.gif" width="320" /></a></div>
 
1. Login ke blog kamu. 
2. Pilih Rancangan > Edit HTML > Cari Kode <head> 
3. Letakan kode di bawah ini tepat di bawah kode <head> 
<blockquote class="tr_bq">
<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></blockquote>
4. Selanjutnya cari kode: 
<blockquote class="tr_bq">
body { 

---- 

--- 

)  </blockquote>
 
5. Tambahkan kode berikut: 
<blockquote class="tr_bq">
body { 

margin:0px 

padding:0px; 

--- 

--- 

}   </blockquote>
6. Jika tidak ada kode body {  letakan saja kode yang nomor 5 tepat di atas ]]></b:skin> 
7. Selanjutnya cari kode <body> atau <body expr:class='&quot;loading&     quotdata:blog.mobileClass'> 
8. Setelah ketemu letakan kode Menu dan CSS nya di bawah ini tepat di bawah kode nomor 6. 
 
<blockquote class="tr_bq">
<style> 
.MBT-Nav-container { 
border: 1px solid #cfcfcf; 
   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/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/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/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/AVvXsEjpSmYzTpIJqGJlF4x4_wMUTaROj1GrPykJu6ElKf9ikcymA0HMv-UZ4fSjyAXP5UV6Q8LdTNX8fSI37WpN1Fms0rT22KHNYbePs5sWIKw8aDM4LVvDHs0JJSpUr3jM-6KuleAMatXRt8g/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/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/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/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/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/AVvXsEiDpk00H3ermP3hzRD_3sFlXjLMB6_ksDbi31xseFywAqLSjJVAyNBVIsghKPiKbBg_COJ7Hl8Y2uR1M3wgVb2QHYuOsxfyEkgDGmeQECt5kOvvSNl0c-hzr-zEWSDV_jjsT5H_W16siig/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/AVvXsEjeeSXm1DexdmDiDKDJLMtCoTZQgwO-MsSUmDebo5NGIWuXta8yuJ0askd_cb-3Jzdbwkg4OWSEATNhE54zewGHE9CiJ3QYk7Xk-YIVboSvR6-Q4n1eTK1O6o46JtYFkIMUtXliP-DjlA4/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/AVvXsEjJKS5jMCgjg5z1chCawEJh88mE1Xg7OHGPJ-U3rssRN_8n_6s2nbzpzGNcRP5bqOeHToMZ8basDg3WOWqN9NlAN6k_-carTu7vxwkKnizDDXh5WuTYZWGv35T9ZvoKY9Z8LhAhJW2xG68/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/AVvXsEht00emnL1Erpe4EsS0gB6F6TadYRqTmUS24qWZ6U3Ejt4O5HKMRtRqPJk1P4kJcKOq7KBxlWBrTw-doMG76LzfyBGTjOval-gq0kt_r7Wf1eTa5OLNmSY4RCXH3d3OJHWayEwpwdpNznY/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/AVvXsEgIxHV7NX7bd3oN3EfFMM-6XembV9GylqQJumPdEIMPNHN7sa_UPPGk61LzoHvkNP0SqbZfhNEA7E_IOonUPA2HuLzyraaOFtZOtic2vJszf6maJP-9r_zu83y0ZFMVsc5PquecjWSCmWk/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='http://blazerracing.blogspot.com/'>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='http://blazerracing.blogspot.com/'>TAB 6</a></li> 
 
 
 
 
 
               
 
                  <li style='clear: both;'/> 
            </ul> 
</div> </blockquote>
 
Klik dulu pratinjau dan setelah berhasil baru Simpan Template. 
 
Sumber: Blazzer Blog </div>

Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini diberi nama Colorful JQuery Menu (menu jquery penuh warna). Menu ini didapatkan dari Mybloggertrick, dan semoga dengan menu ini tampilan blog anda lebih profesional. 1. Login ke blog kamu. 2. Pilih Rancang…

Baca selengkapnya...

6 Komentar

jalupangna Label: tips dan triks blogger 22.27 6 komentar

Cara mudah membuat tombol button to top up dengan effect jquery

<div dir="ltr" style="text-align: left;" trbidi="on">
Tombol back to top berfungsi untuk mengembalikan posisi dari bawah 
kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan 
pengunjung suatu website / blog untuk kembali ke atas tanpa menggunakan 
scroll. Saya juga menerapkannya di blog karena simple, cantik dan keren. Lihat screen shot nya di bawah ini: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFGigUcp6JzrGYi0wvgsNRMCkBwvTt5pNB0JQw-Ogt5xGpz5G6rLO7upZwHBQVMlcnzMy40bKYv_e-x_CMZ682aRian_Zetx5Thk45rTuAqGigToBUPD_mmdd7ccWJvbilsixVbKSrTz/s1600/screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFGigUcp6JzrGYi0wvgsNRMCkBwvTt5pNB0JQw-Ogt5xGpz5G6rLO7upZwHBQVMlcnzMy40bKYv_e-x_CMZ682aRian_Zetx5Thk45rTuAqGigToBUPD_mmdd7ccWJvbilsixVbKSrTz/s320/screen.png" width="320" /></a></div>
 
 
Langsung saja tanpa basa basi menuju TKP :) 
1. Login ke blog kamu. 
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini. 
 
<blockquote class="tr_bq">
<script 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 
type='text/javascript'></script><script 
type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return
 false})});</script><a id='noop-top' style='display: none; 
position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px 
arial;'>^</a><style 
type="text/css">#noop-top span{-moz-transition:all .3s ease-in 
0s;-webkit-transition:all .3s;-o-transition:all 
.3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799
 0,#2989d8 50%,#207cca 51%,#7db9e8 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799
 0,#2989d8 50%,#207cca 51%,#7db9e8 
100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 
51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 
50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 
0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid 
#fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px 
cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px
 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 
49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 
#fff;text-decoration:none}</style> </blockquote>
 
 3. Simpan dan lihat hasilnya. 
 
Semoga bermanfa'at... </div>

Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan pengunjung suatu website / blog untuk kembali ke atas tanpa menggunakan scroll. Saya juga menerapkannya di blog karena simple, cantik dan keren. Lihat screen shot nya di bawah ini: Langsung saja tanpa basa bas…

Baca selengkapnya...

27 Komentar

jalupangna Label: tips dan triks blogger 21.39 27 komentar

Cara membuat menu vertical accordion keren dan cantik

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJnpvg__wxn-gFNm-i_YjMIhxgUl62wgdNgHr2BZjGBYAg9U7ixPvqiyqHVddhzg7YdP3VnIcSYzYJup9QLnFBjTX_el4xU0s2r5EnbvxJLyqmwbQTis3TdnF14xxbxd5QxOgPGjRgBLp/s1600/gbr1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJnpvg__wxn-gFNm-i_YjMIhxgUl62wgdNgHr2BZjGBYAg9U7ixPvqiyqHVddhzg7YdP3VnIcSYzYJup9QLnFBjTX_el4xU0s2r5EnbvxJLyqmwbQTis3TdnF14xxbxd5QxOgPGjRgBLp/s1600/gbr1.jpg" /></a></div>
 
 Setelah blogwalking ke tetangga sebelah, saya sangat tertarik sekali 
untuk mepostingan kembali dan share dengan anda tentang Cara membuat 
menu vertical accordion cantik di blog . Langsung menuju  TKP aja.. 
 
JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang
 dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah 
fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui 
beberapa kode css dan background image. 
 
<a href="http://jalu-pangna.blogspot.com/" target="_blank">jquery dan Javascript pembentuk jQuery Vertical Accordion Menu</a> 
 
Silahkan letakkan dan simpan di bawah kode </head>  
 
<h5>
Javascript :</h5>
<blockquote class="tr_bq">
<h5>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src='http://vertical-accordion-menu.googlecode.com/files/GR_v-accordion-gubhugreyot.js' type='text/javascript'></script> <script type="text/javascript"> //<![CDATA[ ddaccordion.init({ headerclass: "accordion", contentclass: "ul_accordion", revealtype: "click", // "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover" collapseprev: true, defaultexpanded: [0], onemustopen: false, animatedefault: false, persiststate: true, toggleclass: ["", "aktif"], togglehtml: ["prefix", "", ""], animatespeed: "slow", oninit:function(headers, expandedindices){ }, onopenclose:function(header, index, state, isuseractivated){ } }) //]]> </script> </h5>
</blockquote>
 
 Kode CSS jQuery Vertical Accordion Menu 
 
Untuk kode CSS, anda bisa meletakkan dan menyimpan di atas kode ]]></b:skin> 
 
<h5>
Kode CSS:</h5>
<blockquote class="tr_bq">
<h5>
h3.selektor accordion{        font-weight: bold;        font-size:14px; } .molormenu{        background:#33333;        width:auto;        margin-top:10px;        font-family:Arial; } .molormenu .selektor{        font-weight: bold;        font-size:15px;        font-family:Times;        color: #e79958;        background: transparent url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-2.gif) repeat-x center left;        margin-bottom: 5px;        text-transform: uppercase;        padding: 10px 0 10px 10px;        cursor: pointer;        border-bottom:1px solid #666; } .molormenu .aktif{        background-image: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-3.gif); } .molormenu ul{        background:transparent;        list-style-type: none;        margin: 0;        padding: 0;        margin-bottom: 8px; } .molormenu ul li{        padding-bottom: 2px; } .molormenu ul li a{        color: #fceada;        background: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-4.gif) no-repeat center left;        display: block;        padding: 2px 0;        padding-left: 19px;        text-decoration: none;        font-weight: bold;        border-bottom: 1px solid #666;        font-size: 11px;        font-weight:normal; } .molormenu ul li a:visited{        background:red;        color: #3a3838; } .molormenu ul li a:hover{        color:yellow;        background-color: black; } </h5>
</blockquote>
 
Kode HTML jQuery Vertical Accordion Menu 
 
Kode HTML yang berisikan link dan nama setiap link menu yang akan 
ditampilkan di blog disimpan melalui penambahan widget. Sampeyan bisa 
menggunakan widget di bagian sidebar kanan atau kiri. Silahkan setiap 
link beserta nama link untuk diganti sesuai kebutuhan blog. 
 
<blockquote class="tr_bq">
<div style="background:#222;padding:2px;border:1px solid 666;"> 
 
<div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px  5px;border:1px solid blue;"> 
CLICK any categories for open!</div> 
<div class="clear:both"> 
</div> 
<div class="molormenu"> 
 
<h3 class="selektor accordion"> 
Menu-1</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
<h3 class="selektor accordion"> 
Menu-2</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
<h3 class="selektor accordion"> 
Menu-3</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
<h3 class="selektor accordion"> 
Menu-4</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
<h3 class="selektor accordion"> 
Menu-5</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
<h3 class="selektor accordion"> 
Menu-6</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul> 
</div> 
</div></blockquote>
 
Langkah-langkah yang harus dilakukan : 
 
<div class="an">
Penyimpanan Javascript dan Kode CSS</div>
<ol>
<li>Login :
 Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama 
Pengguna) atau Email Address. Tuliskan juga Password atau Sandi</li>
<li>Dasboard (Dasbor) : Setelah memasuki halaman Dasbor, KLIK "Design (Rancangan)".</li>
<li>Design (Rancangan) : KLIK link "Edit HTML"</li>
<li>Backup Template : : Amankan template terlebih dahulu dengan KLIK "Download Full Template (Download Template Lengkap)". Lanjutkan dengan menyimpan (SAVE) file template di "Folder PC".</li>
<li><head> : Cari kode tersebut dengan menggunakan Ctrl+F untuk memudahkan pencarian kode. Kode <head> terletak di bagian atas "Edit HTML". Letakkan jQuery dan javascript di bawahnya.</li>
<li>]]></b:skin> : Cari kode ini dan gunakan juga Ctrl+F. Letakkan kode CSS di atasnya.</li>
<li>SAVE Template (Simpan Template) : KLIK SAVE Template/Simpan Template.</li>
<li>Lanjutkan dengan KLIK link "Page Elemen (Elemen Laman)".</li>
<li>Add Gadget : KLIK "Add Gadget (Tambah Gadget)" yang 
terletak di box dengan garis terputus-putus. Sampeyan bisa gunakan yang 
di bagian "Sidebar" kanan atau kiri.</li>
<li>Tunggu beberapa saat. KLIK pada "HTML/Javascript". Setelah terlihat box penyimpanan widget, copy dan pastekan kode HTML-nya.</li>
<li>KLIK "SAVE/Simpan" dan lihat hasilnya di dengan membuka blog.</li>
</ol>
 
Catatan/Keterangan : 
1. Kode HTML yang disediakan hanya menyediakan 6 (enam) selector 
menu. Anda bisa menambah dengan cara menambahkan kode baru setelah 
yang terakhir dengan kode tambahan : 
 
 
<h5>
xHTML:</h5>
<blockquote class="tr_bq">
 <h3 class="selektor accordion"> 
Menu-7</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul></blockquote>
 
2. Link dan Nama Link juga bisa ditambah dengan menambahkan kode baru di bawahnya seperti misalnya : 
 
<h5>
xHTML</h5>
<blockquote class="tr_bq">
 <h3 class="selektor accordion"> 
Menu-7</h3> 
<ul class="ul_accordion"> 
<li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
<li><a href="Link-7f" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li> 
</ul></blockquote>
 
<ol>
<li>Ganti setiap link (link-1a s/d link-1e dan yang lain) dengan URL setiap menu. 
Contoh : <a class="smarterwiki-linkify" href="http://gubhugreyot.blogspot.com/2010/08/cara-buat-cc3-multilevel-drop-down-menu.html">http://gubhugreyot.blogspot.com/2010/08/cara-buat-cc3-multilevel-drop-down-menu.html</a></li>
<li>Title di isi dengan keterangan tentang nama menu. Title ini akan 
terlihat sebagai tip yang terlihat ketika cursor berada di atas link 
menu.</li>
<li>Nama menu merupakan nama atau judul menu yang akan ditampilkan.</li>
<li>Lebar Accordion akan menyesuaikan diri dengan lebar widget yang tersedia.</li>
<li>Jika blog sebelumnya sudah menggunakan jQuery, maka anda hanya perlu
 menggunakan kode dan javascriptnya saja (jQuery cukup 1 (satu) dalam 
satu blog). Buatlah script yang lain selalu berada di bawah jQuery!</li>
</ol>
<h5>
 </h5>
<h5>
Sumber:  <a class="smarterwiki-linkify" href="http://gubhugreyot.blogspot.com/2010/08/cara-buat-cc3-multilevel-drop-down-menu.html">http://gubhugreyot.blogspot.com</a></h5>
 </div>

Setelah blogwalking ke tetangga sebelah, saya sangat tertarik sekali untuk mepostingan kembali dan share dengan anda tentang Cara membuat menu vertical accordion cantik di blog . Langsung menuju TKP aja.. JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebua…

Baca selengkapnya...

0 Komentar

jalupangna Label: tips dan triks blogger 22.28 0 komentar