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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kp5K2LzL8U2ksQ2WEEsszJFgQYQaUu5aWC9q6p7odo1_6PlbaLQ07_sK7rucqy200igeG27GpmrzZk32RvkF_R4ZIOoSAkCQNSsRiSnWO4VFDwJ0fBvMBMbSKiqABblLXphJN8A3xtPK/s1600/512x512+glass.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AE_yNE_Im0aNx67vGDhGAaBHPgp2zOM3vVwa3rWP5Iwmi2hlKP4HaImxbnz6kjwuy-5YApVekpwDth1Wt9PGF0Bs8DqzgHjwrYs7LyuNGogoD6RR0ChxLnHq-_T-KVILRQoNBfNp4FkF/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Djz_029dqEKCY4Ec5MicwG5_SzhbT0RvEZU_B9iodXq2EAa-E9cE3jpLpSptRdi0xHnHFQkqSwpsg-W1xiOuJxksMdNQ0fKKacbik_vyy7kF8aUsySHQXvKQBmZlzWKA27X3U4ofAXxJ/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>

DEMO

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

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

Iris Tips

Có thể bạn quan tâm

Mẹo nhỏ khi bình luận

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

Iris Tips

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

About Me Landing page for your Blogger

Cách thực hiện

Iris Tips

Có thể bạn quan tâm

Hơn 10.000 độc giả đã đăng ký thành công

Mẹo nhỏ khi bình luận

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

Cập nhật mới trên Iris Tips

Phiếu khảo sát