Bài 3: Tạo Một Template Blogspot

Demo template blogspot don gian su dung cau truc co ban trong bai truoc

Demo template Blogspot đơn giản sử dụng cấu trúc cơ bản trong bài trước.

Hôm nay mình sẽ ứng dụng cấu trúc cơ bản của template Blogspot – Blogger để tạo một mẫu đơn giản xem sao ! Và tem này có responsive (hiển thị đẹp trên di dộng bạn).

Đầu tiên bạn cần copy cái cấu trúc này vào và thay thế toàn bộ code HTML của template mặc định của Blogspot.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
    <head>
        <title>
            Tiêu đề trang web
        </title>
        <b:skin>
            <![CDATA[ /* Chỗ này để viết CSS */ ]]>
        </b:skin>
    </head>
    <body>
       Đây là khu vực viết nội dung trang web
        <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'></b:section>
    /*Tạo widget cho các thành phần trong template/*
</body>
</html>

Nó đơn giản là mẫu cấu trúc cơ bản của Template Blogspot bài trước thôi chứ không có gì đâu. Sau khi cài xong bạn thấy demo nó trắng trơn và có 2 dòng nội dung như này:

Bây giờ bạn sẽ ráp 2 thành phần HTML và CSS ví dụ dưới đây vào template ở trên để tạo một mẫu giới thiệu đơn giản:

Trong phần nội dung <body>, bạn copy đoạn HTML bên dưới và dán đè lên dòng:

Đây là khu vực viết nội dung trang web

HTML mẫu:

<div class='bg-image'/>
<div class='bg-text'>
<h2>Hocban Template</h2>
<h1 style='font-size:50px'>I am Maria Olala</h1>
<div class='nut-bam'><a href='https://hocban.vn/bai-3-tao-mot-template-blogspot-blogger-don-gian' rel='nofollow'>Xem thêm</a></div></div>

Tiếp theo là cần có CSS để định dạng hiển thị cho đoạn HTML trên, bạn copy phần CSS dưới đây đem dán vào bên trong dấu ngoặc vuông, ở đoạn /* Chỗ này để viết CSS */ :

body,
html {
   height: 100%;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
}

* {
   box-sizing: border-box;
}

.bg-image {
   background-image: url("https://www.w3schools.com/howto/photographer.jpg");
   filter: blur(8px);
   -webkit-filter: blur(8px);
   height: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.bg-text {
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 0.4);
   color: white;
   font-weight: bold;
   border: 3px solid #f1f1f1;
   position: absolute;
   border-radius: 5px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   width: 80%;
   padding: 20px;
   text-align: center;
}

.nut-bam a:link,
.nut-bam a:visited {
   width: fit-content;
   padding: 0.5em 1em;
   text-align: center;
   float: inherit;
   margin: 0em auto;
   color: #ffffff;
   background: #9c27b09e;
   border-radius: 5px;
   text-decoration: none;
}

.nut-bam a:hover {
   background: #03A9F4 !important;
   color: white !important;
}

Template sau khi ráp 2 phần HTML và CSS ở trên vào nó sẽ như thế này, bạn có thể copy nguyên văn đem dán vào trong link

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    <meta content='width=device-width,initial-scale=1' name='viewport'/>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
    <head>
        <title>
            Tiêu đề trang web
        </title>
        <b:skin>
            <![CDATA[
                body, html {
                height: 100%;
                margin: 0;
                font-family: Arial, Helvetica, sans-serif;
                }
                
                * {
                box-sizing: border-box;
                }
                
                .bg-image {
                background-image: url("https://www.w3schools.com/howto/photographer.jpg");
                
                
                filter: blur(8px);
                -webkit-filter: blur(8px);
                
                
                height: 100%;
                
                
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                }
                
                
                .bg-text {
                background-color: rgb(0,0,0);
                background-color: rgba(0,0,0, 0.4);
                color: white;
                font-weight: bold;
                border: 3px solid #f1f1f1;
                position: absolute;
                border-radius: 5px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                width: 80%;
                padding: 20px;
                text-align: center;
                }
                
                .nut-bam a:link, .nut-bam a:visited {
                width: fit-content;
                padding: 0.5em 1em;
                text-align: center;
                float: inherit;
                margin: 0em auto;
                color: #ffffff;
                background: #9c27b09e;
                border-radius: 5px;
                text-decoration: none;
                }
                .nut-bam a:hover {
                background: #03A9F4 !important;
                color: white !important;
                }
                
                ]]>
        </b:skin>
    </head>
    <body>
        <div class='bg-image'/>
        <div class='bg-text'>
            <h2>Hocban Template</h2>
            <h1 style='font-size:50px'>I am Maria Olala</h1>
            <div class='nut-bam'><a href='https://hocban.vn/bai-3-tao-mot-template-blogspot-blogger-don-gian' rel='nofollow'>Xem thêm</a></div>
        </div>
        <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
    </body>
</html>

Như vậy là xong rồi đấy, bây giờ bạn xem demo đã tạo trông nó có như ảnh đầu bài chưa :v | Với mẫu này bạn có thể thay đổi nội dung bên trong, nó có thể làm trang giới thiệu ngắn về bản thân và trỏ đến một link tùy ý.