Truyện Hoang Dung

TẠO SƠ ĐỒ LƯỚI CHO BÀI VIẾT TRÊN BLOGGER VỚI CSS VÀ JAVASCRIPT

(Add Grid Layouts to Blogger Posts with CSS and Javascript)

Sơ đồ lưới cung cấp trải nghiệm xem tuyệt vời cho cả chủ trang web và blogger hoặc khách truy cập. Điều này đặc biệt đúng nếu sơ đồ lưới đi kèm với hình ảnh có trên tương thích với thị giác người xem.

1.Tính năng, đặc điểm của sơ đồ lưới

-Tất cả bài viết sẽ theo kiểu lưới khi chuyển sang chế độ xem lưới.

- Mặc dù các mã đang được tùy chỉnh, các bài viết vẫn không bị ảnh hưởng. Tuy nhiên chiều dài của chúng có thể thay đổi theo.

- Tự động “Đọc thêm” (read more) sẽ được áp dụng cho tất cả các bài đăng.

- Hình thu nhỏ được tự động thêm vào dựa trên ảnh đầu tiên được tìm thấy trong mỗi bài đăng.

Mã số an toàn và được sử dụng trên bảng. Trên thực tế, 99% blogger đang sử dụng một mã tương tự để cho phép các bài viết kiểu lưới trong blogger.

2. Lợi ích của phong cách lưới là gì?

- Các bài đăng có thời gian tải nhanh hơn .

Vì chỉ có các đoạn được tải trong các trang nhất định, hoặc một hình thu nhỏ và một phụ đề, việc thu hồi một kho lưu trữ blog sẽ nhanh hơn. Khi thời gian nạp được giảm, trải nghiệm của người dùng được nâng cao đáng kể.

- Blog sẽ chuyên nghiệp hơn.

Khả năng đọc sẽ không bị rối loạn và tập trung hơn, trang web trông sẽ gọn gàng, sạch sẽ và chuyên nghiệp. Kết hợp với màu sắc và hình ảnh phù hợp, nó cũng có thể để lại một ảnh hưởng trực quan.

- Xếp hạng trang web được cải thiện.

Bởi vì khách truy cập phải nhấp chuột để xem phần còn lại của bài đăng, số lần xem trang của một trang web sẽ tăng đáng kể. Điều này làm cho một chiến lược SEO tốt hơn.

3.Quan trọng:

Trước khi làm bất cứ điều gì đảm bảo rằng bạn sao lưu mẫu Blogger của bạn! Nếu gặp sự cố với các chỉnh sửa của bạn, bạn có thể hoàn nguyên mẫu trở lại trạng thái trước đó bằng cách khôi phục nó từ bản sao lưu của bạn.

Để thực hiện việc này, hãy vào 'Chủ đề' (Template) trong trình đơn bên trái> nhấp vào nút 'Sao lưu / Khôi phục' ở góc trên bên phải và nhấn vào nút 'Tải xuống chủ đề” - chọn nơi bạn muốn lưu tệp trên máy tính của mình và nhấp vào Nút 'Lưu'.

Bây giờ, chúng ta có thể tiếp tục chỉnh sửa mẫu Blogger của chúng tôi một cách an toàn. Nếu bạn gặp sự cố, chỉ cần hoàn nguyên về mẫu lưu của bạn.

4. Làm thế nào để Tạo Masonry, Grid Phong cách cho bài viết trong Blogger

Bước 1. Đăng nhập vào bảng điều khiển Blogger của bạn và nhấp vào blog nơi bạn muốn áp dụng kiểu lưới.

Bước 2. Vào "Chủ đề " (Template) ở bên trái màn hình và nhấn nút “ Chỉnh sửa HTML” (Edit HTML).

Bước 3. Nhấp vào bất kỳ nơi nào trong vùng mã và nhấn phím CTRL + F để mở hộp tìm kiếm, sau đó đánh vào thẻ bên dưới hộp (nhấn Enter để tìm nó):

</ Head>

Bước 4. Bây giờ sao chép tập lệnh dưới đây và dán nó ngay trước khi </ head>

tag:

Bước 5. Tìm đoạn mã sau bằng CTRL + F hoặc Command + F:

<data:post.body/>

Bước 6. Sau khi nhấn phím "Enter" trên bàn phím của bạn, bạn có thể thấy ba lần xuất hiện của mã trên, chỉ thay thế lần thứ hai và thứ ba bằng mã dưới đây

<b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>
        <div expr:id='"summary" + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
</b:if>

Bước 7. Bây giờ hãy chọn một trong các kiểu bên dưới, sao chép mã được cung cấp và dán nó ngay phía trên

</head>

Thiết kế lưới đơn giản (Simple Grid Design)

Lưới bố cục với Tóm tắt và hình thu nhỏ của bài đăng

(Grid Layout with Post Summary and Thumbnail)

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61k3LJof_LQcANgeoafLtzyVRuiPFL9canFVm7k0ZXkAEwzZ7GPxJp77LAOlcbPVkFws8qzHPHZN_ulYQaqcdGAbbPIYwkWV0KmZmR_ZpezKMp7kTDZRwCFc2wsiqsDO5mS7j5u-VFNIo/s1600/blueprint.png);font:100% 'Open Sans Condensed',sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% 'Pacifico',cursive;}a.comment-bubble:before{content:"Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcqHftHjotlj6mCY80fnPhrFaWVG-fmApAL2tmUxHtMfhBBGRnXRi1ONNtEMRT3NmMSPzmiqJYcp9G6GKGCrKPzLdHGzmI4esPY45ONuP_9qg8DTTniM01VCa5D9o12ZPrGyLQByDTDI4/s1600/heart-active.png);}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Lưới bố cục với Văn bản Snippet trên Hover

Grid Layout with Text Snippet on Hover

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% 'Open Sans Condensed',sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% 'Pacifico',cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:"Comments: "}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Bước 8. Nhấp vào "Xem trước" và nếu mọi thứ đều ổn, bấm nút "Lưu mẫu".