Update tiện ích recent posts

Người đăng: yeu mai em on Thứ Tư, 25 tháng 5, 2011

Từ trước đến giờ đa số các tiện ích recent posts có 1 hạn chế nhỏ mà mọi người dễ dàng thấy, đó là việc hiện thị summary cho bài viết ko được tốt cho lắm. Ở 1 số bài viết, phần summary bị mất chữ, nguyên nhân của việc này là do cách thức ta ngắt phần summary post.



Trước giờ ta hay dùng cách ngắt theo kí tự, tức là chọn 1 số kí tự nhất định để hiển thị ở phần summary. Do đó mà khi đủ số kí tự thì script sẽ ngắt, do đó mà ta sẽ hay gặp trường hợp chữ hiển thị không đủ. Để khắc phục điều này, ta sẽ dùng cách chọn số từ để hiển thị chứ không phải số kí tự. Thực ra nói số từ cũng ko đúng, nếu nói đúng hơn thì là cụm kí tự chứ không phải là "từ". Cụm kí tự ở đây mình nói là các chuỗi kí tự được cách nhau bằng dấu cách (khoảng trắng).
Ví dụ:
"... cũng ko đúng, nếu ..." - ta sẽ có 4 cụm kí tự, và cụm "đúng," không được xem là 1 từ.
Thực ra cách này đã có từ lâu, nhưng chưa có ai để ý để khắc phục cho tiện ích recent posts, thế nên hôm nay mình sẽ hướng dẫn các bạn cách khắc phục điều này.

Trong file js của các tiện ích recent posts ta hay gặp 1 hàm như bên dưới :

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;

}

- Hàm này dùng để loại bỏ các thẻ HTML có trong phần nội dung của bài viết trên feed. Đồng thời giúp hiển thị phần rút gọn của bài viết. Giá trị chop ở đây chính là số kí tự sẽ hiển thị ở phần summary.

Các bạn thay hàm ở trên bằng hàm bên dưới:

function removeHtmlTag(s,max){
s=s.replace(/<br.*?>/ig, ' ');
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')
}


Và bây giờ các bạn chỉ cần thay giá trị của biến summaryPost lại là được. (đa số các tiện ích recent posts mình hay đặt tên biến để tùy chỉnh số kí tự hiển thị là summaryPost )

- Ví dụ : summaryPost = 30; giá trị 30 chính là số cụm kí tự (cách nhau bằng dấu khoảng trắng) sẽ được hiển thị là 30.

Chúc các bạn thành công.
More about →

MENU NGANG CÓ HIỆU ỨNG ĐỘNG KHI RÊ CHUỘT

Người đăng: yeu mai em on Thứ Ba, 24 tháng 5, 2011

Hôm nay, tôi chia sẻ đến với các bạn cách tạo menu ngang có hiệu ứng động khi rê chuột (không có menu con). Với menu này khi bạn rê chuột đến một thẻ bất kỳ trên menu thì thẻ đó sẽ tự động đổi màu khác khá đẹp. Mời bạn bấm vào Xem thử để trải nghiệm






Xem thử




Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào lệnh ]]></b:skin>, sau đó dán đoạn code phía dưới trước dòng lệnh đó.

ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOzn0FdVKWb7OssY_3mCuvD6EI7K4q_priKD9iQdjdsC3vtIPYErXupS_gxBelv1oeaZW23rhyphenhyphenZtLkAU7QUPoLPtJvgrgBMjpU9Kn_MdKoyVSQKQmmbrMpYnrX1YuCk0yQhuY6DZqUueB/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOzn0FdVKWb7OssY_3mCuvD6EI7K4q_priKD9iQdjdsC3vtIPYErXupS_gxBelv1oeaZW23rhyphenhyphenZtLkAU7QUPoLPtJvgrgBMjpU9Kn_MdKoyVSQKQmmbrMpYnrX1YuCk0yQhuY6DZqUueB/)repeat-x left bottom; /*màu nền của menu*/
}



 Tiếp tục, trong khung tìm kiếm nhỏ bạn thay dòng lệnh ]]></b:skin> bằng lệnh <head> và dán đoạn code dưới đây vào sau nó.

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66348944/ani_menu.js' type='text/javascript'/>
Cuối cùng bấm Lưu lại. Bây giờ, bạn trở lại trang thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào.
 

<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>

Bạn thay đổi các dòng màu đỏ và màu xanh theo ý mình và bấm Lưu lại.
Bạn trở lại vào Blog sẽ thấy có một menu ngang màu đỏ và khi bạn rê chuột vào menu này sẽ có hiệu ứng chuyển động tuyệt đẹp.
Chúc bạn thành công
More about →

Update bộ đếm số lần đọc bài viết cho blogspot - v3.1

Người đăng: yeu mai em on Thứ Hai, 23 tháng 5, 2011


Ở thủ thuật "Bộ đếm số lần đọc cho bài viết" (phiên bản 3.0), có 1 lỗi mà từ trước đến giờ các bộ đếm số lần đọc bài viết khác đều mắc phải, đó là khi ta comment ở 1 bài viết nào đó thì khi comment được xuất bản, thì blogger sẽ load trang lại với 1 link tương tự như link bài viết, nhưng được thêm vào 1 chuỗi để tạo permalink cho comment đó, ví dụ như link bên dưới :



http://www.fandung.com/2011/05/tao-bo-dem-so-lan-xem-bai-viet-cho.html?showComment=1305911787727#c6033716812105494950

Và khi load lại bài viết bằng link này thì bộ đếm sẽ hiểu đây là 1 link khác với link của bài viết, và như thế bộ đếm sẽ đếm lại bắt đầu bằng 1, thay vì cộng 1 vào số lần xem của bài viết đó. Và như thế số lần xem bài viết sẽ giảm đáng kể nếu như bài viết đó có nhiều comment. Ví dụ như ở blogtruyen.com, với 1 lượng người xem khá lớn, và các đọc giả luôn comment rất nhiệt tình thì số lần xem bài viết sẽ hiển thị không còn chính xác.

Lúc trước ban Ngân có nói về lỗi này ở bài viết trước, và do kiến thức php của mình còn quá cùi mía thì mình trả lời ngày là không biết, và sau vài ngày suy nghĩ và search các function của php thì mình đã may mắn test thành công. Thực ra việc này làm ở Javascript khá dễ, như do ở php mình còn hơi lạ nên phải mò. Thực chất của việc fix này là mình sẽ chia link sẽ đếm số lần đọc thành 2 phần qua dấu chấm hỏi (?) ở trong link, và khi đó ta sẽ có 2 chuỗi, lấy chuỗi đầu ta sẽ được link của bài viết. Và như thế bộ đếm sẽ tiếp tục cộng vào số lần đọc bài viết nếu như có ai đó comment ở bài viết đó.

Việc cập nhật này mình đã fix ngay trên file php trên server của mình, còn những bạn nào xài host riêng thì download file php này (fd-counter-fix.rar) về rồi thay thế file php cũ là được.
More about →

ẨN HIỆN THANH ĐIỀU HƯỚNG

Người đăng: yeu mai em on Chủ Nhật, 22 tháng 5, 2011

Thanh điều hướng là thanh nằm trên cùng trang Blog của bạn, bạn có thể cho ẩn và khi rê chuột đến đầu trang Blog thanh điều hướng này sẽ xuất hiện để cho bạn thao tác sử dụng...



Đầu tiên, bạn đăng nhập Blog > Chọn thiết kế > chọn Chỉnh sửa HTML, sau đó bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh  ]]></b:skin>
Bạn copy đoạn code này và dán trên dòng lệnh đó.



Cuối cùng bấm Lưu lại để hoàn tất. Bây giờ bạn trở lại vào Blog xem kết quả nha.
Chúc các bạn thành công.

More about →

Tạo bộ đếm số lần xem bài viết cho blogspot v3.0

Người đăng: yeu mai em on Thứ Sáu, 20 tháng 5, 2011

Ở 2 bài viết trước về bộ đếm số lần xem bài viết, mình có giới thiệu cho các bạn 1 số cách để xem số lần xem bài viết của blog, tuy nhiên các bộ đếm đó thường "chết sớm". Hôm nay mình sẽ giới thiệu cho các bạn cách tạo bộ đếm này (cách này chỉ dùng cho nhưng bạn nào có host riêng). Còn những bạn nào không có host riêng, mình sẽ cho sử dụng thử bộ đếm từ host của mình, sở dĩ mình nói thử là vì chưa biết sẽ như thế nào nếu quá nhiều người sử dụng nó.


Hiện tại Blogger cũng có thể cho ta xem số lần xem bài viết, nhưng chỉ là đối với 10 bài xem nhiều nhất, và thống kê này chỉ mình admin của blog mới có thể xem được, còn khách thì họ chỉ có thể xem tổng số lần xem trang của blog. Trong tương lai không biết blogger có nâng cấp hệ thống này lên ko, ví dụ như thêm hẳn 1 tiện ích cho phép add "số lần xem bài viết" vào mỗi bài viết chẳng hạn. Còn hiện tại cách dùng 1 host trung gian để tạo bộ đếm vẫn còn có ích đối với 1 số bạn, thế nên hôm nay mình tiếp tục cập nhật về vấn đề này.

A. Cách tạo cơ sở dữ liệu trên host:
- Đầu tiên, các bạn tạo mới 1 Database (hoặc cũng có thể sử dụng 1 database có sẵn), ví dụ ở đây mình sẽ gọi nó là fd_database. Sau đó add user vào database này, ví dụ user là : fandung và pass là 123456
- Tiếp tục tạo 1 table có giá trị như bên dưới (ta tạm đặt tên cho table này là fd_counter).
(trong phpMyAdmin, các bạn chọn vào thẻ SQL, rồi dán code bên dưới vào ta sẽ có 1 table)

CREATE TABLE `fd_database`.`fd_counter` (

`SN` BIGINT NOT NULL AUTO_INCREMENT ,

`name` VARCHAR( 1000 ) NOT NULL ,

`hit` BIGINT NOT NULL DEFAULT '1',

PRIMARY KEY ( `SN` )

) ENGINE = MYISAM

- Sau khi thực hiên các bước cần thiết, các bạn download file php này về (fd-counter.rar). Giả nén ra, sau đó dùng Notepad để chỉnh sửa các thông số lại như bên dưới :

$username = "fandung"; // Enter Your Username and Password Here
$password = '123456'; // Enter Your Username and Password Here
$database = 'fd_database'; //Enter Your Database Name Here
$table = "fd_counter"; //Enter Your Counter Table Name Here

Ngoài ra các bạn cần thay đổi 1 vài chỗ nhỏ nữa. Các bạn tìm các dòng code như bên dưới trong file php, và đổi chữ counter thành fd_counter:

...
$query = "Insert into counter (name) values ('$url')";
...
...
$query = "Update counter set hit = $hitcount where name = '$url'";

thay đổi thành :

...
$query = "Insert into fd_counter (name) values ('$url')";
...
...
$query = "Update fd_counter set hit = $hitcount where name = '$url'";

- Lưu ý các giá trị này là các giá trị mẫu như mình nêu ở trên, khi thực hiện trên host của mình các bạn phải thay đổi nó cho phù hợp.
- Sau khi thực hiện xong các bạn up lên host của mình, và các bạn sẽ có 1 file php tương tự như của mình : http://data.fandung.com/blog/fd-counter.php


B. Chèn bộ đếm vào blog:
- Các bạn thực hiện việc chèn code vào blog như ở bài viết này (bộ đếm số lần xem bài viết v2.0)
- Chỉ cần thay code ở bước 5 thành code như bên dưới là được :

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<b>Đã xem :</b> <i><font color='#f00'><script src='http://data.fandung.com/blog/fd-counter.php' type='text/javascript'/> Lần </font></i>
</div>
</b:if>


Như vậy mình đã giới thiệu xong. Chúc các bạn thành công.
More about →

KHẮC PHỤC LỖI SHORTCUT CHẠY CÙNG MỘT ỨNG DỤNG

Người đăng: yeu mai em

Hiện nay có khá nhiều bạn gặp phải trường hợp là khi bấm đúp chuột vào shortcut trên hệ thống đều chạy cùng một chương trình ứng dụng khi được kích hoạt. Nguyên nhân này là do các virus Spyware trá hình ở các trang Web (đa số là trang Web nước ngoài) xâm nhập vào hệ thống gây ra. Chúng làm thay đổi Key điều khiển chính trong Registry, chính vì vậy dù bạn có diệt hết các Spyware này thì vẫn không khắc phục được tình trạng trên.
Nếu gặp phải trường hợp này, bạn cứ tuần tự làm các bước sau đây:
1/ Ngắt kết nối mạng, dùng các chương trình chuyên dụng để quét Spyware toàn diện hệ thống.
2/ Tải file sửa lỗi Registry TẠI ĐÂY (dung lượng 274KB)
3/ Giải nén file vừa tải về rồi kích hoạt để cập nhật lại hệ thống. Khởi động lại máy, chắc chắn lỗi trên sẽ được khắc phục.
Chúc các bạn thành công.
More about →

BÀI MỚI ĐĂNG CÓ HÌNH PHÍA TRƯỚC VÀ HIỆU ỨNG CHẠY NGANG

Người đăng: yeu mai em on Thứ Tư, 18 tháng 5, 2011

Trước đây, tôi có giới thiệu bài "Tiêu đề bài đăng mới có hiệu ứng chạy ngang", nay tôi xin chia sẻ với các bạn bài đăng mới cũng  có hiệu ứng giống như bài trên nhưng khác ở chỗ chúng ta có thể gắn hình phía trước: (các bạn có thể xem hiệu ứng phía dưới):












Để làm được như vậy, các bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào

<script type='text/javascript'>
            var w2bWidth="100";
            var w2bScrollAmount="10";
            var w2bScrollDelay="50";
            var w2bDirection="left";
            var w2btargetlink="no";
            var w2bnumPosts="10";
            var w2bBulletchar =">>>";
            var w2bimagebullet="yes";
            var w2bimgurl="LINK ẢNH";
            var w2bfontsize="16";
            var w2bbgcolor="transparent";
            var w2blinkcolor="FF0000";
            var w2blinkhovercolor="3366CC";
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_rpscroller_v3.js' ></script>
<script type='text/javascript' src="http://địa chỉ của Blog của bạn/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>

Bây giờ bạn thay thế các chữ màu đỏ và màu xanh để phù hợp với Blog mình. Bạn nên chọn hình ảnh có kích thước nhỏ để cho phù hợp (khoảng 40x40 là đẹp nhất)
Chúc các bạn thành công
More about →