[6][A.Thông điệp][slider-top-big][nothing]
You are here: Home / , , , , Menu dropdown đẹp cho blogspot

Menu dropdown đẹp cho blogspot

| 3 Comments
Menu dropdown đẹp cho blogspot, menu với tin mới.

Menu dropdown đẹp cho blogspot




Nhằm cung cấp cho những bạn yêu làm web trên nền blogger một bộ menu đẹp, kế tiếp theo phiên bản menu giống vietbao, vnexpress, zing...Hôm nay mình xin giới thiệu với mọi người một menu dropdown mới.

Với Dropdown này mọi người có thể xem tin trực tiếp trên menu.

Do không phải load dạng ajax nên sẽ khá nặng. Nhưng chỉ load một lần thì sẽ ok. Nếu bạn nào không thích thì có thể gỡ ra.



Các bước để thêm vào web blog của bạn.

Bước 0 :


Mở chế độ Desgin. (Mẫu -> Chỉnh sửa HTML -> Mở rộng tiện ích )



Bước 1: 


 Thêm javascript trước  </head>  (Nhấn Ctrl + F để tìm)


<script type='text/javascript'>
      //<![CDATA[
      function labelthumbmenu(json) {
          document.write('<ul>'); for (var i = 0; i < numposts; i++) {
              var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { var commenttext = entry.link[k].title; var commenturl = entry.link[k].href; }
                  if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }
              } var thumburl; try { thumburl = entry.media$thumbnail.url; } catch (error)
{ s = entry.content.$t; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { thumburl = d; } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonRdtunHa0dUg9MDFQIM-pRVjav8u0B4pJoSCl2Hr4WE59Z_z0mHiUJR4izBL3RWxMuiizkXVIpUUTP7J_TnvAQQXpl_2FIOhXZzLZvYiPR9pd7Gv0TOQRlxbFwQAl64EP8Ke04cGCWQa/'; }
              var postdate = entry.published.$t; var cdyear = postdate.substring(0, 4); var cdmonth = postdate.substring(5, 7); var cdday = postdate.substring(8, 10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; document.write('<li class="navItem">'); if (showpostthumbnails == true)
                  document.write('<img class="image" src="' + thumburl + '"/><a href="' + posturl + '" target ="_top">' + posttitle + '</a>'); if ("content" in entry) { var postcontent = entry.content.$t; }
              else
                  if ("summary" in entry) { var postcontent = entry.summary.$t; }
                  else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) {
                  if (postcontent.length < numchars) { document.write(''); document.write(postcontent); document.write(''); }
                  else { document.write(''); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0, quoteEnd); document.write(postcontent + '...'); document.write(''); }
              }
              var towrite = ''; var flag = 0; document.write(''); if (showpostdate == true) { towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear; flag = 1; }
              if (showcommentnum == true) {
                  if (flag == 1) { towrite = towrite + ' | '; }
                  if (commenttext == '1 Comments') commenttext = '1 Comment'; if (commenttext == '0 Comments') commenttext = 'No Comments'; commenttext = '<a style="color:#dd8620 !important; font-size:9px !important" href="' + commenturl + '" target ="_top">' + commenttext + '</a>'; towrite = towrite + commenttext; flag = 1; ;
              }
              if (displaymore == true)
              { if (flag == 1) towrite = towrite + ' | '; towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More »</a>'; flag = 1; ; }
              document.write(towrite); document.write('</li>'); if (displayseparator == true)
                  if (i != (numposts - 1))
                      document.write('');
          } document.write('</ul>');
      }
//]]>
    </script>


Bước 2: 


 Thêm CSS sau trước </head>  (Nhấn Ctrl + F để tìm)


<style type='text/css'>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, headme, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, headme, hgroup, menu, nav, section { display: block; }
html { background: #eee }
body { line-height: 1; font-family: Arial, Helvetica; font-size: 13px; color: #333; background-color: transparent; }
ol, ul { list-style: none; }
th { text-align: left; font-weight: normal; }
td { vertical-align: top; }
a, .link { color: #7CBB00; text-decoration: none; cursor: pointer; outline: none; line-height: 1.2; }
a:hover, .link:hover { text-decoration: underline; color: #7CBB00; }
a:focus { outline-style: none; }
a img { border: none; }
a:active, textarea:focus, input:focus, :-moz-any-link:focus { outline: none; }
.verhay:before, .verhay:after { content: &quot;\0020&quot;; display: block; height: 0; visibility: hidden; border-radius:4px}
.verhay:after { clear: both; }
.verhay { zoom: 1; }
.frame { width: 990px; margin: 0 auto; }
.bold { font-weight: bold; }
.description { line-height: 1.5; }
.hidden { display: none; }
.fl { float: left; }
.fr { float: right; }
.headme,
.subheadme { font-weight: 900; font-family: &quot;Arial Black&quot;, Arial, sans-serif; }
.subSubheadme { font-size: 18px; font-weight: bold; margin: 0 0 5px; }
.title { font-family: &quot;Arial&quot;; font-weight: bold; }
#headme { position: relative; z-index: 100; width: 990px; margin: 0 auto; padding: 0 14px; }
#nav { margin: 0 0 10px;  background:#0088CC; border-radius:4px }
#nav .nivid { display: block; float: left; font-size: 14px; position: relative; z-index: 100; border-right: 1px solid #B7DAB8; }
#nav .nivid .linkhead { display: block; float: left; height: 33px; line-height: 33px; color: white; text-decoration: none; padding: 0 25px; font-weight: bold; text-transform:uppercase; text-shadow:2px 4px 5px black;}
#nav .nivid:hover { color: #000; background: #7CBB00; }
#nav .nivid:hover span { color: #FFF; }
#nav .nivid.activeChannel { background: #7CBB00; }
#nav .nivid.activeChannel span{ color: #fff; }
#nav .nivid:hover &gt; .thaxuong{ display: block;}
#nav .selected .linkhead { font-weight: bold; color: #000; }
#nav .thaxuong { display: none; width: 510px; position: absolute; top: 33px; background: #FFF; border-top: 1px solid #0088CC;
-moz-border-radius: 0 2px 2px 2px; -webkit-border-radius: 0 2px 2px 2px; -khtml-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px;
box-shadow: 0px 10px 10px 1px #0088CC; -webkit-box-shadow: 0 10px 10px #0088CC; }
#nav .thaxuong .subkenh { padding: 10px 10px 20px 10px;  }
#nav .muitenlen { display: none;  }
#nav .nivid:hover .muitenlen { display: block; }
#nav .thaxuong a { text-decoration: none; }
#nfiv .muitenlen { left: 23px; }
#nv1 .muitenlen { left: 30px; }
#nv2 .muitenlen { left: 28px; }
#nv3 .muitenlen { left: 49px; }
#nv4 .muitenlen { left: 39px; }
#nv5 .muitenlen { left: 61px; }
#nv6 .muitenlen { left: 46px; }
#nv7 .muitenlen { left: 27px; }
#nfiv .thaxuong { left: -1px; }
#nv1 .thaxuong { left: -20px; }
#nv2 .thaxuong { left: -50px; }
#nv3 .thaxuong { left: -60px; }
#nv4 .thaxuong { left: -120px; }
#nv5 .thaxuong { left: -110px; }
#nav #nv6 .thaxuong { left: -120px; }
#nav #nv7 .thaxuong { right: -264px; }
#nav .nivid .ndivnd .headme { border-bottom: 2px solid #7CBB00; font-family: Arial; font-size: 18px; font-weight: 200; text-transform: none; padding: 5px 0 10px 0; }
#nav .cnlink { float: left; width: 218px; margin-right: 20px; }
#nav .ndivnd { float: left; width: 250px;  }
#nav .ndivnd .navItem { position: relative; min-height: 35px;}
#nav .ndivnd .navItem .image { position: absolute; width:68px; height:40px}
#nav .ndivnd .navItem a { padding: 0 0 0 77px; display: block; }
#channelWoman #nav .ndivnd .navItem a:hover,
#channelMan #nav .ndivnd .navItem a:hover,
#channelGeneric #nav .ndivnd .navItem a:hover { background: none; }
#nav .navImage .myPlateBanner,
#nav .navImage .loopsBanner,
#nav .navImage .quitSmokingBanner,
#nav .navImage .recipesBanner { margin: 0 auto 1px; width: 508px; height: 102px; display: block; background: url() no-repeat 0 0; }
#nav .navImage .myPlateBanner { background-position: 0 0; }
#nav .navImage .loopsBanner { background-position: 0 -112px;  }
#nav .navImage .quitSmokingBanner { background-position: 0 -224px;  }
#nav .navImage .recipesBanner { background-position: 0 -336px; }
.list li,
.list article { cursor: pointer; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 10px 0 10px 10px; }
.list li a:hover,
.list article a:hover { text-decoration: none; }
.listme .item:hover,
.listme li:hover,
.listme article:hover,
.listme a:hover { background: #B7DAE8; color: #7CBB00; text-decoration: none; cursor: pointer; }
.listme .item .rightArrow,
.listme li .rightArrow { background: url() no-repeat right center; position: absolute; padding: 4px 0 0 10px; width: 6px; height: 10px; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; transition: all .1s linear; }
.listme .item:hover .rightArrow,
.listme li:hover .rightArrow { padding-left: 13px; transition: all .1s linear; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; }
.listme .item:hover a { color: #7CBB00; }
.nerhay .listme .item:hover,
.nerhay .listme li:hover { padding-left: 15px; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; transition: all .1s linear; text-decoration: none; }
</style>

Bước 3: 


 Vị trí đặt menu (đặt sau <body>   )
<div class='frame verhay' id='headme'>
<div class='noidunghead verhay'>


<div class='verhay' id='nav'>
<ul>
<li class='nivid' id='nfiv'>
<a class='linkhead' href='#'><span>Menu1</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#/'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#/'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub1</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub1</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='http://www.erhay.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
<li class='nivid' id='nv1'>
<a class='linkhead' href='#'><span>Menu2</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
<li><a href='#'>Menusub2</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='http://www.erhay.com/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
<li class='nivid' id='nv2'>
<a class='linkhead' href='#'><span>Menu3</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu3</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
<li class='nivid' id='nv3'>
<a class='linkhead' href='#'><span>Menu4</span></a>
<div class='muitenlen'/>
<div class='verhay thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu4</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu4</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu4</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu4</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu4</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
<a class='navImage' href='#'><div class='quangcaomenu'/></a>
</div>
</li>
<li class='nivid' id='nv4'>
<a class='linkhead' href='#'><span>Menu5</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu5</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
<a class='navImage' href='#'><div class='quangcaomenu1'/></a>
</div>
</li>
<li class='nivid' id='nv5'>
<a class='linkhead' href='#'><span>Menu6</span></a>
<div class='muitenlen'/>
<div class='thaxuong'> <div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu6</a><span class='rightArrow'/></li>
<li><a href='#/'>Submenu6</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu6</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu6</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
<li class='nivid' id='nv6'>
<a class='linkhead' href='#'><span>Menu7</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu7</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu7</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu7</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu7</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu7</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
<li class='nivid' id='nv7'>
<a class='linkhead' href='http://www.livestrong.com/blog/'><span>Menu8</span></a>
<div class='muitenlen'/>
<div class='thaxuong'>
<div class='verhay subkenh'>
<div class='nerhay'>
<ul class='listme list cnlink'>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
<li><a href='#'>Submenu8</a><span class='rightArrow'/></li>
</ul>
</div>
<div class='ndivnd listme list'>
<div class='headme'>Bài mới nhất</div>
<script type='text/javascript'>                var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbmenu' type='text/javascript'/>
</div>
</div>
</div>
</li>
</ul>

</div> </div>
</div>



OK. Vậy là đã xong một menu dropdown đẹp rồi đó.

Nếu bạn không làm đc có thể để lại comment mình sẽ hướng dẫn trực tiếp cho bạn.


(Ghi lại nguồn erhay khi phát hành lại thông tin từ trang này)
Related Posts
  • Default comments
  • Facebook comments
Subscribe to: Post Comments ( Atom )