Sửa lỗi ảnh tràn ra ngoài khung bài viết

Nguồn: Sưu tầm 



Giới thiệu: Đôi khi ảnh trên blog của bạn bị tràn ra cả ngoài, trông rất là xấu. Vì vậy để định ảnh không tràn ra ngoài khung bài viết ta cần quy định chiều ngang tối đa cho phép của ảnh, khi đó nếu ảnh quá to sẽ tự thu nhỏ lại theo kích thước quy định. 

Điều chỉnh kích thước MIN và MAX của ảnh hiển thị: Với hình ảnh to hơn giá trị MAX thì sẽ tự động điều chỉnh về giá trị MAX. Nếu ảnh nhỏ hơn giá trị MIN thì sẽ tự điều chỉnh về kích thước MIN. 



CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng .post img { hoặc img { hoặc .data-post img { ,...

- Thêm sau nó đoạn code CSS sau:

max-width:500px; /*Chiều rộng tối đa*/
    min-width:200px; /*Chiều rộng tối thiểu*/
    clear: both;
}

- Nếu không có thì tìm dòng ]]></b:skin> 

- Thêm vào trước nó đoạn code CSS sau:

.post img {
    max-width:500px; /*Chiều rộng tối đa*/
    min-width:200px; /*Chiều rộng tối thiểu*/
    clear:both;
}

Bước 2: Save template. (Lưu mẫu)

Cấm click chuột phải trên Web, Blog

Nguồn: Sưu tầm 



Giới thiệu: Vì một lý do nào đó mà bạn không muốn mọi người ghé thăm website hay blog của bạn sử dụng chuột phải. Thì đoạn code sau sẽ giúp bạn việc này. 

Khi ta dùng chuột phải trên blog, thì lập tức một bảng thông báo sẽ xuất hiện. 

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Cấm click chuột phải trên Web, blog -->
<script language='JavaScript'>
var msg="KHÔNG ĐƯỢC CLICK CHUỘT PHẢI ĐÂU NHÉ!!!";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&amp;&amp;!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false")
</script>

Đoạn code trên là áp dụng cho cả Blog.


Mở rộng thủ thuật

1. Chỉ cấm click chuột phải ở trang bài viết

<b:if cond='data:blog.pageType == "item"'>
Code ở bước 1
</b:if>

2. Chỉ cấm click chuột phải ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code ở bước 1
</b:if>

3. Chỉ cấm click chuột phải ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>
Code ở bước 1
</b:if>

4. Chỉ cấm click chuột phải trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>
Code ở bước 1
</b:if>

5. Chỉ cấm click chuột phải ở trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>
Code ở bước 1
</b:if>

6. Chỉ cấm click chuột phải ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "LINK_của_trang_riêng_biệt"'>
Code ở bước 1
</b:if>

7. Cấm hết, chỉ trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>
Code ở bước 1
</b:if>

Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại.

== // Chỉ cấm click chuột phải ở trang ...
!= // Cấm click chuột phải hết ở các trang, trừ trang ...

Bước 2: Save template. (Lưu mẫu)

Không cho quét khối và copy văn bản

Nguồn: Sưu tầm 



Giới thiệu: Nếu bạn không muốn mọi người tùy tiện copy bài trên blog của bạn khi chưa được sự đồng ý của bạn, thì đoạn code sau sẽ giúp bạn vô hiệu hóa sự quét khối trên blog để ngăn việc copy các bài viết. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Không cho quét khối và copy văn bản -->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Đoạn code trên là áp dụng cho cả Blog.


Mở rộng thủ thuật

1. Chỉ cấm sao chép ở trang bài viết

<b:if cond='data:blog.pageType == "item"'>
Code ở bước 1
</b:if>

2. Chỉ cấm sao chép ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code ở bước 1
</b:if>

3. Chỉ cấm sao chép ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>
Code ở bước 1
</b:if>

4. Chỉ cấm sao chép trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>
Code ở bước 1
</b:if>

5. Chỉ cấm sao chép ở trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>
Code ở bước 1
</b:if>

6. Chỉ cấm sao chép ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "LINK_của_trang_riêng_biệt"'>
Code ở bước 1
</b:if>

7. Cấm hết, chỉ trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>
Code ở bước 1
</b:if>

Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại. 

== // Chỉ cấm sao chép ở trang ...
!= // Cấm sao chép hết ở các trang, trừ trang ...

Bước 2: Save template. (Lưu mẫu)

Vô hiệu hóa chức năng Copy, Paste

 




Giới thiệu: Với đoạn code này, mọi thao tác trên blog đều diễn ra bình thường, vẫn quét khối được, vẫn thấy chữ copy khi click chuột phải, nhưng khi paste vào đâu đó (như word, forum,…) thì không ra, vì chức năng sao chép này đã bị vô hiệu hóa.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm thẻ <body> 

- Thay thế bằng thẻ sau:

/*Vô hiệu hóa chức năng Copy, Paste*/
<body oncopy="return false" onpaste="return false" oncut="return false">

Bước 2: Save template. (Lưu mẫu)

Không cho click chuột phải lên hình ảnh

Giới thiệu: Với chức năng này, bạn sẽ không click chuột phải lên hình ảnh để “Save as” về máy được. Hay “Copy image url”,… Mục đích của thủ thuật này là ngăn không cho save ảnh về máy. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Không cho click chuột phải lên hình ảnh -->
<script>
$(function() {
$('img').bind("contextmenu", function(event_click) {
event_click.preventDefault();
});
});
</script>

Bước 2: Save template. (Lưu mẫu)

Button lên, xuống, vào giữa trang blog

Giới thiệu: Để tiện cho việc người khác lướt blog (web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang, hoặc nhảy vào giữa trang. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn code CSS sau:

/* Button lên, xuống, vào giữa trang blog (1)*/
#top-buttom_image {
   position:fixed;
  _position:absolute;

/*Vị trí đặt button*/
   bottom:5px;
   right:5px;

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

Bước 2: Tìm thẻ đóng </body>

- Thêm vào trước nó đoạn code sau:

<!-- Button lên, xuống, vào giữa trang blog (2) -->
<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>

<div id='top-buttom_image'>
<a href=' javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='LINK_HÌNH'/></a>
</div>

Thay LINK_HÌNH thành link ảnh button của bạn.


Bước 3: Save template. (Lưu mẫu)


Một số mẫu button

          

Tạo bài viết liên quan (Related Posts)

Giới thiệu: Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 

Bước 1: Tìm thẻ đóng </head> 

- Thêm vào trước nó đoạn code sau:

<!-- Widget bài viết liên quan (1) -->
<style>
/*Khung chính của bài viết liên quan*/
#related-posts {
    float:left;
    min-width: 100%;
    margin: 30px 5px 30px 0;
    font: 11px Tahoma;
}

#related-posts .widget { 
    List-style-type: none;
    margin: 5px 0 5px 0;
    padding: 0;
}

#related-posts .widget h2, #related-posts h2 {
    color: #940f04; 
    font-size: 20px;
    font-weight: normal;
    margin: 5px 7px 0;
    padding: 0 0 5px;
}

/*Màu link của bài viết liên quan*/
#related-posts a {
    color: #318686;
    font-size: 13px;
    text-decoration: none;
}

/*Màu link khi rê chuột vào*/
#related-posts a:hover {
    color: #C4436A;
    text-decoration: underline;
}

#related-posts ul {
    border: medium none;
    margin: 10px;
    padding: 0;
}

#related-posts ul li {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmuau5kGllZ3C-3vMyKrHctrIOEGLofauCzqyrAurFTymV_ir1ii6LPQdYMDPCje4Ug3eKJfhjr7taub9oUZwueHpfDP4Ja1C2bJko-g0vVXdiaZEHP5hyphenhyphenEnZhAoSNv1thU_4tmdBpjtSc/) no-repeat 0 0;
    margin: 0;
    padding: 0 0 1px 16px;
    margin-bottom: 5px;
    line-height: 2em;
    border-bottom:1px dotted #cccccc; /*Gạch đích dưới mỗi link bài viết liên quan*/
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>

Bước 2: Tìm dòng <data:post.body/>

- Thêm vào sau nó đoạn code sau:

<!-- Widget bài viết liên quan (2) -->
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">

  <div style='border-top:#AAAE95 1px dashed; margin: 0 50px 0 50px; padding-top:30px;'/>
<font face='Arial' size='3'><b>Bài viết liên quan: </b></font>

<font color='#FF0000'> <!-- Màu chữ label -->
<b:loop values='data:post.labels' var='label'> 
<data:label.name/> <!--Dòng code hiện label kế bên bài viết liên quan-->
<b:if cond='data:label.isLast != "true"'>
, <!--Dấu phẩy ngăn cách các label -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

max-results=8 // Số bài viết liên quan hiển thị

Lưu ý: Đối với những blog có tiện ích đọc thêm (Read more...) thì việc bạn đặt code trên trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>


Bước 3: Save template. (Lưu mẫu)

Tiện ích hiển thị tổng số bài viết và comment

Đăng bởi: Rua

Thứ tư, tháng tư 06, 2011

[29] 
Thủ thuật: Tiện ích hiển thị tổng số bài viết và comment 
Nguồn: [FD's BlOg] 



Giới thiệu: Với tiện ích này, tổng số lượng comment và số lượng bài viết trên blog sẽ được hiển thị. Tiện ích sẽ tổng kết số lượng bài viết và số lượng comment có trên blog để mọi người tiện theo dõi. Vị trí đặt trên blog thì tùy bạn.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Page Elements (Chỉnh sữa trang)

Bước 1: Chọn vị trí muốn thêm widget (tiện ích). Chọn Add a Gadget (Thêm tiện ích)

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!-- Tiện ích hiển thị tổng số bài viết và comment -->
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://haiphongclan.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://haiphongclan.blogspot.com.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

haiphongclan.blogspot.com // Nhớ thay cả 2 dòng thành địa chỉ blog của bạn.

Có thể thêm các code trang trí vào đoạn code trên, như màu nền, màu chữ, viền khung,…


Bước 2: Save. (Lưu)

Click chuột vào button, một hộp thoại hiển thị

Giới thiệu: Một trong những ứng dụng của tiện ích jQuery. Khi ta click chuột vào nút nhấn, một hộp thoại sẽ hiển thị.

Lưu ý là nội dung trong hộp thoại không được enter xuống hàng (nghĩa là phải viết liền trong một câu). Muốn cho câu xuống dòng thì space (tạo khoảng trắng nhiều cho đến khi thấy chữ xuống hàng là được).

Ví dụ: 

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. 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ớ thay jQuery.JS bằng link mới bạn vừa up lên host)

<script src='jQuery.JS' type='text/javascript'/>

4. Save template. (Lưu mẫu)

Bước 2: Cho vào bài viết, template, hoặc widget (tiện ích) với đoạn script sau:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Name").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK");
  });
});
</script>
<input type="button" value="Click me" id="Name"/>

("#Name") // Tên cho hộp thoại
id="Name" // Tên hộp thoại sẽ hiển thị.

- Nếu một trang hay bài viết sử dụng nhiều hộp thoại thì:

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#Name.1").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.1");
  });

  jQuery("#Name.2").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.2");
  });

  jQuery("#Name.3").click(function(){
    alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.3");
  });

});
</script>
<input type="button" value="Click me" id="Name.1"/>
<input type="button" value="Click me" id="Name.2"/>
<input type="button" value="Click me" id="Name.3"/>

Ba dòng cuối đặt ở vị trí nào cũng được.