[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]