Thư viện

Trải nghiệm

Thứ Bảy, tháng 11 02, 2013

Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger

Tạo menu xổ dọc xuống nhiều cấp tích hợp thêm tiện ích bài đăng mới nhất và nhận xét mới nhất vào trong các menu xổ xuống.

Chia sẻ:
Hẳn các bạn đã quyen với các tiện ích Bài viết mới nhất và Nhận xét mới nhất được trình bày theo phương pháp truyền thống trong một tiện ích HTML rồi phải không, Để tạo phong cách riêng và mới lạ cho cả tác giả và độc giả của blog trong cách trình bày của 2 tiện ích này, bài viết này mình sẽ hướng dẫn thêm hai tiện ích này vào trong thanh menu. Bình thường chúng sẽ được ẩn ở dưới tiêu đề của menu và sẽ hiện ra dạng sổ dọc khi người dùng dê chuột hoặc bấm vào tiêu đề đó như trên trang facebook. Khá thú vị phải không? Vậy còn chần chừ gì nữa hãy bắt tay vào làm thôi.

Để hiểu rõ hơn nguyên tắc hoạt động của menu này các bạn vui lòng xem ảnh động bên dưới:
Các bạn cũng có thể xem trực tiếp trên blog demo của mình ở bên dưới:

VIEW DEMO

Trên thưc tế menu này được viết bởi tác giả dte.web.id một blogger nổi tiếng của malaysia. Mình giới thiệu cho những ai chưa biết. Để có được một menu như thế bạn chỉ cần làm theo các bước ở bên dưới:

» Cách tạo Menu xổ dọc tích hợp bài đăng mới nhất và nhận xét mới nhất cho blogspot.

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 = "http://lh4.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/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>
» Tùy chỉnh code:
  • 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:
    Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger
  • numcomment = 7, Số nhận xét mới nhất sẽ hiện thị khi menu của bạn xổ dọc xuống.
  • http://....no-image.png link ảnh thay thế cho các bài viết mới nhất không có hình ảnh minh họa. Bạn nên sử dụng hình ảnh có kích thước 72x72 picel để tối ưu được tốc độ load trang web của bạn.
  • 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. Tuy nhiên không nên để quá lớn như vậy bố cục giữa những nhận xét ngắn và nhận xét dài sẽ không đẹp.
  • http://......../json-dropdown.js link của file Js. Bạn hãy tải về tại đây và upload lên host riêng để dùng lâu dài nha. Nếu chưa có host riêng thì bạn có thể xem bài này để tạo cho mình một host riêng nha.

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://namkna.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Reccent comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&amp;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>
» Tùy chỉnh code:
  • Thay thế http://namkna.blogspot.com/ thành link blog của bạn hoặc link blog bạn muốn lấy bài viết cho vào trong menu.
  • Thay các đoạn màu xanh thành các tiêu đề của menu theo ý thích và nội dung của blog bạn nha.

26 nhận xét:

  1. Bài này hay mà hơi phức tạp . phai có thơi gian mới thưc hành được . cô đăng ký học sau nhé Nam Kha à.

    Trả lờiXóa
  2. Môn này thật kỳ diệu , giá còn trẻ cô cũng xin học lập trình viên mất

    Trả lờiXóa
  3. cho hỏi cháu thế này . cả 3 blog của cô chung một tài khoản goole . bổng dưng mấy hôm nay cô vào bố cục vào tùy chỉnh lại nền màu chữ mà màn hình không hiện trang blog ra để mình tùy chỉnh nữa máy toàn báo Biểu trưng Blogger bị hỏng
    Rất tiếc, đó là lỗi.

    Chúng tôi xin lỗi vì sự bất tiện này.

    Thử làm mới trang xem các nội dung có trở về đúng thứ tự không . không hiểu sao lỗi do đâu . cô nhờ cháu chỉ giúp

    Trả lờiXóa
    Trả lời
    1. Cháu vừa kiểm tra thì thấy các blogger của cô vẫn hoạt động. Lỗi mà cô nói có thể do một số nguyên nhân sau:

      1- Cô đăng nhập chỉnh sửa đúng thời gian blogger đang chỉnh sửa. => Cô có thể chọn thời điểm sau đó khoảng 10 phút và đăng nhập lại.

      2- Do có nhiều người cùng truy cập vào trang của cô và chỉnh sửa phần mẫu trùng với thời gian cô chỉnh sửa nên bị lỗi trên. Cô có thể đổi mật khẩu mail định kỳ để tránh bị lỗi trên đồng thời tránh bị lộ thông tin..

      3- Do trình duyệt cô đang sử dụng => Cô có thể xóa hết lịch sử duyệt web và xóa cookie của trình duyệt rồi thử lại nha cô,

      Xóa
    2. Thêm một mẹo nhỏ cháu bày cho cô thế này, Cô nên tạo thêm một địa chỉ mail và cấp quyền quản trị viên (ADMIN) cho blog đó để đề phòng một ngày nào đó tài khoản hiện tại bị bên google họ khóa thì mình vẫn còn truy cập được bằng tài khoản phụ cô ak.

      Xóa
  4. Cảm ơn cháu đã chỉ giúp . cô sẽ thử làm như cháu chỉ dẫn xem sao

    Trả lờiXóa
  5. với bài này của cháu ,cô muốn khi dê chuột chỉ hiện tiêu đề bài đăng thôi , nghĩa là cắt ảnh và phần hiện hiện nội dung bài viết ấy thì làm sao..?

    Trả lờiXóa
  6. cô đã thử nhiều lần mà máy vẫn vậy . cô đăng nhập tài khoản của người khác đăng nhập vào blog của của người này cũng vẫn như vậy cháu ạ. vậy thì là tại máy của cô mất rồi . việc nay cô bó tay rồi chau xem có cách gì không giúp cô với nhé

    Trả lờiXóa
    Trả lời
    1. Cố hãy xóa cookie của trình duyệt đi cô ak. Cô có thể dùng phần mềm C-CLEANER để xóa cookie là oke thôi .

      Xóa
  7. Chào namkna. blog của mình là phimtit.com. Mình muốn namkna xem giúp để tăng tốc độ load cho blog thì mình phải làm những điều gì . Cám ơn Bạn

    Trả lờiXóa
    Trả lời
    1. Hiện tại mình vào blog bạn thấy nó lòa ổn mà bạn. Tốc độ như thế nhiều trang phim cũng không bằng đâu bạn ak.

      Xóa
    2. Cám ơn namkna đã qua xe giúp . Của mình còn 1 lỗi rất lạ là mình post phim khoảng 1 lúc sau nó mới ra ngoài trang chủ . Mình dùng chorme mình ngĩ do cache nhưng mình ấn ctrl shift n rồi vaod nó vẫn thế

      Xóa
    3. Do dung lượng bài viết của bạn quá lớn hãy sử dụng dấu ngắt khi đăng các bài viết của bạn nha: XEM HÌNH

      Xóa
    4. cám ơn bạn hướng dẫn rất chi tiết

      Xóa
    5. kHÔNG có gì đâu bạn ak.

      Xóa
  8. nam Kha ơi cô muốn làm mennu này nhưng bên blog của cô đã làm sổ dọc rồi thì phải làm thế nào để làm được như bài hướng dẫn này của cháu. cô chỉ muốn khi di chuột vào chỉ hiện tiêu đề bài đăng thôi cắt ảnh thu nhỏ và phần tóm tát mô tả đi cho gọn thì làm thế nào . cô mong tin cháu

    Trả lờiXóa
    Trả lời
    1. Cô chỉ cần thay các đoạn code menu cũ của cô thành các đoạn mơi này thôi cô ak.

      Nếu cô muốn chỉ hiện tiêu đề bài viết thì cô tải file http://......../json-dropdown.js mà cháu để màu xanh về nha cô, Nếu cô không biết cách tải thì cô xem BÀI NÀY

      Sau khi tải về cô mở ra bằng Notepad (ảnh minh họa) và cô xóa các đoạn code bên dưới:

      document.write('<li><img src="' + postimg + '" class="rp-thumb" alt="thumb" />');

      và xóa cả đoạn này:

      <span class="footer-outer"><span class="dt">' + postdate + '</span><span class="cm"> - ' + cmnum + ' ' + cmtext + '</span></span>

      Rồi lưu lại và tải lên host của cô. Nếu chưa có host thì cô có thể xem BÀI NÀY

      Xóa
    2. sAU KHI TẢI lên host rồi cô lấy link mới và thay vào link cũ màu xanh ban đầu là được cô ak :)

      Xóa
  9. Trả lời
    1. Không có gì đâu cô ak. Cháu cũng rất vui vì giúp ích được cho cô :)

      Xóa
  10. Em muốn bỏ nó dưới tiêu đề thì phải làm sao ạ ?


    Anh xem giúp

    Trả lờiXóa
    Trả lời
    1. Ý em là dưới tiêu đề bài viết hay dưới tiêu đề blog.

      - Nếu muốn đặt dưới tiêu đề blog thì em đặt nó trước đoạn code bên dưới:
      <div class='tabs-outer'>

      - Nếu muốn đặt sau tiêu dề bài viết thì bạn dán code trước đoạn code sau:
      <data:post.body/>

      Xóa
  11. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  12. anh giúp em cái phần trình bày một bài blog sao cho hợp lí, dễ đọc. em mới viết nên chưa có kinh nghiệm

    Trả lờiXóa
    Trả lời
    1. Có nhiều các trình bày, tùy theo nội dung blog em hướng đến mà cách trình bày khác nhau. Cũng như trình bày một bài luận văn hay bài world thôi em. Nói ra thì nhiều lắm. :)

      Xóa