Thủ thuật trong bài viết :
1. Code Tự động tải lại trang (Auto Refresh Page) cho Blogspot
2. tạo Responsive dropmenu màu đen từ CSS3 cho blogspot/web
3. Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blogspot :
4. Tạo bộ Tag, Keyword cho bài viết trong blogspot :
5. Tạo Menu Responsive Chuẩn HTML5 đẹp cho Blogger :
6. Floating menu: Tạo menu cố định khi scroll chuột :
7. Cách tùy chỉnh widget hiển thị trong Blogspot bằng CSS :
8. Tạo khung "thêm tiện ích" để chèn thêm widget :
1. Code Tự động tải lại trang (Auto Refresh Page) cho Blogspot (Code tham khảo Không khuyến khích sử dụng) :
1. Code Tự động tải lại trang (Auto Refresh Page) cho Blogspot
2. tạo Responsive dropmenu màu đen từ CSS3 cho blogspot/web
3. Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blogspot :
4. Tạo bộ Tag, Keyword cho bài viết trong blogspot :
5. Tạo Menu Responsive Chuẩn HTML5 đẹp cho Blogger :
6. Floating menu: Tạo menu cố định khi scroll chuột :
7. Cách tùy chỉnh widget hiển thị trong Blogspot bằng CSS :
8. Tạo khung "thêm tiện ích" để chèn thêm widget :
1. Code Tự động tải lại trang (Auto Refresh Page) cho Blogspot (Code tham khảo Không khuyến khích sử dụng) :
* Cách 1 Dán đoạn mã Code sau ở phía dưới thẻ <head> và Lưu mẫu.:
<meta content='30' http-equiv='refresh'/>
* Cách 2 Thêm tiện ích => HTML/JavaScript và sau đó dán đoạn mã code dưới đây vào và Lưu lại.
<script type="text/javascript">
function reFresh() {
window.open(location.reload(true)) }
window.setInterval("reFresh()",30000);
</script>
Tùy nhiên dùng Plugin để tăng lượng độc giả, tăng lưu lượng truy cập cho Blogspot thì các bạn có khả năng bị google phạt từ cảnh cáo tới xóa vĩnh viễn không phục hồi lại Account.
Thay vào đó nếu bạn dùng Trình duyệt Firefox thì có thể sử dụng : add-ons ReloadEvery là tiện ích bổ sung (add-ons) được thiết kế riêng cho Firefox để trình duyệt này có thể tự động tải lại trang web đang mở sau khoảng thời gian nhất định (Link bài viết ở đây.)
2. tạo Responsive dropmenu màu đen từ CSS3 cho blogspot/web:
Thêm đoạn code sau trước thẻ ]]></b:skin>:
#nav{padding:15px 0 0;height:46px}
#menu{float:left;width:472px}
#menu a{display:block}
#menu a:hover{text-decoration:none}
#menu .title{position:relative;z-index:100;padding:5px 10px;font-size:14px;line-height:20px}
#menu li{float:left}
#menu li:hover .title,#menu li .nav{background:#2c2a28}
#menu li:hover .title{color:#ddd}
#menu li:hover .nav{left:auto}
#menu li .nav{position:absolute;z-index:101;left:-999em}
#menu li .nav a{color:#ddd}
#menu li .nav a:hover{color:#066}
#menu li .nav h3{margin:5px 10px;color:#666}
#menu li .nav li{width:100%}
#menu li .nav li.links{width:100%!important}
#menu li .nav .border-top{border-top:1px solid #444}
#menu li .nav .border-right{border-right:1px solid #444}
#menu li .nav .border-left{border-left:1px solid #444}
#menu .horizontal{padding:5px 0}
#menu .horizontal a{margin:5px}
#menu .horizontal ul{padding:0 5px}
#menu .vertical{padding:0 10px}
#menu .vertical a{margin:5px 0}
#menu .vertical ul{float:left;padding:5px 0;width:100%}
#menu .cloumn{width:150px}
#menu .cloumn3{width:340px}
.cloumn3 li {float: left;width: 33%!important;}
li {text-align: -webkit-match-parent;}
ul {list-style-type: none;}
.left {float: left;}
.right{float:right}
@media screen and (max-width:658px){
#menu,#menu .cloumn,#menu .cloumn3{width:auto}
}
/* button in menu */
.button{margin: 0 40%;
width: auto;
cursor: pointer;
background-color: #248AB0;
background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
background-image: -moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
background-image: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
background-image: -o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.26));
border-width: 2px;
border-color: white;
position: relative;
top: -3px;
color: #ebebeb;
font-weight: bold;
line-height: normal;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0,0,0,.3);
padding: 7px 15px 7px;
white-space: nowrap;text-decoration: none;
}
* Chèn đoạn code bên dưới vào vị trí bạn muốn hiển thị menu :
<div id="menu">
<ul>
<li onmouseover="">
<h2 class="title">Toppic<small>▼</small></h2>
<div class="nav horizontal">
<div class="left cloumn">
<h3>Facebook</h3>
<ul>
<li><a href="#" title="Chữ đẹp">Chữ face đẹp</a></li>
<li><a href="#" title="Mặt cười cho facebook">Mặt cười</a></li>
</ul>
</div>
<div class="left cloumn3 border-left border-right">
<h3>Blogger tip</h3>
<ul>
<li><a href="#" title="Mô tả 1">Tiêu đề 1</a></li>
<li><a href="#" title="Mô tả 2">Tiêu đề 2</a></li>
<li><a href="#" title="Mô tả 3">Tiêu đề 3</a></li>
<li><a href="#" title="Mô tả 4">Tiêu đề 4</a></li>
<li><a href="#" title="Mô tả 5">Tiêu đề 5</a></li>
<li><a href="#" title="Mô tả 6">Tiêu đề 6</a></li>
<li><a href="#" title="Mô tả 7">Tiêu đề 7</a></li>
<li class="links"><a class="right button small" href="#" title="Mô tả 8">Button</a></li>
</ul>
</div>
<div class="left cloumn">
<h3>Photoshop</h3>
<ul>
<li><a href="#" title="Mô tả 10">Tiêu đề 10</a></li>
</ul>
</div>
</div>
</li>
<li onmouseover="">
<h2 class="title">Tiêu đề 3 <small>▼</small></h2>
<div class="nav vertical cloumn">
<ul>
<li><a href="#" title="Mô tả 11">Tiêu đề 11</a></li>
<li><a href="#" title="Mô tả 12">Tiêu đề 12</a></li>
<li><a href="#" title="Mô tả 13">Tiêu đề 13</a></li>
<li><a href="#" title="Mô tả 14">Tiêu đề 14</a></li>
<li><a href="#" title="Mô tả 15">Tiêu đề 15</a></li>
</ul>
</div>
</li>
</ul>
</div>
3. Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) trong Blogspot :
* Vào Blog => Mẫu => chọn Chỉnh sửa HTML Dán đoạn mã Code sau lên phía trên thẻ </head> sau đó lưu lại.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://www.windows2it.com/"])').attr('rel', 'nofollow');
jQuery('a[href*="https://"]:not([href*="http://www.windows2it.com/"])').attr("target", "_blank");
});
</script>
4. Tạo bộ Tag, Keyword cho bài viết trong blogspot :
* Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.:
.keywords {
width:520px; /*độ rộng của phần hiển thị từ khóa*/
float:left;
margin:0px 0px 5px 0px;
border-bottom: 1px #fff dashed;
font-size:12px; /*cở chữ*/
font-family:arial; /*font text*/
color: #F4A460;
padding:1px;
}
.keywords a{
color: #8B4726
}
.keywords a:hover{
color: #0000CD
}
* Chú ý thông số :
#F4A460 Là màu chữ Tags.
#8B4726 Là màu của từ khóa khi chưa rê chuột.
#0000CD Là màu của từ khóa khi rê chuột vào.
* Tìm đoạn code sau (Bấm Ctrl + F trên bàn phím):
<data:post.body/>
* Thay thế nó bằng đoạn code sau :
<b:if cond='data:blog.pageType != "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var keyword_collect = [
"Adsense","Ajax","âm nhạc","ảnh","audio","axit","Ăn chơi","Ảnh nóng","Alexa","Ảnh vui","Alexa",
"bài gần đây","bài liên quan","bán dâm","banner","Bill Gates","blogger","blogspot","bookmark",
"cafe","cấu hình","chơi đàn","chồng","clip","cơ bản","cơ sở","con gái","công cụ","CSS","cua gái","comment","Chuyện ấy","cute girl","Crack","cine",
"đại gia","đàn bà","đàn ông","Dashboard","Desktop","địa chỉ ip","điện thoại","domain","download","down nhạc","design","DVDrip","HDrip",
"editor","email","Explorer","Ebooks",
"feedburner","file","FireFox","flash","Form comment",
"GA","gà cáo","ghita","Gmail","Google","google.com","GTalk","guitar","giới tính","giới trẻ",
"Hà Nội","hacking","hacker","hexa","hình","Hoa Kỳ","hóa học","học sinh","HTML","Huế","Hot girl","Hot Link","Học đường","học trò","Hài hước",
"image","Internet","IPhone",
"java","javascript","jquery","js","json",
"kinh tế","khoa học","kiến thức","kinh nghiệm","keygen","kiếm tiền","kontactr",
"làm tình","lập trình","Linux","love","Lưu Diệc Phi","lời khuyên",
"mạng cộng đồng","Media","menu","Mobile","Mozilla","MP3","MP4","MS Office","mua dâm","music","Mỹ","Mẹo","Mootools","Mediafire","Megaupload","Máy tính",
"Nga","nghệ thuật","ngoại tình","nhắn tin","nhật ký","nick","Nghệ thuật sống","Notrasdamus","Navbar","Nude","Ngày ấy","ngộ nghĩnh",
"Office","Opera","office",
"Phi Phi","phụ nữ","Portable","Phim hot","Photoshop","papazazi","phim","Phim bộ",
"Sài Gòn","sát thủ","sinh học","sinh lý","sinh viên","SMS","soft","sothink","sofwware","scandal",
"Tây Ninh","tên miền","thất tình","thư điện tử","thủ thuật","thương mại","tìm kiếm","tin tức","tình dục","tình yêu","toán","tool","top","TP HCM","TP. Hồ Chí Minh","Trảng Bàng","Trung","tiện ích","tỏ tình","teen","tự sướng","template","thumbnail","truyện cười","truyện ngắn","thằng nhỏ","trẻ em",
"Users online","Using",
"Rank","Read more","Recent posts","Related posts","Rapidshare",
"vật lý","video","Việt Nam","Vista","vợ",
"web","widget","window",
"xác suất","xe độ","xa xỉ",
"Yahoo","Yahoo 360","Yahoo Mail","Yahoo Mash","Yahoo Messenger","yahoo.com","yêu đương","Youtube","youtube.com"
]
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function makeKeywordForPost(mKF_id)
{
var content;
var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
if(isDOM) {
content = document.getElementById(mKF_id).textContent;
} else {
content = document.getElementById(mKF_id).innerText;
}
var str = "";
var link1 = "http://www.google.com/custom?num=10&hl=vi&sitesearch="+home_page2+"&safe=active&client"+"="+"pu"+"b"+"-"+"4673"+"536952"+"067"+"001"+"&channel=2050848750&cof=FORID%3A1%3BAH%3Aleft%3BCX%3ABlog%2520Search%2520Engine%3BL%3Ahttp%3A%2F%2Fwww.google.com%2Fcoop%2Fintl%2Fvi%2Fimages%2Fcustom_search_sm.gif%3BLH%3A65%3BLP%3A1%3BLC%3A%230000ff%3BVLC%3A%23663399%3BGFNT%3A%230000ff%3BGIMP%3A%230000ff%3BDIV%3A%23336699%3B&adkw=AELymgVLQ1pCgQ1HkGAZON5Ler9SjqKIlb-EpWbmPXOLco0m2rF7o0kpQwgiMj010xBmPliz5EvXVi7Gf8yNKr_D_X9kkLWWtOK6ZKU2Ac1jbzP6nm3hy9s&q=%22";
var link2 = "%22&btnG=T%C3%ACm+ki%E1%BA%BFm&cx=partner"+"-p"+"ub-"+"467"+"35"+"36952"+"0670"+"01";
for(var j=0;j<keyword_collect.length;j++){
if(content.indexOf(" "+keyword_collect[j]+" ")!=-1){
str += '<a href="'+link1+encodeURIComponent(keyword_collect[j])+link2+'">'+keyword_collect[j]+'</a>, ';
}
}
str = (str!="") ? keyword_text + str : keyword_text + "no keyword";
document.write(str);
}
//]]>
</script>
<div class='keywords'>
<script type='text/javascript'>
home_page2 = "namkna.blogspot.com";
keyword_text = "<b>Từ khóa :</b> ";
window.onLoad = makeKeywordForPost("post_body");</script>
</div>
</b:if>
5. Tạo Menu Responsive Chuẩn HTML5 đẹp cho Blogger (*Menu iChiaSe.Biz*) :
* Dán đoạn code sau trước thẻ ]]></b:skin>
/*Menu iChiaSe.Biz*/
#menu{background:#098047;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc;box-shadow: inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#06703D;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
/*Responsive menu*/
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
* Đặt đoạn code sau tại vị trí mà bạn muốn hiển thị thanh Menu. Đơn giản bạn hãy đặt tại vị trí code menu cũ của bạn!:
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Menu</span></label>
<ul>
<li><a href='/' rel='nofollow' title="RSS">RSS</a></li>
<li><a class='prett' href='/' title="/">Blogger</a>
<ul class='menus'>
<li><a href='/' title="Templates">Templates</a></li>
<li><a href='/' title="HTML5">HTML5</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=vi_VN%7cen&amp;hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
6. Floating menu: Tạo menu cố định khi scroll chuột :
* Dán đoạn code sau trước thẻ ]]></b:skin>
#fixNav{
width: 100%;
height: 35px;
background-color: #0082bb;
display: block;
box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
top: 0; /*Nằm trên cùng*/
left: 0; /*Nằm sát bên trái*/
z-index: 100000; /*Hiển thị lớp trên cùng*/
}
#fixNav ul{
margin: 0;
padding: 0;
}
#fixNav ul li{
list-style:none inside;
width: auto;
float: left;
line-height: 35px; /*Cho text canh giữa menu*/
color: #fff;
padding: 0;
margin-right:10px;
position: relative;
}
#fixNav ul li a{
text-transform: uppercase;
white-space: nowrap; /*Cho chữ trong menu không bị wrap*/
padding: 0 10px;
color: #fff;
display: block;
font-size: 0.8em;
text-decoration: none;
}
/*CSS Style cho Submenu*/
#fixNav ul li ul {
position: absolute;
width: auto;
display: none;
background-color: #252525;
border-bottom: 3px solid #0082bb;
padding-left: 5px;
}
#fixNav ul li ul li{
display: block;
padding:0;
margin: 0;
float: none; /*Bỏ float cho li cấp thứ 2*/
}
/* Hover cho submenu */
#fixNav ul li:hover {
/* Hover thì li sẽ đổi màu*/
background-color: #252525;
}
#fixNav ul li:hover ul{
/*Display ra submenu*/
display: block;
}
/*Không copy cái này, dùng tăng padding top bottom để demo cuộn*/
p{
padding-top: 80px;
padding-bottom: 80px;
}
* Đặt đoạn code sau tại vị trí mà bạn muốn hiển thị thanh Menu. Đơn giản bạn hãy đặt tại vị trí code menu cũ của bạn!:
<nav id="fixNav">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Izwebz Store</a></li>
<li><a href="#">Newbie</a></li>
<li>
<a href="#">Video</a>
<ul class="sub-menu">
<li><a href="#">Html & CSS</a></li>
<li><a href="#">PHP & MySQL</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</nav>
7. Cách tùy chỉnh widget hiển thị trong Blogspot bằng CSS :
* Thêm đoạn code này vào trước thẻ </body>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#HTML1 {display: none;}
</style>
</b:if>
Trong đó:
+ {display:none;} sẽ làm ẩn nội dung của id HTML1. Tương tự, bạn có thể thêm tất cả các widget khác vào ngay sau #HTML1, ngăn cách nhau bởi dấu phẩy là được.
+ <b:if cond='data:blog.pageType == "item"'> bạn sẽ thay bằng đoạn code ẩn, hiện nội dung như các đoạn code ở trên. Với đoạn code ở ví dụ này, có nghĩa là cho phép hiển thị widget HTML1 tại trang bài viết!
8. Tạo khung "thêm tiện ích" để chèn thêm widget :
Bấm phím Ctrl+F tìm chữ class='header' id='header') Và tìm thấy đoạn code sau :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Bây giờ bạn thay chữ "no" thành chữ "yes" và xoá bỏ maxwidgets='1'
Lưu mẫu và trở vào Bố cục (Layout) bạn sẽ thấy xuất hiện khung "Thêm tiện ích" nằm phía trên và dưới thanh tiêu đề
