Cách Tạo Intro Cực Chất Cho Blogspot.

Ôi cha! chào mọi người. Sau một thời gian ôn thi thì mình đã trở lại rồi đây. Cũng vì rảnh rổi và vui với điểm số của mình nên mình ngồi edit cái intro rồi share cho mọi người, mong mọi người sẽ thích.
Các bước cũng rất đơn giản:

Bước 1: Vào Chủ Đề => Edit HTML

Bước 2: Chèn Đoạn Code Này Vào Nơi Bạn Muốn Chèn.

Gợi Ý: Chèn Sau : </head>

<style>
.promo-wrapper {float: left; width: 100%; background-color: #272727; background-size: cover; background-attachment: fixed; position: relative; background-image: url(http://file.vforum.vn/hinh/2016/08/hinh-anh-cuoc-song-buon-be-tac-co-don-35.jpg); text-align: center; z-index: 1;height:450px;background-position: 0px -113px;}
.promobg {opacity: .9; background: #000; background: -moz-linear-gradient(45deg, #000 0%, #0f5882 100%); background: -webkit-linear-gradient(45deg, #000 0%, #0f5882 100%); background: linear-gradient(45deg, #765353 0%, #5e5a62 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#0f5882', GradientType=1);height:450px;}
.promo { padding: 1.75em 2.5em 1.75em 2.5em; display: inline-block; position: relative; z-index: 1;width:90%; }
.promo h1 {color: #fff; display: inline-block; margin-right: 1em; font-size: 40px; font-weight: 800; text-transform: uppercase; margin-top: 20px; width: 70%; line-height: 1.2; margin-bottom: 5px;}
.promo h1 span {color:#fde107;font-weight:900;}
.promo p {color: #fff; margin-right: 1em; font-size: 18px; margin: 5px; font-weight: 600;}
.promo .button {font-size: 15px; font-weight: bold; display: inline-block; text-decoration: none; padding: 1em 2em 1em 2em; cursor: pointer; outline: 0; margin-right: 15px;  border-radius: 3px; color: #fff; text-transform: uppercase; letter-spacing: 0.8px;border: 1px solid #fffeff;}
.promo .button:hover { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.15); color: #fff; }
.cd-primary-nav > li > a {-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;}
.cd-primary-nav > li > a:hover { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.15); color: #fff; border-top: solid 2px #c2c7cc; }
#HTML3 {width:327px!important;}
.buttonx{display:inline-flex;border-radius:4px;cursor:pointer;border:double #eee;font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#00a2ff!important;background:0;margin:5px;padding:5px 20px;text-shadow:none;transition:all 1s}.buttonx:hover{color:#00a2ff!important;background:#fff!important;box-shadow:0 0 18px 18px rgba(80,80,80,0)}
#search-bar{display:block;position:relative;padding:10px;width:48%}
input#sq{background: url(https://askbootstrap.com/preview/osahan-soft-themez/img/bg.svg) no-repeat bottom; background-size: 900px; color: #2D2D2D; margin: 0; padding:0 17px;outline: 0; border-radius: 3px; box-shadow: initial; line-height:62px; transition: all .1s; font-size: 18px; font-weight: 600; border:none;  width: 86%;}
input#sq:focus{color:#333;border-radius:0px;}
#search-form{position:relative;margin:auto;}
#searchsubmit{border: 0; color: #4C4C4C; display: inline-block; position: absolute; right: 0; top: 0; padding:0 50px; height:62px;  transition: all .2s;}
#searchsubmit:hover,#searchsubmit:focus,#searchsubmit:active{color:#fff;cursor:pointer;outline:0;}
.search-form-icon{top: 28px; right: 45px; position: absolute; font-size: 25px;color:#fff}
input#sq::-webkit-input-placeholder,input#sq:-ms-input-placeholder{color:#777;}
input#sq::-moz-placeholder,input#sq:-moz-placeholder{color:#777;opacity:1;}
[type="search"] {-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;}
#searchsubmit { background: #00a2ff; border-radius: 0 3px 3px 0; }
  </style>
<div class='promo-wrapper'>
<div class='promobg'>
<div class='promo'>
<h1>S2TopVN chào mừng bạn đến với <span>    Blogger     </span></h1>
<p>S2TopVN Điểm Truy Cập Cho Thủ Thuật Tổng Hợp</p>
<br/>
<center>
<div id='search-bar'>
<form action='/search' id='search-form' method='get'>
<input id='sq' name='q' placeholder='ex: huy dz, huy pro, huy xinh gái,...' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>
<span class='search-form-icon'><span class='fa fa-search'></span></span>
</div>
</center>
<br/>
<a class='button' href='/search/label'>Tất Cả Bài Đăng</a>
<div id='breadcrumbs'></div>
</div>
</div></div>

Bước 3: Lưu Lại Là Xong.

+ Nếu bạn muốn nó chỉ xuất hiện ở trang chủ và các trang search label, trang archive thì bạn thay thế code trên bằng code dưới đây.

<b:if cond='data:blog.pageType == "index"'>
<style>
.promo-wrapper {float: left; width: 100%; background-color: #272727; background-size: cover; background-attachment: fixed; position: relative; background-image: url(http://file.vforum.vn/hinh/2016/08/hinh-anh-cuoc-song-buon-be-tac-co-don-35.jpg); text-align: center; z-index: 1;height:450px;background-position: 0px -113px;}
.promobg {opacity: .9; background: #000; background: -moz-linear-gradient(45deg, #000 0%, #0f5882 100%); background: -webkit-linear-gradient(45deg, #000 0%, #0f5882 100%); background: linear-gradient(45deg, #765353 0%, #5e5a62 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#0f5882', GradientType=1);height:450px;}
.promo { padding: 1.75em 2.5em 1.75em 2.5em; display: inline-block; position: relative; z-index: 1;width:90%; }
.promo h1 {color: #fff; display: inline-block; margin-right: 1em; font-size: 40px; font-weight: 800; text-transform: uppercase; margin-top: 20px; width: 70%; line-height: 1.2; margin-bottom: 5px;}
.promo h1 span {color:#fde107;font-weight:900;}
.promo p {color: #fff; margin-right: 1em; font-size: 18px; margin: 5px; font-weight: 600;}
.promo .button {font-size: 15px; font-weight: bold; display: inline-block; text-decoration: none; padding: 1em 2em 1em 2em; cursor: pointer; outline: 0; margin-right: 15px;  border-radius: 3px; color: #fff; text-transform: uppercase; letter-spacing: 0.8px;border: 1px solid #fffeff;}
.promo .button:hover { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.15); color: #fff; }
.cd-primary-nav > li > a {-moz-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; -webkit-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; -ms-transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out; transition: color 0.25s ease-in-out, border-color 0.25s ease-in-out, background-color 0.25s ease-in-out;}
.cd-primary-nav > li > a:hover { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.15); color: #fff; border-top: solid 2px #c2c7cc; }
#HTML3 {width:327px!important;}
.buttonx{display:inline-flex;border-radius:4px;cursor:pointer;border:double #eee;font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#00a2ff!important;background:0;margin:5px;padding:5px 20px;text-shadow:none;transition:all 1s}.buttonx:hover{color:#00a2ff!important;background:#fff!important;box-shadow:0 0 18px 18px rgba(80,80,80,0)}
#search-bar{display:block;position:relative;padding:10px;width:48%}
input#sq{background: url(https://askbootstrap.com/preview/osahan-soft-themez/img/bg.svg) no-repeat bottom; background-size: 900px; color: #2D2D2D; margin: 0; padding:0 17px;outline: 0; border-radius: 3px; box-shadow: initial; line-height:62px; transition: all .1s; font-size: 18px; font-weight: 600; border:none;  width: 86%;}
input#sq:focus{color:#333;border-radius:0px;}
#search-form{position:relative;margin:auto;}
#searchsubmit{border: 0; color: #4C4C4C; display: inline-block; position: absolute; right: 0; top: 0; padding:0 50px; height:62px;  transition: all .2s;}
#searchsubmit:hover,#searchsubmit:focus,#searchsubmit:active{color:#fff;cursor:pointer;outline:0;}
.search-form-icon{top: 28px; right: 45px; position: absolute; font-size: 25px;color:#fff}
input#sq::-webkit-input-placeholder,input#sq:-ms-input-placeholder{color:#777;}
input#sq::-moz-placeholder,input#sq:-moz-placeholder{color:#777;opacity:1;}
[type="search"] {-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;}
#searchsubmit { background: #00a2ff; border-radius: 0 3px 3px 0; }
  </style>
<div class='promo-wrapper'>
<div class='promobg'>
<div class='promo'>
<h1>S2TopVN chào mừng bạn đến với <span>    Blogger     </span></h1>
<p>S2TopVN Điểm Truy Cập Cho Thủ Thuật Tổng Hợp</p>
<br/>
<center>
<div id='search-bar'>
<form action='/search' id='search-form' method='get'>
<input id='sq' name='q' placeholder='ex: huy dz, huy pro, huy xinh gái,...' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>
<span class='search-form-icon'><span class='fa fa-search'></span></span>
</div>
</center>
<br/>
<a class='button' href='/search/label'>Tất Cả Bài Đăng</a>
<div id='breadcrumbs'></div>
</div>
</div></div>
</b:if>

=> Cuối cùng là lưu lại. 

------ Chúc Mọi Người Thành Công ------