[blog]
Tiếp tục là bài 2 hướng dẫn chèn thư viện và xây dựng bố cục cho trang blog như Bài một đã đưa ra. Chúng ta chèn thư viện Boostrap, jQuery, Font

Bài 2 xây dựng bố cục

Các bạn chèn 3 thư viện sau dưới thẻ <head>

    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css' rel='stylesheet'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'>
    </script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'>
    </script>

Thêm HTML trong body như sau

Bài 2 xây dựng bố cục

Đoạn HTML được mình chuẩn bị sẵn theo bố cục như Bài 1 đưa ra

<header class='header'>
    <div class='container'>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <div class='navbar-header'>
                    <button aria-controls='navbar' aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar' data-toggle='collapse' type='button'>
                        <span class='sr-only'>
                            Toggle navigation
                        </span>
                        <span class='icon-bar'>
                        </span>
                        <span class='icon-bar'>
                        </span>
                        <span class='icon-bar'>
                        </span>
                    </button>
                    <a class='navbar-brand' href='/'>
                        <data:blog.title />
                    </a>
                </div>
                <div class='navbar-collapse collapse' id='navbar'>
                    <ul class='nav navbar-nav'>
                        <li>
                            <a href='#'>
                                Home
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                About
                            </a>
                        </li>
                        <li>
                            <a href='#'>
                                Contact
                            </a>
                        </li>
                        <li class='dropdown'>
                            <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>
                                Dropdown
                                <span class='caret'>
                                </span>
                            </a>
                            <ul class='dropdown-menu'>
                                <li>
                                    <a href='#'>
                                        Item 1
                                    </a>
                                </li>
                                <li>
                                    <a href='#'>
                                        Item 2
                                    </a>
                                </li>
                                <li>
                                    <a href='#'>
                                        Item 3
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <ul class='nav navbar-nav navbar-right'>
                        <li>
                            <a href='/'>
                                Item 1
                            </a>
                        </li>
                        <li>
                            <a href='/navbar-static-top/'>
                                Item 2
                            </a>
                        </li>
                        <li>
                            <a href='/navbar-fixed-top/'>
                                Item 3
                            </a>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container-fluid -->
        </nav>
    </div>
</header>
<main class='container'>
    <div class='row'>
        <div class='col-lg-8'>
            <div class='jumbotron'>
                <h1>
                    Hello World!
                </h1>
            </div>
        </div>
        <div class='col-lg-4'>
            <div class='jumbotron'>
                Siderbar
            </div>
        </div>
    </div>
</main>
<footer class='footer'>
    <div class='container'>
        <div class='row'>
            <div class='col-sm-4'>
                <div class='jumbotron'>
                    Footer 1
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='jumbotron'>
                    Footer 2
                </div>
            </div>
            <div class='col-sm-4'>
                <div class='jumbotron'>
                    Footer 3
                </div>
            </div>
        </div>
    </div>
    <div class='container'>
        <div class='row'>
            <div class='col-sm-12'>
                <div class='jumbotron'>
                    <div class="footer-copyright text-center py-3">
                        © 2020 Copyright:
                        <a href="/">
                            Bootstrap.com
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Tiếp theo thêm 1 chút CSS trong <b:skin>

.header{position:relative;z-index:1000;float:left;width:100%}
main,footer{clear:both}
Sau đó các bạn nhấn định dạng cho nó sắp xếp gọn và lưu lại là xong.
[/blog]