[blog]
Bài 4 hướng dẫn các bạn thêm các tiện ích cho bố cục của blog, tiện ích giúp chúng ta thêm được nhiều tiện ích mặc định sẵn có của blog.

Bài 4 Thêm tiện ích cho bố cục

Đoạn HTML để hiển thị nút thêm tiện ích như sau:

<b:section id='ten-id' class = 'ten-class' showaddelement='yes'  maxwidgets='1' name = 'name' >
</b:section>

Các bạn copy và dán vào chỗ muốn hiển thị nút thêm tiện tích.

Tiếp tục của bài 3 thì mình thêm tiện ích vô phần sidebar bên phải nhé, các bạn tìm và dán nó vô mục đó trong HTML

Bài 4 Thêm tiện ích cho bố cục

Sau khi thêm xong thì bố cục của các bạn xuất hiện chỗ để thêm tiện ích

Bài 4 Thêm tiện ích cho bố cục

Sau đó bạn vô thêm và chọn Tiện ích bài đăng phổ biến. Sau khi thêm xong trang blog xuất hiện bài đăng tiện ích. Tất nhiên là chưa có CSS nên nó xấu nhé.

Tiếp theo bạn Load lại HTML và tìm PopularPosts1 

Bài 4 Thêm tiện ích cho bố cục


Ở giao diện mới google họ biến PopularPosts thành đoạn code rất lạ và khó tùy biến được nên mình phải dùng lại bản thường dùng có vòng lặp nha.

Các bạn xóa nguyên cái tiện ích vừa thêm và dán đoạn HTML bên bưới đây thế vô nó.

<b:widget id='PopularPosts1' locked='false' title='Most Popular' type='PopularPosts' visible='true'>
    <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>true</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main' var='this'>
        <b:include name='widget-title' />
        <div class='widget-content'>
            <b:tag class='trending-posts' cond='data:widget.sectionId == &quot;trending&quot;' name='div'>
                <b:if cond='data:widget.sectionId == &quot;trending&quot;'>
                    <b:class cond='data:posts.length != &quot;1&quot;' name='multiple' />
                </b:if>
                <b:tag class='featured-posts' cond='data:widget.sectionId == &quot;featured&quot;' name='div'>
                    <b:loop index='i' values='data:posts' var='post'>
                        <b:include data='post' name='content' />
                    </b:loop>
                </b:tag>
            </b:tag>
        </div>
    </b:includable>
    <b:includable id='content' var='post'>
        <b:include data='post' name='default' />
    </b:includable>
    <b:includable id='default' var='post'>
        <article class='popular-post post'>
            <b:class expr:name='&quot;item-&quot;+data:i' />
            <b:if cond='data:post.featuredImage'>
                <b:if cond='data:post.featuredImage.isYouTube'>
                    <a class='entry-image-link' expr:href='data:post.url'>
                        <img class='entry-thumb' expr:src='data:post.featuredImage' />
                    </a>
                    <b:else />
                    <a class='entry-image-link' expr:href='data:post.url'>
                        <img class='entry-thumb' expr:src='resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)' />
                    </a>
                </b:if>
                <b:else />
                <a class='entry-image-link' expr:href='data:post.url'>
                    <img class='entry-thumb' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCue3-ZTjJQTqSWVHTfXleJnjFZgWKrk6WoEYFBHQiqr88gtgSNsNcOdOQz29qnIOSdRTcQSeeNUnmvXeU9yTiQ7shwyrA5MvaFAXSAB83Wq9_z7NH7b1GMplC6U0zHGTSfAr_x-4iHlO/s1600/no-thumb.png' />
                </a>
            </b:if>
            <div class='entry-header'>
                <h2 class='entry-title'>
                    <a expr:href='data:post.url'>
                        <data:post.title />
                    </a>
                </h2>
                <b:if cond='data:widgets.Blog.first.allBylineItems.timestamp'>
                    <div class='entry-meta'><span class='entry-time'><time class='published' expr:datetime='data:post.date.iso8601'>
                                <data:post.date />
                            </time></span></div>
                </b:if>
            </div>
        </article>
    </b:includable>
</b:widget>

Sau đó thêm một chú CSS trong thẻ <b:skin>

/* widget css */
.widget .title{padding:15px;border-bottom:1px solid #eee;font-size:20px;font-weight:700;color:#fc5356;margin:0;text-transform:capitalize}
.widget .widget-content{padding:15px}
.PopularPosts .popular-post{display:block;overflow:hidden;padding:0;margin:20px 0 0}
.PopularPosts .popular-post.item-0{margin:0}
.PopularPosts .entry-image-link{position:relative;float:left;width:85px;height:65px;overflow:hidden;z-index:1;margin:0 13px 0 0}
.PopularPosts .entry-image-link .entry-thumb{width:85px;height:65px}
.PopularPosts .entry-header{overflow:hidden}
.PopularPosts .entry-title{font-size:14px;font-weight:700;line-height:1.4em;margin:0}
.title-oswald .PopularPosts .entry-title{font-weight:500}
.PopularPosts .entry-meta{margin:3px 0 0}

Sau đó bạn lưu lại. Và các bạn tìm thẻ <div class='jumbotron'> bao quan nó xóa đi nha vì mình không còn dùng tới nó nữa. Các bạn lưu lại và kiểm tra kết quả.

Bài 4 Thêm tiện ích cho bố cục


Tiếp theo các bạn vô bố cục thêm tiện ích Label và lưu lại.

Bài 4 Thêm tiện ích cho bố cục

Nếu nó ẩn không cho thêm thì các bạn vô trong HTML xóa maxwidgets='1' đi hoặc tăng số lượng lên là nó xuất hiện nút thêm tiện ích.

Các bạn thêm chọn Tiện ích Label

Bài 4 Thêm tiện ích cho bố cục

Bài 4 Thêm tiện ích cho bố cục

Chúng ta viết CSS cho nó như sau

.section,.widget,.widget ul{margin:0;padding:0}
dl,ul{list-style-position:inside;font-weight:400;list-style:none}
.Label .cloud-label-widget-content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
.Label .cloud-label-widget-content span{padding:4px 15px;font-size:13px;color:#ffffff;background:#fc5356;border-radius:3px;margin-right:4px;margin-bottom:4px}
.Label .cloud-label-widget-content span a{color:#fff}
.list-label-widget-content li{position:relative;display:block;list-style:none}
.list-label li:first-child a,.archive-list li:first-child a{padding:0 0 5px}
.list-label-widget-content li a,.archive-list li a{display:block;color:#171c24;font-size:15px;font-weight:400;text-transform:capitalize;padding:5px 0}
.list-label-widget-content .label-count,.archive-list .archive-count{float:right;font-size:15px;color:#aaaaaa;text-decoration:none;margin:1px 0 0 5px}

Xong bài 4, tiếp tục chờ bài tiếp theo.

Các bạn có thể xem demo ở đây: https://thietketintuc.blogspot.com

[/blog]