[08] Tạo khung thông báo cho blog
Nguồn: Noct
Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.
Bạn có thể đặt khung ở vị trí bất kỳ trong blog sao cho dễ bắt mắt nhất.
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script.
Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)
1. Tải về máy một trong ba phiên bản jQuery sau: 1.3.1 | 1.3.2 | 1.4.3
2. Up lên host cho link direct.
- Gợi ý: Dùng host của google: http://code.google.com/
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.
3. Tìm thẻ <head>
- Thêm vào dưới nó đoạn code sau:
(Nhớ thayjQuery.JS bằng link mới bạn vừa up lên host)
2. Up lên host cho link direct.
- Gợi ý: Dùng host của google: http://code.google.com/
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.
3. Tìm thẻ <head>
- Thêm vào dưới nó đoạn code sau:
(Nhớ thay
<script src='jQuery.JS' type='text/javascript'/>
4. Save template. (Lưu mẫu)
Bước 2: Tìm thẻ đóng </body>
- Thêm vào trước nó đoạn code sau:
<!-- Khung thông báo cho blog -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/*Khung thông báo*/
.notification{
height:70px;
width:500px;
display:block;
position:fixed;
/*Vị trí của khung thông báo trên blog*/
bottom:10px;
left:10px;
/*Taọ bóng và bo góc*/
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*Hiệu ứng bóng đổ*/
-moz-box-shadow:2px 2px 2px #cfcfcf;
-webkit-box-shadow:2px 2px 4px #cfcfcf;
box-shadow:2px 2px 2px #cfcfcf
}
/*Dấu X đóng khung thông báo*/
.notification span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbNUARe7Ms09ie3x0GZRuBYR11TEc7zkD9ki16b8jjLNQT4N4fnK6XPEZZOtlehBnU8LIpGjGVTTpue0Qg7h-6uGhmGNWCGDtdLYv3V12C_Pm9de13LtwCpCVqMyCvL89s0b-r3o5omY/) no-repeat right top;
cursor:pointer;
display:block;
width:48px;
height:48px;
position:absolute;
/*Vị trí dấu X*/
top:-20px;
right:-25px
}
/*Màu chữ, font, canh lề trong khung thông báo*/
.notification p{
width:400px;
font-family:Arial,Helvetica,sans-serif;
color:#323232;
font-weight:bold;
font-size:14px;
line-height:21px;
text-align:left;
float:right;
margin:10px 15px 0 0;
margin-top:15px;
text-shadow:0 0 1px #f9f9f9 /*for lt IE8*/padding:0;/* TEXT SHADOW */
}
/*Viền khung thông báo*/
.warning{
border-top:1px solid #fefbcd;
border-bottom:1px solid #e6e837;
/*Nền khung kiểu Gradients*/
background:#feffb1;
background:-moz-linear-gradient(top,#feffb1,#f0f17f);
background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))
}
/*Hình Waring*/
.warning:before{
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1AZwFk0zO5hIJZwygb80RR4qc0t9jJqzTogPshLKMtMHunTxlNkxKw3lLELE9qMxD1e4C3ulYXrIZ0UDzWzGTJ5Z3bYNLhgOzUE_CPHJhCexv_u0rVlF9M7hjiHg0rr-xdwpXoqoOr4/);
float:left;
margin:0px 10px 0 0px
}
/*Chữ Warning*/
.warning strong{
color:#e5ac00;
margin-right:15px
}
</style>
<script type='text/javascript'>
$(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>ĐÂY LÀ MỘT THÔNG BÁO! CLICK VÀO NÚT ĐỎ CÓ DẤU X BÊN PHẢI ĐỂ TẮT!!!</p></div></b:if>
Bước 3: Save template. (Lưu mẫu)
[07] Ẩn ngày đăng bài viết
Nguồn: Sưu tầm
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script
Bước 1: Tìm dòng code CSS có dạng sau:
h2.date-header {
...
}
Hoặc có template có dạng:
.date {
...
}
Bước 2: Thêm dòng code display:none; vào trước vào trước dấu }
- Ta được đoạn code có dạng sau:
h2.date-header {
...
display:none; /* Ẩn ngày đăng bài viết*/
}
Bước 3: Save template. (Lưu mẫu)
[06] Điều chỉnh số bài viết hiển thị ở trang Nhãn
Nguồn: Sưu tầm
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script
Bước 1: Tìm dòng expr:href='data:label.url'
- Thay thế nó bằng dòng code sau:
expr:href='data:label.url + "?max-results=10"'
Thay số 10 thành số bài mà bạn muốn hiển thị.
Tìm được bao nhiêu kết quả thì thay bấy nhiêu. (Thông thường là 3)
Bước 2: Save template. (Lưu mẫu)
[05] Chèn thêm tiện ích vào Header và Main
Nguồn: [FD's BlOg]
Vì thế mà mỗi khi ta muốn chèn thêm các widget (tiện ích) cho phần Main hoặc Header thì ta phải tạo các widget ở Sidebar hoặc ở Footer rồi di chuyển tới chỗ cần hiển thị. Như vậy rất rườm rà, thủ thuật sau sẽ giúp bạn thêm tiện ích này ở cả Header và Main.
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script
Bước 1: Chèn cho phần Header
- Tìm dòng code có dạng (hoặc tương tự) sau:
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
- Sau đó thay no bằng yes là OK.
Bước 2: Chèn cho phần Main
- Tìm dòng code có dạng (hoặc tương tự) sau:
<b:section class='main' id='main' showaddelement='no'>
- Sau đó thay no bằng yes là OK.
Bước 3: Save template. (Lưu mẫu)
[03] Tạo nút ẩn hiện các widget (tiện ích) khi click vào
Nguồn: [FD's BlOg]
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chèn script
Bước 1: Xác định ID widget muốn tạo nút ẩn/hiện
- Chon Bố cục.
- Bấm Chỉnh sữa vào widget muốn lấy ID.
- Nhìn lên thanh địa chỉ, dòng chữ phía sau cùng chính là ID của widget.
Bước 2: Chọn Mẫu > Chỉnh sữa HTML
- Bấm Ctrl+F > Gõ ID của widget muốn tạo nút ẩn/hiện.
- Khối code tìm được có dạng tương tự như sau:
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' type='BlogArchive'/>
............ .....
</b:widget>
- Ví dụ: ID widget ở đây mình muốn thao tác là BlogArchive1
Bước 3: Tìm trong khối code đó đoạn code:
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
- Thêm vào trước nó đoạn code sau:
<!-- Nút ẩn/hiện widget (1) -->
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left; margin-right:5px;">');
//]]>
</script>[▼/▲]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>
float:left // Nút ẩn/hiện nằm bên trái.
margin-right:5px // Khoảng cách nút cách tên widget về phía tay phải là 5px.
margin-right:5px // Khoảng cách nút cách tên widget về phía tay phải là 5px.
- Và thêm vào sau nó đoạn code sau:
<!-- Nút ẩn/hiện widget (2) -->
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
display:none // Ẩn sẵn, click vào nút ẩn/hiện mới hiện.
display:block // Mặc định không ẩn, click vào nút ẩn hiện để ấn nếu muốn.
display:block // Mặc định không ẩn, click vào nút ẩn hiện để ấn nếu muốn.
Bước 4: Tìm tiếp dòng code <b:include name='quickedit'/>
- Thêm vào trước nó đoạn code sau:
<!-- Nút ẩn/hiện widget (3) -->
<script type='text/javascript'> //<![CDATA[ document.write('</div>'); //]]> </script><script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>
Bước 5: Save template. (Lưu mẫu)
THE END.
[02] Tạo nút Read More (Đọc thêm) một cách tự động
Nguồn: Anh Võ
Tuy đã tự động Readmore cho blog nhưng blog vẫn sẽ tải toàn bộ nội dung của các bài viết. Để giảm thời gian tải của blog, bạn nên kết hợp thêm chức năng “Read more” có sẵn của Blogspot. Thực hiện việc này cũng có nghĩa là sẽ ngăn chặn được việc hay mất bài viết trên blog.
CÁCH THỰC HIỆN
1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML
3. Chèn script
Bước 1: Tìm dòng <data:post.body/>
- Thay thế nó bằng đoạn code sau:
<!-- Tạo Read More (Đọc tiếp) một cách tự động V4 (1) -->
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>
ĐỌC TIẾP »
</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Thay chữ ĐỌC TIẾP » thành chữ khác nếu bạn muốn. Hoặc nếu muốn dùng hình ảnh thì bạn thay chữ
<img src="Link_ảnh"/>
Bước 2: Tìm thẻ đóng </head>
- Thêm vào trước nó đoạn code sau:
<!-- Tạo Read More (Đọc tiếp) một cách tự động V4 (2) -->
<style type='text/css'>
.thumbnailimg IMG {
max-width:186px;
width: expression(this.width > 186 ? 186: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
nofloat: left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = true; // Dùng kiểu mới chọn flase, true là kiểu cũ
var summary_noimg = 60; // Số từ tối đa khi bài viết không có ảnh nào
var summary_img = 60; // Số từ tối đa khi bài viết có ảnh
var indent = 3; // Số kí tự thụt vô đầu dòng
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--s*mores*-->/)[0];
}
function getSummaryImproved(post,max){
var re = /<.*?>/gi
var re2 = /<br.*?>/gi
var re3 = /(</{1}p>)|(</{1}div>)/gi
var re4 = /(<style.*?/{1}style>)|(<script.*?/{1}script>)|(<table.*?/{1}table>)|(<form.*?/{1}form>)|(<code.*?/{1}code>)|(<pre.*?/{1}pre>)/gi
post = post.replace(re4,'')
post = post.replace(re3,'<br /> ').split(re2)
for(var i=0; i<post.length; i++){
post[i] = post[i].replace(re,'');
}
var post2 = new Array();
for(var i in post) {
//if(post[i]!='' && post[i]!=' ' && post[i] != 'n') post2.push(post[i]);
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
s = post2.join(indentBlank +' <br/>');
} else {
var i = 0;
while(s.split(' ').length < max){
s += indentBlank + ' ' + post2[i]+'<br/>';
i++;
}
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--s*mores*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
summ = summary_img;
} else {
imgtag = '<div class="thumbnailimg" align="left"><img src="'+img[0].src+'" /></div>';
summ = summary_img;
}
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + ' ... </div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>
Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:
- 186 và 120 lần lượt là chiều rộng và chiều cao của ảnh thumbnail. Nếu thay, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần. Dùng max- phía trước là để giữ nguyên tỷ lệ ảnh khi thumbnail. Nếu muốn đồng nhất như nhau thì bạn bỏ chữ
- no-float là chế độ hiển thị ảnh theo kiểu Gallery (ảnh nằm trên, chữ nằm phía dưới).
Bạn có thể đổi no-float thành float để cho ảnh của bạn hiện dồn về trái (hoặc phải), và chữ nằm ở phần ngược lại.
Bước 3: Save template. (Lưu mẫu)
