Blogspot Menu and Intro Tutorial

Published Time: 2018-07-21T20:54:30+07:00

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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #continue")'> <span class='xuong'>MORE</span><br/> <img src='https://www.carmenthyssenmalaga.org 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='https://www.carmenthyssenmalaga.org 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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff")'> Khác<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff")'> Photoshop<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff")'> Facebook<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff")'> Blogspot<i class='fa fa-chevron-down' style='margin:0 0 0 8px; color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #top-wrap-bsw-menu")").addClass("change"); }else{$("[#top-wrap-bsw-menu](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #welcometoblog"){position:relative;display:table;width:100%;height:106vh;margin:0!important;padding:0!important;z-index:10;background:url(https://www.carmenthyssenmalaga.org no-repeat center center!important;background-size:cover!important} [#welcometoblog](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #welcometoblog"):before{content:'';position:absolute;bottom:0;height:170px;width:100%;background:url(https://www.carmenthyssenmalaga.org no-repeat center;z-index:1;} [#welcometoblog](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #4d000000")',endColorstr='[#cc000000](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff");text-shadow:0 0 6px rgba(0,0,0,.4);margin:0;padding:0} [#welcometoblog](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #welcometoblog") span{color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff");font-weight:normal;font-size:16px} [#welcometoblog](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #welcometoblog") i{color:[#fff](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #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](https://www.carmenthyssenmalaga.org "See all tagged subjects with: #fff");font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacing:.1em;text-decoration:n