-->

Post Top Ad

Showing posts with label Thủ thuật blogger. Show all posts
Showing posts with label Thủ thuật blogger. Show all posts

Friday, September 8, 2017

4:50 AM

Chèn trình xem video trực tuyến JWplayer vào Blogspot

Chắc hẳn vấn đề làm phim trên blogspot không phải là chuyện xa lạ gì nữa với chúng ta khi mà số lướng blog phim trên blogspot xuất hiện với số lượng ngày càng nhiều. Hay đơn giản, bạn không nhất thiết phải làm 1 blog phim mới cần chèn video vào blogspot, mà chỉ vì bạn muốn chia sẻ một video bất kỳ nào đó với mọi người đều được, như một video ca nhạc, hoạt hình, video hướng dẫn đều như vậy.
[[Bài viết được viết bởi trang NMH.illusion]]
Thực sự vấn đề này thì bạn có thể hoàn toàn giải quyết với cặp thẻ <video> trong html5 mà blogspot đã hỗ trợ, nhưng vấn đề là mình thấy việc chạy video với cặp thẻ <video> khá là không đẹp mắt, nó rất đơn điệu và gần như không thể tùy chỉnh giao diện được.
Ví dụ cho bạn xem nhé: 
<video controls type="video/mp4" src="linkVideo" width="chiều rộng" ></video>
Một nhược điểm của cách trên là nó chỉ cho phép đường dẫn đi đến trực tiếp file video! Nó sẽ không cho bạn chèn link của nguồn khác như Youtube, khi đó nếu bạn muốn chèn video từ Youtube thì bạn lại phải lặn lội lên Youtube để lấy mã nhúng về, còn chưa kể theo ý của riêng mình thì trình chạy video của Youtube cũng không được xinh đẹp cho lắm. (cái này thì khỏi Demo nhé, nhiều quá thì nặng thời gian load lắm ^^)
[[Bài viết được viết bởi trang NMH.illusion]

Và sau cùng thì mình sẽ giới thiệu với các bạn cách chèn video với trình chơi video trực tuyến cực kỳ nổi tiếng JWplayer. Chắc bạn biết nó chứ nhỉ? Còn nếu bạn vẫn chưa biết thì đơn gian có thể hiểu như là trên máy tính của bạn để xem một video thì bạn phải cần một chương trình xem video như Window Media Player, KM player hay GOM player gì đó thì tương ứng trên internet cũng sẽ có những trình để xem phim trực tuyến, nhưng nó sẽ khó khăn hơn trên máy tính nhiều. Hai trình xem video mặc định phần trên mà mình nói là ví dụ đấy. Còn JWplayer cũng là một trình xem video trực tuyến trên mạng giống mấy chú trên nhưng khác ở chỗ, nó hỗ trợ cả link Youtube bình thường và cả link trực tiếp dẫn đến file video nữa, mặc khác một điểm rất mạnh của nó nữa là nó cho phép người đăng video lên trang blogspot tùy chỉnh giao diện theo ý của riêng mình, trong đẹp và cuốn hút hơn...
Lưu ý:
JWplayer chỉ hỗ trợ link Youtube và link trực tiếp đến video nên nếu bạn muốn dùng những nơi khác làm host video như Google Photo hay Google Drive thì bạn có thể dụng thử n2jplayer của mình nhé, nó hỗ trợ đa link hơn. Link ở đây: http://nmhillusion.blogspot.com/2016/08/n2jplayer-trinh-xem-video-nguon-phien.html

[2]. Phần chính: JWplayer


[Gợi ý: Nếu bạn đã có sẵn host để chứa dữ liệu thì ok rồi, còn bạn nào chưa có thì nên đọc bài "Sử dụng Dropbox làm Host Free" hoặc "Sử dụng Google Drive làm host lưu trữ miễn phí" của mình để có thể có cho mình 1 host uy tín, miễn phí để làm web nói chung và làm phần này của mình nói riêng nhé.]

Mình sẽ nói nguyên tắc chung của cách làm này trước. Để chèn JWplayer vào blogspot thì bạn cũng phải làm như việc chèn nó vào những trang web bình thường khác. Đó là bạn cũng cần một host để đặt cái thư mục jwplayer mà bạn muốn truy xuất ở đó, Sau đó thì vào template của blogspot khai báo cho blogspot của bạn biết và yêu cầu blogspot load cả phần cài đặt JWplayer này của bạn mỗi khi được truy cập. Tiếp theo bạn muốn đăng video bằng JWplayer ở đâu trong blog của bạn thì cứ việc "thẩy" vài dòng code gọi đến JWplayer với mấy cái thông tin cần thiết để nó load video là ok rùi.

Thực ra mình cũng xin nói ở đây luôn, những phiên bản JWplayer hơi cũ như nhưng không quá cũ, hey, nói chung là mấy cái JWplayer đã chuyển sang cài đặt bằng javascript nhưng không phải phiên bản 7.0 trở lên của nó (như mình đang thử với bản 6.8 vì có nhiều skin đẹp, truy xuất skin cũng dễ) thì chú blogspot sẽ không cho phép bạn chèn video vào bài đăng của chú đâu nhé, mình đã thử khá nhiều cách nhưng vẫn chưa được. Nhưng những phiên bản cũ hơn nữa của nó, những bản mà bạn chỉ cần mỗi file *.swf của jwplayer của nó với 1 dòng embed thôi đó thì blogspot vẫn cho những video chèn bằng cách này hiển thị, dù thế thì mình vẫn thấy skin của mấy bản này không được đẹp nên mình cũng không nói nhiều luôn.
Ok, quay lại phần chính thôi. Bây giờ mình sẽ đi cụ thể cách làm nhé!

[3]. Tự tạo cho mình một player như ý tại trang chủ JWplayer


Đi vào trang JWplayer và tự tạo cho mình một tài khoản (miễn phí hay có phí là tùy bạn ^^), việc này chắc bạn biết làm mà nhỉ, mình sẽ không nói đến ở đây nữa, xem như bạn đã tạo tài khoản thành công rồi, còn nếu không được thì liên hệ lại với mình.

Sau khi bạn tạo thành công và đăng nhập vào thì sẽ có giao diện tượng tự thế này.


Sau đó bạn sang Tab "Players", ngay tại chấm đỏ trong hình của mình đấy. và nhấp chọn "NEW PLAYER" để tự tạo player JWplayer có giao diện tùy chỉnh theo ý riêng mình!



[4]. Một số giới thiệu cơ bản về tạo JWplayer


Mình nói theo số trong hình nhé:
1. Đặt tên cho player của bạn (chủ yếu để phân biệt với mấy player khác của bạn chính bạn mà thôi, nó không hiển thị ở đâu cả)

2. Các thiết lập cơ bản:
-Dimension (kích thước): responsive (theo một tỷ lệ nhất định, như trong hình là 16:9), fixed (tự chỉnh kích thước cho phù hợp với kích thước player bạn thiết lập trong bài đăng blogspot của bạn).
- Playback Option (tùy chòn về việc phát video) gồm:
  + autostart: tự động bắt đầu phát video khi load trang xong
  + Loop content: phát lặp lại
  + Mute on start: lúc bắt đầu thì tắt tiếng.
- Preload: thiết lập về có cho phép load trước nội dung video không khi mà người xem vẫn chưa chọn bắt đầu phát.
- Rendering: Có mặc đinh phát video với Flash không (Nếu phát bằng Flash thì sẽ ngăn chặn được quảng cáo hiển thị trên video, còn nếu phát bằng HTML5 thì có thể cài đặt quảng cáo trên video được.

3. Design: (phần quan trọng cho bạn)
Đây là phần để bạn thiết kế giao diện cho JWplayer của bạn, nó rất trực quan và bạn hoàn toàn có thể tự làm, có gì thì cùng trao đổi.

4. Sharing (phần chia sẻ)
Phần này thì mình nghĩ là ít sử dụng, nếu được chọn thì  trình phát video của bạn sẽ có thêm nút share để chia sẻ video với mọi ngưởi.

5. Analytics (phân tích)
Bạn sẽ được Google Analytics theo dõi, phân tích và đánh giá các số liệu liên quan đến trình phát này của bạn

6. Advanced (nâng cao)
Bạn không nên chạm đến phần này nếu không hiểu nó, giống mình vậy ^^, nói chung là về vấn đề bản quyền đấy.

7. Save Changes
Nhấp vào đây để lưu lại trình JWplayer của bạn.

Ok, vậy là bạn đã tạo xong cho riêng mình một trình JWplayer, việc còn lại của bạn là upload chúng lên Host của riêng mình và có thể chạy được rồi.

[5]. Sử dụng trình player mà bạn vừa tạo

Sau khi bạn đã tạo ra được player rồi thì sẽ có 2 sự lựa chọn cho bạn ở đây.
 1. Bạn sử dụng luôn tài khoản JWplayer này của mình và sử dụng nhờ host của trang JWplayer luôn để làm nơi chứa mọi thứ về player mà bạn đã tạo, và sử dụng nó trong blogspot của mình.

 2. Bạn muốn sở hữu riêng player này, không muốn lệ thuộc vào  trang jwplayer nữa. Bạn sẽ upload những thứ cần thiết lên host riêng và sử dụng từ đó.

Ok, mình sẽ nói luôn từng cách một!
a) Sử dụng host của JWplayer:
Với cách này thì khá đơn giản. Đầu tiên, sau khi đã tạo thành công player cho mình thì bạn truy cập lại tab "Players" (trong trang jwplayer nhé)

Sau đó bạn click vào "License Keys & Download" để vào trang quản lý mã bản quyền cũng như download cho các trình player mà  bạn đã tạo từ trang này. Như hình phía dưới đây:


Sau khi truy cập thì sẽ có giao diện như hình:


Sau đó, ngay tại chấm tròn đỏ của mình trong mình thì bạn hãy lựa chọn đúng tên player mà bạn đã tạo và muốn chèn vào blogspot, như trong ví dụ phía trên của mình thì player là "DemoBlogspot[19/01/2016]".

Khi đã chọn xong thì bạn hãy copy đường dẫn tại chấm tròn xanh của mình trong hình.

Ok, phần lấy link nguồn đã xong, tiếp theo ta sẽ thực hiện khai báo trong template của blogspot. Để thực hiện thì bạn truy cập vào blogspot của bạn, vào phần mẫu -> Tùy chỉnh HTML

Sau khi đã vào tùy chỉnh HTML thì bạn sẽ thấy code là code phải không? Đừng quan tâm đến nó. ak quên, nếu bạn sợ hỏng template của mình thì nên chọn sao lưu template trước khi vào tùy chỉnh HTML nhé! Bây giờ sau khi bạn đã vào phần code thì hãy nhấp chuột vào code, ấn Ctrl + F để tiến hành tìm kiếm trong code, và tiến hành tìm kiếm cụm từ </head>

Việc này là nhằm ta thêm vào phần đầu của blogspot lệnh gọi đến tập tin jwplayer. Khi đã tìm thấy thì bạn hãy chèn dòng code sau vào trên dòng </head> đó.

<script type="text/javascript" src="đường dẫn mà bạn đã copy" />

Lưu lại template và mọi thứ hoàn thành, việc còn lại của bạn là khi nào muốn đăng video trong bài đăng blogspot thì chèn đoạn mã tương ứng là ok. Phần này mình sẽ nói phía dưới, sau phần Sử dụng host của chính mình để lưu trữ JWplayer.

b) Tự sử dụng host của chính mình (cập nhật 02/12/2016):

Bạn chú ý hình này nhé!

 Đầu tiên bạn hãy download file *.zip của JWplayer về đã:


Bạn lựa chọn phiên bản của jwplayer tương ứng với cái bạn muốn và tải về, như trong ảnh phía trên thì có đến 5 loại ở phần download luôn đấy.

Sau khi đã tải về thì bạn chọn giải nén ra và vào thư mục của nó mở file jwplayer.js ra, bạn nên mở với một trình soạn thảo code sẽ dễ xem hơn và để đó, đọc tiếp ^^!!!

i) chèn key
Bạn quay lại trình duyệt, tùy theo phiên bản bạn tải về có cần key hay không mà làm tiếp, nếu không cần key thì bạn có thể bỏ qua bước chèn key này. Nếu player của bạn cần key để chạy thì bạn hãy copy key tương ứng, có chữ copy cho từng phiền bản đấy. Sau đó ở cuối tập tin jwplayer.js bạn đã mở phía trên thì bạn cho thêm dòng lệnh:
jwplayer.key="ABCDEF123456";
với ABCDEF123456 là key tương ứng của bạn.

ii) thiết lập mặc định:
Bạn có thể thêm vào cuối tập tin jwplayer.js trên các thiết lập mặc định cho player của bạn, ví dụ về thiết lập mặc định như sau (key của bạn cũng có thể chèn trong thiết lập mặc định này):
jwplayer.defaults = {
"aspectratio": "16:9",
"autostart": false,
"controls": true,
"displaydescription": true,
"displaytitle": true,
"flashplayer": "//ssl.p.jwpcdn.com/player/v/7.8.1/jwplayer.flash.swf",
"height": 260,
"key": "ABCDEF123456",
"mute": false,
"ph": 1,
"pid": "AsgB6MBG",
"plugins": {
"https://assets-jpcust.jwpsrv.com/player/6/6124956/ping.js": {
"pixel": "https://content.jwplatform.com/ping.gif"
}
},
"preload": "none",
"primary": "html5",
"repeat": false,
"skin": {
"active": "#00a894",
"background": "#452c2c",
"inactive": "#ffffff",
"name": "stormtrooper"
},
"stagevideo": false
"stretching": "uniform",
"visualplaylist": true,
"width": "100%"
};

Bên cạnh đó, tại những dòng phía dưới thì bạn cũng có thể thiết lập thông số mặc định cho trình phát của bạn như: có lặp lại hay không, chiều cao, chiều rộng mặc định, có hiển thị tiêu đề và mô tả hay không,...ngoài ra bạn cũng có thể tự thêm vài tham số mặc định khác nữa như: mặc định title là nmhillusion thì viết thêm dòng lệnh:
title: "nmhillusion",
muốn thêm mô tả mặc định thì cũng tùy bạn luôn, như này:
description: "Nhập mô tả của bạn vào //nmhillusion",
Chú ý là cuối mỗi dòng lệnh là dấu phấy, không được quên đấy, trừ dòng cuối.

Sau khi đã làm xong hết thì bạn lưu lại. Ví dụ của mình sau khi thiết lập và chèn vào tập tin jwplayer.js như sau:


Ok, tới upload thôi.

Bạn hãy upload cả thư mục mà bạn đã giải nén lên host của bạn. Sau đó copy lấy đường dẫn cập đến tập tin jwplayer.js trong thư mục đã upload.

Sau đó bạn truy cập vào blogger, vào phần tùy chỉnh HTML như cách thứ nhất, cũng tìm cụm từ </head> và chèn đoạn code sau vào phía trên thẻ </head> như cách 1:
<script type="text/javascript" src="địa chỉ file jwplayer.js tại host của bạn" />
Lưu lại mẫu và hoàn thành.

Ở đây mình xin hướng dẫn luôn cho bạn nào muốn dùng Google Drive làm host JWplayer.
Bạn truy cập vào Google Drive và chọn nơi bạn muốn đặt thư mục Host của JWplayer này. Chọn upload thư mục mà bạn đã giải nén lên. vào cài đặt chia sẻ là public, Sau đó bạn lấy link host của tập tin jwplayer.js trong thư mục này và thay vào địa chỉ trong đoạn code phía trên hoàn toàn bình thường.
Như hình:


Sau khi đã lấy link host thành công thì đoạn mã của bạn sẽ tương tự như:
<script type="text/javascript"src="https://googledrive.com/host/0B7tfL8Ndji5NT2hGMVlZMUpycm8" />

Cụ thể cách lấy link host này thì bạn hãy xem bài viết "Sử dụng Google Drive làm Host Free" của mình nhé!

[6]. Đoạn mã đăng video trong bài đăng blogspot:


Vào ngay vấn đề chính, đây là đoạn mã chúng ta cần:
<div id="videoPlayer">
</div>
<script type="text/javascript">
jwplayer
('videoPlayer').setup({
file
'https://www.youtube.com/watch?v=SZFZx4lNy1g',
});
</script>
Trong đó, videoPlayer là tên tùy ý bạn đặt
file: "link của video" là để cung cấp đường dẫn đến video muốn chèn.
Những thông số khác thì mình đã để trong phần cài đặt mặc định phía trên mà mình có nói nên ở đây mình không nhắc lại nữa. Ngoài ra, nếu bạn muốn tùy chỉnh lại JWplayer cho riêng bài đăng cụ thể thì cứ việc thêm thiết lập vào ở đây.
Vd:
<div id="videoPlayer">
</div>
<script type="text/javascript">
jwplayer
('videoPlayer').setup({
file
'https://www.youtube.com/watch?v=SZFZx4lNy1g',
autostart: 1,
primary: "html5",
});
</script>
Vậy là hoàn tất, bạn cứ việc lưu lại bài đăng và video của bạn đã được chèn. Chúc bạn thành công nhé, có gì thắc mắc thì bạn cứ trao đổi, mình sẽ trả lời trong khả năng của mình./ :}


Sunday, September 3, 2017

6:17 AM

Hướng dẫn cách làm Popup chuyên nghiệp cho Blogspot

Popup là một cách quảng cáo hiệu quả trên các website tin tức - chia sẻ nhằm quảng cáo chương trình, sự kiện, bán hàng...

Bài viết này  xin được copy trên phamhuuthanh.com và post lại trên weblog này để hướng dẫn cách chèn popup vào chân trang website một cách chuyên nghiệp dành cho những bạn nào chưa biết.

Công việc chèn này khá dễ nên hy vọng những bạn không biết quá nhiều về code cũng có thể chèn vào được.

Điều quan trọng đầu tiên trước khi thực hiện chèn popup vào website là bạn phải có quyền chỉnh sửa code trên website.

(Lưu ý: phần chữ tô đỏ trong phần code phía dưới sẽ là phần bạn có thể chỉnh sửa tùy theo ý mình)

Bước 1: Chèn code vào phần sau thẻ <head>

Bạn cần chèn đoạn code dưới đây vào sau thẻ <head> để quy định kiểu hiển thị của popup sẽ chèn. Cụ thể hơn cách chèn code:

- Với bạn nào sử dụng Blogspot: Truy cập quyền quản trị > Mẫu Chỉnh sửa HTML trong giao diện code html đó bạn tìm đến thẻ đóng </head> và chèn đoạn code phía dưới vào trước thẻ đóng đó.

Code cần chèn vào:

<!-- Script Popup-->
<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
 }
 }
</script>

<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>


Bước 2: Chèn code hiển thị popup

Dưới đây chính là đoạn code hiển thị popup, bạn cần chèn nó trước thẻ đóng </body>. Cụ thể hơn cách chèn code:

- Với Blogspot: Vẫn tiếp tục ở giao diện chỉnh sửa html (bước 1) tìm đến thẻ đóng </body> và chèn đoạn code dưới đây trước thẻ đóng đó.

Code cần chèn vào:
<!-- Code hien thi -->
<div id="mobile-hide" class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt [X]</a></div>
<div id="float_content_right">

<!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạn -->
<!-- End quang cao -->
</div>
</div>

Vậy là xong phần code để chèn quảng cáo. Bạn có thể tùy ý thêm ảnh hay đoạn text thế cho đoạn chữ đỏ ở code trên ( <!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạn -->)

Ví dụ: bạn muốn chèn 1 bức ảnh (link ảnh ví dụ: http://abc.com/anh.jpg) và khi người dùng click vào ảnh thì chuyển sang website đích (ví dụ website đích là http://xyz.net) thì bạn chèn đoạn code:

<a href="http://xyz.net" target="_blank"><img src="http://abc.com/anh.jpg"/></a>

Cảm ơn các bạn đã ghé qua website và hy vọng kiến thức chia sẻ tại đây bổ ích với bạn.
6:03 AM

SEO cho Blogger: Hướng dẫn tối ưu hóa Robot.txt

Ngoài các chức năng seo khác, tối ưu hóa file robot.txt cũng rất quan trọng.

Theo các bài hướng dẫn về Blogger bạn đã có thể tự tạo và đăng bài viết trên Blog để post lên mạng toàn cầu, tuy nhiên nhiều bạn chưa hiểu và không quan tâm tới file Robot.txt trong Blogger. Bài viết này sẽ hướng dẫn bạn tối ưu hóa file Robot.txt


Robots.txt là gì?
Robots.txt là một giao thức với một nhóm nhỏ các lệnh chỉ (báo) cho trình thu thập web biết rằng nên truy cập những phần nào trong web và những phần nào trong web không được truy cập.
Tác dụng chính của robots.txt là chỉ thị và điều hướng Googlebot (bọ tìm kiếm tên gọi của thuật toán tìm kiếm) vào những thông tin quan trọng trong web.

Các bước thực hiện tối ưu hóa file robot.txt như sau:

Bước 1: Đăng nhập Blogger.com và truy cập và Blogspot của bạn
Bước 2: Click vào [Cài đặt]
Bước 3: Click chọn [Tùy chọn tìm kiếm] trong phần "cài đặt"
Bước 4: Click chọn [Trình thu thập thông tin và lập chỉ mục] bên phải của [Tùy chọn tìm kiếm]
Bước 5: Click chọn [Robots.txt tùy chỉnh] --->> [Bật nội dung robots.txt tùy chỉnh]
Bước 6: Copy đoạn code chuẩn robots.txt cho blogspot dưới này vào khung nhập text và sau đó nhấp [Lưu lại]

  

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html


Lưu ý: Phần code Disallow: /search bạn có thể bỏ đi bởi chính sách SEO của Google bây giờ cho phép index cả trang Search Label này .
6:00 AM

SEO cho Blogger: Tối ưu hóa thẻ Heading H1, H2 và H3


Từ khóa rất quan trọng cho SEO và theo đó thẻ Heading h1 cũng rất quan trọng cho vấn đề SEO Blogger. Trong bài này chúng tôi sẽ hướng dẫn các bạn tối ưu hóa các thẻ heading h1, h2 và h3 trong blogger để tốt cho SEO.

Lưu ý:
  1. Chỉ có 1 thẻ h1 duy nhất trong 1 trang.
  2. Seo bài viết nào thì bắt buộc thẻ tiêu đề bài đó phải là h1.
Có thể có những mẫu Template dành cho Blogger đã tối ưu hóa thẻ H1, nhưng có những mẫu template lại chưa. Vì vậy chúng ta sẽ bắt đầu từ bước check xem Mẫu Template đã tối ưu chưa, nếu chưa mới tiếp tục tiến thành từng bước theo các hướng dẫn dưới.

1- Kiểm tra xem Blogger đã tối ưu thẻ h1 chưa


Truy cập bài viết bất kỳ của Blogger bằng trình duyệt Chrome,  (nếu chưa có bài nào thì hãy tạo một bài viết ngắn có đủ tiêu đề và nội dung).

Tại vị trí bất kỳ trên trang click phải chuột chọn Xem nguồn trang. Nhấn tổ hợp phím Ctrl+f tìm <h1.

Ví dụ trong bài viết: SEO cho Blogger: Tối ưu hóa Robot.txt tại xem nguồn trang mà thấy thẻ H1 duy nhất và cũng chính là tiêu đề bài viết như hình dưới>


Việc của bạn khì thấy blog có duy nhất 1 thẻ h1 và cũng chính là tiêu đề bài viết thì hãy thoát khỏi bài viết này bởi mẫu Template blog bạn đã tối hóa h1!

Các trường hợp còn lại, có thể xảy ra các trường hợp như: có 2 hoặc nhiều thẻ h1, thẻ h1 không phải tiêu đề bài viết... thì bắt buộc phải chỉnh sửa mẫu Template của Blog để tối ưu.

2- Tối ưu thẻ h1 cho Blogger


Để chỉnh sửa Code trong blogspot thì bạn truy cập Blogger -->>> [Chủ đề] -->>> [Chỉnh sửa Html]
Click vào khung code, nhấn tổ hợp phím Ctr+F, gõ tìm đoạn code sau:


<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

và sửa thành :


<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:blog.pageType != “static_page”‘>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class=’post-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’ expr:title=’data:post.title’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

Chỉnh sửa CSS cho thẻ <h1>, tìm đến dòng

.post h3 {…}
.post h3 a, .post h3 a:visited {…}
.post h3 a:hover {…}

và sửa thành


.post h1, .post h3 {…}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…}
.post h1 a:hover, .post h3 a:hover {…}

Lưu lại và kiểm tra kết quả như phần 1- Kiểm tra xem Blogger đã tối ưu thẻ h1 chưa.

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