Xin chào các bạn đã quay lại với blog của mình.!
Đã lâu rồi mình chưa đăng bài về thủ thuật đặc biệt là thủ thuật blog và hôm nay mình sẽ hướng dẫn các bạn làm một intro tích hợp thanh tìm kiếm cực đẹp cho blog của mình chỉ từ HTML và CSS thôi, intro dành cho blog sẽ giúp các bạn có một điểm nhấn khi người xem blog của bạn thấy được nó ngoài trang chủ, cách làm rất đơn giản mời các bạn theo dõi bài viết.
Đã lâu rồi mình chưa đăng bài về thủ thuật đặc biệt là thủ thuật blog và hôm nay mình sẽ hướng dẫn các bạn làm một intro tích hợp thanh tìm kiếm cực đẹp cho blog của mình chỉ từ HTML và CSS thôi, intro dành cho blog sẽ giúp các bạn có một điểm nhấn khi người xem blog của bạn thấy được nó ngoài trang chủ, cách làm rất đơn giản mời các bạn theo dõi bài viết.
CÁC BƯỚC THỰC HIỆN
Bước 1: Vào chỉnh sửa HTML và tìm thẻ <body> và dán đoạn code sau dưới thẻ đó.<div id='top_blogger_EN'>Bước 2: Tìm thẻ ]]></b:skin> và dán đoạn CSS sau đây phía trên nó.
<div class='cont_blogger_VN'>
<a href='/'>
<div class='content_blogger_ENV'>
<div class='centre_blogger-text_vne'>
<h2 class='_title'>Tiểu Bảo Blog Blog</h2>
<p>Blog Chia Sẽ Thủ Thuật - Ảnh Bìa Chất</p>
</div>
</div>
</a>
<br/>
<div class='tim-kiem-blogger'>
<form action='/search/' id='searchform' method='get'>
<input id='s' name='q' placeholder='Nhập từ khóa và nhấn enter...' type='text'/>
<input id='searchsubmit' type='submit' value='TÌM'/>
</form>
</div>
<div id='post-title-style2'>
<div class='post-title-style2'>
<p>
<a>Tìm nhiều:</a>
<a href='/search/label/PSD ẢNH BÌA' title='Ảnh Bìa Chất'># Ảnh Bìa Chất</a>
<a href='/search/label/PHOTOSHOP' title='Thủ Thuật Photoshop'># Photoshop</a>
<a href='/search/label/FACEBOOK' title='Thủ Thuật Facebook'># Facebook</a>
</p>
</div>
</div>
</div>
<section class='button-down' id='button-down'>
<a href='#continue'><span></span><span style='margin-top: 15px'></span><span style='margin-top: 30px'></span></a>
</section>
<div class='cont_blogger_VN'>
</div>
</div>
<div id='continue'></div>
#top_blogger_EN{background:url(https://blogger.googleusercontent.com/img/proxy/AVvXsEjZKMsLbaEbVwLWnN3kI6GKEpXLBus_G1Dw5HXSjKFPTp8nUsVIrApDOFjqVyz8PGZ9AqK0iEM501lIpShkGcjxRSrDGVp-byt2gbXvPwKUaVl3OnU_g1ORzDuub41v-sbdGipKed7lSTOuKnBrujMq5POg=s0-d)}Bước 3: Lưu Template lại và tận hưởng thành quả thôi.
}
#top_blogger_EN{position:relative;display:table;width:100%;height:65vh;margin:0!important;padding:0!important;z-index:10;background:url(https://blogger.googleusercontent.com/img/proxy/AVvXsEjZKMsLbaEbVwLWnN3kI6GKEpXLBus_G1Dw5HXSjKFPTp8nUsVIrApDOFjqVyz8PGZ9AqK0iEM501lIpShkGcjxRSrDGVp-byt2gbXvPwKUaVl3OnU_g1ORzDuub41v-sbdGipKed7lSTOuKnBrujMq5POg=s0-d) no-repeat center center!important;background-size:cover!important;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}
#top_blogger_EN:before{content:'';opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(120deg,#333,#6d9698)}
#top_blogger_EN:after{content:'';z-index:0.3;position:absolute;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))}
.content_blogger_ENV{position:relative;z-index:3}/* code by www.bacsiwindows.com */
.centre_blogger-text_vne h2{font-size:55px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.5px;margin:0 0 .335em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.centre_blogger-text_vne p{text-transform:capitalize;font-size:30px;font-weight:300;color:rgba(255,255,255,0.7);margin:0;padding:0}
.centre_blogger-text_vne{margin:0 auto;text-align:center;padding:0}
.degrees-index-hero-quote-img-cont_blogger_VN{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}/* code by www.bacsiwindows.com */
.cont_blogger_VN{display:table-cell;vertical-align:middle;text-align:center}
#button-down a span{position:absolute;top:-45px;left:50%;width:30px;height:30px;margin-left:-12px;border-left:1px solid #FFF;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb05 2s infinite;animation:sdb05 2s infinite;box-sizing:border-box}
#button-down a{animation:zoomInDownn 3s}
@keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-moz-keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes zoomInDownn {0%{opacity:0}50%{opacity:0}100%{opacity:1}}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#button-down a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#button-down a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#button-down a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.post-title-style2 a{z-index: 999;position:relative;background:rgba(0,0,0,0.1);color:#eee;padding:4px 15px;border-radius:3px;margin:0 5px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s}
.post-title-style2 a:hover{color:#fff;background:rgba(0,0,0,0.3);z-index: 999;position:relative;}
.tim-kiem-blogger {
;z-index: 999;
width: 650px;
overflow: hidden;
position: relative;
margin: 0 auto;
display: block;
}
.tim-kiem-blogger input[type="text"] {
;z-index: 999;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
position: relative;
display: inline;
width: 100%;
margin: 0;
border: 1px solid rgba(0,0,0,.1) !important;
padding: 15px 15px 15px 15px;
font: 20px 'Roboto', sans-serif;
color: #fff;
}
span.font30 {
;z-index: 999;
font-size: 30px;
}
span.font20 {
;z-index: 999;
font-size: 20px;
}
.tim-kiem-blogger input[type="submit"] {
z-index: 999;
position: absolute;
right: 3px;
background: #ff5722;
border-radius: 4px;
top: 6px;
padding: 12px 25px;
border: 0;
color: #fff;
font-size: 19px;
font-weight: 300;
}
.tim-kiem-blogger input[type="submit"]:hover {
background: #387AF2;
}
.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background:rgba(0,0,0,0.2);
color:#fff;
width:50px;
height:50px;
line-height:58px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:100%;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background:rgba(0,0,0,0.4);
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
20 nhận xét
Chất đấy , mà hình như tôi thấy trong template nào có r thì phải
Good đó ông
Đẹp!
dii nô blog ông nhé :)
cảm ơn ông rất nhiều <3
Thanks <3
oke khi online pc tui sẽ sửa lại sau nhé :)
oke khi online pc tui sẽ sửa lại sau nhé :)
Chúc ông buổi tối vui vẻ tôi chuẩn bị làm blog mới ông qua ủng hộ nhé cái kia lỗi rồi
hay lắm :)
lô
lỗi gì vậy ông ? uổng thế
cảm ơn rất nhiều <3
chất
Blog còn sơ sài lắm bạn :)), nên phát triển rồi quay lại đặt liên kết sau.
Nên đổi theme lại nhé :D
May quá hết lỗi rồi tôi viết lại bài mới kiếm tương tác đã :))
Bạn xem xét blog mình lại nhé ^^
Bài mới đi chú :)
oke sẽ tranh thủ ra bài :v