Xin chào! Bài viết này tôi xin chia cho bạn Banner Cho Blogger.

Bạn hãy copy lại và dán vào Blog nhé!  (Ctrl+C)

CSS BANNER

<style>
#banner {
  background:url(https://4.bp.blogspot.com/-Qdka-8gIOnI/WwVVU2ZAjJI/AAAAAAAACA8/ioY_t912bUY3xEluOTE-AwARFONqSoCSwCLcBGAs/s1600/slider-bg.jpg) no-repeat center;
  padding:20px 10px;
  background-size:cover;
  ;
}
#banner .banner-contain {
  max-width:1075px;
  margin:0 auto;
  ;
}
#banner .cot-1 {
  width:50%;
  ;
}
#banner .cot-2 {
  width:49%;
  text-align:center;
  ;
}
#banner .cot-1,#banner .cot-2 {
  display:inline-block;
  ;
}
#banner h2,#banner h3 {
  color:#fff;
  font-weight:600;
  font-size:22px;
  text-transform:uppercase;
  text-shadow:0 2px 5px rgba(0,0,0,0.1);
  margin-bottom:10px;
  ;
}
#banner p {
  color:#fff;
  font-size:16px;
  line-height:1.5em;
  margin-bottom:10px;
  ;
}
.feature-temp li {
  padding-bottom:10px;
  color:#fff;
  position:relative;
  ;
}
.feature-temp li:before {
  content:" \f058";
  font-family:fontawesome;
  color:#fff;
  padding-right:10px;
  ;
}
.cot-2 img {
  max-width:73%;
  z-index:99;
  ;
}
.choose {
  margin:5px 50px;
  display:inline-block;
  ;
}
.choose a {
  color:#666;
  font-family:' Open Sans',sans-serif;
  padding:8px 20px;
  font-size:17px;
  text-transform:uppercase;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  border-radius:4px;
  transition:all 0.2s ease;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  ;
}
a.free {
  background:#e6f8ff;
  ;
}
a.premium {
  background:#b1e25e;
  ;
}
.choose a:after {
  content:' ';
  font-family:fontawesome;
  color:#666;
  padding-left:10px;
  ;
}
a.free:after {
  content:" \f06b";
  ;
}
a.premium:after {
  content:" \f0d6";
  ;
}
.choose a:hover {
  color:#fff;
  background:#424242;
  ;
}
.choose a:hover:after {
  color:#fff;
  ;
}
.cot-2 a:after {
  content:" \f004";
  font-family:fontawesome;
  color:#81b740;
  background:rgba(255,255,255,0.95);
  position:absolute;
  border-radius:50%;
  width:100px;
  height:100px;
  line-height:109px;
  font-size:40px;
  right:-70px;
  bottom:170px;
  border:2px dashed #92c15d;
  display:none;
  ;
}
@media (max-width:750px) {
  #banner .cot-1 {
    width:100%;
    margin-bottom:15px;
    ;
  }
  #banner .cot-2 {
    width:100%;
    text-align:center;
    ;
  }
}
.title-main {
  text-align:center;
  margin-bottom:20px;
  ;
}
.title-main h2 {
  font-size:24px;
  line-height:26px;
  margin-bottom:15px;
  padding:5px 0 25px 0;
  ;
}
.title-main h2 span {
  color:#333;
  position:relative;
  padding-bottom:9px;
  ;
}
.title-main h2 span:before {
  content:'';
  display:block;
  width:10px;
  height:10px;
  background:#F68A1F;
  position:absolute;
  -ms-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  left:calc(50% - 7.5px);
  bottom:-4.4px;
  ;
}
.title-main h2 span:after {
  content:'';
  display:block;
  width:100%;
  height:2px;
  background:#F68A1F;
  position:absolute;
  bottom:0;
  left:0;
  ;
}
</style>


Đặt nơi nào bạn muốn hiển thị.

<div id='banner'>
    <div class='banner-contain'>
        <div class='cot-1'>
            <h3 class='h2 animated fadeInLeft'>Kho template blogspot miễn phí</h3>
            <!--<p>Chúng tôi cố gắng cung cấp những template tốt nhất đến với các bạn.</p>-->
            <ul class='feature-temp'>
                <li class='animated fadeInUp' style='--delay:0.3s'>Responsive Template</li>
                <li class='animated fadeInUp' style='--delay:0.5s'>Bố cục rõ ràng, dễ nhìn</li>
                <li class='animated fadeInUp' style='--delay:0.7s'>Tốc độ load khá nhanh</li>
                <li class='animated fadeInUp' style='--delay:0.9s'>Tối ưu SEO</li>
                <li class='animated fadeInUp' style='--delay:1.1s'>Dễ dàng chỉnh sửa</li>
            </ul>
            <center>
                <div class='choose animated fadeIn' style='--delay:1.5s'><a class='free' href='#blog' title='Free Template'>Xem Ngay</a>
                </div>
            </center>
        </div>
        <div class='cot-2'>
            <a href='#blog'><img alt='Kho giao diện Blogspot' class='land-img animated fadeInRight' src='https://4.bp.blogspot.com/-ZGEIAtp8R4M/WwVVarChDVI/AAAAAAAACBE/UE7m2ldGeOg9vwtYwoMC424SUQC1dzFcACLcBGAs/s1600/shopify-theme.png' />
            </a>
        </div>
    </div>
</div>
- - 0 bình luận
Tag
  • Bình luận (0)
  • Emoticon
  • Chèn Ảnh
  • Code
  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3