Thêm Accordion menu widget cho blogger

Đăng nhập  Blogger chọn blog cần thêm ==> Bố cục ( Playout)
  thêm tiện ích ==> HTML/Javascript

Dán đoạn code bên dưới vào:


Mẫu 1:  
Xem Demo :

• • Blogger
  • • Templates
    • Widgets
    • Guides
• • Wordpress
  • • Themes
    • Plugins
    • Guides
• • Freebies
  • • Blogger templates
    • Wordpress Themes
    • Plugins
    • Scripts
• • Services
  • • Website Design
    • Blogger
    • Wordpress
    • Custom Templates
• • About us
  • • About us
    • Contact us
    • Disclaimer
    • Privacy policy

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" >$(document).ready(function(){ $('li.title a').click(function(e){ var dropDown = $(this).parent().next(); $('.downlistie').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); e.preventDefault(); }) });</script><style>ul.container{ width:275px; padding:5px; } li.accoi-menu{ list-style:none; padding:1px; width:100%;} li.title { border-radius:5px; background:#333333; list-style:none; padding:5px; } li.title a{ color:#ffffff; display:block; padding:5px; font:14px georgia, verdana; overflow:hidden; position:relative; width:100%; text-decoration:none; } .downlistie{ list-style:none; display:none; padding-top:5px; width:100%; } .downlistie li{ list-style:none; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; border-radius:5px; margin:5px ; padding:4px 10px; } .downlistie li:hover { background:orange; } .downlistie li a{ { font:14px georgia, verdana; text-decoration:none; color:#333333; } .downlistie li a:hover { text-decoration:none; color:#333333; } </style><ul class="container"><li class="accoi-menu"> <ul><li class="title"><a href="#" >Blogger</a></li><li class="downlistie"> <ul><li><a href="#" >Templates</a></li><li><a href="#">Widgets</a></li><li><a href="#">Guides</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Wordpress</a></li><li class="downlistie"> <ul><li><a href="#" >Themes</a></li><li><a href="#">Plugins</a></li><li><a href="#">Guides</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Freebies</a></li><li class="downlistie"> <ul><li><a href="#" >Blogger templates</a></li><li><a href="#">Wordpress Themes</a></li><li><a href="#">Plugins</a></li><li><a href="#">Scripts</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >Services</a></li><li class="downlistie"> <ul><li><a href="#" >Website Design</a></li><li><a href="#">Blogger</a></li><li><a href="#">Wordpress</a></li><li><a href="#">Custom Templates</a></li></ul></li></ul></li><li class="accoi-menu"> <ul><li class="title"><a href="#" >About us</a></li><li class="downlistie"> <ul><li><a href="#" >About us</a></li><li><a href="#">Contact us</a></li><li><a href="#">Disclaimer</a></li><li><a href="#">Privacy policy</a></li></ul></li></ul></li></ul>

Mẫu 2:

Xem Demo:

Title 1

Nội dung của bạn 1

Title 2

Nội dung của bạn 2

Title 3

Nội dung của bạn 3

Title 4

Nội dung của bạn 4

Title 5

Nội dung của bạn 5

<style type="text/css">#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ifzPtoToU2Z52F1NpqwE_wHEUnIPL1O0aDnbX4YKBZ3KsCeZPOXcFPa43pvaaJTURv7Y9R8yONKcPVNCCUcW0INYTU3Ml-0wgOWyT4KjeNaAz0cGyYXpfYS1CqCYuaqHk15GwIx8WD8/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvikIdKmfxxQRhSxJHHyzYOmWA-KjNwoBMcZBRdmp3ZLe5TMK_4hbxSQIxLvGJMgWm9RK8a8PtiY0ueKsWiCQFjs76lEECdhd4oPwt3uZZlFa5kQNer2goldIXTpfezWXSN51U_E51skw/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style><script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><script type='text/javascript'>$(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script><div id="accordion"><h2>Title 1</h2><div class="content">Nội dung của bạn 1 </div><div id="accordion"><h2>Title 2</h2><div class="content">Nội dung của bạn 2 </div><div id="accordion"><h2>Title 3</h2><div class="content">Nội dung của bạn 3 </div><div id="accordion"><h2>Title 4</h2><div class="content">Nội dung của bạn 4 </div><div id="accordion"><h2>Title 5</h2><div class="content">Nội dung của bạn 5 </div></div></div></div></div></div>