Hướng dẫn chuyển hướng Redirect 301 trong Blogger

LongAnIT 1/11/2019 04:44:00 CH Bình luận
Chuyển hướng Redirect 301 nói chung là thuật ngữ để chỉ việc chuyển hướng từ một liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và cũng giúp cho bọ  tìm kiếm từ đường dẫn cũ sang đường dẫn mới. Nó rất đơn giản như bạn chuyển nhà đi nơi khác, hay thay đổi số điện thoại rồi sau đó bạn phải thông báo cho bạn bè biết vậy.

Bạn sẽ nghĩ thế nào nếu như khi người dùng tìm kiếm một bài viết liên quan đến site của bạn nhưng khi họ truy cập vào thì không thấy bài viết đó đâu cả việc này dẫn đến nguyên nhân trải nghiệm người dùng xấu và google cũng đánh giá site của bạn tệ. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách chuyển hướng Redirect 301 trong Blogger từ liên kết cũ sang liên kết mới.

Như bạn đã biết là Blogger là web vệ tinh 2.0 mạnh nhất hiện tại bởi vì sau. Bởi vì những tùy chỉnh của nó trong thiết lập là vô cùng tuyệt vời cho SEO.

Chuyển hướng Redirect 301 trong Blogger cũng tương tự như các chuyển hướng 301 ở nền tảng khác, kết quả tìm kiếm được giữ nguyên. Bạn có thể áp dụng cách này để thay đổi đường dẫn các bài viết đẹp hơn, chuyển hướng khá dễ dàng giúp cho các liên kết nội bộ cũng như bên ngoài của bạn không bị gãy.

Tôi có ví dụ như sau: Trước đó tôi có tạo một bài đăng với nhãn là SEO vậy khi search bài viết theo nhãn SEO nó sẽ thế này

https://www.longanit.com/search/label/SEO
Hôm nay tôi tôi đổi nhãn cho bài viết từ SEO thành Thủ thuật SEO vậy đường dẫn mới nó sẽ có dạng thế này

https://www.longanit.com/search/label/Thủ thuật SEO
Tuy nhiên sau khi đổi xong thì liên kết cũ https://www.longanit.com/search/label/SEO đã không thể tìm thấy các bài viết theo nhãn SEO nữa. Vậy tôi cần chuyển hướng 301 sang link mới
https://www.longanit.com/search/label/Thủ thuật SEO
Ok chúng ta tiến hành ngay chuyển hướng như ví dụ trên để hiểu rõ hơn nhé. Thực hiện các bước như hướng dẫn sau đây:

Bước 1: Đăng nhập vào Blogger - Cài đặt - Tùy chỉnh tìm kiếm như hình bên dưới

Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger
Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger

Bước 2: Trong mục chuyển hướng tùy chỉnh bạn click vào chỉnh sửa như hình trên chúng ta sẽ chuyển sang giao diện như sau

Giao diện thiết lập chuyển hướng 301
Giao diện thiết lập chuyển hướng 301

Như hình trên tôi có tạo 4 chuyển hướng 301. Bạn tiếp tục click vào "chuyển hướng mới" để bắt đầu thiết lập chuyển hướng tùy chỉnh 301.

Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới
Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới


 Giao diện trang chuyển hướng như trên chúng ta có 2 forum

  1. Forum đầu tiên bạn để link của đường dẫn cũ
  2. Forum thứ 2 bạn để link đường dẫn mới (Link cần chuyển hướng 301)
Lưu ý: Là link sẽ có dạng như sau: 

Cú pháp thêm link cũ và link mới trong chuyển hướng 301
Cú pháp thêm link cũ và link mới trong chuyển hướng 301


Như hình trên thì bạn có thể thấy là tôi chuyển hướng 301 cho nhãn bài viết. Nếu bạn muốn chuyển hướng một liên kết cố định thì cách làm vẫn tương tự bạn chỉ cần bỏ miền đằng trước ra là ok nhé.

Bước 3: Sau khi thay đổi xong bạn tiến hành lưu thay đổi là xong

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cơ bản cách chuyển hướng 301 tùy chỉnh trong blogger hi vọng là qua bài viết này có thể giúp được các bạn hiểu rõ hơn về tính năng này. Chúc các bạn SEO nhanh lên top nhé.


Share code banner trượt hai bên trang trí cho ngày tết

LongAnIT 1/07/2019 03:15:00 CH Bình luận
Code banner trượt hai bên trang trí cho ngày tết
Code banner trượt hai bên trang trí cho ngày tết 
Lang thang trên mạng tìm được code Javascript trang trí rất đẹp cho ngày tết với 2 banner trượt dọc 2 bên  với 2 câu đối liểng tùy chỉnh. Mình share lại code banner trượt hai bên này cho các bạn nào cần có nhu cầu. Thực hiện các bước sau đây để chèn code.

Bước 1:
  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Code toàn bộ code bên dưới vào trước thẻ </body> 

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web
var pictureWidth = 15; //Chiều rộng của hoa mai or đào
var pictureHeight = 15; //Chiều cao của hoa mai or đào
var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web
var downSpeed = 0.01; //Tốc độ rơi của hoa
var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>
<style type='text/css'>body{padding-bottom:20px}</style><a href='https://www.longanit.com//' target='_blank'><img _cke_saved_src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' src='http://4.bp.blogspot.com/-Vlt_TV7Q9V8/UsA7lwMZryI/AAAAAAAAA3Q/ref7HQc1968/s1600/banner_left.png' style='position:fixed;z-index:9999;top:0;left:0;'/></a><a href='https://www.longanit.com/' target='_blank'><img src='http://4.bp.blogspot.com/-A85wPjYE2BM/UsA7mDDQWmI/AAAAAAAAA3U/R9bxy6zSrLs/s1600/banner_right.png' style='position:fixed;z-index:9999;top:0;right:0;'/></a><div style='position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(https://3.bp.blogspot.com/-uQrQaR3IkxE/WF9dDUUVLLI/AAAAAAAAAdw/VKNA5q7FJSQX5OWofOiPafEEENaoBcY9wCLcB/s1600/nentet.png) repeat-x bottom left;'></div><a href='https://www.longanit.com/' target='_blank'><img src='http://3.bp.blogspot.com/-4Zt-ZB4tols/UsA_qIR0w9I/AAAAAAAAA3w/Ffyy-5OqGec/s320/banner_header.png' style='position:fixed;z-index:9999;bottom:20px;left:20px'/></a>
 Bước 2: Chỉnh sửa và thay đổi nội dung 2 banner trái và phải như hình trên tôi đã tô đậm màu đỏ 2 link này trong code bạn save nó về và chỉnh sửa lại nội dung theo ý bạn nhé.
Bước 3: Tiến hành save lại và hưởng thành quả.
Chú ý: Code này hoạt động tốt trên PC. Tuy nhiên code bị hạn chế trên Mobile bạn nên tham khảo thè điều kiện chỉ hiển thị trên desktop là ok. Chúc các bạn thành công!



Hướng dẫn tạo thanh cuộn Scrollbar bằng CSS cho Blogger

LongAnIT 12/29/2018 09:09:00 SA Bình luận
Khi bạn viết bài trên blog, đôi khi nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (Scrollbar) là một giải pháp để rút ngắn không gian trình bày giúp cho blog của bạn thêm chuyên nghiệp và đẹp hơn.

Trong bài viết này longanit.com sẻ hướng dẫn cho các bạn cách tạo Scrollbar cho blogger cũng như một số tiện ích (Widget).

1. Tạo thanh cuộn cho Widget

Trường hợp 1: Scrollbar cho tất cả các Widget Blogger


  •  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML 
  • Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin> 
.sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}

 Trường hợp 2: Scrollbar cho một widget cố định

Trong trường hợp này bạn cần xác định ID của Widget mà bạn cần tạo Scrollbar. Cách xác định ID bạn làm như sau:

Đăng nhập vào Blogger - Bố cục như hình bên dưới.

Trang quản lý các Widget trong blogger
Trang quản lý các Widget trong blogger  
Như hình trên tôi chọn một Widget bất kỳ sau đó click vào chỉnh sửa. Một Popup mở ra trên thanh address bạn rê chuột vào cuối thanh địa chỉ để xem ID của Widget như hình bên dưới thì Widget ID là "Label1"

Lưu ý: Mỗi Widget sẻ có một ID riêng biệt. Trong blogger thường có tên là : HTML1, HTML2, HTML3...,

Xem thông tin ID của Widget trên Bloggger
Xem thông tin ID của Widget trên Bloggger

 Sau khi xác định được Id của Widget bạn vào Chủ đề - Chỉnh sửa HTML sau đó chèn  đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
#Label1{
    max-height:300px;
    max-width:300px;
    overflow:auto;
    }

Giải thích: Trong  đoạn code trên thì mình sử dụng các thuộc tính sau:

  • max-height:300px; chiều cao tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo chiều dọc thì bạn bỏ thuộc tính này.
  • max-width:300px; chiều rộng tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo ngang dọc thì bạn bỏ thuộc tính này.
  • overflow:auto là thanh cuộn xuất hiện khi chiều cao tiện ích vượt chiều cao tối đa.

 Nếu Widget là các liên kết thì đoạn mã có dạng như sau:
#LinkList1 ul{
height:300px;
overflow:auto;
}

2. Tương tự như vậy cho các Widget khác cũng như các tiện ích trên Blogger ví dụ như sau:


Tạo thanh cuộn cho phần comment tìm trong CSS đoạn code sau
#comments-block {.....}
Tạo thanh cuộn cho đoạn văn bản dài bạn sử dụng cú pháp CSS như sau
.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}
Bạn có thể điều chỉnh chiều cao (height:200) và chiều rộng (width:500) tùy ý.
Mỗi khi đăng bài thì bạn nhập văn bản vào giữa 2 phần cú pháp định dạng (lưu ý đăng bài ở dạng Chỉnh sửa HTML) như sau:
<div class="scrollingtext">
Văn bản của bạn....
</div>

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho các bạn cách tạo thanh Scrollbar cho Blog cũng như các tiện ích Widget. Cảm ơn các bạn đã quan tâm theo dõi nếu có thắc mắc vui lòng để lại comment bên dưới để góp ý hoặc trao đổi.

Hướng dẫn tạo comments backlink trên Blogger

LongAnIT 12/22/2018 11:50:00 SA Bình luận
Hướng dẫn tạo comments backlink trên Blogger
Hướng dẫn tạo comments backlink trên Blogger 

Hello ! Xin chào các bạn. Nếu bạn nào đã tạo blog bằng blogger thì luôn biết đến comments system của Blog. Có thể nhiều bạn sẽ chê comment system mặc định của blogger vì sao ư? vì nó load chậm. Hãy bỏ qua những nhược điểm của blog comments ở đây mình chỉ nhắc đến ưu điểm của nó

Giúp cho việc tương tác với nhau giữa các blogger khi comment từ đó giúp cho blog của bạn có nhiều người biết đến hơn, chưa cần biết là comment đó là góp ý xây dựng hay spam
Tạo backlink cực tốt nếu như bạn là một SEOer đi backlink trên blogger là cực tốt ...

Có mấy cách comment trong Blogger. Cái này theo tôi là do người quản trị đó set mà thôi. Ví dụ tôi set tất cả ai cũng có thể comment trong blog thì khi bạn vào một bài viết trên blog tôi trong khung comment bạn sẽ nhìn thấy như sau:

Hệ thống comment mặc định trong Blogger

Như hình trên thì các bạn có thể thấy chúng ta có 3 tài khoản comment


  • Tài khoản blogger: khi bạn đăng nhập vào blogger 
  • Tài khoản Tên/URL
  • Tài khoản ẩn danh
Trong phần này tôi sẽ hướng dẫn các bạn cách comment kiểu thứ 2 . Đây là kiểu comment rất giống WordPress. Nếu như bạn đã vào các trang có mã nguồn WP thì sẽ không xa lạ với kiểu comment này. Tuy nhiên ở WP thì đa phần nó hiển thỉ khá đầy đủ như

  • Tên hiển thị
  • Địa chỉ email
  • Địa chỉ Website

Chọn kiểu comment với Tên / URL như hình
Chọn kiểu comment với Tên / URL như hình
Sau khi chọn xong blog sẽ hiện thông báo như hình.

Hướng dẫn comment để lại backlink cho blogger
Hướng dẫn comment để lại backlink cho blogger

Nhập thông tin tên và địa chỉ trang web của bạn vào đây. Trong khung nội dung comment bạn viết nội dung mà bạn cần bình luận vào và cuối cùng click vào "xuất bản". Lưu ý URL trong này là không giới hạn bạn có thể đưa link trực tiếp đến bài viết trong blog của bạn.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn cho các bạn cách comment để lại một backlink cực kỳ đơn giản trong blogger. Ngoài ra còn một kiểu comment khác nữa là sử dụng mã HTML để comment, mục đích này của các SEOer cũng là muốn để lại backlink mà thôi. Sau bài viết này chắc nhiều bạn sẽ tự đặt câu hỏi là nếu để comment kiểu này thì rất khó để chống spam đúng không? và tôi xin trả lời với các bạn rằng bạn vẫn còn tính năng kiểm duyệt tuy là hơi phức tạp nhưng nó cũng không phải thừa mà blogger đã có sẵn tùy chỉnh trong quản trị. Rất đơn giản phải không nào. Chúc các bạn SEO nhanh lên Top nhé.

Nguồn: longanit.com  

Hướng dẫn tạo Blog miễn phí từ Blogger

LongAnIT 11/26/2018 09:06:00 SA Bình luận
Hướng dẫn tạo blog miễn phí by longanit.com
Hướng dẫn tạo blog miễn phí by longanit.com
Ngày nay, việc tạo cho mình một blog cá nhân để chia sẻ các bài viết về kiến thức, kinh nghiệm, kiếm tiền online hay bất cứ điều thú vị gì đó mà bạn thích trở nên vô cùng dễ dàng và nhanh chóng.


Trong bài viết này tôi sẽ hướng dẫn cho bạn cách cơ bản để bạn có thể tạo cho mình 1 Blog cá nhân phục vụ cho những mục đích trên. Hiện tại nếu bạn search trên google với từ khóa Tạo blog miễn phí nó sẽ cho ra nhiều kết quả và tôi quan tâm đến kết quả đầu tiên chính là Tạo blog từ Blogger.com
Hướng dẫn tạo blog miễn phí
Hướng dẫn tạo blog miễn phí by longanit.com

Tại sao tôi chọn blogger mà không chọn Wordpress hay một mã nguồn nào đó thì tôi xin trả lời với các bạn là:

  • Hoàn toàn miễn phí chỉ cần có tài khoản google ( Gmail )
  • Bạn không cần biết lập trình vẫn có thể tạo được
  • Bảo mật tối đa vì là server của Blogger chính là google
  • Tên miền đẹp từ google với đuôi tenban.blogspot.com
  • Cpanel quản trị rất dễ dàng cho dù bạn không phải là người pro về tin học
  • SEO rất dễ lên top nếu bạn biết cách tối ưu ( Vì là con cưng của google )
  • Có thể trỏ tên miền của bên thứ 3 về Blogspot hoàn toàn miễn phí. Ví dụ với WordPress.com thì các bạn sẽ mất phí này... 
  • Còn rất nhiều ưu điểm cũng như những nhược điểm mà trong bài viết sau tôi sẽ đề cập đến. 


 Một trang blog đơn giản đó là blog trên nền Blogspot của Google. Đây là 1 sản phẩm Blogger của Google, ứng với mỗi tài khoản Google mà bạn đã đăng ký, thì bạn có thể tạo cho mình nhiều trang blog cá nhân chuyên nghiệp và nhanh chóng. Chuẩn bị gì khi tạo blog trên nền tảng Blogspot ?

Bước 1: Đăng nhập vào trang chủ của Blogger như hình bên dưới


Đăng nhập vào trang chủ Blogger để tạo blog
Đăng nhập vào trang chủ Blogger để tạo blog 
Bước 2: Click vào chữ Đăng nhập góc phải màn hình như hình trên sau đó trình duyệt sẽ chuyển sang trang yêu cầu đăng nhập như hình bên dưới.
Đăng nhập với tài khoản gmail đề tiến hành tạo blog
Đăng nhập với tài khoản gmail đề tiến hành tạo blog
Bước 3: Tại đây bạn đăng nhập với tài khoản gmail của bạn nhé. Nếu chưa có tải khoản Gmail bạn phải tạo gmail rồi sử dụng tài khoản này đăng nhập. Sau khi đăng nhập xong trình duyệt sẽ chuyển sang trang mới như hình bên dưới
Bắt đầu tạo blog ngay bây giờ by longanit.com
Bắt đầu tạo blog ngay bây giờ by longanit.com




Bước 4: Click vào chữ "Create New Blog" để tạo một Blog mới như hình trên. Bắt đầu xuất hiện màn hình Tạo Blog như hình bên dưới
Tiến hành tạo blog cá nhân với nhiều giao diện đẹp từ blogger
Tiến hành tạo blog cá nhân với nhiều giao diện đẹp từ blogger


Tại đây chúng ta có 2 mục :

  • Title: Bạn gõ tên tiêu đề cho blog của mình ( ví dụ : Blog tin học văn phòng. Tiêu đề bạn có thể thay đổi được sau khi tạo blog nên bạn có thể không quan tâm nhiều)
  • Address: đây chính là phần quan trọng là tên của blog bạn đặt nó sẽ có tên như sau: tenbandat.blogspot.com


Chú ý: Bạn có thể sử dung dấu - ( dấu gạch ngang ) cho việc đặt tên blog của bạn

Ví dụ : tôi đặt tên cho blog là tinhocvanphong thì sẽ hiện ra thông báo có dấu chấm than màu vàng là tên blog bạn đặt đã có người sử dụng. Vì vậy bạn phải chọn cho mình một tên khác
Đặt tên cho blog bạn cần tạo rất đơn giản
Đặt tên cho blog bạn cần tạo rất đơn giản
Ok tôi đặt một tên khác là quochuyz thì ok vậy là tôi có thể tạo một blog mới với tên là quochuyz.blogspot.com
Tiến hành tạo Blog
Tiến hành tạo Blog chỉ mất trong vòng 3-5 giấy
Bước 4: Click bào Create blog! để tiến hành tạo bog và chờ khoảng từ 3- 5 giây để máy chủ tiến hành tạo blog.

Trang quản trị Blog cá nhân của bạn
Trang quản trị Blog cá nhân của bạn

Kết luận: Như vậy trong bài viết trên tôi đã hướng dẫn cho các bạn cách cơ bản để tạo cho mình 1 blog cá nhân trên nền tản Blogger. Quá trình tìm hiểu, quản trị Blog, tạo bài viết các bạn có thể tham khảo các bài viết sau tại longanit.com cũng như là để lại comment bên dưới tôi sẽ hỗ trợ cho các bạn.

Tạo Widgets chứa thông tin giới thiệu về blog

LongAnIT 11/24/2018 08:35:00 SA Bình luận
Tạo Widget chứa thông tin giới thiệu về blog
Tạo Widget chứa thông tin giới thiệu về blog

Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo Widgets chứa thông tin giới thiệu về blog của bạn. Widget này khá đơn giản như tôi giới thiệu sau đây tuy nhiên bạn có thể tích hợp thêm nhiều thứ khác nữa như mạng xã hội hay gì đó thì tùy bạn code rất đơn giản chỉ bao gồm CSS và HTML. Vui lòng làm theo các bước sau đây:

Bước 1: Đăng nhập vào Blogger => Bố cục => Thêm tiện ích = > HTML / Javascript
Bước 2 : Copy đoạn toàn bộ đoạn code bên dưới dán vào. Ở đây tôi đã gộp cả CSS và HTML vào cùng một nơi cho tiện quản lý.
<style>
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(214,224,226,0.2);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card .card-heading{padding:0 20px;margin:0}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999}
.card .card-body{padding:0 20px;margin-top:20px}
.card .card-media{padding:0 20px;margin:0 -14px}
.card .card-media img{max-width:100%;max-height:100%}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap}
.card-comments .media-heading{font-size:13px;font-weight:bold}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top}
.card.people:first-child{margin-left:0}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff}
.card.people .card-top.green{background-color:#53a93f}
.card.people .card-top.blue{background-color:#427fed}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:rgba(214,224,226,0.2)}
.card.hovercard .cardheader{background:url("https://4.bp.blogspot.com/-d_fN3zZbj7M/W5n5GB8HhWI/AAAAAAAAADY/amIuXSOibnww4ysgBE0mLblBL0bRpb5TgCLcBGAs/s1600/banner2.jpg");background-size:cover;height:135px}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5)}
.card.hovercard .info{padding:4px 8px 10px}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px}
.longanit{border-radius:50%;width:32px;height:32px;line-height:18px}
</style>
<div class="card hovercard">
<div class="cardheader"> </div><div class="avatar"><img alt="" src="https://4.bp.blogspot.com/-cGitMJWA1oI/W5n5yR1216I/AAAAAAAAADg/s9lhXj69ir01fw7ibXygq3-r57Oxz3aKACLcBGAs/s1600/chuky.png" /></div><div class="info">
 <div class="title"> <a href="https://plus.google.com/116598239400614437662">Hamedledam</a>
 </div> <div class="desc">Web developer</div> <div class="desc">Advance Graphics Designer</div><div class="desc">Windows Tips, IT Manager</div> </div></div>

Bước 3: Bạn sửa đổi các thông tin trong phần HTML cho phù hợp với Blog của bạn nhé.

Tạo Breadcrumb chuẩn HTML5 cho blogger

LongAnIT 11/21/2018 09:23:00 CH Bình luận
Breadcrumb là một tập hợp các đường link có phân cấp để người dùng biết mình đang ở đâu để từ đó dễ dàng hơn trong việc sử dụng website mà dịch ra tiếng việt như các bạn hay nói là liên kết bánh mì. ví dụ tại trang longanit Trang chủ » Blogging tips » Breadcrumb đơn giản chuẩn HTML5 ngay phía trên tiêu đề bài đăng.
Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot
Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot

Nếu blog của bạn chưa có Breadcrumb thì bạn nên thêm thành phần này vào ngay vì nó rất có lợi cho SEO và thân thiện với người dùng. Cách làm lại cực kỳ đơn giản.

Bước 1: Vào chỉnh sửa template rồi tìm đến dòng: ]]></b:skin> rồi thêm vào phía trên nó code css sau:
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

 Tiếp tục tìm đến mã này:
<b:includable id='main' var='top'>

 Thay thế nó bằng code bên dưới:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb trang bài viết -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Trang chủ</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span>Khác</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho trang nhãn và trang tìm kiếm.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Bài viết cho nhãn <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Cuối cùng là chúc các bạn thành công !

Cách thêm Widget (thêm tiện ích) vào Blogspot

LongAnIT 11/16/2018 09:57:00 SA Bình luận
Trong Blogger có một định nghĩa Widgets đơn giản chúng ta hiểu là tiện ích. Các widget được tạo ra từ code HTML trong blogger theo cú pháp của nó.

Cách thêm Widget (thêm tiện ích) vào Blogspot
Cách thêm Widget (thêm tiện ích) vào Blogspot
Việc tạo ra các widget rất tiện lợi cho việc quản lý blog của bạn ngoài ra nó còn có rất nhiều tiện ích khác nữa tôi sẽ đề cập đến các bạn trong những bài viết sau. Tùy theo templae mà người tạo ra sẽ hiển thị nó ở các vị trí khác nhau... Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách cơ bản để thêm  Widget trong blogger.

1. Cách thêm một tiện ích widget thông thường

Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên Longanit.com' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Giải thích:

  • class='sidebar': Dành cho template có hơn 1 cột, sidebar thường nằm bên trái hay bên phải tùy vào người thiết kế template.
  • id='sidebarl' : ID có nhiều tính năng nhưng mục đích chính vẫn là CSS cho tiện ích 
  • preferred='yes' : Chọn yes bạn có thể thêm tiện ích khác từ Widget này
  • locked='false' : Bạn có thể di chuyển giữa các tiện ích với nhau ( Di chuyển lên hay xuống), trong tiện ích này tôi set là False có nghĩa là tắt tính năng di chuyển bạn có thể set thành True nếu muốn di chuyển các widget
  • Xem nhiều trên Longanit.com là tiêu đề bạn đặt cho tiện ích: Bạn có thể đặt tên khác tùy ý không quan trọng chủ yếu là để dễ quản lý.
  • HTML99 : Là thứ tự của các layer widget. nếu save nó báo đỏ thì đổi số cho khác vì nó trùng lặp. khi tạo cái khác cũng thế

Ví dụ: Tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích

VD: HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rõ cho

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...

1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cục để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào

2. Chỉ cho phép widget hiển thị ở từng bài viết

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

3. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 5. Widget chỉ hiển thị trên các trang Static pages

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
 Kết luận: Như vậy với cách trên tôi đã hướng dẫn cho các bạn cách thêm 1 widget vào trong blogger, trong quá trình thực hiện có thể sẽ gây ra một số lỗi bạn có thể comment bên dưới để trao đổi.

Widget Recent post for blogger with Label

LongAnIT 11/10/2018 08:58:00 SA Bình luận
Bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo widget bài đăng theo nhãn cụ thể trên widgets blogger chỉ vài bước đơn giản.
Widget Recent post for blogger with Label

Bước 1: Đăng nhập vào Blogger - Bốc cục - Thêm tiện ích - HTML/ JavaScript
Bước 2: Copy đoạn code bên dưới và dán vào
<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://2.bp.blogspot.com/-GeeSB564W-o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 12;
var startfeed = 0;
var urlblog = "https://www.longanit.com";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' title='"+n+"'><img alt='"+n+"' src='"+a+"' title='"+n+"'/></a>",s+="<h6><a href='"+r+"' title='"+n+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous' title='Previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next' title='Next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home' title='Home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Blogger"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
Chỉnh sữa code Recent Post như sau
var numfeed = 12; // Số bài viết hiển thị
var urlblog = "https://www.longanit.com"; Thay thế bằng URL blog của bạn
Blogger: Sửa thành nhãn bài viết trên blog của bạn.

Nếu bạn muốn hiển thị tất cả bài đăng thì thay /feeds/posts/default/-/Blogger thành /feeds/posts/default

Đó là bài viết về cách tạo Recent post theo từng nhãn cho Blog trên trang tĩnh mong sẽ hữu ích với bạn

Tạo phân trang (Page Navigation) cho Blogger

LongAnIT 11/06/2018 11:16:00 SA Bình luận
Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng Page Navigation cho Blogger là vô cùng cần thiết để giải quyết vấn đề này.
Tạo phân trang (Page Navigation) cho Blogger

Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

 Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ đóng </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var perPage=10;
 var numPages=2;
 var firstText ='First';
 var lastText ='Last';
 var prevText ='« Previous';
 var nextText ='Next »';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+'/'+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
 //]]>
 </script>
 </b:if>
 </b:if>
Bước 2: Chỉnh sửa lại URl Label

Ở bước này chúng ta sẽ sửa lỗi không hiển thị phân trang khi xem các bài viết trong 1 Label. Các bạn hãy tìm và sửa tất cả

expr:href='data:label.url'

và bạn sửa nó thành

expr:href='data:label.url + "?&amp;max-results=10"'
 Bước 3: Viết CSS

Chúng ta đều cần phải ngồi viết lại CSS cho nó để nó được đẹp hơn và hòa hợp với Template hiện tại. Vì vậy, mỗi người sẽ có một cách viết CSS riêng. Tuy nhiên, mình cũng xin được chia sẻ đoạn CSS mà mình đã viết sẵn cho những bạn không biết viết CSS hay là không có thời gian,…

Các bạn chỉ việc copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> của mình là được.
#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a, .showpage a, .pagecurrent {font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
 .displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#359BED;text-decoration:none;color: #fff;}
 #blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf {display:none!important}
 #blog-pager .pages {border:none;}

 Đây là một thủ thuật bạn nên thực hiện nếu như blog của mình có nhiều bài viết nhé! Chúc các bạn thành công!

Bài viết tham khảo nguồn tại : https://mocgin.com

Code liên hệ trượt dưới chân trang đẹp cho blogger

LongAnIT 11/03/2018 09:29:00 SA Bình luận
Code liên hệ trượt dưới chân trang đẹp cho blogger
Đoạn code này lấy bên aecland.vn rất thích hợp dùng cho các website bán hàng hoặc làm dịch vụ nên sử dụng để giúp cho khách hàng của mình liên hệ dễ dàng hơn.

Có thể giúp gia tăng tỉ lệ gọi điện đặt hàng, thích hợp với các web đang triển khai các chiến dịch chạy bán hàng, kinh doanh online, bất động sản...

Tiện ích liên hệ trượt dưới chân trang web chia làm 3 phần gồm:
Thông tin hotline
Thông tin thanh toán
Chát, Tư vấn online

Bước 1:  Chèn đoạn code HTML trên thẻ đóng </body>
 <div class="bottom_support" style="z-index:999px;">
<div class="wrap_bottom">
  <div class="hotline_bottom">
          <span class="ico"><img src="https://1.bp.blogspot.com/-2t8Fkz-XcxY/V34e6T2c2zI/AAAAAAAAFTU/TljIpi_TLjs1HttVtsWB-mEsS1fPrAhpwCLcB/s1600/bottom_support_ico_phone.png"/></span>
         <div class="txt">Hotline: <strong>0254 37 87 222</strong> <span>(kỹ thuật)</span> - <strong>0254 37 87 222</strong> <span>(CSKH)</span></div>
        </div>
        <div class="guide_payment">
         <a target="_blank" href="#">
             <span class="ico"><img src="https://4.bp.blogspot.com/-HcT7Kt4C8VA/V34fL1DNrWI/AAAAAAAAFTc/UI3fSHd7TesOTyf94TjnShxvy8quhImLACLcB/s1600/bottom_support_ico_guidepayment.png"/></span>
                <span class="txt">Hướng dẫn thanh toán</span>
            </a>
        </div>
        <div class="advisory_online">
         <a target="_blank" href="#">
             <span class="ico"><img src="https://2.bp.blogspot.com/-C5F14CaOBhc/V34fL7_9p8I/AAAAAAAAFTY/QaXidsUV5xk_GaKaDZY8XW2lHMNT0XUkwCLcB/s1600/bottom_support_ico_advisoryonline.png"/></span>
                <span class="txt">Tư vấn online</span>
            </a>
        </div>
    </div>
</div>
Bước 2: Chèn CSS để làm đẹp. Code này chuẩn Responsive nên bạn hoàn toàn có thể yên tâm, hiển thị tốt cho đầy đủ các thiết bị khác nhau. Khi Reponsive nó sẽ hiển thị icon phone rất tiện lợi
Chèn code css sau, trên thẻ đóng ]]></b:skin>
.bottom_support{height:45px;width:100%;position:fixed;bottom:0;background:#32a22d;font-family:'Roboto Condensed', sans-serif;color:#fff;line-height:45px;z-index:9999}
.bottom_support a{font-family:'Roboto Condensed', sans-serif;color:#fff;line-height:45px;font-size:18px}
.wrap_bottom{max-width:1380px;margin:0 auto}
.bottom_support .hotline_bottom{background:#32a22d;width:40%;float:left;font-size:16px;margin-left:5%;position:relative}
.bottom_support .hotline_bottom .ico{width:16%;position:absolute;bottom:0}
.bottom_support .hotline_bottom .txt{margin-left:16%}
.bottom_support .hotline_bottom .ico img{max-width:100%}
.bottom_support .hotline_bottom strong{font-weight:bold;font-size:19px}
.bottom_support .hotline_bottom span{font-size:13px}
.bottom_support .guide_payment{background:linear-gradient(-60deg, #177814 90%, #32a22d 50%) no-repeat;width:25%;float:left;position:relative}
.bottom_support .guide_payment .ico{width:20%;position:absolute;bottom:-25%;left:15%}
.bottom_support .guide_payment .ico img{max-width:100%}
.bottom_support .guide_payment .txt{margin-left:35%}
.bottom_support .advisory_online{background:linear-gradient(-60deg, #014f01 90%, #177814 50%) no-repeat;width:30%;float:left;position:relative}
.bottom_support .advisory_online .ico{width:20%;position:absolute;bottom:-10%;left:15%}
.bottom_support .advisory_online .ico img{max-width:100%;float:left;margin-top:-20px}
.bottom_support .advisory_online .txt{margin-left:35%}
@media screen and (max-width:1200px){.bottom_support .hotline_bottom{width:45%}
.bottom_support .hotline_bottom .ico{width:12%}
.bottom_support .hotline_bottom .txt{margin-left:12%}
.bottom_support .guide_payment{width:25%}
.bottom_support .guide_payment .ico{bottom:-15%}
.bottom_support .advisory_online{width:25%}
.bottom_support .advisory_online .ico{bottom:0}
}
@media screen and (max-width:1000px){.bottom_support{height:40px;line-height:40px}
.bottom_support a{font-size:17px;line-height:40px}
.bottom_support .hotline_bottom{margin-left:2%;width:48%}
.bottom_support .guide_payment .ico{bottom:0;left:7%}
.bottom_support .guide_payment .txt{margin-left:27%}
.bottom_support .advisory_online .ico{bottom:10%;left:10%}
.bottom_support .advisory_online .txt{margin-left:30%}
}
@media screen and (max-width:820px){.bottom_support{height:30px;line-height:30px}
.bottom_support a{font-size:15px;line-height:30px}
.bottom_support .hotline_bottom{font-size:15px}
.bottom_support .hotline_bottom strong{font-size:18px}
.bottom_support .hotline_bottom span{font-size:12px}
}
@media screen and (max-width:720px){.bottom_support a,.bottom_support .hotline_bottom{font-size:13px}
.bottom_support .hotline_bottom strong{font-size:15px}
}
@media screen and (max-width:620px){.bottom_support{height:25px;line-height:25px}
.bottom_support a{font-size:11px;line-height:25px}
.bottom_support .hotline_bottom{margin-left:0;width:50%;font-size:11px}
.bottom_support .hotline_bottom strong{font-size:15px}
.bottom_support .hotline_bottom span{font-size:11px}
}
@media screen and (max-width:560px){.bottom_support{height:20px;line-height:20px}
.bottom_support img{display:none}
.bottom_support a{font-size:10px;line-height:20px}
.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:10px}
.bottom_support .hotline_bottom strong{font-size:13px}
.bottom_support .hotline_bottom .txt{margin-left:1%}
.bottom_support .guide_payment .txt,.bottom_support .advisory_online .txt{margin-left:15%}}
@media screen and (max-width:440px){.bottom_support .hotline_bottom{width:55%}
.bottom_support .guide_payment{width:27%}
.bottom_support .advisory_online{width:18%}}
@media screen and (max-width:400px){.bottom_support a,.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:9px}
.bottom_support .hotline_bottom strong{font-size:12px}}
@media screen and (max-width:340px){.bottom_support a,.bottom_support .hotline_bottom,.bottom_support .hotline_bottom span{font-size:8px}
}
Bước 3: Tiến hành lưu lại và xem kết quả

Fix The reference to entity delimiter Blogger

LongAnIT 11/02/2018 09:46:00 SA Bình luận
Phân trang theo nhãn cho blogger giúp blog của bạn tải nhanh và trông gọn gàng hơn. Tuy nhiên khi click vào tên nhãn label thì số bài đăng hiển thị trên 1 trang theo mặc định là 20.

Fix lỗi phân trang search nhãn cho Blogger
Việc Chỉnh sửa HTML tạo menu đưa vào blog, khi lưu mẫu sẽ hiện thấy báo lỗi : đại loại như sau
The reference to entity "max-results" must end with the ';' delimiter.
Tạm dịch: Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.

Để khắc phục, ta chỉ cần thêm amp; vào sau dấu ?:

VD trên web longanit của tôi Link của trang nhãn lúc đầu:
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&max-results=5
Bạn đổi thành link như bên dưới sẽ không báo lỗi nữa
https://www.longanit.com/search/label/Windows%20-%20Antivirus?&amp;max-results=5
Tiến hành save lại là sẽ không báo lỗi nữa. Bạn áp dụng tương tư cho các nhãn khác trong blog của mình nhé. Chúc thành công!

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

LongAnIT 10/31/2018 11:30:00 SA Bình luận
Create Breaking News cho Blogger

Breaking News là gì ? Gọi chung là những tin nóng mới cập nhật, bài viết mới cập nhật. Các bạn hay theo dõi tin tức thời sự trên Tivi sẽ thấy một thanh dòng chữ chạy ngang từ trái sang ghi những thông tin cập nhật. Việc tạo  Breaking News sẽ giúp cho người đọc dễ dàng cập nhật những bài viết gần đây trên blog của bạn. Đó cũng là cơ hội để họ ghé lại blog của bạn lâu hơn.

Hôm nay tôi sẽ chia sẻ cho các bạn cách tạo Breaking News rất đơn giản và đặc biệt là nó có thể Reponsive trên các thiết bị. Vui lòng thực hiện theo các bước hướng dẫn dưới đây

Bước 1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML ,  Tìm thẻ ]]></b:skin> hoặc </style> đây là thẻ chứa CSS của blog. Copy và dán đoạn code dưới vào trên nó.
 #bd-breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #8ED557;}
#bd-breakingnews .head-breaking {position:absolute;background:none repeat scroll 0 0 #8ED557;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:420;text-transform:uppercase;padding:6.5px 22px;}
#breaking-bsd-news li a {font-family:inherit;font-weight:420;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#breaking-bsd-news li a:hover {color:#63953D;}
#breaking-bsd-news {float:left;margin-left:75px;margin-top:6px;}
#breaking-bsd-news ul,#breaking-bsd-news li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#bd-breakingnews {margin:20px 0 0 0;margin-right:0;}
#bd-breakingnews .head-breaking {padding:6.5px 14px;}
#breaking-bsd-news {margin-left:50px;}}

Bước 2: Tìm thẻ đóng  </body> và copy đoạn code bên dưới vào trước nó
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var e="https://www.longanit.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#breaking-bsd-news li:first").slideUp(function(){$(this).appendTo($("#breaking-bsd-news ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#breaking-bsd-news").html(s),setInterval(function(){t()},5e3)}else $("#breaking-bsd-news").html("<span>No result!</span>")},error:function(){$("#breaking-bsd-news").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Bước 3: Tìm vị trí đặt cho Breaking News. Bạn có thể đặt code phía dưới menu trong blog của mình. Copy đoạn code bên dưới vào vị trí mà bạn muốn đặt.
 <div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>

Vì code Request đến Font Awesome nên bạn có thể thay thế icon to đỏ trong code trên bằng icon khác mà bạn thích. Lưu ý là trong blog của bạn phải add thư viện Font Awesome vào nhé. Bạn có thể tham khảo đường link bên dưới.
https://fortawesome.github.io/Font-Awesome/icons/%C2%A0

Chú ý: Nếu bạn muốn code chỉ hiển thị ở trang chủ thì bạn có thể thay code ở bước 3 bằng code bên dưới nhé. Phần code này tôi đã thêm thẻ điều kiện vào.
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='bd-breakingnews'><span class='head-breaking'><i class='fa fa-bullhorn'/></span>
<div id='breaking-bsd-news'>Loading..</div></div>
</b:if>

Kết luận: Như vây chỉ vài thao tác đơn giản tôi đã hướng dẫn các bạn cách tạo Breaking News Widget cho blog của bạn . Chúc thành công và đừng quên chia sẻ hặc để lại comments của bạn bên dưới nhé.

Responsive Recent Post Slider to Blogger

LongAnIT 10/31/2018 10:01:00 SA Bình luận
Automated Responsive Recent Post Slider to Blogger
Quay trở lại với thủ thuật blogger. Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách tạo bài viết mới nhất dạng Slide tự trượt cho Blogger. Với thủ thuật này bạn sẽ thấy một tiện ích xuất hiện trên blog của mình cực kỳ hiện đại, dạng mờ mờ metro phẳng rất chuyên nghiệp, đặc biệt nó còn tự động trượt  để thay đổi bài viết. Để thực hiện widget này, các bạn cần thực hiện các bước như tôi hướng dẫn bên dưới

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML tìm trong CSS của bạn và copy đoạn code bên dưới vào
#featuredpost {margin:15px auto; width: 970px;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:50%} #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%} #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%} #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%} #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Bước 2: Nhấn Ctrl + F trong khung tìm kiếm gõ  </head>  Sau đó copy đoạn code bên dưới vào phía trên thẻ </head>
<script type='text/javascript'>
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('') //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"https://www.longanit.com/", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]>
</script>
Bước 3: Xác định vị trí đặt để hiển thị bài viết chúng ta dùng code HTML để gọi. Bạn tìm trong Template của mình vị trí muốn đặt và dán đoạn code bên dưới vào. Thường code này se hay đặt dưới phần Header của Blog
<div id="featuredpost"></div>
Bước 4: Bạn thay đổi các thông tin như tôi liệt kê bên dưới cho phù hợp với blog của bạn nhé
  • blogURL:"https://www.longanit.com" (Thay đổi thành link blog của bạn)
  • MaxPost:8, ( Số bài viết hiển thị  mặc định là 8)
  • idcontaint:"#featuredpost", ( lệnh gọi bài viết ra )
  • ImageSize:500, ( Kính thước tối đa của ảnh hiển thị)
  • interval:10000, ( Tốc độ Slide mặc định 10000)
  • autoplay:true, ( Tự động slide bài viết khi load nếu set False sẽ không tự động )
  • tagName:false ( Mặc định không hiển thị nhãn )
Chúc bạn thành công!