Xin chào tất cả các bạn, tình cờ lục lại con template cũ thì thấy cái menu & intro cũng đẹp nên nay mình sẽ chia sẻ cho các bạn đoạn code đấy
HƯỚNG DẪN CÁCH LÀM
Bước 1: Tìm thẻ <body> và thêm toàn bộ đoạn code dưới xuống nó<!--Intro--> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='welcometoblog'> <div class='xuongbenduoi'> <a> <div class='content_bsw_ENV'> <div class='dautrang'> <hl>Mừng các bạn đến với blog!</hl> <h2 class='_title'>Star Bình Blog</h2> <p>Blog Chia Sẻ Thủ Thuật</p> <div class='xemngaycss'> <a href='#continue'> <span class='xuong'>MORE</span><br/> <img src='http://i.imgur.com/jkG1qni.png' style='width:30px;height:30px'/> </a></div> </div> </div> </a></div> <div class='xuongbenduoi'> </div> </div> <div id='continue'/> <script> /* <![CDATA[ */ $(function(){$('.xemngaycss').click(function(e){$('html, body').animate({scrollTop:$('#header-lager').offset().top},1000)})}); /* ]]> */ </script> <!--End Intro--> <div class='clear'/> </b:if> <!--Menu New--> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='top-wrap-bsw-menu'> <div class='top-wrap-menu_bsw'> <nav class='top_wrap-menu-bsw'> <input class='res-bsw-menu' type='checkbox'/> <label class='res_bsw-menu'><span class='title-bsw'>Star Bình Blog</span> <span class='hamburger'/> <span class='hamburger1'/> <span class='hamburger2'/> </label> <div class='logo'><a href='/'><img src='http://i.imgur.com/Tb6LvCx.png'/> Star Bình Blog</a></div> <ul> <div class='search_box_menu'> <form action='/search' id='searchthis' method='get' style='display:inline;'> <input id='bsw_menu_search_box_v2_top_ws' name='q' placeholder='Nhập từ khóa cần tìm kiếm...' type='text'/> </form> </div> <li> <a href='/search/label/WapMaster' style='margin:0 0 0 8px; color:#fff'> Khác<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:#fff'/></a> <ul class='drop-down-bsw_menu'> <li><a href='/search/label/Wapbuider' title='Wapbuider'>Wapbuider</a></li> <li><a href='/search/label/Wordpress' title='Wordpress'>Wordpress</a></li> <li><a href='/search/label/XenForo' title='XenForo'>XenForo</a></li> <li><a href='/search/label/Hacking%20-%20Bảo%20mật' title='hacking'>Hacking - Bảo mật</a></li> <li><a href='/search/label/JohnCMS' title='JohnCMS'>JohnCMS</a></li> <li><a href='/search/label/All%20Shared%20Code' title='Code'>All Shared Code</a></li> <li><a href='/search/label/Ebook'>Ebook</a></li> <li><a href='/p/viet-html.html'>Lập trình (Viết HTML)</a></li> <li><a href='/p/ma-hoa-html-textarealine.html'>Mã hóa HTML</a></li> <li><a href='/p/rut-gon-css.html'>Nén CSS</a></li> <li><a href='/p/test-code.html'>Test code</a></li> <li><a href='/p/top-comment.html'>Top bình luận</a></li> </ul> </li> <li> <a href='/search/label/PhotoShop' style='margin:0 0 0 8px; color:#fff'> Photoshop<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:#fff'/></a> <ul class='drop-down-bsw_menu'> <li><a href='/p/tai-photoshop.html'>Tải Photoshop</a></li> <li><a href='/search/label/PhotoShop Action'>Action Photoshop</a></li> <li><a href='/search/label/PSD'>PSD TỔNG HỢP</a></li> <li><a href='/search/label/PhotoShop Mockup'>Mockup PhotoShop</a></li> </ul> </li> <li> <a href='/search/label/Facebook' style='margin:0 0 0 8px; color:#fff'> Facebook<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:#fff'/></a> <ul class='drop-down-bsw_menu'> <li><a href='/search/label/Facebook TUT'>TUT Facebook </a></li> <li><a href='/search/label/Facebook Report'>Repport Facebook </a></li> <li><a href='/search/label/Facebook Unlock'>Unlock Facebook </a></li> <li><a href='/search/label/Facebook Buff'>Sub - Like Facebook </a></li> <li><a href='/search/label/Facebook PSD'>PSD Facebook </a></li> </ul> </li> <li> <a href='/search/label/Blogger' style='margin:0 0 0 8px; color:#fff'> Blogspot<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:#fff'/></a> <ul class='drop-down-bsw_menu'> <li><a href='/search/label/Blogger Templates'>Template blogspot </a></li> <li><a href='/search/label/Blogger Menu'>Menu blogspot </a></li> <li><a href='/search/label/Blogger Widget'>Widget blogspot </a></li> <li><a href='/search/label/Blogger CSS'>CSS blogspot </a></li> <li><a href='/search/label/Blogger Effect'>Effect blogspot </a></li> <li><a href='/search/label/Blogger Loading'>Loading blogspot </a></li> </ul> </li> <li><a class='home-blog' href='/' style='color:#4db2ec'><i class='fa fa-home blog' style='font-size:15px'/> Home</a></li> </ul> </nav> </div></div> <script> window.onscroll = function() {if ($(this).scrollTop() > 30) {$("#top-wrap-bsw-menu").addClass("change"); }else{$("#top-wrap-bsw-menu").removeClass("change"); }} </script> </b:if> <!-- End Menu -->Bước 2: Tiếp theo tìm thẻ ]]></b:skin> và thêm toàn bộ đoạn css bên dưới lên trên nó
/* Tile Top */ #welcometoblog{position:relative;display:table;width:100%;height:106vh;margin:0!important;padding:0!important;z-index:10;background:url(http://i.imgur.com/fwoDkab.jpg) no-repeat center center!important;background-size:cover!important} #welcometoblog:before{content:'';position:absolute;bottom:0;height:170px;width:100%;background:url(http://i.imgur.com/S3b0h00.png) no-repeat center;z-index:1;} #welcometoblog:after{content:'';/*z-index:0.3;position:absolute;*/background:-moz-linear-gradient(top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,.3)),color-stop(30%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.5)));background:-webkit-linear-gradient(top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);background:-o-linear-gradient(top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000',endColorstr='#cc000000',GradientType=0);top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))} .dautrang hl{font-family:'Roboto',sans-serif;font-size:30px;color:#fff;line-height:2;text-shadow:0 0 6px rgba(0,0,0,.4);margin-bottom:14px} .dautrang h2{font-size:55px;font-weight:500;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.4);letter-spacing:.5px;margin:0 0 .335em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase} .dautrang p{text-transform:capitalize;font-size:30px;font-weight:300;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.4);margin:0;padding:0} #welcometoblog span{color:#fff;font-weight:normal;font-size:16px} #welcometoblog i{color:#fff;font-size:48px;margin-top:-27px} .dautrang{margin:0 auto;text-align:center;padding:0} .degrees-index-hero-quote-img-xuongbenduoi{text-align:center;max-width:215px;margin:0 auto} .button-down a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacing:.1em;text-decoration:none;transition:opacity .3s} .xuongbenduoi{display:table-cell;vertical-align:middle;text-align:center} /* Menu Top */ .search_box_menu{display:inline;float:right;margin-top:-2.5px} #bsw_menu_search_box_v2_top_ws { background: transparent url(http://i.imgur.com/WeW1VqU.png) no-repeat center left; background-position: 50%; outline: 0; border: 0; border-radius: 5px; color: #eee; padding: 0 10px 0 42px; line-height: 35px; margin: 0; width: 0; letter-spacing: 0; transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-o-transition:.7s} #top-wrap-bsw-menu.change #bsw_menu_search_box_v2_top_ws{background:rgba(0,0,0,.4) url(http://i.imgur.com/WeW1VqU.png) no-repeat center left;background-position:3% 50%;outline:0;border:0;border-radius:5px;color:#eee;padding:0 10px 0 42px;line-height:35px;margin:0;width:270px;letter-spacing:0} #bsw_menu_search_box_v2_top_ws::-webkit-input-placeholder{color:#ddd} #top-wrap-bsw-menu.change .top_wrap-menu-bsw .logo a {padding:0 0 0 44px} #top-wrap-bsw-menu.change {height:48px;line-height:48px;background:rgba(22,22,22,.9)} #top-wrap-bsw-menu{z-index:9999;width:100%;height:70px;line-height:70px;padding:0;background:transparent;position:fixed;top:0;left:0;-moz-transition:all .1s ease;-webkit-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease} .top-wrap-menu_bsw{width:100%;margin:0 auto;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none} .top_wrap-menu-bsw{margin:0 auto;max-width:1200px;position:relative;width:100%} .top_wrap-menu-bsw ul,.top_wrap-menu-bsw li{margin:0 0;padding:0 0;list-style:none} .top_wrap-menu-bsw ul{padding-right:6px} .top_wrap-menu-bsw li{margin:0;float:right;display:inline;position:relative;text-transform:none} .top_wrap-menu-bsw a{display:block;padding:0 15px;text-decoration:none;color:#fff;font-size:15px;font-weight:400;text-transform:none;transition:.1s} .top_wrap-menu-bsw i{top:20px} .top_wrap-menu-bsw i{font-size:10px} .res-bsw-menu{display:none;margin:0 0;paddi.top_wrap-menu-bsw ul.drop-down-bsw_menung:0 0;width:80px;height:35px;opacity:0;cursor:pointer} .res_bsw-menu{display:none;width:35px;height:36px;line-height:36px;text-align:center} .top_wrap-menu-bsw ul.drop-down-bsw_menu{margin:0;width:190px;background:rgba(0,0,0,.8);box-shadow:0 10px 23px rgba(0,0,0,.2);position:absolute;z-index:99;padding:0;opacity:0;visibility:hidden;transition:all .25s ease-in-out} .top_wrap-menu-bsw ul .drop-down-bsw_menu li{display:block;width:100%;font:12px 'Roboto',sans-serif;text-transform:none} ul.drop-down-bsw_menu.morong-colum{width:500px} .top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu{right:0} .top_wrap-menu-bsw li:last-child ul.drop-down-bsw_menu:before{content:'';position:absolute;top:-12px;right:35px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:12px solid #fff;left:inherit} .top_wrap-menu-bsw li:hover ul.drop-down-bsw_menu{opacity:1;visibility:visible;transform:none} .top_wrap-menu-bsw ul.drop-down-bsw_menu a{color:#fff;padding:12px 20px;line-height:normal} .top_wrap-menu-bsw ul .drop-down-bsw_menu li a{font-size:14px;letter-spacing:.012435em} .top_wrap-menu-bsw ul.drop-down-bsw_menu a:hover{color:#4db2ec} .top_wrap-menu-bsw .logo {position:absolute;left:0} .top_wrap-menu-bsw .logo img {position:absolute;top:50%;left:0;transform:translate(0,-50%);border-radius:50%} .top_wrap-menu-bsw .logo a {padding:0 0 0 43px;font-family:'Roboto',sans-serif;font-size:23px;letter-spacing:1px}
Code gốc: bacsiwindows.com - Mod by me
Chúc bạn thành công!