Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

LongAnIT 10/30/2018 Bình luận
Thiết kế trang báo lỗi 404 theo phong cách Mi Sốp Blogger

Tình cờ lạc vào trang 404 của Microsoft thấy thiết kế và trình bày rất hay. Ngoài việc thông báo lỗi 404 tới người dùng họ còn thêm vào một số kết quả tìm kiếm dạng gợi ý giúp người dùng có thể nhanh chóng chuyển hướng tới các liên kết tồn tại. Và giờ ta sẽ mang nó vào blogspot

Cụ thể list bài viết gợi ý ta có thể dùng thủ thuật random post/recent post/label post,... tùy theo mong muốn của webmaster. Trong bài viết này tôi sẽ sử dụng random post với layout giữ lại header và footer

Bước 1: xác định layout để đặt thẻ điều kiện

Tôi ví dụ layout trang của bạn như sau

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <div class="main">
        <!-- Nội dung chính -->
    </div>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>

Ta sẽ đặt thẻ điều kiện như sau để giữ lại header và footer trong trang 404 cũng như tối ưu code 

<body>
    <div class="header">
        <!-- Nội dung header -->
    </div>
    <b:if cond='!data:view.isError'>
        <div class="main">
            <!-- Nội dung chính -->
        </div>
        <b:else/>
        <div class="error">
            <!-- Nội dung trang error -->
        </div>
    </b:if>
    <div class="footer">
        <!-- Nội dung footer -->
    </div>
</body>


Bước 2: Chèn code vào trang 404

<div class='row'>
    <div class="non">
        <div class="mes">
            <div class="headline">
                404 - Page not found
            </div>
            <div class="suggest">
                <p> Hmm, we couldn't find this link, but here are some post that may be helpful</p>
                <div class="_suggest"></div>
            </div>
        </div>
        <div class="hero">
            <a href='/' title='Back to home page'><svg class="hero-image" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 270" style="" xml:space="preserve"><g><path class="st0" d="M116.3,255H34.3c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8h82.1c2.1,0,3.8,1.7,3.8,3.8C120.1,253.3,118.4,255,116.3,255z"></path><path class="st1" d="M73,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H73z"></path><path class="st1" d="M110.5,251.1c-0.1-3.6-1.3-6.8-3.6-9.7c-2.4-3-5.4-4.9-9-5.6v-60h-7.2v60c-3.6,0.8-6.6,2.6-9,5.6c-2.3,2.9-3.5,6.1-3.6,9.7H110.5z"></path><rect x="72.7" y="28.1" class="st2" width="5.8" height="46.7"></rect><rect x="26.9" y="58.3" class="st3" width="96.8" height="58.5"></rect><rect x="40.4" y="126.6" class="st2" width="69.8" height="35.3"></rect><path class="st2" d="M68.9,29.1c0.8,1.3,1.9,2.2,3.1,2.9h7.3c1.2-0.7,2.2-1.6,3.1-2.9c0.8-1.3,1.2-2.7,1.2-4.2c0-2.2-0.8-4.1-2.3-5.7c-1.6-1.6-3.4-2.3-5.7-2.3c-2.2,0-4.1,0.8-5.7,2.3c-1.6,1.6-2.3,3.4-2.3,5.7C67.6,26.4,68,27.8,68.9,29.1zM66.8,34.9c-1.4-1.3-2.6-2.9-3.3-4.6c-0.8-1.7-1.2-3.5-1.2-5.4c0-1.9,0.4-3.7,1.2-5.4c0.8-1.7,1.9-3.2,3.3-4.6L63.1,11c-1.9,1.7-3.4,3.7-4.5,6.2c-1.1,2.4-1.7,5-1.7,7.7c0,2.7,0.5,5.2,1.6,7.6c1.1,2.4,2.6,4.5,4.6,6.2L66.8,34.9z M73.7,22.9c0.5-0.5,1.1-0.7,1.9-0.7c0.8,0,1.4,0.3,1.9,0.7c0.5,0.5,0.7,1.1,0.7,1.9c0,0.8-0.2,1.4-0.7,1.9c-0.5,0.5-1.1,0.7-1.9,0.7c-0.8,0-1.4-0.3-1.9-0.7c-0.5-0.5-0.7-1.1-0.7-1.9C72.9,24.1,73.2,23.4,73.7,22.9z M84.4,34.9c1.4-1.3,2.6-2.9,3.3-4.6c0.8-1.7,1.2-3.5,1.2-5.4c0-1.9-0.4-3.7-1.2-5.4c-0.8-1.7-1.9-3.2-3.3-4.6l3.7-3.8c2,1.8,3.5,3.9,4.6,6.2c1.1,2.4,1.6,4.9,1.6,7.6c0,2.7-0.6,5.2-1.7,7.7C91.5,35,90,37,88.1,38.7L84.4,34.9z"></path><path class="st3" d="M110.2,161.1v7.5c0,8.7-6.7,15.8-15,15.8H56c-8.2,0-15-7.1-15-15.8v-7.5"></path><path class="st2" d="M51.4,145.2H39.5c-3,0-5.5,1-7.6,3.1c-2.1,2.1-3.1,4.6-3.1,7.6v14.2h-7.2v-14.2c0-4.9,1.8-9.2,5.3-12.7c3.5-3.5,7.7-5.3,12.7-5.3h11.9V145.2z"></path><path class="st4" d="M103.5,89H47.7c-3.9,0-7.2-3.2-7.2-7.2c0-3.9,3.2-7.2,7.2-7.2h55.7c3.9,0,7.2,3.2,7.2,7.2C110.6,85.8,107.4,89,103.5,89z"></path><g><path class="st2" d="M108,149.4h26.9c3,0,5.5-1,7.6-3.1c2.1-2.1,3.1-4.6,3.1-7.6v-9h7.2v9c0,4.9-1.8,9.2-5.3,12.7c-3.5,3.5-7.7,5.3-12.7,5.3H108V149.4z"></path><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7-6.6-2.6-9-5.6c-2.4-3-3.6-6.4-3.6-10.1c0-4.4,1.5-8.1,4.5-11.2l5.1,5.1c-1.5,1.7-2.3,3.7-2.3,6.1c0,2.5,0.9,4.7,2.6,6.4c1.7,1.7,3.9,2.6,6.4,2.6c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path></g><path class="st1" d="M21.6,182.1V162h7.2v20.1c3.6,0.7,6.6,2.6,9,5.6c2.4,3,3.6,6.4,3.6,10.1c0,4.4-1.5,8.1-4.5,11.2l-5.1-5.1c1.5-1.7,2.3-3.7,2.3-6.1c0-2.5-0.9-4.7-2.6-6.4c-1.7-1.7-3.9-2.6-6.4-2.6c-2.5,0-4.7,0.9-6.4,2.6c-1.7,1.7-2.6,3.9-2.6,6.4c0,2.5,0.8,4.5,2.4,6.2l-5.1,5.1c-3-3.1-4.5-6.9-4.5-11.3c0-3.7,1.2-7.1,3.6-10.1C15,184.7,18,182.8,21.6,182.1z"></path><circle class="st5" cx="47.5" cy="81.9" r="7.1"></circle><circle class="st5" cx="103.8" cy="81.9" r="7.1"></circle><g><path d="M78.1,55.8c3.1-5.3,7.4-9.5,12.7-12.7c5.3-3.1,11.1-4.7,17.4-4.7c6.3,0,12.1,1.6,17.4,4.7c5.3,3.1,9.5,7.4,12.6,12.7c3.1,5.3,4.6,11.1,4.6,17.4c0,7.9-2.6,15.2-7.9,21.8l37.9,37.9c0.7,0.6,1.1,1.4,1.1,2.5c0,1-0.3,1.9-1,2.6c-0.7,0.7-1.5,1-2.6,1c-1,0-1.9-0.4-2.5-1.1L129.9,100c-6.6,5.2-13.8,7.9-21.8,7.9c-6.3,0-12.1-1.5-17.4-4.6c-5.3-3.1-9.5-7.3-12.7-12.6c-3.1-5.3-4.7-11.1-4.7-17.4C73.4,67,74.9,61.2,78.1,55.8z M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></g><path class="st1" d="M152.9,125.2v12.6h-7.2v-12.6c-3.6-0.7,1-6.7,3.6-6.7c2.5,0,4.7-0.9,6.4-2.6c1.7-1.7,2.6-3.9,2.6-6.4c0-2.5-0.8-4.5-2.4-6.2l5.1-5.1c3,3.1,4.5,6.9,4.5,11.3c0,3.7-1.2,7.1-3.6,10.1C159.5,122.6,156.5,124.5,152.9,125.2z"></path><path class="st2" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path><g><defs><path id="SVGID_1_" d="M131.9,59.3c-2.5-4.2-5.8-7.5-10-10c-4.2-2.5-8.8-3.7-13.8-3.7c-5,0-9.6,1.2-13.8,3.7c-4.2,2.5-7.5,5.8-10,10c-2.5,4.2-3.7,8.8-3.7,13.8c0,5,1.2,9.6,3.7,13.8c2.5,4.2,5.8,7.5,10,10c4.2,2.5,8.8,3.7,13.8,3.7c5,0,9.6-1.2,13.8-3.7c4.2-2.5,7.5-5.8,10-10c2.5-4.2,3.7-8.8,3.7-13.7C135.6,68.2,134.3,63.5,131.9,59.3z"></path></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style=""></use></clipPath><g class="st6"><path class="st4" d="M108,88.9H72.3c-8.9,0-16.2-7.3-16.2-16.2c0-8.9,7.3-16.2,16.2-16.2H108c8.9,0,16.2,7.3,16.2,16.2C124.2,81.6,116.9,88.9,108,88.9z"></path><circle class="st5" cx="108.1" cy="73" r="16.1"></circle></g></g></g></svg></a>
        </div>
    </div>
</div>
<div class="clear" />

 Mã CSS (giống demo, chưa responsive) 

<style type='text/css'>/*<![CDATA[*/
.non{padding:3em 0 0;overflow:hidden}
.mes{box-sizing: border-box;float: left;width: 63%;padding: 3em 5em;}
.hero{text-align:center;float:right;width:35%}
.hero-image{max-width:275px;margin:0 auto}
.hero-image .st0{opacity:.2}
.hero-image .st1{fill:#2c3e58}
.hero-image .st2{fill:#b9d6f2}
.hero-image .st3{fill:#639ee1}
.hero-image .st4{opacity:.3;fill:#f6e768}
.hero-image .st5{fill:#f6e768}
.headline{font-weight:600;font-size:47px;margin:0 0 20px}
.suggest>p{font-size:20px;margin:0 0 20px}
._suggest a:hover{text-decoration:underline}
._suggest a{color:#333;font-size:16px;text-decoration:none}
._suggest{line-height:1.8;box-sizing:border-box;padding:0 0 0 1em}
/*]]>*/</style>

 Mã JS 

<script type="text/javascript">//<![CDATA[
// Random post by Hung1001
var _numPost = 8;
$.ajax({
    url: "/feeds/posts/summary",
    type: "get",
    data: {
        alt: "json",
        "max-results": 0
    },
    dataType: "jsonp",
    success: function(e) {
        for (var t = [], r = [], a = 0; a < e.feed.openSearch$totalResults.$t; a++) t.push(a + 1);
        function n(e) {
            var t = e[Math.floor(Math.random() * e.length)];
            return function(e, t) {
                for (var r = 0; r < e.length; r++)
                    if (e[r] == t) return !0;
                return !1
            }(r, t) ? n(e) : (r.push(t), t)
        }
        for (var s = 0; s < _numPost; s++)
            for (var f = 1; f <= 1; f++) $.ajax({
                url: "/feeds/posts/summary",
                type: "get",
                data: {
                    "start-index": n(t),
                    alt: "json",
                    "max-results": 1
                },
                dataType: "jsonp",
                success: function(e) {
                    for (var t = 0; t < e.feed.entry.length; t++) {
                        for (var r = 0; r < e.feed.entry[t].link.length; r++)
                            if ("alternate" === e.feed.entry[t].link[r].rel) {
                                var a = e.feed.entry[t].link[r].href;
                                break
                            } var n = e.feed.entry[t].title.$t;
                        $("._suggest").append("<li><a href='" + a + "' title='" + n + "'>" + n + "<a></li>")
                    }
                }
            })
    }
});
//]]></script>

Bạn có thể thay đổi giá trị biến _numPost để chỉ định số bài đăng hiển thị

Cuối cùng lưu mẫu lại và vào 1 trang 404 để xem thành quả

Chúc thành công !

Nguồn: https://www.hung1001.blog

Tổng hợp các thẻ điều kiện Blogger 2018

LongAnIT 10/30/2018 Bình luận
Tổng hợp các thẻ điều kiện Blogger 2018
Để áp dụng thẻ (tag) điều kiện bạn phải có kiến thức chút về HTML, bạn chú ý là cơ bản nó bắt đầu bằng tag với thuộc tính “ cond “ và kết thúc là một tag đóng. Trong giữa những tag này, các nội dung (html ,style, script, widgets…) sẽ chỉ xuất hiện hoặc thực hiện theo những điều kiện xác định.

Ví dụ như trong đoạn code sau:
<b:if cond='your condition'>
 <style>...css code...</style>
 <script>...javascript code...</script>
</b:if> 
Phần 1. Các thẻ điều kiện
1. Trang chủ (Homepage)
<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if> 
2. Trang bài viết (item)
<b:if cond='data:view.isPost'>
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "item"'>
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if> 
Cho một trang bài viết cụ thể:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2016/03/postn.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/2016/03/postn.html-->
</b:if> 
3. Trang tĩnh (Static page)
<b:if cond='data:view.isPage'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "static_page"'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if> 
Cho một trang tĩnh cụ thể:
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/static.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/p/static.html 'foo' -->
</b:if> 
4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.
<b:if cond='data:view.isMultipleItems'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "index"'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if> 
5. Trang label search
<b:if cond='data:view.isLabelSearch'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:view.isLabelSearch == "blogger"'>
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 
Theo version trước:
<b:if cond='data:blog.searchLabel'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:blog.searchLabel == "blogger"'>
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if> 
6. Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: /search?q=blogger)
<!-- Bao gồm trang tìm kiếm nhãn -->
<b:if cond='data:view.isSearch'> … </b:if>
<!-- Chỉ các trang tìm kiếm -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>
Theo version trước:
<b:if cond='data:blog.searchQuery'>
   <!-- Nội dung hiển thị trên tất cả các trang tìm kiếm --></b:if>
...................................
<b:if cond='data:blog.searchQuery == "blogger"'>
  <!-- Nội dung chỉ hiển thị trên trang tìm kiếm với từ "blogger"-->
</b:if> 
7. Trang lỗi 404
<b:if cond='data:view.isError'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "error_page"'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if> 
8. Trang lưu trữ (archive)
<b:if cond='data:view.isArchive'>
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 
Theo version trước:
<b:if cond='data:blog.pageType == "archive"'>
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if> 
9. Trang hiển thị trên mobile
<b:if cond="data:blog.isMobile">
<!-- Nội dung chỉ hiển thị trên trang mobile-->
</b:if> 
10. Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost
<b:if cond='data:post.isFirstPost'>
 <!-- Nội dung cần trình bày -->
</b:if> 
11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item
<b:if cond='data:view.isSingleItem'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 
Theo version trước:
<b:if cond='data:blog.url == data:post.url'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if> 
12. Hiển thị nội dung nếu bài viết có ảnh thumbnail
<b:if cond='data:post.thumbnailUrl'>
  <!-- Nội dung chỉ hiển thị với bài viết có ảnh thumbnail -->
</b:if> 
13. Hiển thị một nội dung khi có Backlink
<b:if cond='data:post.showBacklinks'>
 <!-- Nội dung chỉ hiển thị khi có backlink -->
</b:if> 
14. Hiển thị nội dung cho Tác giả bài viết
<b:if cond='data:displayname == "author-name"'>
<!-- Nội dung cần trình bày -->
</b:if> 
15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó
<b:if cond='data:post.numComments == number'>
 <!-- Nội dung cần trình bày -->
</b:if> 
16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt
 <b:if cond='data:post.allowComments'>
<!-- Nội dung cần trình bày -->
</b:if> 
17. Hiển thị nội dung ở trang Preview (xem trước)
<b:if cond='data:view.isPreview'> … </b:if>
18. Điều kiện đối với nhãn (Label) cuối cùng
<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'> <!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
       ,
    </b:if> 
</b:loop> 
Phần 2. Cách sử dụng và kết hợp các thẻ điều kiện 

1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện
 == Có nghĩa là chỉ xuất hiện trên trang này …..
!= Có nghĩa là xuất hiện trên tất cả các trang trừ trang này ra……
2. Dùng thêm thẻ <b:/else/>

Nếu muốn đưa vào một nội dung thay thế khi điều kiện đưa vào là sai, bạn cần thêm một thẻ <b:else> và cho nội dung vào giữa.
<b:if cond='data:view.isPost'>
 Nội dung chỉ hiển thị trang bài viết Item
<b:else/>  Nội dung hiển thị các trang còn lại
</b:if>

3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)
<b:if cond='!data:blog.pageType == "item"'>
   <b:if cond='data:view.isHomepage'>
    <style type='text/css'>.post-body {color: yellow;}</style>
   <b:else/>
    <b:if cond='data:view.isLabelSearch'>
    <style type='text/css'>.post-body {color: blue;}</style>
     <b:else/> <style type='text/css'>.post-body {color: red;}</style>
    </b:if>
   </b:if>
</b:if> 
Với đoạn code này thì có ý nghĩa xuất ở trang chủ thì .post-body có chữ màu yellow, nếu là trang nhãn sẽ có màu là blue, còn nếu là các trang khác sẽ có màu red.
4. Sử dụng điều kiện IN
<b:if cond='data:blog.pageType in {"static_page","item"}'>
 Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết
</b:if> 
5. Sử dụng điều kiện NOT IN
<b:if cond='data:blog.pageType not in {"static_page","item"}'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if> 
6. Sử dụng điều kiện AND
<b:if cond='data:view.isPage and data:view.isPost'>
Nội dung hiển thị Trang Tĩnh và Trang Bài Viết
</b:if> 
7. Sử dụng điều kiện OR
<b:if cond='data:view.isPage or data:view.isPost'>
Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết
</b:if> 
8. Sử dụng điều kiện Else if
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:elseif cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
<b:else/>
  <data:post.snippet/>
</b:if> 
Đoạn code trên tương đương với
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
   <b:else/>
     <data:post.snippet/>
   </b:if>
</b:if> 
Phần 3. Lưu ý 
Khi bạn chỉnh sửa code cho template của bạn, đôi khi dấu ngoặc kép (“) sẽ bị thay thế bằng ký tự quot;. Ví dụ như
<b:if cond='data:blog.pageType == "static_page"'> 
sẽ được thay là
<b:if cond='data:blog.pageType == quot;static_pagequot;'> 
Sử dụng điều kiện trong thẻ b:include hoàn toàn tương tự với thẻ b:if, bạn chỉ cần thêm vào thuộc tính cond='ĐIỀU KIỆN' của thẻ b:if vào thẻ b:include là xong.

Hướng dẫn tạo khung comment đẹp cho blogger (có phân cấp)

LongAnIT 10/26/2018 Bình luận
Tạo khung comment đẹp cho blogger (có phân cấp)

Đây là khung comment phân cấp. Nguyên nhân là do "threaded comment" mặc định của Blogger chỉ được tối đa là 1 cấp mà thôi. Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogger. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:
<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới
 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Bước 3: Save template lại và test, chúc các bạn thành công

Hướng dẫn tạo sitemap cho Blogger

LongAnIT 10/24/2018 Bình luận
Sitemap Blogger by longanit.com

Tệp sitemap XML giống như thư mục của tất cả các trang tồn tại trên trang web hoặc blog của bạn. Các công cụ tìm kiếm như Google và Bing cũng như một số trang tìm kiếm khác có thể sử dụng các tệp sơ đồ trang web này để khám phá các trang trên trang web của bạn mà các chương trình tìm kiếm có thể đã bỏ lỡ trong thời gian thu thập dữ liệu thông thường.

Sitemap Blogger

Sitemap XML mặc định của bất kỳ blog Blogger nào sẽ chỉ có 26 bài đăng trên blogspot gần đây nhất. Đó là một giới hạn và một số trang cũ trên blog của bạn bị thiếu trong sitemap XML mặc định có thể không bao giờ được lập chỉ mục trong các công cụ tìm kiếm. Tuy nhiên có một giải pháp đơn giản để khắc phục sự cố này. Dưới đây tôi sẽ hướng dẫn cho các bạn cách để tạo sơ dồ web (sitemap) trên Blogger

Dưới đây là những gì bạn cần làm để tạo sơ đồ cấu trúc trang web sitemap XML hoàn chỉnh, chuẩn SEO với các công cụ tìm kiếm cho trang web blogspot:

Bước 1: Tạo sơ đồ trang web blogspot:

Các bạn truy cập vào địa chỉ tại đây rồi dán địa chỉ trang blogspot vào ô trống, sau đó chọn Generate Sitemap như hình ảnh dưới.

Hướng dẫn tạo sitemap cho Blogger
Bước 2: Sao chép toàn bộ đoạn mã được tạo ra:

Sau khi ấn tạo sơ đồ trang web các bạn sẽ nhận được đoạn mã có dạng như sau:

# Blogger Sitemap generated on 2018.10.23
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500

 Bước 3: Khai báo sitemap blogspot qua file robots.txt:

Các bạn truy cập vào trang quản trị Blogger rồi đến Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh. Tại đây các bạn dán đoạn mã vừa được tạo thành vào ô trống rồi lưu lại như hình ảnh dưới
Tùy chọn tìm kiếm => Robots.txt 

Đến đây, các bạn đã khai báo thành công sơ đồ trang website cho các công cụ tìm kiếm thông qua tệp robots.txt mà không cần ping chúng bằng tay nữa.

Đối với các blog có nhiều hơn 500 bài các bạn tiến hành bổ sung thêm đoạn mã sau đây nữa:
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500            Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500        Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1001&max-results=500      Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=1501&max-results=500      Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=2001&max-results=500    Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=2501&max-results=500      Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=3001&max-results=500

 Bước 4: Khai báo sơ đồ trang web blogspot lên webmaster tool:

Các bạn truy cập vào trang quản trị webmaster tool của Google rồi đến Thu thập dữ liệu => Sơ đồ trang web và chọn Thêm/kiểm tra sơ đồ trang web. Tại đây các bạn dán đoạn mã dưới đây vào chọn gửi rồi yêu cầu lập chỉ mục.

atom.xml?redirect=false&start-index=1&max-results=500             
Các bạn chọn tiếp "Tìm nạp như Google" rồi thêm đoạn mã trên vào và chọn gửi.

Đến đây, Google đã nhận được sơ đồ trang web của bạn và bắt đầu lập chỉ mục cho các trang trên website của bạn.

Nếu bạn có chuyển từ Blogger sang WordPress thì sơ đồ trang web XML của Blogspot cũ đã gửi của bạn vẫn có ý nghĩa  vì nó sẽ giúp các công cụ tìm kiếm khám phá các bài viết và trang WordPress mới của bạn.

Tạo liên kết 3 cột cho blogger

LongAnIT 10/16/2018 Bình luận
Tạo liên kết 3 cột cho blogger 
Việc trao đổi liên kết trong Website cũng như các Blogger với nhau là vô cùng cần thiết nó giúp cho các blogger liên kết với nhau, tạo tương tác và nhất là tạo backlink tốt. Trong bài viết này sẽ hướng dẫn các bạn tạo code liên kết bạn bè cho blogger với 3 cột bạn có thể đặt code  ngay bên dưới footer của mình
<style>
#lien-ket-ban-be::-webkit-scrollbar{width:5px}
#lien-ket-ban-be::-webkit-scrollbar-thumb{background:#484848;border-radius:3px}
#lien-ket-ban-be::-webkit-scrollbar-thumb:active{background:#777}
#lien-ket-ban-be{padding:0;margin:0;list-style:none}
.lien-ket-ban-be{margin:0;padding:0}
.lien-ket-ban-be ul{padding:6px 0.8px 6px 6px}
.lien-ket-ban-be li{width:33.3%;margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center}
.lien-ket-ban-be a{padding-left:25px;transition: all 0.5s ease 0s;width:auto;text-overflow:ellipsis;overflow:hidden;display:block;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;margin:0 5px 5px 0;padding:5px;font-size:15px;font-weight:400;-webkit-transition:.3s;border-radius:3px;-moz-transition:.3s;-o-transition:.3s;color:#000;border:1px solid #e5e5e5}
.lien-ket-ban-be a:hover{color:#f90!important;border:1px solid;text-decoration:none!important}
.lien-ket-ban-be a:before{content:"\f007";font-family:"Font Awesome 5 Free";color:#00c0ef;margin-right:10px;font-size:11px;font-weight:700}
</style>
<div id='lien-ket-ban-be'>
<div class='lien-ket-ban-be'>
<ul>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href=#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a></li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a> </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<li><a href='#' target='_blank'>Đặt liên kết</a>  </li>
<!--<li><a href='#' target='_blank' title='Liên kết blog'>Đặt liên kết</a></li>-->
</ul>
</div></div>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.rawgit.com/hung1001/blog/master/lastest/font-awesome/css/all.css");
loadCSS("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese");
//]]>
</script>

Hướng dẫn cách tạo một trang web trắng trên Blogspot

LongAnIT 10/03/2018 Bình luận
Tạo một trang web trắng trên Blogspot

Mỗi một ngôn ngữ đều có cấu trúc khác nhau. Blogger cũng vậy. Như chúng ta đã biết cấu trúc template của Blogger luôn phải có ít nhất 1 thẻ <b:section> thì mới có thể lưu Template lại được. Vì vậy, nếu muốn tạo 1 trang web trắng tinh để bước đầu Build 1 Template thì bạn có thể thử đoạn code dưới đây nhé!

Đoạn code dưới đây chỉ mang tính chất tham khảo thôi nhé. Vì thực chất nó chưa hề có chút nội dung nào ngoài câu: “Thêm nội dung trang web của bạn vào đây

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Welcome to longanit.com - Sharing for all
</title>
<!-- Bắt đầu viết Css cho web --><b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web --><body>
Thêm nội dung trang web của bạn vào đây<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
Sau khi copy nó vào template của bạn tiến hành save lại và ra ngoài trang chủ blog của bạn chỉ thấy mỗi câu "Thêm nội dung trang web của bạn vào đây"

Kết luận: Trong bài viết này tôi đã hướng dẫn các bạn Build 1 trang web trắng trên blogger. Bài viết tiếp theo tôi sẽ hướng dẫn các bạn cách thêm Widget và CSS cơ bản cho 1 template. Chúc các bạn thành công. Thắc mắc vui lòng comment bên dưới mình sẻ support.

Hướng dẫn tạo sơ đồ web tĩnh cho blogger

LongAnIT 9/24/2018 Bình luận
Tạo sitemap tĩnh cho blogger

Ngoài việc đăng ký sơ đồ web trên google master tools cho blog của bạn thì việc tạo sitemap cho blogger cũng là cách mang lại 1 cái nhìn tổng thế cho blog của bạn và cần thiết.

Với sitemap được hướng dẫn ở bài này lại có giao diện sắp xếp rất khoa học. Nói chung là đơn giản và đẹp.

Thực hiện các bước sau đây để tạo sitemap cho blog của bạn.

Bước1: Truy cập vào trang quản trị: https://www.blogger.com
Bước 2: Vào Trang (Page), tiếp tục tạo trang mới đặt tên là sitemap (New page). Tên bạn có thể đặt là tên khác tùy vào bạn tuy nhiên mình khuyên các bạn nên để tên sitemap cho nó đẹp link
Bước 3: Chuyển chế độ soạn thảo sang HTML và copy đoạn code bên dưới dán vào
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:normal;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:normal;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 3=F H();2 u=F H();2 w=F H();2 q=F H();2 6=F H();2 y=F H();2 7="L";2 17=1s;2 27=2P;2 E="";2 1a=0;r 1Q(a){r b(){4("A"1H a.1i){2 d=a.1i.A.v;1a=d;D=0;B(2 h=0;h<d;h++){2 n=a.1i.A[h];2 e=n.O.$t;2 m=n.23.$t.1x(0,10);2 j;B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="2c"){j=n.M[g].s;U}}2 o="";B(2 g=0;g<n.M.v;g++){4(n.M[g].18=="1Z"){o=n.M[g].s;U}}2 c="";4("16"1H n){B(2 g=0;g<n.16.v;g++){c=n.16[g].28;2 f=c.1v(";");4(f!=-1){c=c.1x(0,f)}6[D]=c;3[D]=e;q[D]=m;u[D]=j;w[D]=o;4(h<10){y[D]=13}I{y[D]=1s}D=D+1}}}}}b();7="L";P(7);19();17=13;1r();9.x()}r 1O(a){1F(0,0);E=a;K(E)}r 1n(){19();E="";K(E)}r P(d){r c(e,g){2 f=3[e];3[e]=3[g];3[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=u[e];u[e]=u[g];u[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=y[e];y[e]=y[g];y[g]=f}B(2 b=0;b<3.v-1;b++){B(2 a=b+1;a<3.v;a++){4(d=="L"){4(3[b]>3[a]){c(b,a)}}4(d=="15"){4(3[b]<3[a]){c(b,a)}}4(d=="1g"){4(q[b]>q[a]){c(b,a)}}4(d=="R"){4(q[b]<q[a]){c(b,a)}}4(d=="1w"){4(6[b]>6[a]){c(b,a)}}}}}r 19(){7="1w";P(7);2 a=0;2 b=0;S(b<3.v){J=6[b];T=a;1p{a=a+1}S(6[a]==J);b=a;1j(T,a);4(b>3.v){U}}}r 1j(d,c){r e(f,h){2 g=3[f];3[f]=3[h];3[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=u[f];u[f]=u[h];u[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=y[f];y[f]=y[h];y[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){4(3[b]>3[a]){e(b,a)}}}}r K(a){2 l=0;2 h="";2 e="25 Z";2 m="11 12 2p 2s 2A";2 d="2L";2 k="11 12 1I 1J 1K";2 c="1L";2 j="";4(7=="L"){m+=" (1N)";k+=" (14 V)"}4(7=="15"){m+=" (1l)";k+=" (14 V)"}4(7=="1g"){m+=" (1l)";k+=" (14 V)"}4(7=="R"){m+=" (1l)";k+=" (1S V)"}4(E!=""){j="11 12 1Y 31"}h+="<1t>";h+="<N>";h+=\'<5 8="i-W-1b">\';h+=\'<a s="1c:1o();" O="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 8="i-W-1d">\';h+=\'<a s="1c:1q();" O="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 8="i-W-1e">\';h+=\'<a s="1c:1n();" O="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 8="i-W-1f">\';h+="X 1M";h+="</5>";h+="</N>";B(2 g=0;g<3.v;g++){4(a==""){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}I{z=6[g].1v(a);4(z!=-1){h+=\'<N><5 8="i-A-1b"><a s="\'+u[g]+\'">\'+3[g]+\'</a></5><5 8="i-A-1d">\'+q[g]+\'</5><5 8="i-A-1e">\'+6[g]+\'</5><5 8="i-A-1f"><a s="\'+w[g]+\'">X</a></5></N>\';l++}}}h+="</1t>";4(l==3.v){2 f=\'<C 8="i-1u">1h 1R \'+3.v+" Z<G/></C>"}I{2 f=\'<C 8="i-1u">1h \'+l+" 1T 1U 1V \'";f+=E+"\' 1W "+3.v+" 1X Z<G/></C>"}2 b=9.Y("i");b.1k=f+h}r 1r(){2 a=0;2 b=0;S(b<3.v){J=6[b];9.x("<p/>");9.x(\'<C 8="20"><a s="/21/22/\'+J+\'">\'+J+"</a></C><1y 8=\'24\'>");T=a;1p{9.x("<1z>");9.x(\'<a s="\'+u[a]+\'">\'+3[a]+"</a>");4(y[a]==13){9.x(\' - <C 8="F">26!</C>\')}9.x("</1z>");a=a+1}S(6[a]==J);b=a;9.x("</1y>");1j(T,a);4(b>3.v){U}}}r 1o(){4(7=="L"){7="15"}I{7="L"}P(7);K(E)}r 1q(){4(7=="R"){7="1g"}I{7="R"}P(7);K(E)}r 1A(){4(17){K(E);2 a=9.Y("1B")}I{29("2a 2b... 1C 2d 2e")}}r 2f(){2 a=9.Y("i");a.1k="";2 b=9.Y("1B");b.1k=\'<a s="#" 2g="1F(0,0); 1A(); 2h.2i(\\\'i-2j\\\',\\\'2k\\\');">?? 1h 2l 2m</a> <2n 2o="1D://2q.2r.1E/2t.2u"/>\'}r 2v(){B(2 a=0;a<1a;a++){9.x("<G>");9.x(\'2w 2x : <a s="\'+u[a]+\'">\'+3[a]+"</a><G>");9.x(\'X 2y : <a s="\'+w[a]+\'">\'+3[a]+"</a><G>");9.x("<G>")}};9.x("<C 2z=\'Q-2B:2C;2D:2E;Q-2F:2G;2H:2I 2J 0 0;\'><a O=\'2K 1C 1G 2M 2N - 2O 1G 1m.2Q.2R\' s=\'1D://1m.2S-2T.1E\' 2U=\'2V\' 18=\'2W\'><Q 2X=\'#2Y\'>2Z 30 1P!</Q></a></C>");',62,188,'||var|postTitle|if|td|postLabels|sortBy|class|document|||||||||toc||||||||postDate|function|href||postUrl|length|postMp3|write|postBaru||entry|for|span|ii|postFilter|new|br|Array|else|temp1|displayToc|titleasc|link|tr|title|sortPosts|font|datenewest|while|firsti|break|first|header|Download|getElementById|Artikel||Klik|untuk|true|newest|titledesc|category|tocLoaded|rel|sortlabel|numberfeed|col1|javascript|col2|col3|col4|dateoldest|Menampilkan|feed|sortPosts2|innerHTML|ascending|www|allPosts|toggleTitleSort|do|toggleDateSort|displayToc2|false|table|note|lastIndexOf|orderlabel|substring|ol|li|showToc|toclink|TOC|http|com|scroll|by|in|Sortir|bedasarkan|tanggal|Kategori|MP3|descending|filterPosts|widget|loadtoc|Semua|oldest|artikel|dengan|kategori|dari|Total|menampilkan|enclosure|labl|search|label|published|postname|Judul|New|numChars|term|alert|Just|wait|alternate|is|loading|hideToc|onclick|Effect|toggle|result|blind|Daftar|Isi|img|src|sortir|radiorodja|googlepages|berdasarkan|new_1|gif|looptemp2|Post|Link|mp3|style|judul|size|0px|float|right|family|arial|margin|20px|5px|Blogger|Tanggal|Abu|Farhan|Style|250|intert3chmedia|net|abu|farhan|target|_blank|nofollow|color|ff5f00|Grab|this|semua'.split('|'),0,{}))</script>
<script src="https://www.longanit.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

Button chia sẻ mạng xã hội cho Blogger trượt ngang

LongAnIT 9/23/2018 1 Bình luận
Thêm button chia sẻ mạng xã hội cho Blogger

Công dụng của các button chia sẻ mạng xã hội này thì khỏi phải nói rồi nhé nó giúp người dùng có thể chia sẻ bài viết của blog lên các mạng xã hội nhanh chóng và tiện lợi hơn, đồng nghĩa với việc chúng ta sẽ có thêm nhiều lượt truy cập….

Mẫu button này mình sưu tầm từ internet và sửa lại chút xíu cho nó phù hợp với blogger điển hình là  link liên kết sẽ khác.

Cách thực hiện bao gồm 3 bước, bạn làm theo từng bước như tôi hướng dẫn nhé
Bước 1: Bạn cần sử dụng Font Awesome, chèn đoạn mã sau vào trước </head> trong template
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
Bước 2 : Thêm CSS cho nó
 .socials-share {
    text-align: center;
    margin-bottom: 30px;
}
.socials-share a {
    padding: 4px 30px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}
.socials-share span.fa {
    margin-right: 3px;
}
.bg-facebook {
    background: #3a5899;
}
.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}
.bg-twitter {
    background: #00acee;
}
.bg-twitter:hover, .bg-twitter:focus {
    background: #0b93c7;
}
.bg-google-plus {
    background: #db4437;
}
.bg-google-plus:hover, .bg-google-plus:focus {
    background: #bb2a1d;
}
.bg-pinterest {
    background: #cb1e26;
}
.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}
.bg-email {
    background: #dd5348;
}
.bg-email:hover, .bg-email:focus {
    background: #ce3f34;
}
Và cuối cùng là vị trí đặt button cũng giống như bài trước nó thường nằm phía trên bài viết liên quan. Nếu bạn muốn hiển thị phía dưới tiêu đề bài viết thì thêm đoạn code bên dưới vào sau thẻ <div class='post-header'>
Nếu bạn muốn hiển thị phía cuối bài viết thì thêm đoạn code trên vào sau thẻ <div class='post-footer'>

 <div class="socials-share">
    <a class="bg-facebook" expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><span class="fa fa-facebook"></span> Share</a>
    <a class="bg-twitter" expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><span class="fa fa-twitter"></span> Tweet</a>
    <a class="bg-google-plus" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><span class="fa fa-google-plus"></span> Plus</a>
    <a class="bg-pinterest" expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><span class="fa fa-pinterest"></span> Pin</a>
    <a class="bg-email" href="" target="_blank"><span class="fa fa-envelope"></span> Gmail</a>
</div>

Button chia sẻ mạng xã hội cho blogger

LongAnIT 9/22/2018 Bình luận
Tạo button chia sẻ mạng xã hội cho blogger

Có thể nói button chia sẻ mạng xã hội trong bất kỳ website nào cũng đều vô cùng có ích nó rất tốt để seo web của bạn. Ngoài việc giúp chia sẻ bài đăng lên đó tạo tương tác tốt đồng thời tăng lượt truy cập vào website của bạn.

Trong bài viết này tôi sẽ hướng dẫn cho các bạn thêm button chia sẻ mạng xã hội nằm phía sau mỗi bài viết trên blooger . Vui lòng làm theo các bước như hướng dẫn bên dưới nhé

Bước 1:  Blogger - Chủ đề - Chỉnh sửa HTML. Copy và dán đoạn code bên dưới vào CSS

 /* CSS Share Button by longanit.com*/
.icon-button{background-color:#fff;border-radius:40px;cursor:pointer;display:inline-block;font-size:26px;height:40px;line-height:40px;margin:0 5px;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:40px}
.icon-button span{border-radius:0;display:block;height:0;left:50%;margin:0;position:absolute;top:50%;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;width:0}
.icon-button:hover span{width:40px;height:40px;border-radius:40px;margin:-20px}
.icon-button:hover i{transform:rotate(360deg)}
.twitter span{background-color:#4099ff}
.facebook span{background-color:#3B5998}
.google-plus span{background-color:#db5a3c}
.linkedin span{background-color:#0976b4}
.pinterest span{background-color:#cc2127}
.icon-button i{background:none;color:white;height:40px;left:0;line-height:40px;position:absolute;top:0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;width:40px;z-index:10}
.icon-button .fa-twitter{color:#4099ff;border:1px solid #4099ff;border-radius:40px}
.icon-button .fa-facebook{color:#3B5998;border:1px solid #3B5998;border-radius:40px}
.icon-button .fa-google-plus{color:#db5a3c;border:1px solid #db5a3c;border-radius:40px}
.icon-button .fa-linkedin{color:#0976b4;border:1px solid #0976b4;border-radius:40px}
.icon-button .fa-pinterest-p{color:#cc2127;border:1px solid #cc2127;border-radius:40px}
.icon-button:hover i{color:white;border:none}
Bước 2: Tại Template của bạn nhấn Ctrl + F trong khung tìm kiếm bạn tìm code sau:
<div class=’post-footer’>
Bước 3: Paste đoạn code dưới đây vào phía dưới đoạn code đã tìm kiếm ở trên
 <!-- Bat dau chia se mang xa hoi by longanit.com -->
 <a class='icon-button twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/><span/></a>
<a class='icon-button facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/><span/></a>
<a class='icon-button google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/><span/></a>
<a class='icon-button linkedin ' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/><span/></a>
<a class='icon-button pinterest ' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest-p'/><span/></a>
<!-- Ket thuc chia se mang xa hoi -->
 Có thể trong quá trình tìm kiếm sẽ có từ  2 – 4 vị trí, chứa code <div class=’post-footer’> tùy vào mỗi template. Tuy nhiên bạn nên chọn vị trí cuối cùng.

Hệ thống lưới trong Bootstrap 3

LongAnIT 9/20/2018 Bình luận
Hệ thống lưới trong Bootstrap 3
Hệ thống lưới trong Bootstrap 3

Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

Hệ thống lưới của Bootstrap 3 chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.

Cơ bản hệ thống lưới trong Bootstrap 3

Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

span 3 – span 9: OK
span 4 – span 8: OK
span 5 – span 7: OK
span 3 – span 4 – span 5: OK
span 4 – span 6 – span 2: OK
span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12

Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

  1. xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768px
  2. sm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lên
  3. md (dùng cho desktop): có chiều rộng màn hình từ 992px trở lên
  4. lg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình từ 1200px trở lên


Tùy theo thiết kế, bạn có thể chọn các loại lớp lưới phù hợp với màn hình thiết bị hiển thị. Do xu hướng sử dụng điện thoại di động và tablet phổ biến, cho nên bạn nên dùng 2 lớp sm hoặc md.

Cấu trúc cơ bản của lưới Bootstrap
Chúng ta xét đến 1 đoạn mã sau để thấy rõ cấu trúc lưới của Bootstrap.
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Tạo 3 vùng bằng nhau

Cơ bản hệ thống lưới trong Bootstrap 3

Để tạo 1 dòng chứa 3 vùng bằng nhau có giao diện khớp với tablet trở lên, chúng ta sử dụng đoạn mã sau:

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Trong đoạn mã trên, chúng ta thấy có 3 lớp col-sm-4 tức là 3 lớp này sử dụng cho màn hình Tablet, Desktop và Desktop có kích thước lớn. Mỗi lớp có 4 cột như vậy, với 3 lớp, chúng ta có 12 cột, đúng theo yêu cầu của hệ thống lưới Bootstrap.

Tạo 2 vùng không bằng nhau

Cơ bản hệ thống lưới trong Bootstrap 3

Tiếp đến chúng ta sẽ tạo giao diện với 2 vùng không bằng nhau với vùng trái có kích thước 4 cột, và vùng phải có kích thước 8.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Kết luận: Bài viết này chúng tôi giúp các bạn nắm kiến thức cơ bản về hệ thống lưới của Bootstrap3 cũng như cách phân vùng cho các giao diện Bootstrap3 đơn giản.

Plugin lazy load tối ưu load ảnh nhanh cho blogger

LongAnIT 9/20/2018 Bình luận
Plugin lazy load cho Blogger

Hình ảnh trong Web/Blog là yếu tố gây ảnh hưởng rất nhiều tới tốc độ tải trang, nếu đã dùng nền tảng blogger, bạn nên upload ảnh khi viết bài, bạn không nên sử dụng ảnh từ nguồn khác để lấy link

Khi bạn upload ảnh qua blogger, ảnh có thể chỉnh sửa được kích thước cũng như không bị lỗi thumbnail lại load nhanh do sử dụng server của google đây là điều cực kỳ quan trọng.

Để tối ưu load ảnh cho blogger, tăng tốc độ tải trang bạn có thể sử dụng plugin lazy load image bằng cách chèn code sau trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container:window})"})})(jQuery);$(function(){$(".post img").lazyload({placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",effect:"fadeIn",threshold:"0"})})
//]]></script>

Cách hoạt động của Plugin này là hình ành sẽ không phải load hết từ đầu mà sẽ load khi bạn scroll chuột tới nó.

Cuối cùng đó là yếu tố chất lượng ảnh. Trước khi upload ảnh, bạn nên nén lại để ảnh tối ưu hơn. Bạn có thể dùng trang https://tinypng.com để nén ảnh trước khi upload. Định dạng đề nghị upload là .png, nên hạn chế tối đa định dạng .gif vì nhiều ảnh gif sẽ gây lag khi đọc bài viết:

Thu gọn chuyên mục nhãn Blogger

LongAnIT 9/18/2018 Bình luận

Việc Customize nhãn Blogger có nhiều cách thường thì làm đẹp bằng CSS sắp sếp kiểu hiển thị... Tuy nhiên nếu như Blog của bạn có ít nhãn thì không vấn đề gì nhưng nếu nhiều nhãn và chuyên mục thì lại có vấn đề ở đây nó làm chậm tốc độ load trang cho Blog của bạn.

Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn tùy biến Widget nhãn cho Blogger bằng cách thu gọn lại kiểu Select Option. Bạn làm theo các bước như tôi hướng dẫn bên dưới nhé.

Bước 1: Blogger - Bố cục - Thêm tiện ích trong danh sách bạn chọn chuyên mục "Nhãn" như hình bên dưới để thêm widget Label vào blog của bạn.


Bước 2: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML. Chuyển đến tiện ích nhãn mà lúc ban đầu bạn đã tạo như hình bên dưới.


Bước 3: Click vào dấu ... mục " Label" để mở rộng code ra bạn để ý dòng code này code trích dẫn ngay bên dưới.


<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
  <b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
  <b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</span>
</b:loop>
</b:if>
Bước 4: Copy đoạn code bên dưới và thay thế toàn bộ đoạn code bên trên.

 <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By categories</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>
 Thay đổi dòng chữ màu đỏ thành nội dung bạn cần thay đổi. Chúc các bạn thành công!

Hướng dẫn tích hợp Live chat Facebook vào Blogger

LongAnIT 9/15/2018 Bình luận
Tích hợp live chat facebook vào Blogger

Tính năng hỗ trợ gửi tin nhắn qua Facebook hiện nay không còn xa lạ trên các phương tiện thông tin. Các website hiện nay tận dụng rất tốt tính năng này và áp dụng rất thành công trong việc bán hàng online.

Trong bài viết này tôi sẽ hướng dẫn các bạn cách tích hợp công cụ này vào trong blogger các bước thực hiện như sau.

Bước 1: Bạn truy cập Blogger.com và chọn Blog cần thay đổi.

Bước 2: Chọn Bố cục

Bước 3: Chọn Thêm tiện ích

Có thể chọn nút thêm tiện ích ở bất kỳ vị trí nào

Bước 4: Hộp thoại bật lên, Chọn tiếp  HTML/JavaScript 

Chọn thêm HTML/JavaScript 


Bước 5: Copy  đoạn code bên dưới dán vào sau đó nhấn Lưu và thoát ra ngoài xem kết quả.
<style>.fb-livechat, .fb-widget{display: none}.ctrlq.fb-button, .ctrlq.fb-close{position: fixed; right: 24px; cursor: pointer}.ctrlq.fb-button{z-index: 999; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff; width: 60px; height: 60px; text-align: center; bottom: 50px; border: 0; outline: 0; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); -webkit-transition: box-shadow .2s ease; background-size: 80%; transition: all .2s ease-in-out}.ctrlq.fb-button:focus, .ctrlq.fb-button:hover{transform: scale(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)}.fb-widget{background: #fff; z-index: 1000; position: fixed; width: 360px; height: 435px; overflow: hidden; opacity: 0; bottom: 0; right: 24px; border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)}.fb-credit{text-align: center; margin-top: 8px}.fb-credit a{transition: none; color: #bec2c9; font-family: Helvetica, Arial, sans-serif; font-size: 12px; text-decoration: none; border: 0; font-weight: 400}.ctrlq.fb-overlay{z-index: 0; position: fixed; height: 100vh; width: 100vw; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; top: 0; left: 0; background: rgba(0, 0, 0, .05); display: none}.ctrlq.fb-close{z-index: 4; padding: 0 6px; background: #365899; font-weight: 700; font-size: 11px; color: #fff; margin: 8px; border-radius: 3px}.ctrlq.fb-close::after{content: "X"; font-family: sans-serif}.bubble{width: 20px; height: 20px; background: #c00; color: #fff; position: absolute; z-index: 999999999; text-align: center; vertical-align: middle; top: -2px; left: -5px; border-radius: 50%;}.bubble-msg{width: 120px; left: -140px; top: 5px; position: relative; background: rgba(59, 89, 152, .8); color: #fff; padding: 5px 8px; border-radius: 8px; text-align: center; font-size: 13px;}</style><div class="fb-livechat"> <div class="ctrlq fb-overlay"></div><div class="fb-widget"> <div class="ctrlq fb-close"></div><div class="fb-page" data-href="https://www.facebook.com/longanit" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false"> </div><div class="fb-credit"> <a href="https://www.longanit.com" target="_blank">Powered by Longanit</a> </div><div id="fb-root"></div></div><a href="https://m.me/longanit" title="Gửi tin nhắn cho chúng tôi qua Facebook" class="ctrlq fb-button"> <div class="bubble">1</div><div class="bubble-msg">Bạn cần hỗ trợ?</div></a></div><script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){function detectmob(){if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){return true;}else{return false;}}var t={delay: 125, overlay: $(".fb-overlay"), widget: $(".fb-widget"), button: $(".fb-button")}; setTimeout(function(){$("div.fb-livechat").fadeIn()}, 8 * t.delay); if(!detectmob()){$(".ctrlq").on("click", function(e){e.preventDefault(), t.overlay.is(":visible") ? (t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2 * t.delay, function(){$(this).hide("slow"), t.button.show()})) : t.button.fadeOut("medium", function(){t.widget.stop().show().animate({bottom: "30px", opacity: 1}, 2 * t.delay), t.overlay.fadeIn(t.delay)})})}});</script>
Thay: https://www.longanit.com thành địa chỉ Blog của bạn
Thay: https://www.facebook.com/longanit thành địa chỉ Fanpage của bạn

Chúc bạn thành công!

Tìm hiểu về Thuộc tính thẻ trong blogger

LongAnIT 9/15/2018 Bình luận
Thuộc tính thẻ Section trong Blogger

Mỗi phần trong bố cục của blogger widget đều có 1 thẻ  đóng và 1 thẻ  mở đó là thẻ <section> như code tôi trích dẫn bên dưới:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
Trong bài viết này tôi sẽ hướng dẫn cho các bạn tìm hiểu về cấu trúc của loại thẻ này

Thuộc tính thẻ <b:section>

  • id – (Bắt buộc) Tên duy nhất, chỉ gồm chữ và số.
  • class – (Tùy chọn) Các tên lớp thông thường là “navbar”, “header”, “main”, “sidebar” và “footer.” Nếu bạn thay đổi thành tên khác, thì sau này khi viết CSS bạn sẻ phải truy vấn đến nó 
  • maxwidgets –- (Tùy chọn) Số tiện ích tối đa được cho phép trong phần này. Nếu bạn không chỉ định giới hạn, sẽ không có giới hạn. ( bạn có thể set nó = 2,3,4...)
  • showaddelement – (Tùy chọn) Có thể là “yes” hoặc “no” với giá trị mặc định là “yes có nghĩa là bạn có thể thêm tiện ích trong bố cục này chọn "no" thì bạn không thể thêm tiện ích.
  • growth – (Tùy chọn) Có thể là 'horizontal' hoặc 'vertical' với giá trị mặc định là 'vertical'. Điều này xác định xem tiện ích trong phần này được sắp xếp cạnh nhau hay xếp chồng. ( Phần này chủ yếu là cách hiển thị sắp xếp bố cục trong layout của bạn thôi.
Kết luận: Như vậy là tôi đã hướng dẫn cho các bạn cơ bản về nội dung của thẻ section trong blogger. Vui lòng comment bên dưới nếu cần support.