Hướng dẫn tạo popup nhỏ góc màn hình

Ưu điểm :
– Chỉ Xuất hiện 01 lần khi Website mở.
– Cửa sổ trang rất nhỏ gọn ở góc màn hình

Code:

1 2 3

<script>function addEvent(obj,eventName,func){if(obj.attachEvent){obj.attachEvent("on"+eventName,func);}else if(obj.addEventListener){obj.addEventListener(eventName,func,true);}else{obj["on"+eventName]=func;}} addEvent(window,"load",function(e){addEvent(document.body,"click",function(e){var pX;pX=screen.width;if(!pX){pX=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;} if(pX>800){if(document.cookie.indexOf("pnpopup=popactive")==-1){document.cookie='pnpopup=popactive';params='width=50';params+=', height=50';params+=', top=1650, left=1460, resizable=no, scrollbars=yes, location=yes';var w=window.open("http://www.thuthuatblogspot.com",'window1',params).blur();window.focus();}}});});</script>​

Thay thuthuatblogspot.com bằng Website của bạn. 

Read More

Hướng dẫn tạo thanh Floating Social Sharing Bar cố định cực đẹp

Hướng dẫn tạo thanh Floating Social Sharing Bar Widget cho các bạn

Thanh widget này sẽ xuất hiện khi bạn kéo xuống ,cố định ngay trên đầu bài viết.Tuy nhiên nó chỉ hỗ trợ cho các social sau :  Twitter, Facebook, Google plus, Pinterest, StumbleUpon, Digg buttons.

Read More

Thêm Top Commentators Widget cho Blogspot

Thêm Top Commentators Widget cho Blogspot – Đang loay hoay sửa lại cái widget Top người comment nhiều nhất cho blog của mình thì gặp được bài này. Vậy là chôm về blog của mình luôn, :)))

Với widget này, blog của bạn sẽ trở nên hấp dẫn hơn, làm cho mọi người thích comment ở blog của bạn nhiều hơn để có được backlink. Điều tuyệt vời là widget này chỉ hiển thị danh sách người có URL cụ thể, chứ không hiển thị những người bình luận với tư cách nặc danh và Admin blog cũng không hiển thị.

Read More

Tạo plugin Twitter cập nhật tweet mới nhất bằng jQuery

Bạn muốn theo dõi những bình luận mới nhất từ trang Twitter? Plugin Twitter sẽ giúp tải những bình luận mới nhất của người dùng Twitter trên toàn cầu với chức năng lọc ngôn ngữ thô tục để tránh những nội dung xấu trên trang web của bạn.Plugin này còn có chức năng hỗ trợ tìm kiếm nhiều người dùng, hiển thị hình Avatar và đặc biệt là không làm chậm trang web khi các tweet đang hạ tải.

Xem Demo.
Sau đây là các bước cài đặt:

1. Đặt các file jQuery và javasctipt bên dưới vào trước thẻ </head>.

<style type="text/css">

/*JUITTER PLUGIN CSS*/

#juitter{width:550px;float:left;}

#juitterSearch{clear:both;padding:7px 0 5px 0;}

#juitterSearch P{font-size:1.2em;color:#2CAF1D}

#juitterSearch INPUT{padding:4px;border:solid 1px #666;width:250px;color:#666}

#juitterContainer{} /*Juitter container*/

#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */

/* Bellow the list of tweets "<li>" */

#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;} 

#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}

#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */

/* Bellow the CSS for the avatar image */

#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}

#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/

#juitterContainer .extLink{} /*CSS for the external links*/

#juitterContainer .hashLink{} /*CSS for the hash links*/

/*end of Juitter CSS*/

</style>

<script language="javascript" src="http://juitter.com/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>

<script language="javascript" src="http://juitter.com/app/js/jquery.juitter.js" type="text/javascript"></script>

<script language="javascript" src="http://juitter.com/app/js/system.js" type="text/javascript"></script>

Các các file trên thì file jquery-1.3.1.min.js là phần lõi jQuery để làm cho plugin hoạt động, file jquery.juitter.js là file lõi và cấu hình plugin, file system.js là file mẫu về cách làm cho plugin hoạt động trên trang web của bạn.

Tiếp đến cần tạo phần chứa nội dung plugin, đặt thành phần div với định dạng id như sau:

<div id="juitter">

<form method="post" id="juitterSearch" action="">

<p>Search Twitter: <input type="text" class="juitterSearch" value="Type a word and press enter" />

</p>

</form>

<div id="juitterContainer"></div>

</div>

Đặt phần code ở trên vào phần thân của trang web (giữa 2 thẻ <body>, </body>).

Read More

Tạo màu nền xen kẽ cho nhận xét

Chúng ta vừa mới biết cách tạo màu nền xen kẽ cho bài viết ở kiểu trang index (trang chủ, trang nhãn), từ đó chúng ta có thể vận dụng để tạo màu nền xen kẽ cho nhận xét theo như trang demo dưới đây.

DEMO

Việc áp dụng thủ thuật này có liên quan đến thủ thuật tạo số đếm nhận xét vì thế kết hợp hai thủ thuật lại với nhau để đơn giản hóa code, theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates. Đặt kịch bản gán lớp nhận xét chẳn và lẻ vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterComments(strx) {
var therest;
therest = CommentsCounter % 2;
if (therest == 0) {
document.getElementById(strx).className='evenComments';
} else {
document.getElementById(strx).className='oddComments';
}
}
//]]>
</script>

Bước 2. Tìm dòng <b:loop values='data:post.comments' var='comment'>

Và thay nó bằng đoạn code bên dưới:

<!-- đếm nhận xét từ Zero -->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- gắn ID cho từng nhận xét -->
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/> (dòng này hiển thị chữ says/said/nói, tùy theo Template bạn có thể đặt đoạn code bên dưới theo ý muốn) rồi chèn bên dưới nó bằng đoạn code sau:

<span class='comment-counter'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code bên dưới:

<!-- thiết lập lớp cho nhận xét -->
<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>

</div>

Bước 3. Đặt code CSS vào trước dòng ]]></b:skin>.

1. /* số đếm nhận xét */
2. .comment-counter {
3. float: right;
4. display: block;
5. width: 40px;
6. margin-top: -30px;
7. text-align: right;
8. font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
9. font-size: 28px;
10. font-weight: normal;
11. }
12. .comment-counter a:link, .comment-counter a:visited {color: #445566!important;}
13. .comment-counter a:hover, .comment-counter a:active {color: #FF9933!important;}
14. /* thuộc tính phân biệt nhận xét chẳn và lẻ */
15. .evenComments { /* nhận xét chẳn */
16. margin: 10px 0px;
17. padding: 5px 20px 0px;
18. background-color: #F0F0F9;
19. border:1px solid #DDD;
20. }
21. .oddComments { /* nhận xét lẻ  */
22. margin: 10px 0px;
23. padding: 5px 20px 0px;
24. background-color: #F0F8FF;
25. border:1px solid #DDD;
26. }

Về style cho CSS bạn có thể tự tùy biến và vận dụng linh hoạt cho blogspot của mình. Lưu Template là hoàn thành.
Nguồn Của Huỳnh Nhất Hà

Read More

Tạo Favicon đẹp cho website

TẠO FAVICON CHO WEBSITE

Favicon là biểu tượng xuất hiện dưới file ảnh ,nó dùng để làm biểu tượng cho công ty hay cá nhân hóa.

Read More

Tạo ảnh avatar cho comment trong blogger

Ngày này,việc làm đẹp giao diện comment rất quan trọng ,việc tạo avatar xuất hiện khi guest comment làm cho độc giả có hứng hơn khi comment .Điều này làm tăng khả năng khách quay lại thăm blog của bạn.

Read More