Menu thả xuống tích hợp tiện ích bài mới và nhận xét mới nhất cho blogger

Trước đây ta thường biết đến các tiện ích Bài viết mới nhất và Nhận xét mới nhất dưới dạng một widget, tuy nhiên bài viết này mình sẽ hướng dẫn thêm hai tiện ích này dưới dạng menu thả xuống. Như vậy bạn có thể tiết kiệm không gian sử dụng trên blog để dành cho những widget tiện ích khác

Xem Demo

Thực hiện

Bước 1: Chèn code bên dưới trước thẻ </head>

<style type='text/css'>
#autonav {
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
  z-index:9999;
  margin:0px 0px;
  padding:0px 0px;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  border-bottom:2px solid #333;
  -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  box-shadow:0px 1px 7px rgba(0,0,0,.4);
}
#autonav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
  background-color:#0F5079;
}
#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0px 0px;
  padding:0px 0px;
  position:relative;
}
#autonav ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0px 0px;
  padding:0px 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,.4);
  color:white;
  font-weight:bold;
}
#autonav ul li a:hover {
  background-color:#0F486C;
}
#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0px;
  z-index:99;
  background-color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  box-shadow:0px 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;
}
#autonav ul ul:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;
}
#autonav ul ul li {
  display:block;
  float:none;
}
#autonav ul ul li a {
  border:none;
  color:#999;
}
#autonav ul ul ul {
  top:0px;
  left:100%;
}
#autonav li:hover > ul {
  display:block;
}
/* Khusus JSON */
#autonav ul.json-dropdown {
  overflow:hidden;
}
#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0px 0px;
  overflow:hidden;
}
#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0px 0px;
}
#autonav ul.json-dropdown li a:hover {
  text-decoration:underline;
  background:transparent;
}
#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {
  background-color:#222;
}
#autonav ul.json-dropdown img.rp-thumb {
  padding:0px 0px;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0px 10px 0px 0px;
  width:40px;
  height:40px;
}
#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Arial,Sans-Serif;
  color:#666;
  font-size:9px;
}
/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {
  width:400px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var numposts   = 7,
    cmtext     = "Nhận xét",
    pBlank     = "https://trollvlhcv.googlecode.com/svn/trunk/demo/no-image-72x72.png",
    numcomment = 7,
    cmsumm     = 100;
//]]>
</script>
<script src='https://trollvlhcv.googlecode.com/svn/trunk/demo/json-dropdown.js' type='text/javascript'></script>

• 7 Số comments nhận xét mới nhất
• https://trollvlhcv....72x72.png Hình ảnh thay thế cho bài viết không có hình thu nhỏ
• 7 Số bài viết mới nhất
• 100 Số ký tự tóm tắt của bài viết

Bước 2: Sau đó tìm </body> và dán trên nó đoạn code sau (hoặc dán vào vị trí bạn muốn hiển thị drop menu)

<nav id='autonav'>
    <ul>
        <li><a href='http://www.trollvl.com'>Home</a></li>
        <li><a href='http://facebook.com/hcvvn'>Fan Page</a></li>
        <li><a href='#'>Recent Posts</a>
            <ul class='json-dropdown subposts wide'>
                <script src='http://www.trollvl.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Recent Comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='http://www.trollvl.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
            </ul>
        </li>
        <li><a href='#'>Donate</a>
            <ul>
                <li><a href='http://www.trollvl.com/p/donate.html'>Donate</a></li>
            </ul>
        </li>
    </ul>
</nav>

• Thay thế www.trollvl.com thành link blog của bạn 

Chúc bạn luôn thành công và đừng quên ủng hộ Troll VL nha! Cảm ơn! 

Tham khảo từ DTE