Chèn Like Fanpge Facebook vào Website Blogger

Chèn Like Fanpge Facebook vào Website Blogger

Sunday, January 31, 2016 / No Comments

Bạn đang muốn tạo 1 trang Fanpage và cho Fanpage này hiển thị vào website Blogspot của mình. Việc này cũng khá dễ thực hiện, chỉ cần vài thao tác là bạn sẽ đưa được nút Like Fanpage  vào Website.

Tại sao bạn lại cần chèn Fanpage vào Website?

Đơn giản vì Fanpage sẽ mang lại cho bạn nhiều thành viên trung thành với Website hay thương hiệu của bạn hơn bởi tính phổ cập của Facebook với mọi người. Giúp trang Blogger của bạn ngày càng được nhiều người yêu thích và có lẽ đó cũng là niềm vui và tự hào của mình về chính trang Blog của mình.

Facebook của bạn có bị chặn không?

Nếu bạn không thể truy cập vào Facebook.com đồng nghĩa với việc bạn không thể nào ra được 1 trang Fanpage Facebook để chèn vào Website. Để vào facebook, bạn có thể xem bài viết tại đây.

Hướng dẫn chèn code facebook vào Blogspot

Cách 1: Chỉnh sửa code chèn facebook vào

Đăng nhập blogspot => Vào phần Bố Cục => Thêm Tiện ích => Tìm đến HTML/Javascript (thêm nó vào) và cho đoạn code sau vào là Ok

<div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Collagenvieskin&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270"scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>

Những phần chữ màu đỏ bạn cần sửa lại:
- Thay https://www.facebook.com/Collagenvieskin thành link Fanpage Facebook của bạn
- width=245 là độ rộng của khung
- height=270 chiều dài khung

Cách 2: Tạo code facebook bằng trang hổ trợ của Facebook

Bước 1: Truy cập và đăng nhập tài khoản Facebook vào trang sau: https://developers.facebook.com/docs/plugins/like-box-for-pages

Bước 2: Tại đây, bạn có thể tùy chỉnh 1 số thông tin trong Like Box như: 

Bước 3: Sau khi đã thiết lập xong, bạn chọn Get Code và dùng code này để chèn vào Website. 

Lưu ý: Để đơn giản việc chèn code vào Website, khi Get Code bạn chọn vào tab Iframe.

Sau khi đã có được code bạn có thể chèn code vào Blogspot: 

Vào phần Bố Cục => Thêm Tiện ích => Tìm đến HTML/Javascript (thêm nó vào) và cho đoạn code sau vào là Ok

Như vậy bạn đã biết cách chèn Facebook vào Website rồi đấy.

Chúc bạn thành công.

Tạo số đếm thứ tự cho các comment

Tạo số đếm thứ tự cho các comment

Sunday, January 24, 2016 / No Comments

Giới thiệu: Tạo số đếm thứ tự cho các comment trên blog. Comment đầu tiên sẽ mang số 1, kế đến là số 2, và cứ thế đếm tiếp tục. Việc này sẽ giúp dễ theo dõi và tìm lại comment cũ hơn, vì chỉ cần nhớ số là dễ dàng tìm được.

Dùng thủ thuật này sẽ không hiển thị được tốt thủ thuật Tạo màu nền riêng biệt cho các comment – Nghĩa là sẽ không hiển thị được nhiều hình nền xen kẽ nhau, mà chỉ hiển thị được một màu nền đầu tiên.

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 <b:loop values='data:post.comments' var='comment'>

- Thay thế nó bằng đoạn code sau:

<!-- Tạo số đếm thứ tự cho các comment (1)-->

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

Bước 2: Tiếp tục tìm dòng <data:commentPostedByMsg/>

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

<!-- Tạo số đếm thứ tự cho các comment (2)-->

<span class='comment-number'>

<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

Bước 3: Kế đến kéo xuống dưới một chút sẽ thấy đoạn code:

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

- Thêm vào sau đoạn code trên thẻ đóng </div> 


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

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

/*Tạo số đếm thứ tự cho các comment (3)*/

.comment-number {

float: right;

background: url(LINK_HÌNH) no-repeat; /*Hình trang trí cho số đếm comment. Không dùng hình thì bỏ qua*/

margin-right: 4px; /*Vị trí số đếm comment*/

margin-top: 0px; /*Vị trí số đếm comment*/

text-align: center;

font-family: Verdana;

font-size: 12px;

font-weight: bold;

}

.comment-number a:link, .comment-number a:visited {

color: #ADADAD !important; /*Màu số đếm comment*/

text-decoration: none !important;

}

.comment-number a:hover, .comment-number a:active {

color: #FF9933 !important;

text-decoration: none !important;

}

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

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

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

/ No Comments

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
2. Chọn: Mẫu > Chỉnh sữa HTML

3. 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)

THE END.

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

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

/ No Comments

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 
2. Chọn: Mẫu > Chỉnh sữa HTML 

3. 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&&!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)

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

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

/ 1 Comment

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 
2. Chọn: Mẫu > Chỉnh sửa HTML 

3. 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)

Nếu bạn thấy bài viết hay thì có thể share đó là niềm động lực để mình viết tiếp. Nếu có bất cứ lỗi nào trong quá trình thực hiện có thể comment hoặc liên hệ với mình qua mục liên hệ.

Tạo màu nền riêng biệt cho các comment

Tạo màu nền riêng biệt cho các comment

Friday, January 22, 2016 / No Comments

Thủ thuật sẽ tạo ra các màu nền riêng xen kẽ nhau cho các comment, và sẽ lặp lại một cách tuần tự. Ví dụ như: Comment đầu tiên màu hồng, comment tiếp theo màu xanh, comment kế đến nữa lại màu hồng,… và cứ lặp tuần tự như vậy. 

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

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

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

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

/*Màu nền comment (1)*/

.comment-body.style1 {

background:#339966;

}

.comment-body.style2 {

background:#3366ff;

}

#339966: Mã màu xanh lá.
#3366ff: Mã màu xanh dương.

Bạn có thể đổi mã màu lại cho thích hợp với blog.


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

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

<!-- Màu nền comment (2) -->

<script type='text/javascript'>

$(document).ready(function(){

$(".comment-body:nth-child(2n+0)").addClass("style1");

$(".comment-body:nth-child(2n+1)").addClass("style2");

});

</script>

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

Hướng dẫn thêm

Như các bạn đã thấy, ở trên là hướng dẫn cho các bạn cách hiển thị tuần tự theo 2 màu nền, giờ sẽ hướng dẫn thêm vào thành 3, 4 màu tuần tự, tùy theo ý thích của bạn.

Thay đổi code ở bước 2 và 3 như sau:

- Ở Bước 2 thay vì code CSS chỉ có 2 dòng, thì ở đây ta tùy biến thêm nhiều dòng nữa để ứng với nhiều màu cho việc hiển thị nền comment.

/*Màu nền comment (1)*/

.comment-body.style1 {

background:#3366ff;

}

.comment-body.style2 {

background:#339966;

}

.comment-body.style3 {

background:#343434;

}

.comment-body.style4 {

background:#ccc;

}

- Ở Bước 3 thay vì Code javascript chỉ có 2 dòng 2n+0, 2n+1 // đây là code xác định các comment để hiển thị màu nền.

- Nếu bạn muốn lặp nó với 4 màu thì ta thay số 2 thành số 4, và thêm 2 dòng nữa, ta được: 4n+0, 4n+1, 4n+2, 4n+3.

<!-- Màu nền comment (2) -->

<script type='text/javascript'>

$(document).ready(function(){

$(".comment-body:nth-child(4n+0)").addClass("style1");

$(".comment-body:nth-child(4n+1)").addClass("style2");

$(".comment-body:nth-child(4n+2)").addClass("style1");

$(".comment-body:nth-child(4n+3)").addClass("style2");

});

</script>

- Mở rộng ra, bạn có thể thêm các thuộc tính khác vào các class (ở bước 2), để tạo nên sự khác biệt rõ ràng, như : màu chữ, font chữ, đường viền, căn lề,…

Save template. (Lưu mẫu)

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