Hot Post

Tạo Trang Landing Page Giới thiệu bản thân tuyệt đẹp cho Blogger

4/09/2017 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

About Me Landing page for your Blogger

Ngày nay việc sử dụng Landing Page đã trở nên khá quen thuộc đối với các website, đặc việt là các website bán hàng hoặc giới thiệu về doanh nghiệp. Landing Page có ý nghĩa quyết định trong việc tạo dựng, thu hút số lượng truy cập cho website. Một Landing Page được tối ưu hóa tốt sẽ giúp điều hướng và giữ chân người dùng trên website của bạn lâu hơn, qua đó nâng cao giá trị thương hiệu của bạn.

Hãy cũng Iris Tips tạo một mẫu Landing Page Giới thiệu bản thân đơn giản mà chuyên nghiệp cho website của mình nhé.


Cách thực hiện

1Bạn hãy vào Trang >> Trang mới >> Chuyển qua tab HTML và dán đoạn code bên dưới vào
<style type="text/css">
html,body{height:100%}
body{font-family:'Roboto';text-align:center;color:#bbb}
#post-wrapper,.sidebar-inner,#footer-wrapper,#outer-wrapper{display:none}
.hero{height:80%;width:100%;background:#EC6F66;background:-webkit-linear-gradient(right,#EC6F66,#F3A183);background:linear-gradient(to left,#EC6F66,#F3A183)}
@media only screen and (min-width:320px){.hero{height:60%}}
@media only screen and (min-width:680px){.hero{height:70%}}
@media only screen and (min-width:950px){.hero{height:80%}}
.inner-logo{text-align:left;position:relative;top:10px;left:10px;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform:translateX(1px);transform:translateX(1px)}
.inner-text{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:50px}
@media only screen and (min-width:320px){.inner-text{padding-left:15px;padding-right:15px}}
@media only screen and (min-width:400px){.inner-text{padding-left:40px;padding-right:40px}}
@media only screen and (min-width:680px){.inner-text{font-size:75px}}
@media only screen and (min-width:950px){.inner-text{font-size:100px}}
.p1{display:inline-block;font-size:1em;font-weight:100;marign:0;line-height:1;color:#f5f5f5}
@media only screen and (max-width:465px){.p1{display:block;position:absolute;top:-25%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}
.p2{display:inline-block;font-size:1em;font-weight:900;marign:0;line-height:1;color:white}
@media only screen and (max-width:465px){.p2{position:relative;top:0.6em}}
.hero-down{position:absolute;left:48%;font-size:2em;width:2em;height:2em;color:#f5f5f5;border-radius:100%}
.hero-down:hover,.hero-down:focus{color:#ccc}
.hero-down:active{color:#f5f5f5}
.hero-down i{vertical-align:bottom;position:relative;top:0.1em}
@media only screen and (min-width:320px){.hero-down{top:52%}}
@media only screen and (min-width:680px){.hero-down{top:62%}}
@media only screen and (min-width:950px){.hero-down{top:72%}}
#about{padding:30px}
.left{text-align:left}
*{box-sizing:border-box}
.header{position:fixed;z-index:5;width:100%}
.burger{position:absolute;z-index:10;right:25px;top:25px;cursor:pointer;-webkit-transform:rotateY(0);transform:rotateY(0);-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.burger__patty{width:28px;height:2px;margin:0 0 4px 0;background:white;-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.burger__patty:last-child{margin-bottom:0}
.burger--close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.burger--close .burger__patty:nth-child(1){-webkit-transform:rotate(45deg) translate(4px,4px);transform:rotate(45deg) translate(4px,4px)}
.burger--close .burger__patty:nth-child(2){opacity:0}
.burger--close .burger__patty:nth-child(3){-webkit-transform:rotate(-45deg) translate(5px,-4px);transform:rotate(-45deg) translate(5px,-4px)}
.menu{position:fixed;top:0;width:100%;visibility:hidden}
.menu--active{visibility:visible}
.menu__brand,.menu__list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;float:left;width:50%;height:100vh;overflow:hidden}
.menu__list{margin:0;padding:0;background:#EC6F66;/* fallback for old browsers */
  background:-webkit-linear-gradient(right,#EC6F66,#F3A183);background:linear-gradient(to left,#EC6F66,#F3A183);list-style-type:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.menu__list--active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.menu__brand{background:white;-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
.menu__brand--active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.menu__item{-webkit-transform:translate3d(500px,0,0);transform:translate3d(500px,0,0);-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.menu__item--active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.menu__link{display:inline-block;position:relative;font-size:42px;padding:15px 0;font-weight:300;text-decoration:none;color:white;-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.menu__link:before{content:"";position:absolute;bottom:0;left:50%;width:10px;height:2px;background:white;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:all 0.4s cubic-bezier(0.23,1,0.32,1);transition:all 0.4s cubic-bezier(0.23,1,0.32,1)}
.menu__link:hover:before{width:100%}
.menu a.menu__link:hover{color:white!important;text-decoration:none!important;font-weight:bold!important}
.menu .menu__item:nth-child(1){-webkit-transition-delay:0.1s;transition-delay:0.1s}
.menu .menu__item:nth-child(2){-webkit-transition-delay:0.2s;transition-delay:0.2s}
.menu .menu__item:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}
.menu .menu__item:nth-child(4){-webkit-transition-delay:0.4s;transition-delay:0.4s}
.menu .menu__item:nth-child(5){-webkit-transition-delay:0.5s;transition-delay:0.5s}
.menu .menu__item:nth-child(6){-webkit-transition-delay:0.6s;transition-delay:0.6s}
@media screen and (max-width:768px){ul.menu__list,div.menu__brand{float:none;width:100%;min-height:0}ul.menu__list--active,div.menu__brand--active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.menu__list{height:75vh;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.menu__link{font-size:24px}.menu__brand{height:25vh;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.menu__brand .logo{width:90px;height:90px}}
</style>
<header class="header">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
      <div class="logo">
                <img src="https://3.bp.blogspot.com/-Tk-Vsxb0LmM/WN_RcB9_j3I/AAAAAAAAFOI/8cprGjt8Xa0rFw551j3TJDKmGXcDjWwfQCLcB/s1600/512x512%2Bglass.png" style="width:100%; border-radius:50%; margin-bottom:10px; width:60%;" />
            </div>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="http://codepen.io/IrisTips" class="menu__link" target="_blank">CodePen</a></li>
      <li class="menu__item"><a href="http://iris-tips.blogspot.com/" class="menu__link" target="_blank">Website</a></li>
      <li class="menu__item">
        <a href="https://twitter.com/Iris_Tips" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a>
      </li>
      <li class="menu__item">
        <a href="https://facebook.com/iristipsblog" target="_blank" class="menu__link menu__link--social">
          <i class="fa fa-facebook"></i></a>
      </li>
    </ul>
  </nav>
</header>

<section class="hero">
  <div class="inner-logo">
    <img src="https://4.bp.blogspot.com/-1psigLB6sSU/WN_Pbf6K6JI/AAAAAAAAFN4/ceBpFXJv9nQV4HxQcM10f-NYlEfF5sJcQCLcB/s1600/Iris-Tips-2.png" style="width:125px;"/>
  </div>
  <div class="inner-text">
    <p class="p1">Web</p>
    <p class="p2">Designer</p>
  </div>
  <a class="hero-down animated infinite pulse" href="#about">
    <i class="fa fa-chevron-down"></i>
  </a>
</section>

<section id="about">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://4.bp.blogspot.com/-uTvDsm7F4qc/WN_QvS94PLI/AAAAAAAAFOE/tVo21B9-g-YvmZ66Re8Z4KlYqDvu_JKugCLcB/s1600/KMRt0TI-0JR2.png" style="width:100%; border-radius:50%; margin-bottom:10px;" />
     </div>
    <div class="col-sm-8 left">
      <h1>Giới thiệu về Iirs Tips</h1>
      <p>Iris Tips là một blog cá nhân nơi tôi chia sẻ những thủ thuật và template cho Blogger.<br/><br/>

Trong blog này, tôi sẽ chia sẻ những thủ thuật về Blogger dựa trên kiến thức và kinh nghiệm của tôi - một newbie - người bắt đầu biết và tìm hiểu Blogger bằng cách tự học.<br/><br/>
        
Ngoài ra trong blog này, tôi cũng chia sẻ một mẫu template Blogger có thể tải về miễn phí hoặc trả phí. <br/><br/>

Hy vọng những thủ thuật và giao diện được chia sẻ trên blog sẽ hữu ích cho bạn.
      </p> <br/>     
      <h4>Kết nối với Iris Tips</h4>
      <p>www.fb.com/iristipsblog<br/>
      www.twitter.com/Iris_Tips</p><br/>
      <h4>Website</h4>
      <p>www.iris-tips.blogspot.com</p><br/>
      <h4>Email liên hệ</h4>
      <p>iristipsblog(at)gmail(dot)com</p>
      </div>
    </div>
</section>
<script type='text/javascript'>
$(function() {
  $(".p2").typed({
    strings: ["Designer", "Developer", "Maker"],
    typeSpeed: 50,
    backSpeed: 10,
    backDelay: 2000,
    showCursor: false,
    loop: false
  });
});

// smooth scroll to div
$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});


//Menu
(function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());
</script>
<link type='text/css' rel='stylesheet' href='//fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' />
<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' />
<link type='text/css' rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>


2Lưu ý: Tùy bố cục từng template đoạn code có thể không full-page. Bạn sẽ phải chỉnh sửa thêm 1 chút CSS nữa. Bạn có thể tham khảo thêm ở bài viết bên dưới

Xem thêm: Cách ẩn Widget Sidebar để tạo Trang hoặc Bài viết full width 100%

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Bridget Reed/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Tạo Trang Landing Page Giới thiệu bản thân tuyệt đẹp cho Blogger"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)