Thứ Hai, 10 tháng 11, 2014

Bạn mới chơi blog, bạn không biết làm sao để cho menu blogspot mình đẹp và đẳng cấp hơn và tìm mãi ko ra cách thực hiện điều này. Vì điều đó nên hôm nay Hồng Designer Share mẫu menu giống trang mp3.zing.vn cho Blogger. Các bạn có thể xem Demo ảnh bên dưới.
Menu Blogspot

Xem xong nếu bạn thích thì chúng ta bắt đầu thực hiện nhé:


Bước 1

Đăng nhập vào Blogger => Mẫu => Chỉnh sửa HTML. Tìm đến thẻ <head> trong template của bạn và thêm đoạn code sau dưới thẻ <head>.
<link href='http://static.mp3.zdn.vn/skins/mp3_version3_05/css/reset.css' media='screen' rel='stylesheet' type='text/css'/><link href='http://static.mp3.zdn.vn/skins/mp3_version3_05/css/style-2.7.css' media='screen' rel='stylesheet' type='text/css'/>

Bước 2

Tiếp tục tìm đến thẻ <body> trong template và thêm đoạn code dưới vào sau thẻ <body>.
<div class='top-wrap'><div class='header grid980'><h2 class='logo'><a href='/'><img alt='Zing mp3' height='39' src='http://static.mp3.zdn.vn/skins/mp3_main/images/zmp3_logo.jpg' width='145'/></a></h2><div class='search'><form action='http://www.google.com.vn/search' id='searchwrapper form' method='get' style='font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; color: #333;font-size:11px;' target='_blank'><p><input autocomplete='off' class='tbsearch inputSearch' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onclick='var q = $(&quot;q&quot;);if (q.value == q.getAttribute(&quot;placeholder&quot;)) {q.focus(); return false;}' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' placeholder='Nhập nội dung cần tìm' type='text' value='Nhập nội dung cần tìm'/><input checked='checked' class='btnsearch' name='sitesearch' type='submit' value='http://tanchau123.blogspot.com' title="Tìm kiếm"/></p></form><ul class='tag-page'><li><a href='http://me.zing.vn' target='_blank'>ME</a></li><li class='selected'> <span><strong><a href='http://mp3.zing.vn/'>MP3</a></strong></span></li><li><a href='http://zing.vn' target='_blank'>NEWS</a></li><li><a href='http://tv.zing.vn' target='_blank'>TV</a></li></ul><div class='fix-user-vip none' id='_loginAlr'/><div class='login' id='_loginNY'><a href='' id='_login'>Đăng nhập</a> / <a href='https://id.zing.vn/register/index.10.html' target='_blank'>Đăng ký</a></div><!--End .user-area --></div><!-- End .search--><div class='main-nav'><a href='/' id='home'>Trang chủ</a><ul><li id='_menu1' match='(album|bat-hat)' rel='_subMusic'><a href='/the-loai-album.html'>Album</a><div class='zingsubmenu_multicol music_submenu none' id='_subMusic' rel='music'><div class='subcol songcol_list first-child' style='height: 214px;'> <h2>Thể loại album</h2> <div class='subinner_item'> <ul> <li><a href='/the-loai-album/Viet-Nam/IWZ9Z08I.html'>Việt Nam</a></li> <li><a href='/the-loai-album/Nhac-Tre/IWZ9Z088.html'>Nhạc Trẻ</a></li> <li><a href='/the-loai-album/Nhac-Tru-Tinh/IWZ9Z08B.html'>Nhạc Trữ Tình</a></li> <li><a href='/the-loai-album/Nhac-Que-Huong/IWZ9Z08D.html'>Nhạc Quê Hương</a></li> <li><a href='/the-loai-album/Nhac-Cach-Mang/IWZ9Z08C.html'>Nhạc Cách Mạng</a></li> <li><a href='/the-loai-album/Nhac-Thieu-Nhi/IWZ9Z08F.html'>Nhạc Thiếu Nhi</a></li> <li><a href='/the-loai-album/Rock-Viet/IWZ9Z08A.html'>Rock Việt</a></li> <li><a href='/the-loai-album/Rap-Viet/IWZ9Z089.html'>Rap Việt</a></li> <li><a href='/the-loai-album/Au-My/IWZ9Z08O.html'>Âu Mỹ</a></li> <li><a href='/the-loai-album/Pop/IWZ9Z097.html'>Pop</a></li> <li><a href='/the-loai-album/Rock/IWZ9Z099.html'>Rock</a></li> <li><a href='/the-loai-album/Rap-Hip-Hop/IWZ9Z09B.html'>Rap / Hip Hop</a></li> <li><a href='/the-loai-album/Electronic-Dance/IWZ9Z09A.html'>Electronic / Dance</a></li> <li><a href='/the-loai-album/Audiophile/IWZ9Z0EO.html'>Audiophile</a></li> <li><a href='/the-loai-album/Han-Quoc/IWZ9Z08W.html'>Hàn Quốc</a></li> <li><a href='/the-loai-album/Nhat-Ban/IWZ9Z08Z.html'>Nhật Bản</a></li> <li><a href='/the-loai-album/Hoa-Ngu/IWZ9Z08U.html'>Hoa Ngữ</a></li> <li><a href='/the-loai-album/Hoa-Tau/IWZ9Z086.html'>Hòa Tấu</a></li> </ul> </div></div><!--End .sub-col --><div class='subcol songcol_list' style='height: 214px;'> <h2>Thể loại bài hát</h2> <div class='subinner_item'> <ul> <li><a href='/the-loai-bai-hat/Viet-Nam/IWZ9Z08I.html'>Việt Nam</a></li> <li><a href='/the-loai-bai-hat/Nhac-Tre/IWZ9Z088.html'>Nhạc Trẻ</a></li> <li><a href='/the-loai-bai-hat/Nhac-Tru-Tinh/IWZ9Z08B.html'>Nhạc Trữ Tình</a></li> <li><a href='/the-loai-bai-hat/Nhac-Que-Huong/IWZ9Z08D.html'>Nhạc Quê Hương</a></li> <li><a href='/the-loai-bai-hat/Nhac-Cach-Mang/IWZ9Z08C.html'>Nhạc Cách Mạng</a></li> <li><a href='/the-loai-bai-hat/Nhac-Thieu-Nhi/IWZ9Z08F.html'>Nhạc Thiếu Nhi</a></li> <li><a href='/the-loai-bai-hat/Rock-Viet/IWZ9Z08A.html'>Rock Việt</a></li> <li><a href='/the-loai-bai-hat/Rap-Viet/IWZ9Z089.html'>Rap Việt</a></li> <li><a href='/the-loai-bai-hat/Au-My/IWZ9Z08O.html'>Âu Mỹ</a></li> <li><a href='/the-loai-bai-hat/Pop/IWZ9Z097.html'>Pop</a></li> <li><a href='/the-loai-bai-hat/Rock/IWZ9Z099.html'>Rock</a></li> <li><a href='/the-loai-bai-hat/Rap-Hip-Hop/IWZ9Z09B.html'>Rap / Hip Hop</a></li> <li><a href='/the-loai-bai-hat/Electronic-Dance/IWZ9Z09A.html'>Electronic / Dance</a></li> <li><a href='/the-loai-bai-hat/Audiophile/IWZ9Z0EO.html'>Audiophile</a></li> <li><a href='/the-loai-bai-hat/Han-Quoc/IWZ9Z08W.html'>Hàn Quốc</a></li> <li><a href='/the-loai-bai-hat/Nhat-Ban/IWZ9Z08Z.html'>Nhật Bản</a></li> <li><a href='/the-loai-bai-hat/Hoa-Ngu/IWZ9Z08U.html'>Hoa Ngữ</a></li> <li><a href='/the-loai-bai-hat/Hoa-Tau/IWZ9Z086.html'>Hòa Tấu</a></li> </ul> </div></div><!--End .sub-col --><div class='subcol songcol_list last-child' style='height: 214px;'> <h2>Album Online</h2> <ul> <li><a href='/nhac/album-online/2011.html'>2010</a></li> <li style='border-bottom:1px solid #eee;'><a href='/nhac/album-online/2010.html'>2011</a></li> </ul></div><!--End .sub-col --></div> </li><li id='_menu2' match='(the-loai-video|video-clip)' rel='_subVideo'><a href='/the-loai-video.html'>Video</a><div class='zingsubmenu_multicol none' id='_subVideo' rel='video' style='left: 91px; width: 452px;'><div class='subcol first-child' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-video/Viet-Nam/IWZ9Z08I.html'>Việt Nam</a></li> <li><a href='/the-loai-video/Nhac-Tre/IWZ9Z088.html'>Nhạc Trẻ</a></li> <li><a href='/the-loai-video/Nhac-Tru-Tinh/IWZ9Z08B.html'>Nhạc Trữ Tình</a></li> <li><a href='/the-loai-video/Nhac-Que-Huong/IWZ9Z08D.html'>Nhạc Quê Hương</a></li> <li><a href='/the-loai-video/Nhac-Cach-Mang/IWZ9Z08C.html'>Nhạc Cách Mạng</a></li> <li><a href='/the-loai-video/Nhac-Thieu-Nhi/IWZ9Z08F.html'>Nhạc Thiếu Nhi</a></li> </ul></div><!--End .sub-col-2 --><div class='subcol' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-video/Rock-Viet/IWZ9Z08A.html'>Rock Việt</a></li> <li><a href='/the-loai-video/Rap-Viet/IWZ9Z089.html'>Rap Việt</a></li> <li><a href='/the-loai-video/Au-My/IWZ9Z08O.html'>Âu Mỹ</a></li> <li><a href='/the-loai-video/Pop/IWZ9Z097.html'>Pop</a></li> <li><a href='/the-loai-video/Rock/IWZ9Z099.html'>Rock</a></li> <li><a href='/the-loai-video/Rap-Hip-Hop/IWZ9Z09B.html'>Rap / Hip Hop</a></li> </ul></div><!--End .sub-col-2 --><div class='subcol last-child' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-video/Electronic-Dance/IWZ9Z09A.html'>Electronic / Dance</a></li> <li><a href='/the-loai-video/Audiophile/IWZ9Z0EO.html'>Audiophile</a></li> <li><a href='/the-loai-video/Han-Quoc/IWZ9Z08W.html'>Hàn Quốc</a></li> <li><a href='/the-loai-video/Nhat-Ban/IWZ9Z08Z.html'>Nhật Bản</a></li> <li><a href='/the-loai-video/Hoa-Ngu/IWZ9Z08U.html'>Hoa Ngữ</a></li> <li style='border-bottom:1px solid #eee;'><a href='/the-loai-video/Hoa-Tau/IWZ9Z086.html'>Hòa Tấu</a></li> </ul></div><!--End .sub-col-2 --></div></li><li id='_menu3' match='^nghe-si$' rel='_subArtist'><a href='/nghe-si'>Nghệ Sĩ</a><div class='zingsubmenu_multicol none' id='_subArtist' rel='artist' style='left: 147px; width: 452px;'><div class='subcol first-child' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-nghe-si/Viet-Nam/IWZ9Z08I.html'>Việt Nam</a></li> <li><a href='/the-loai-nghe-si/Nhac-Tre/IWZ9Z088.html'>Nhạc Trẻ</a></li> <li><a href='/the-loai-nghe-si/Nhac-Tru-Tinh/IWZ9Z08B.html'>Nhạc Trữ Tình</a></li> <li><a href='/the-loai-nghe-si/Nhac-Que-Huong/IWZ9Z08D.html'>Nhạc Quê Hương</a></li> <li><a href='/the-loai-nghe-si/Nhac-Cach-Mang/IWZ9Z08C.html'>Nhạc Cách Mạng</a></li> <li><a href='/the-loai-nghe-si/Nhac-Thieu-Nhi/IWZ9Z08F.html'>Nhạc Thiếu Nhi</a></li> </ul></div><!--End .sub-col-2 --><div class='subcol' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-nghe-si/Rock-Viet/IWZ9Z08A.html'>Rock Việt</a></li> <li><a href='/the-loai-nghe-si/Rap-Viet/IWZ9Z089.html'>Rap Việt</a></li> <li><a href='/the-loai-nghe-si/Au-My/IWZ9Z08O.html'>Âu Mỹ</a></li> <li><a href='/the-loai-nghe-si/Pop/IWZ9Z097.html'>Pop</a></li> <li><a href='/the-loai-nghe-si/Rock/IWZ9Z099.html'>Rock</a></li> <li><a href='/the-loai-nghe-si/Rap-Hip-Hop/IWZ9Z09B.html'>Rap / Hip Hop</a></li> </ul></div><!--End .sub-col-2 --><div class='subcol last-child' style='height: 179px; width: 150px'> <ul> <li><a href='/the-loai-nghe-si/Electronic-Dance/IWZ9Z09A.html'>Electronic / Dance</a></li> <li><a href='/the-loai-nghe-si/Audiophile/IWZ9Z0EO.html'>Audiophile</a></li> <li><a href='/the-loai-nghe-si/Han-Quoc/IWZ9Z08W.html'>Hàn Quốc</a></li> <li><a href='/the-loai-nghe-si/Nhat-Ban/IWZ9Z08Z.html'>Nhật Bản</a></li> <li><a href='/the-loai-nghe-si/Hoa-Ngu/IWZ9Z08U.html'>Hoa Ngữ</a></li> <li style='border-bottom:1px solid #eee;'><a href='/the-loai-nghe-si/Hoa-Tau/IWZ9Z086.html'>Hòa Tấu</a></li> </ul></div><!--End .sub-col-2 --></div></li><li class='secp-nav'/><li id='_menu4' match='bang-xep-hang' rel='_subCharts'><a href='/bang-xep-hang/index.html'>BXH</a><div class='zingsubmenu_multicol none' id='_subCharts' rel='charts' style='left: 237px; width: 452px'><div class='subcol first-child' style='width: 150px'> <h2>Bài hát</h2> <ul> <li><a href='/bang-xep-hang/bai-hat-Viet-Nam/IWZ9Z08I.html'>Việt Nam</a></li> <li><a href='/bang-xep-hang/bai-hat-Au-My/IWZ9Z0BW.html'>Âu Mỹ</a></li> <li><a href='/bang-xep-hang/bai-hat-Han-Quoc/IWZ9Z0BO.html'>Hàn Quốc</a></li> </ul></div><div class='subcol' style='width: 150px'> <h2>Video</h2> <ul> <li><a href='/bang-xep-hang/video-Viet-Nam/IWZ9Z08W.html'>Việt Nam</a></li> <li><a href='/bang-xep-hang/video-Au-My/IWZ9Z0BU.html'>Âu Mỹ</a></li> <li><a href='/bang-xep-hang/video-Han-Quoc/IWZ9Z0BZ.html'>Hàn Quốc</a></li> </ul></div><div class='subcol last-child' style='width: 150px'> <h2>Album</h2> <ul class='last-child'> <li><a href='/bang-xep-hang/album-Viet-Nam/IWZ9Z08O.html'>Việt Nam</a></li> <li><a href='/bang-xep-hang/album-Au-My/IWZ9Z0B6.html'>Âu Mỹ</a></li> <li><a href='/bang-xep-hang/album-Han-Quoc/IWZ9Z0B7.html'>Hàn Quốc</a></li> </ul></div></div></li><li id='_menu5' match='^radio$'><a href='/radio'>Radio</a></li><li id='_menu6' match='^real-time$'><a href='/real-time'>Real-time</a></li><li id='_menu7' rel='_subEvent'><a>Sự kiện</a><div class='zingsubmenu_multicol none' id='_subEvent' rel='event' style='left: 421px; width: 190px'><div class='subcol last-child' style='width: 190px'> <ul> <li><a href='http://mp3.zing.vn/vietnamidol' target='_blank'>Việt Nam Idol</a></li> <li><a href='http://tv.zing.vn/giong-hat-viet' target='_blank'>Giọng Hát Việt</a></li> <li><a href='http://mp3.zing.vn/freshconcert' target='_blank'>Fresh Concert</a></li> <li><a href='http://mp3.zing.vn/ponds' target='_blank'>Rạng rỡ 18 ft VMH</a></li> </ul></div></div></li><li id='_menu8' match='^freshconcert$'><a href='/freshconcert'>Fresh Concert</a></li><li id='_menu9' match='/cpanel/' rel='_subMy'><a href='/cpanel/music/playlist.html' id='_mainMenuMyLink'/><div class='zingsubmenu_multicol none' id='_subMy' rel='my' style='left: 524px; width: 452px'><div class='subcol first-child' style='height: 154px; width: 150px'> <h2>Nhạc</h2> <ul> <li><a href='/cpanel/music/upload.html'>Bài hát của tôi</a></li> <li><a href='/cpanel/music/favourite.html'>Bài hát yêu thích</a></li> <li><a href='/cpanel/music/playlist.html'>Playlist của tôi</a></li> <li><a href='/cpanel/music/favouritep.html'>Playlist yêu thích</a></li> </ul></div><!--End .sub-col --><div class='subcol' style='height: 154px; width: 150px'> <h2>Video</h2> <ul> <li><a href='/cpanel/video/favourite.html'>Video yêu thích</a></li> </ul></div><!--End .sub-col --><div class='subcol last-child' style='height: 154px; width: 150px'> <h2>Dịch vụ</h2> <ul> <li><a href='/cpanel/rbt/ringbacktone.html'>Nhạc chờ điện thoại</a></li> <li><a href='/cpanel/rbt/gift.html'>Quà tặng nhạc chờ</a></li> <li><a href='/cpanel/rbt/zingme.html'>Nhạc nền Zing Me</a></li> <li><a href='/cai-dat/memusic/mygift.html'>Quà tặng nhạc nền</a></li> </ul></div><!--End .sub-col --></div></li><li class='upload'><a href='/upload/song.html' id='_uploadBtn' title='Upload nhanh'>Upload</a></li><li class='off-ads' id='_divToggle'/></ul></div><!--End .main-nav --><script language='javascript'>MP3.MAINMENU= [&#39;_menu1&#39;, &#39;_menu2&#39;, &#39;_menu3&#39;, &#39;_menu4&#39;, &#39;_menu5&#39;, &#39;_menu6&#39;, &#39;_menu7&#39;, &#39;_menu8&#39;, &#39;_menu9&#39;];</script></div><!--End .header --></div>

Bước 3

Lưu template của bạn lại và kiểm tra thành quả mình vừa làm được nhé. Hồng Designer chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét