@bloggiabao
%
%
%
%

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 != &quot;item&quot;'>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 ]

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

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
456





💰

Top Sản Phẩm Công Nghệ / Thiết Bị Điện Gia Dụng /,...
Về Trang Chủ
Chiến mã đường rừng
Chợ Thủy Hải Sản
Điện Thoại Samsung Galaxy S20 FE (8GB/256GB)

Xem Giá Bán

Lenovo Legion Y90 5G Chơi Game SmartPhone Snapdragon 8 Gen1 6.92 ''144Hz AMOLED E4 5600MAh 68W Siêu NFC 64MP

Xem Giá Bán

ASUS ROG Điện Thoại 6 Phiên Bản Giới Hạn Dimensity 9000 + Tặng 5G 6000MAh Pin 6.78 "165Hz AMOLED chơi Game Điện Thoại

Xem Giá Bán

Điện thoại Gaming Tecno POVA 3 (6+5GB)/128GB - Helio G88 | 7000 mAh | Sạc nhanh 33W

Xem Giá Bán

Thotgo.asia - Tel 0968 970 650 : Xưởng Sản Xuất Thớt Gỗ Các Loại
Biến Content Thành Tiền Bạc