4 thủ thuật chỉnh sửa template coming soon kết hợp landing page làm trang Seo giới thiệu công ty, cá nhân cực kỳ bá đạo.

Thủ thuật 1 : Chia bài viết trang chủ và trang nhãn thành 2 cột cho blogspot

MỤC LỤC: Nội dung bài viết

Tìm đoạn code sau trong chỉnh sửa mẫu cho blogger :

.post {
margin:0px 3px 5px 0px ;
padding:5px;
}
.post h3 {
font-size:160%;
font-weight:bold;
margin:3px;
padding:0px;
}
.post h3 a {
color:#0000ff;
}
.post h3 a:hover {
color:#666;
}

Thay bằng đoạn code sau :

.post {
background:none;
margin-right:0px;
padding:5px;
width:100%;}
.post h3 {
font-size:14px; /* cỡ chữ của tiêu đề bài viết*/
font-weight:bold;
margin:3px;
padding:0px;
}
.post h3 a {
color:#0000ff; /* màu chữ của tiêu đề bài viết*/
}
.post h3 a:hover {
color:#666; /* màu chữ của tiêu đề bài viết khi rê chuột*/
}

Kế tiếp thêm đoạn code sau trước thẻ </head> :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
</style>
</b:if>

Lưu mẫu và xem kết quả.

Xem trang demo : https://dogouma.blogspot.com/search/label/Wooden cutting board

Xem thêm :
http://blog-toantap.blogspot.com/2015/08/hien-thi-bai-viet-dang-luoi-grid-view.html
https://tuduysale.com/hien-thi-bai-viet-dang-luoi-trong-genesis-su-dung-css-grid/#ftoc-heading-2

Thủ thuật 2 : Tùy biến label cho bloger

Đầu tiên bạn vào cấu hình nhãn cần hiển thị chuyển dạng danh sách (list) sang dạng đám mây (cloud)

Chèn đoạn code sau vào cuối đoạn code ]]></b:skin> trong chỉnh sửa mẫu template :

<style>

.label-size {
    float:left;
    margin:0 0 7px 20px;
    position:relative;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:0.75em;
    font-weight:bold;
    text-decoration:none;
    color:#996633;
    text-shadow:0px 1px 0px rgba(255,255,255,.4);
    padding:0.417em 0.417em 0.417em 0.917em;
    border-top:1px solid #d99d38;
    border-right:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0.25em 0.25em 0;
    -moz-border-radius:0 0.25em 0.25em 0;
    border-radius:0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow:
        inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
 
    z-index:100;
}

.label-size:before {
    content:'';
    width:1.30em;
    height:1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position:absolute;
    left:-0.69em;
    top:.2em;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    border-left:1px solid #d99d38;
    border-bottom:1px solid #d99d38;
    -webkit-border-radius:0 0 0 0.25em;
    -moz-border-radius:0 0 0 0.25em;
    border-radius:0 0 0 0.25em;
    z-index:1;
}

.label-size:after {
    content:'';
    width:0.5em;
    height:0.5em;
    background:#fff;
    -webkit-border-radius:4.167em;
    -moz-border-radius:4.167em;
    border-radius:4.167em;
    border:1px solid #d99d38;
    -webkit-box-shadow:0 1px 0 #faeaba;
    -moz-box-shadow:0 1px 0 #faeaba;
    box-shadow:0 1px 0 #faeaba;
    position:absolute;
    top:0.667em;
    left:-0.083em;
    z-index:9999;
}
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color:#e1b160;
}
#Label1 {height:210px !important;}

</style>

Lưu mẫu và xem kết quả.

Thủ thuật 3 : Thay đổi kích thước thumbnail cho blogger

Cách 1 :

Gõ Ctrl+F tìm dòng lệnh expr:src=’data:post.thumbnail’
Thêm class=”resizethumbnail” vào 'image tag' như hình dưới.

Chèn thêm đoạn script vào cuối html :

<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>

Cách 2 :

Code tự động crop và resize thumbnail dành cho Blogger
Chèn đoạn script sau vào trên thẻ </head>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var w = 200;
var h = 200;
$('id 1, class 1, id 2, class 2,...').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
    image.attr('width',w);
    image.attr('height',h);
});
});
//]]></script>

Bạn có thể thay đổi kích thước resize ở w và h, còn dòng id 1, class 1 là bạn thay thuộc tính id hay class mà bạn muốn resize, ví dụ: .PopularPost hay #related-posts

Trong trường hợp bạn resize và crop ảnh bài post có class là .post , trong trường hợp này đoạn script sẽ ảnh hưởng đến ảnh trong bài viết nó sẽ đồng loạt resize và crop ảnh trong bài viết Do đó trong trường hợp này bạn cần đặt đoạn script trên vào thẻ điều kiện sau:

<b:if cond='data:blog.pageType != "item"'>Copy đoạn script vào đây</b:if>

Xem thêm :
http://tintucmystown.blogspot.com/2016/10/thay-oi-kich-thuoc-anh-thumbnail-trong.html
https://kslzone.blogspot.com/2014/02/tang-kich-thuoc-thumbnail-khong-giam.html
https://forum.vietdesigner.net/threads/huong-dan-tu-dong-crop-va-resize-thumbnail-danh-cho-blogger.69297/

Thủ thuật 4 : Chèn thanh menu cho blogspot

Xem chi tiết các mẫu menu blogger theo link sau : http://www.ivietpr.com/2017/09/code-menu.html

4 thủ thuật trên áp dụng chỉnh sửa template coming soon kết hợp với template landing page làm trang Seo giới thiệu công ty, cá nhân cực kỳ bá đạo.

Tìm hiểu thêm các thủ thuật khác giúp chỉnh sửa và làm đẹp giao diện (template) blogspot :

Code ẩn hiện một phần nội dung bài viết trên blog (DÙNG ẨN DÒNG KHÔNG ĐƯỢC XÓA TRONG BLOGGER)

Chèn thêm thuộc tính vào thẻ cần ẩn nội dung : style="display: none;"

Cách xóa bỏ thuộc tính cung cấp bởi Blogger cho Blogspot (xóa bỏ “Được Tạo Bởi Blogger” cho blogger) :

Thuộc tính cung cấp bởi Blogger sẽ được gắn với id Attribution1, tìm ID này sau Thay đổi thuộc tính locked từ True sang False. Sau đó vào mục Bố cục tìm đến Widget mặc định này và nhấn vào xóa bỏ để xóa tiện ích. Nếu như bạn không thực hiện các bước trên hoặc thực hiện sai thì nút Xóa bỏ này sẽ không xuất hiện.

Thay đổi "Hiển thị các bài đăng có nhãn" cho Blogger :
Xem tại đây : https://kslzone.blogspot.com/2013/12/thay-doi-hien-thi-cac-bai-dang-co-nhan.html

Tạo Bài viết liên quan theo nhiều label cho blogspot :

Xem tại đây : http://diaoctrungtam-igooseo.blogspot.com/2014/05/bai-viet-lien-quan-theo-nhieu-label-cho.html

Thủ thuật bài viết liên quan có hình ảnh và bài viết cho Blogger
Xem tại đây : http://lambloglibertagia.blogspot.com/2014/06/related-posts-thu-thuat-bai-viet-lien.html

Các dạng “Bài viết liên quan” đẹp cho Blogger :

Xem tại đây :
https://blog.landgonow.com/2011/07/tien-ich-bai-viet-lien-quan-cho-blogger.html
http://www.tips24h.net/2017/04/bai-viet-lien-quan-cho-blogger-blogspot.html

Giới thiệu bài viết hay :

Hướng dẫn tạo MỤC LỤC cho bài viết Website Blogspot trở nên chuyên nghiệp
http://www.nguyenthelinh.com/2017/12/huong-dan-tao-muc-luc-cho-bai-viet.html#phan-1

10 Plugin tạo mục lục WordPress tốt nhất năm 2019
https://timtoi.net/plugin-tao-muc-luc-wordpress-tot-nhat/

Ivietpr.com Blog Cá Nhân, Nền Tảng Blogger, Giao Diện Fletro : Xây dựng và phát triển nội dung, theo số liệu phân tích trên cấu trúc content của nhật ký trực tuyến digitalnomad.vn [ Blog Chạy Thử Nghiệm Đa Cấu Trúc ]

Tìm kiếm blog này

4 thủ thuật chỉnh sửa template coming soon kết hợp landing page làm trang Seo giới thiệu công ty, cá nhân cực kỳ bá đạo.

Hợp tác sx Cửa gỗ, cầu thang, bàn ghế, giường, tủ bằng gỗ Xoan ta, thông, sồi

Code blogger làm đẹp giao diện trang bài viết

Hợp tác sx đồ chơi gỗ, quân cờ domino, thanh rút gỗ

Gỗ ghép Solid, ván ghép finger joint và Butt Joint là gì ? Bảng giá gỗ ghép giá rẻ và xuất khẩu

Gỗ decor ốp tường, gỗ design trang trí không gian nội thất ấn tượng.

Thớt gỗ giọt nước siêu xinh gỗ giá tỵ và gỗ trái tim màu tím IVP-dCh

Code html, css thường dùng làm đẹp nội dung online

Xem Giá Bán

Xem Giá Bán

Xem Giá Bán

Xem Giá Bán

4 thủ thuật chỉnh sửa template coming soon kết hợp landing page làm trang Seo giới thiệu công ty, cá nhân cực kỳ bá đạo.

Bạn có thể thích những bài đăng này

Xem Giá Bán

Xem Giá Bán

Xem Giá Bán

Xem Giá Bán