Hướng dẫn chèn code landingpage

Hướng dẫn chi tiết các bước cài đặt một landingpage mới


Chèn code logic

Là phần logic xử lý đăng ký, lấy thông tin landingpage, tracking

Copy hết đoạn code bên dưới và chèn vào instapage trong phần: Setting > Html-Css > Header Bắt buộc phải đặt trong phần header thì Landingpage mới chạy được

        
          <!--
            Chú ý: Các thông số cần thay đổi trong đoạn code như sau
            - Link trang phụ: LpConfig.thankyou_url = '/thankyou'; -> thay giá trị thankyou = tên của trang phụ
                Có các giá trị hay sử dụng nhu sau:
                    + thankyou
                    + hocthu
                    + tuvan
            - Ga_code: ga('send', 'event', 'C2', 'view', 'PPT01'); -> thay giá trị PPT01 = GA của khóa học
            Updated: 16/05/2016 - by LongDH
          -->
          <meta charset="utf-8">
          <meta property="fb:app_id" content="781404068653965">
          <script>
            var LpConfig = LpConfig || {};
            LpConfig.thankyou_url= '/thankyou ';
          </script>
          <script src="//ceto.edumall.io/build/landingpage/logic_v14_loader.min.js"></script>
          <!-- Begin tracking GA -->
          <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                                    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-68038326-1', 'auto');
            ga('send', 'event', 'C2', 'view', 'PPT01');
          </script>
          <!-- End tracking GA -->
        
      

Google Tag Manager

Google Tag Manage (GTM) là trình quản lý thẻ có thể giúp maketer quản lý những code tracking cơ bản như Google Analytics, Adwords Conversion Code Adwords Remarketing, Facebook Code… ngay chính từ giao diện của GTM và chỉ cần gắm code này vào landingpage 1 lần duy nhất. Tìm hiểu thêm

Copy và paste vào phần: Settings > Html-css > Body

        
          <!-- Google Tag Manager -->
          <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KDXWVB"
          height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
          <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-KDXWVB');</script>
          <!-- End Google Tag Manager -->
        
      

Form đăng ký

Chọn mẫu cần dùng > Bấm nút Code C3 hoặc C3_COD > Copy tất cả code và chèn vào phần html trong landingpage

Form dọc nền trắng
Form dọc viền trắng
Form dọc viền trắng bo góc
Form 1 địa chỉ nền trắng
Form 1 địa chỉ viền trắng
Form ngang nền trắng
Form ngang viền trắng
Form ngang 1 địa chỉ nền trắng
Form ngang 1 địa chỉ viền trắng

Countdown

Chọn mẫu cần dùng > Bấm nút CODE > Copy tất cả code và chèn vào phần html trong landingpage

ĐĂNG KÝ KHÓA HỌC NGAY
ĐỂ NHẬN ƯU ĐÃI 69%

599,000đ

Chỉ còn

199,000đ

Áp dụng đến hết //
NHANH TAY LÊN !

Thời gian ưu đãi còn

00

ngày

00

giờ

00

phút

00

giây

Học phí lớp học OFFLINE: 5.000.000Đ - Học phí lớp học ONLINE: 699.000Đ

Ưu đãi 60% - Học phí Online chỉ còn 199.000Đ khi đăng ký trước ngày //

599,000đ

Chỉ còn

199,000đ

Clock only

00

ngày

00

giờ

00

phút

00

giây

Clock only dot

00

Ngày

:

00

Giờ

:

00

Phút

:

00

Giây

Clock clock box

00

Ngày

:

00

Giờ

:

00

Phút

:

00

Giây

Comment Facebook

Copy đoạn cobe bên dưới và chèn vào Setting > Html-Css > Footer

        
          <!--
            Chý ý: Thay http://landingpages.edumall.vn/ten_domain bằng domain landingpage của bạn
           -->
          <div id="fb-root"></div>
            <script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=781404068653965";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
          <div class="fb-comments row" data-href="http://landingpages.edumall.vn/ten_domain" data-numposts="5" data-width="100%"></div>
        
      

Trang thankyou

Copy đoạn cobe bên dưới và chèn vào Setting > Html-Css > Header

        
          <!--
            Chú ý: Thay phần màu đỏ bằng mã pixel của tài khoản quảng cáo sẽ chạy quảng cáo Conversion. (Chạy hình thức Tăng Click thì tk nào cũng chạy được, còn chạy hình thức COnversion thì LP chứa mã pixel của tk nào thì quảng cáo phải chạy trên tk đó)

            TSH01: 433950950110580
            TSH02: 492769184225005
            TSH03: 979370228777392
            TSH04: 964710466936528
          -->
          <meta charset=utf-8>
          <script src="https://tracking.edumall.vn/client-api/js/spymaster.js"></script>
          <script type="text/javascript">
                $(document).ready(function(){
                  Spymaster.setup("Pedia","beta");
                });
          </script>
          <!-- Facebook Pixel Code -->
            <script>
            !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
            n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
            document,'script','//connect.facebook.net/en_US/fbevents.js');

            fbq('init', '433950950110580');
            fbq('track', 'CompleteRegistration');</script>

            <noscript><img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id=433950950110580&ev=CompleteRegistration&noscript=1"
            /></noscript>
           <!-- End Facebook Pixel Code -->
        
      

Copy đoạn cobe bên dưới và chèn vào Setting > Html-Css > Body

        
          <!-- Google Tag Manager -->
          <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KDXWVB"
          height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
          <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-KDXWVB');</script>
          <!-- End Google Tag Manager -->
        
      

CTA Scroll

Copy đoạn code bên dưới và paste vào bất kỳ mục nào trong Settings --> HTML/CSS -> (Header/Body/Footer). Ưu tiên paste vào footer cho dễ tìm

        
          <!--
          * Vietnam Ver - CTA Scroll
          * Ver 1.0 - By LaoTon
          * -->
          <script>
            $('form').attr('id', 'form');
            $(window).scroll(function(){
              var threshold = 400; // number of pixels before bottom of page that you want to start fading
              var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
              var y = $(this).scrollTop();
              if (y < 400) { op = 0;}
              if( op <= 0 ){
                $("#cta_scroll").hide();
              } else {
                $("#cta_scroll").show();
              }
              $("#cta_scroll").css("opacity", op );
            });
            $(function() {
              $('.btn-scroll').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;
                  }
                }
              });
            });
          </script>
          <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
          <section id="cta_scroll" style="
            background: #73B9D7;
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 100;
            font-family: 'Roboto Slab', serif;
            padding: 10px 0;
            display: none;">
            <div class="container">
              <ul class="list_item">
                <li class="image"><img src="http://chinhphucphotoshopchuyensau1.edumall.vn/images/logo3.png" alt="349"></li>
                <li class="hook"><strong>CHỈ VỚI 349K</strong><br>cho một khoá học tuyệt vời trị giá 599k!</li>
                <li class="button"><a href="#form" class="btn btn-scroll">Đăng ký ngay</a></li>
                <li class="countdown">
                  <div class="countdown-clock">
                    <div class="widget-wrap">
                      <h4 class="widget-titles">Nhanh tay lên!<br>Thời gian đăng ký chỉ còn</h4>
                      <section class="countdown-box countdown">
                        <div class="countdown-content">
                          <input id="sale-expired-time" type="hidden" value="4/11/2015 23:59:59">
                          <div class="time">
                            <div class="cd countdown-item">
                              <p class="top countdown-day">0</p>
                              <p class="bottom">Ngày</p>
                            </div>
                            <div class="cd countdown-item">
                              <p class="top countdown-hour">13</p>
                              <p class="bottom">Giờ</p>
                            </div>
                            <div class="cd countdown-item">
                              <p class="top countdown-minute">35</p>
                              <p class="bottom">Phút</p>
                            </div>
                            <div class="cd countdown-item">
                              <p class="top countdown-second">7</p>
                              <p class="bottom">Giây</p>
                            </div>
                          </div>
                        </div>
                      </section>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </section>

          <style>k
          #cta_scroll {
            background: #73B9D7;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 100;
          }
          .list_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .list_item .image img {
            height: 120px;
            width: auto;
          }
          .list_item .hook {
            color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 32px;
            font-weight: 100;
          }
          .list_item .btn {
            background: #fff;
            font-size: 18px !important;
            text-transform: uppercase !important;
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            position: relative;
          }
          .list_item .btn::before {
            content: '';
            position: absolute;
            top: -43px;
            right: -19px;
            background: url('http://chinhphucphotoshopchuyensau1.edumall.vn/images/arrow02.png') no-repeat;
            background-color: transparent;
            width: 87px;
            height: 52px;
          }
          .list_item .btn::after {
            content: '';
            position: absolute;
            bottom: -40px;
            left: -7px;
            background: url('http://chinhphucphotoshopchuyensau1.edumall.vn/images/arrow01.png') no-repeat;
            background-color: transparent;
            width: 87px;
            height: 52px;
          }
          .list_item .btn:hover {
            background: #434343;
            color: #fff !important;
          }
          /* .countdown-clock {
              background-color: rgba(123,126,125,0.6);
              padding: 20px;
              -moz-border-radius: 10px;
              -webkit-border-radius: 10px;
              border-radius: 10px;
          } */
          .countdown-clock .widget-titles {
              font-size: 16px;
              color: #fff;
              text-align: center;
              margin: 0 0 10px;
              line-height: 24px;
          }
          .countdown-box.countdown {
            font-family: "Roboto Slab", Roboto ,sans-serif;
            overflow: hidden; }
            .countdown-box.countdown .countdown-content {
              text-align: center;
              margin: 0 auto; }
              .countdown-box.countdown .countdown-content .cd {
                display: inline-block;
                margin: 0 5px;
                width: 48px; }
              .countdown-box.countdown .countdown-content .cd.point {
                width: 30px;
              }
              .countdown-box.countdown .countdown-content .point {
                font-size: 30px;
                margin-top: 15px;
                color: #fff;
                font-weight: 900; }
              .countdown-box.countdown .countdown-content .countdown-item .top {
                  font-size: 24px;
                  background: #303030;
                  color: #fff;
                  font-weight: 100;
                  margin-bottom: 0px;
                  padding: 5px 10px 5px 10px;}
              .countdown-box.countdown .countdown-content .countdown-item .bottom {
                font-size: 14px;
                margin-top: 5px;
                margin-bottom: 0px;
                color: #fff;
                font-family: "Roboto Slab", Roboto ,sans-serif;
                font-weight: 100; }
            @media screen and (max-width: 544px) {
              #cta_scroll .image, #cta_scroll .countdown {
                display: none;
              }
            }
          </style>
          <script>
            $(document).ready(function () {

            var auto_time = function () {
              var current_date = new Date();

              var first_months = current_date.getMonth() + 1;
              var first_days = 01;
              var first_years = 2015;

              var end_days = 0;
              var part_of_day = 1;

              var current_days = current_date.getDate();

              var diff = current_days - first_days
              if( diff%part_of_day != 0 ) {
                end_days = ((diff - diff%part_of_day)/part_of_day + 1)*part_of_day + 1
              }
              else {
                end_days = (diff/part_of_day)*part_of_day + 1
              }
              return end_days+"/"+first_months+"/"+first_years;
            }

            function saleCoundownter(duration, ondisplay, ontimeout) {
              var timer = duration,
                days, hours, minutes, seconds;
              var interval = setInterval(function () {
                if (--timer < 0) {
                  ontimeout ? ontimeout() : null
                  clearInterval(interval);
                  return;
                }

                days = parseInt(timer / 60 / 60 / 24, 10)
                hours = parseInt(timer / 60 / 60 % 24, 10)
                minutes = parseInt(timer / 60 % 60, 10);
                seconds = parseInt(timer % 60, 10);

                days = days;
                hours = hours;
                minutes = minutes;
                seconds = seconds;

                ondisplay(days, hours, minutes, seconds);

              }, 1000);
            };

            // Start countdown if there is a sale
            // var exprired = auto_time().split('/');
            var today = new Date();

            var current_day = today.getDay();
            var exprired_date = today.getDate();

            var days = 1;
            var stop_time = new Date((today.getMonth() + 1)+"/"+exprired_date+"/"+today.getFullYear()+" 23:59:59");
           
            $("#stop_day").text(stop_time.getDate());
            $("#stop_month").text(stop_time.getMonth() + 1);
            $("#stop_year").text(stop_time.getFullYear());

            var tag_day = $(".countdown-day")[0];
            var tag_hour = $(".countdown-hour")[0];
            var tag_minute = $(".countdown-minute")[0];
            var tag_second = $(".countdown-second")[0];
            saleCoundownter(
              (stop_time.getTime() - Date.now()) / 1000,
              function (days, hours, minutes, seconds) {
                tag_day.textContent = days;
                tag_hour.textContent = hours;
                tag_minute.textContent = minutes;
                tag_second.textContent = seconds;
              })
          });
          </script>
          <script type="text/javascript" src="http://huongdaninstapage.pedia.vn/js/countdown.js"></script>
                        
        
      

Flex-slider

Bước 1. Copy đoạn sau vào trong thẻ <header>

        
          <script src="https://static.edumall.vn/uploads/flex-slider/jquery.flexslider.js"></script>
          <link rel="stylesheet" href="https://static.edumall.vn/uploads/flex-slider/flexslider.css">
        
      

Bước 2. Copy đoạn sau vào nơi cần đặt slide và thay link ảnh

        
          <!-- Place somewhere in the <body> of your page -->
          <div class="flexslider">
            <ul class="slides">
              <li>
                <img src="https://static.edumall.vn/uploads/images/edumall/tvts_card_step_1.png" />
              </li>
              <li>
                <img src="https://static.edumall.vn/uploads/images/edumall/tvts_card_step_2.png" />
              </li>
              <li>
                <img src="https://static.edumall.vn/uploads/images/edumall/tvts_card_step_3.png" />
              </li>
              <li>
                <img src="https://static.edumall.vn/uploads/images/edumall/tvts_card_step_4.png" />
              </li>
            </ul>
          </div>
          <script>
          // Can also be used with $(document).ready()
          $(window).load(function() {
            $('.flexslider').flexslider({
              animation: "slide"
            });
          });
          </script>
        
      

Merry Christmas

Logo

        https://drive.google.com/file/d/0B4sKEce369YHZWN4bXlvNjZDWXM/view
      
Tạo hiệu ứng tuyết rơi

Chọn 1 trong 2 mẫu dưới đây. Copy và chèn vào phần Setting -> HTML/CSS -> Header


        <script src="http://ceto.edumall.io/build/landingpage/extensions/jquery_snowfall_1.min.js"></script>
        <script>
          $(document).ready( function(){
            /**
             * @params flakeChar - Ký tự bông tuyết
             * @params minSize - Kích thước bông tuyết nhỏ nhất có thể, mặc định là 10
             * @params maxSize - Kích thước bông tuyết lớn nhất có thể, mặc định là 20
             * @params newOn - Sau bao nhiêu ms thì sẽ sinh ra bông tuyết mới, mặc định 500
             * @params flakeColors - Mảng màu bông tuyết , Mặc định #FFFFFF (màu trắng)
             * @params durationMillis - Dừng hiệu ứng sau bao nhiều mili giây, Mặc định là không giới hạn
             */
            $.fn.snowfall({
              flakeChar : "&#10052;",
              minSize: 10,
              maxSize: 20,
              newOn: 100,
              flakeColor : ["#ffffff"],
            });
          });
        </script>
      

        <script src="http://ceto.edumall.io/build/landingpage/extensions/jquery_snowfall_2.min.js"></script>
        <script>
          $(document).ready( function(){
            /**
             * @params flakeCount - Số lượng bông tuyết
             * @params flakeColor - Màu của bông tuyết, mặc định #FFF (Màu trắng)
             * @params maxSize - Kích thước bông tuyết lớn nhất có thể, mặc định là 20
             * @params minSize - Kích thước bông tuyết nhỏ nhất có thể, mặc định 500
             * @params minSpeed - Tốc độ rơi nhỏ nhất có thể,
             * @params maxSpeed - Tốc độ rơi lớn nhất có thể,
             * @params round - Bông tuýet có phải hình tròn hay vuông
             */
            $(document).snowfall({
              flakeCount : 800,
              flakeColor : '#ffffff',
              maxSize : 5,
              minSize : 2,
              minSpeed : 1,
              maxSpeed : 5,
              round : true,
            });
          });
        </script>
      
Chèn nhạc nền

Copy và chèn vào phần Setting -> HTML/CSS -> Body. (Có thể thay link bên dưới bằng link bài nhạc khác trên nhaccuatui.com)


        <iframe src="https://www.nhaccuatui.com/mh/background/D224ZbX0JX" width="1" height="1" frameborder="0" allowfullscreen></iframe>
      

Happy New Year

1. Tạo câu đối đỏ

Copy đoạn code sau và paste vào HTML element được tạo tại Settings/HTML và đặt tại vị trí bất kỳ Việc đặt như này để tách biệt với các loại code khác, tránh nhầm lẫn.

        
          <section class="banner left">
           <img src="https://dvkhfbm6djrbs.cloudfront.net/57faffc4c1f23e034eb5f8ca/5817137d4d45a92ea675b133/1-min.png" alt="Cau doi trai">
          </section>

          <section class="banner right">
           <img src="https://dvkhfbm6djrbs.cloudfront.net/57faffc4c1f23e034eb5f8ca/5817137d4d45a92ea675b133/1-1-min.png" alt="Cau doi phai">
          </section>

          <style>
           .banner {position: fixed; z-index: 10000; top: 0; display: none; } .banner.left {left: 0; } .banner.right {right: 0; } .banner img {max-height: 500px; } @media screen and (max-width: 768px) {.banner img {max-height: 250px; } } </style>
          <script>
           $(document).ready(function() {
            setTimeout( function() {
             var banner = $('.banner');
             banner.fadeIn('2000');
            },500);
           });
          </script>
        
      

Valentine

1. Tạo banner chạy dưới bottom

Copy đoạn code sau và paste vào phần HTML/CSS --> Body

        
          <section class="banner_bot">
            <img src="https://dvkhfbm6djrbs.cloudfront.net/57faffc4c1f23e034eb5f8ca/root/MK0363-min.png" alt="Banner Valentine">
          </section>

          <style>
            .banner_bot {
              position: fixed;
              bottom: 0;
              left: 0;
              width: 100%;
              z-index: 10000000;
            }
            .banner_bot img {
              width: 100%;
              vertical-align: bottom;
              filter: drop-shadow(-2px -2px 5px rgba(0,0,0,0.2));
            }
          </style>
        
      

Scroll button

1. Phần HTML

Tạo một phần HTML ở vị trí bất kỳ, dùng đoạn code sau

        
          <a href="#" id="scrollToCart">Scroll to Cart</a>
        
      

2. Phần CSS

Copy đoạn code sau và paste vào phần Setting --> HTML/CSS --> HEAD

        
          <!--
            - bottom, right: Vị trí của button
            - width, height: Kích thước của button
            - background-size: Kích thước ảnh nền
            - background: Link ảnh nền
          -->
          <style type="text/css">
            #scrollToCart {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 170px;
            height: 100px;
            text-indent: -9999px;
            text-decoration: none;
            color: white;
            background: url('https://i.imgur.com/hNIyDTa.png');
            background-size: 170px 50px;
            font-size: 12px;
            display: block;
            padding: 5px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 5px; }
          </style>
        
      

3. Phần JavaScript

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> HEAD

        
          $(document).ready(function(){
            $("#scrollToCart").click(function(e) {
             e.preventDefault();
              $("html, body").animate({ scrollTop: $('.page-element.widget-container.page-element-type-box.widget-box').offset().top - 20 }, 500);
            });
          });
        
      

Modal

1. Phần HTML

Tạo một phần HTML ở vị trí bất kỳ, dùng đoạn code sau

Thay thế code của phần form đăng ký vào đoạn {Replace form here}

        
          <div id="myModal" class="modal" role="dialog">
            <div class="modal-content">
              <span class="close">×</span>
              <div class="contents"><p style="text-align: center;margin-bottom: 10px "><b><font color="white"  style="font-size: 20px;">ĐĂNG KÝ NHẬN ƯU ĐÃI</font></b></p></div></div>
            </div>
            {Replace form here}
          </div>
        
      

2. Phần CSS

VoiwCopy đoạn code sau và paste vào phần Setting --> HTML/CSS --> HEAD

        
          <style>
            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0,0,0); /* Fallback color */
                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }
            .modal-content {
                background-color: #882626;
                margin-left: 35%;
                padding: 25px;
                width: 30%;
            }
            .close {
                color: #aaaaaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }
          </style>
        
      

3. Phần JavaScript

Với trường hợp click vào button scroll hiện ra popup, cần phải hoàn thiện phần Scroll button ở trên trước

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> FOOTER

          
            $(document).ready(function(){
              var modal = document.getElementById('myModal');
              var btn = document.getElementById("scrollToCart");
              var span = document.getElementsByClassName("close")[0];
              btn.onclick = function() {
                modal.style.display = "block";
              }
              span.onclick = function() {
                modal.style.display = "none";
              }
              window.onclick = function(event) {
                if (event.target == modal) {
                  modal.style.display = "none";
                }
              }
            });
          
        

Với trường hợp hiện ra popup sau khi tải trang

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> FOOTER

15000 là thời gian tính theo milisecond, có thể thay đổi để phù hợp

          
            $(document).ready(function(){
              setTimeout(function(){
                var modal = document.getElementById('myModal');
                var span = document.getElementsByClassName("close")[0];
                 modal.style.display = "block";
                span.onclick = function() {
                  modal.style.display = "none";
                }
                window.onclick = function(event) {
                  if (event.target == modal) {
                    modal.style.display = "none";
                  }
                }
              
              }, 15000);
              });
          
        

Teacher Slider

1. Phần HTML

Thay link ảnh và Teacher info

        

          <div >
            <div col=10 id= "owl-carousel-teacher" class="owl-carousel owl-theme">
              <div class="tem">
                <img class="image" src="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/0a089f86c7c3bf50661c132bf7aac3da.jpg">
                <div class="overlay">
                  <div class="text">Teacher Info</div>
                </div>
              </div>
              <div class="tem">
                <img class="image" src="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/0a089f86c7c3bf50661c132bf7aac3da.jpg">
                <div class="overlay">
                  <div class="text">Teacher Info</div>
                </div>
              </div>
              <div class="tem">
                <img class="image" src="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/0a089f86c7c3bf50661c132bf7aac3da.jpg">
                <div class="overlay">
                  <div class="text">Teacher Info</div>
                </div>
              </div>
            </div>
          </div>

        
      

2. Phần CSS

Copy đoạn code sau và paste vào phần Setting --> HTML/CSS --> HEAD

        
          <link rel="stylesheet" href="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.carousel.min.css">
          <link rel="stylesheet" href="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.theme.green.min.css">
          <style>
            .prev, .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              padding: 16px;
              margin-top: -22px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
            }
            /* Position the "next button" to the right */
            .next {
              right: 0;
              border-radius: 3px 0 0 3px;
            }

            /* On hover, add a black background color with a little bit see-through */
            .prev:hover, .next:hover {
              background-color: rgba(0,0,0,0.8);
            }

            .overlay {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: rgba(27, 153, 214, .7);
              opacity: 1;
              overflow: hidden;
              width: 100%;
              height: 0;
              transition: .5s ease;
            }

            .tem:hover .overlay {
              height: 100%;
            }

            .text {
              white-space: nowrap; 
              color: white;
              font-size: 20px;
              position: absolute;
              overflow: hidden;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
            }
            </style>
        
      

3. Phần JavaScript

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> FOOTER

          
            /**
             * 
             */
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script type="text/javascript" src="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.carousel.min.js"></script>
            <script type="text/javascript">
              var owl = $('#owl-carousel-teacher');
              owl.owlCarousel({
                loop:true,
                autoplay:true,
                autoplayTimeout:3000,
                smartSpeed: 800,
                margin:10,
                nav:true,
                responsive:{
                  0:{
                      items:1
                  },
                  600:{
                      items:3
                  },
                  1000:{
                      items:5 } 
                  }
                }
              )
              $('.play').on('click',function(){
                owl.trigger('play.owl.autoplay',[3000])
              })
            </script>
          
        

Student Comment Slider

1. Phần HTML

Thay link ảnh và số thứ tự

        
          <div>
            <div style="width:100%;margin:auto;margin-bottom: 10px;margin-left: 5%" class="testimonial">
              <blockquote>
                <span id="quote"></span>
              </blockquote>
              <div></div>
            </div>
            <div id= "owl-carousel-comment" class="owl-carousel owl-theme" style="width:100%;margin-left: 5%">
              <img class="imgavatar" name="1" src="http://class.rio.vn/timthumb.php?src=images/testimonial/testimonial_s24.jpg&h=110">
              <img class="imgavatar" name="2" src="http://class.rio.vn/timthumb.php?src=images/testimonial/testimonial_s17.jpg&h=110">
              <img class="imgavatar" name="3" src="http://class.rio.vn/timthumb.php?src=images/testimonial/testimonial_s15.jpg&h=110">
              <img class="imgavatar" name="4" src="http://class.rio.vn/timthumb.php?src=images/testimonial/testimonial_s14.jpg&h=110">
            </div>
            <div style="width:100%;margin:auto;margin-top: 20px" class="testimonial">
              <p>
                <p><strong style="width:100%;margin-left: 5%" id="name"></strong></p>
                <p id="info"></p>
              </p>
            </div>
          </div>
        
      

2. Phần CSS

Copy đoạn code sau và paste vào phần Setting --> HTML/CSS --> HEAD

        
          <link rel="stylesheet" href="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.carousel.min.css">
          <link rel="stylesheet" href="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.theme.green.min.css">
          <style>
            .testimonial blockquote {
              margin: 10px 10px 0;
              background: #ddd;
              padding: 20px 60px;
              position: relative;
              border: none;
              border-radius: 8px;
              font-style: italic;
            }

            .testimonial blockquote:before, .testimonial blockquote:after {
              content: "\201C";
              position: absolute;
              font-size: 80px;
              line-height: 1;
              color: #fff;
              font-style: normal;
            }

            .testimonial blockquote:before {
              top: 0;
              left: 10px;
            }

            .testimonial blockquote:after {
              content: "\201D";
              right: 10px;
              bottom: -.5em;
            }

            .testimonial div {
              width: 0;
              height: 0;
              border-left: 0 solid transparent;
              border-right: 20px solid transparent;
              border-top: 20px solid #ddd;
              margin: 0 0 0 60px;
            }

            .testimonial p {
              margin: 8px 0 0 20px;
              text-align: left;
            }
            .imgavatar {
              width: 110px;
              height: 110px;
              border-radius: 50%;
            }
          </style>
        
      

3. Phần JavaScript

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> FOOTER

Thêm vào quotes, names, infos tương ứng với số thứ tự phần HTML ở trên

          
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script type="text/javascript" src="https://dvkhfbm6djrbs.cloudfront.net/59f1d0efebc5940011b84fe8/root/owl.carousel.min.js"></script>
            <script type="text/javascript">
              var quotes = [
                'This is example quote 1',
                'This is example quote 2',
                'This is example quote 3',
                'This is example quote 4',
              ]
              var names = [
                'Name 1',
                'Name 2',
                'Name 3',
                'Name 4',
              ]
              var infos = [
                'Đại học Ngoại Thương 1',
                'Đại học Ngoại Thương 2',
                'Đại học Ngoại Thương 3',
                'Đại học Ngoại Thương 4',
              ]
              $(document).ready(function(){
                document.getElementById("quote").textContent=quotes[0];
                document.getElementById("name").textContent=names[0];
                document.getElementById("info").textContent=infos[0];
              });
              var owl = $('#owl-carousel-comment');
              owl.owlCarousel({
                loop:true,
                autoWidth:true,
                autoplay:true,
                autoplayTimeout:3000,
                smartSpeed: 800,
                margin:70,
                nav:true,
                responsive:{
                  0:{
                      items:1
                  },
                  600:{
                      items:3
                  },
                  1000:{
                      items:5 } 
                  }
                }
              )
              $('.play').on('click',function(){
                owl.trigger('play.owl.autoplay',[3000])
              })
              
              owl.on('changed.owl.carousel',function(property){
                var current = property.item.index;
                var imgname = $(property.target).find(".owl-item").eq(current).find("img").attr('name');
                //console.log('Image current is ' + imgname);
                document.getElementById("quote").textContent=quotes[Number(imgname)-1];
                document.getElementById("name").textContent=names[Number(imgname)-1];
                document.getElementById("info").textContent=infos[Number(imgname)-1];
              });

            </script>
          
        

Thankyou redirect

3. Phần JavaScript

Phần này dành cho trang thankyou

Copy đoạn code sau và paste vào phần Setting --> JavaScript --> HEAD

          
            <script>
             $(document).ready(function() {
               setTimeout(function(){window.location = "https://edumall.vn"} , 4000);
             });
            </script>