[Code] Thủ Thuật Blogspot l Tạo Menu Kèm Intro Đẹp

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ó

<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='https://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>

<div class='clear'/>
</b:if>

<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='https://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>


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(https://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(https://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(https://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(https://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,. Cool

;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