Dropmenu có chứa nhận xét và bài đăng mới nhất cho blogspot

Dropmenu đem lại rất nhiều tiện dụng khi bạn dùng nó trong thiết kế Web, blog của bạn. Với Dropmenu bạn có thể sử dụng nhiều menu con khác nhau. Còn với Dropmenu mà Lãng Tử Studio giới thiệu và chia sẻ dưới đây thì nó giúp cho blogspot của bạn tích hợp sẵn 
nhận xét và bài đăng mới nhất cho blogspot

Demo: Tại đây

Cách làm thủ thuật:
1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUU1pKZIgYlqRyo9P_Qff_eOpSIbYYxAW6Sj65mkRLVr6vbTtIwgnhwxAxtAKV4oQ22uuJhTM5A2AE-eZPD7B6zC9isIja3Sa42Y9P6A3eC6Dej3WfPSrwa76bPv8MZU90I3JM5ZtEfWIj/s512/no-image.png",
numcomment = 7,
cmsumm = 100;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>
Trong đó:
var numposts = 7, Số bài viết mới nhất sẽ hiện thị khi menu xổ dọc xuống phía dưới. 
cmtext = "Nhận xét", là ký tự xuất hiện trong phần đếm số comment của mỗi bài viết như hình minh họa bên dưới:

Link ảnh màu xanh: Là ảnh thay thế bài viết nếu bài viết không có ảnh minh họa
cmsumm = 100; là số ký tự mô tả (tóm tắt) của phần nhận xét mới nhất trong menu bạn có thể chỉnh lại theo ý muốn của bạn
4. Tiếp tục dán đoạn code bên dưới vào trước thẻ </body> . (Bạn cúng có thể dán ở các vị trí khác trong mẫu của bạn, nếu không xác định được vị trí cần chèn theo ý của bạn thì hãy comment bên dưới mình sẽ chỉ đoạn đó cho các bạn)

<nav id='autonav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Recent post</a>
<ul class='json-dropdown subposts wide'>
<script src='http://itviet360.com/feeds/posts/default/?alt=json-in-script&callback=dropdownposts'></script>
</ul>
</li>
<li><a href='#'>Reccent comments</a>
<ul class='json-dropdown subcomments'>
<script src='http://langtustudio.blogspot.com/feeds/comments/default?alt=json-in-script&callback=dropdowncomment'></script>
</ul>
</li>
<li><a href='#'>Liên hệ</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
</ul>
</li>
</ul>
</nav>
Thay link: langtustudio.blogspot.com bằng link Blog của bạn

Xem nhiều thủ thuật hơn tại Lãng Tử Studio


Đừng quên Like và Share nếu thấy bài viết bổ ích