Hướng dẫn tạo hiệu ứng jQuery Sliding

Hiệu ứng jQuery là một cách hữu ích để làm website của bạn thêm nổi bật. Hôm nay, mình sẽ hướng dẫn các bạn làm một hiệu ứng jQuery Sliding . Hiệu ứng này rất hữu ích cho ai muốn làm một portfolio online.

Để chuẩn bị cho bài hướng dẫn này, các bạn chuẩn bị 1 vài tấm ảnh kích thước 300x200px.

Cấu trúc HTML

1
2
3
4
        <div id=”top”>
            <img src=”/images/1.jpg” />
            <img src=”/images/top.jpg” />
        </div>

Chúng ta sẽ làm 6 hiệu ứng là topbottomleftrightbottom-leftbottom-right tương đương với 6 id trong mã HTML. Và id này sẽ được khai báo trong phần jQuery.

Mã CSS

.thumb p{
font-size:12px;
color:#FFFFFF;
padding:5px;
text-align:justify;} 

.thumb img {
display:block; }

.top {
position:absolute;
top:0;
left:0;}

.last {
margin-right:0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    .thumb {
        width:300px;
        margin:0 30px 30px 0;
        overflow:hidden;
        float:left;
        position:relative;
        height:200px;
        background-color:#000;
        cursor:pointer;}
    .thumb p{
        font-size:12px;
        color:#FFFFFF;
        padding:5px;
        text-align:justify;}
    .thumb img {
        display:block; }
    .top {
        position:absolute;
        top:0;
        left:0;}
    .last {
        margin-right:0; }

jQuery

Đưa 2 đoạn script và đặt trong thẻ <head>

1
2
        &lt;script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”&gt;&lt;/script&gt;
        &lt;script src=”/js/sliding.js”&gt;&lt;/script&gt;

Và chúng ta bắt đầu xây dựng file sliding.js

Cấu trúc chung

1
2
3
4
5
        $(‘Khai báo hiệu ứng’).hover(function() {
         $(‘img.top’, $(this)).stop().animate({‘hướng sliding’: ‘kích thước sliding’},’Thời gian sliding’);
        },function() {
        $(‘img.top’, $(this)).stop().animate({’0′: ’0′}, 500);
        });
$(‘#top’).hover(function() {
$(‘img.top’, $(this)).stop().animate({top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
}); 

$(‘#left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});

$(‘#bottom-left’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ‘-300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});

$(‘#bottom’).hover(function() {
$(‘img.top’, $(this)).stop().animate({top: ‘-200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
});

$(‘#right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
});

$(‘#bottom-right’).hover(function() {
$(‘img.top’, $(this)).stop().animate({left: ’300px’, top: ’200px’}, 500);
},function() {
$(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
});

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
         $(function() {
            $(‘#top’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
            });
            $(‘#left’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ‘-300px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
            });
            $(‘#bottom-left’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ‘-300px’, top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
            });
            $(‘#bottom’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({top: ‘-200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({top: ’0′}, 500);
            });
            $(‘#right’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ’300px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′}, 500);
            });
            $(‘#bottom-right’).hover(function() {
                $(‘img.top’, $(this)).stop().animate({left: ’300px’, top: ’200px’}, 500);
            },function() {
                $(‘img.top’, $(this)).stop().animate({left: ’0′, top: ’0′}, 500);
            });
        });

Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

XAMPP là phần mềm dùng để tạo localhost miễn phí tốt nhất hiện nay.

Trang chủ: http://www.apachefriends.org/en/xampp.html

Phiên bản dành cho Windows: http://www.apachefriends.org/en/xampp-windows.html

Link Download: http://www.apachefriends.org/download.php?xampp-win32-1.8.1-VC9-installer.exe

 

Sau khi download về nhấp đúp chuột để tiến hành cài đặt

11 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

Download xampp về

21 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

Chọn ngôn ngữ

Sau đó các bạn nhấn NEXT, sẽ hiện ra bảng lựa chọn các chương trình sẽ cài, hãy để mặc định (chọn tất cả) và tiến hành cài đặt, vì cài hết hoàn toàn không nặng máy, mà lại tiện cho chúng ta sau này có sử dụng đến thì không cần phải cài thêm,…

Tiếp tục nhấn NEXT, sẽ hiện ra bảng chọn thư mục cài đặt, bước này mình hay để mặc định, sẽ được cài đặt tại: C:xampp, sau đó nhấn nút Install

31 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

Install xampp

TIẾP THEO ngồi online facebook tầm 3 phút rồi quay lại xem thì xampp đã được cài đặt thành công rồi đó %29 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost Nhấn Finish để hoàn tất việc cài đặt.

Nhấp vào shortcut của xampp ngoài desktop để vào bảng quản lý:

41 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

shortcut xampp

CÁCH BẬT APACHE VÀ PHPMYADMIN

Ở bảng quản lý, nhấp vào Start ở 2 lựa chọn Apache và MySQL

51 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

start apache

Nhấp lại nhiều lần nếu không bật thành công!

CÁCH TẠO DATABASE

Sau khi đã cài đặt và bật xampp thành công, chúng ta bắt đầu tạo cơ sở dữ liệu (database) mới, và bắt đầu copy file (php) vào thư mục htdocs, thư mục này giống như thư mục public_html trên host theo hướng dẫn sau:

Địa chỉ trang phpMyadmin: http://localhost/phpmyadmin hoặc http://127.0.0.1/phpmyadmin

Nhìn tổng quan:

221 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

phpMyadmin

Cách tạo 1 database mới trên localhost:

7 Hướng dẫn cài đặt phần mềm XAMPP để tạo localhost

tạo database mới trên localhost

Lúc này ta sẽ có được các dữ liệu sau để khai báo vào file config.php

Hostname: localhost (trên host thông thường giá trị này cũng như vậy)

Database name: yeuwordpress_v1 (là tên database chúng ta vừa tạo ở trên)

Database username: root

với password rỗng (để trống, không điền gì cả), mặc định password root của localhost khi cài bằng xampp là như vậy, chúng ta có thể thay đổi theo ý muốn hoặc để mặc định.

Vậy là xong database, source code thì các bạn copy vào đường dẫn: C:xampphtdocs

 

Bài tiếp mình sẽ hướng dẫn các bạn cài đặt wordpress trên localhost

Google Penguin Update: Tác động tới sự đa dạng của anchor text

Đây là một bài viết mang tính thời sự và cũng đang là chủ đề mình quan tâm nên xin chia sẽ cùng với các bạn.

Google Penguin update ra mắt bản mới nhất đề cập đến vấn đề sự tự nhiên của liên kết, bao gồm 2 yếu tố cơ bản: Sự đa dạng của anchor text và sự phù hợp, liên quan của backlink trỏ về. Hiện nay các Seoer đang quá lạm dụng anchortext và spam link lung tung trên các diễn đàn, blog, website với mong muốn tăng thứ hạng nhanh chóng. Tuy nhiên Google luôn muốn đem lại các kết quả tự nhiên với người dùng.

 Google Penguin Update: Tác động tới sự đa dạng của anchor text

Google Penguin update ra mắt bản mới nhất đề cập đến vấn đề sự tự nhiên của liên kết, bao gồm 2 yếu tố cơ bản: Sự đa dạng của anchor text và sự phù hợp, liên quan của backlink trỏ về. Hiện nay các Seoer đang quá lạm dụng anchortext và spam link lung tung trên các diễn đàn, blog, website với mong muốn tăng thứ hạng nhanh chóng. Tuy nhiên Google luôn muốn đem lại các kết quả tự nhiên với người dùng.

Trong nghiên cứu mới nhất từ Microsite Masters, hàng nghìn website đang có dấu hiệu bất thường khi đặt link không tự nhiên, tỷ lệ không cân bằng giữa anchortext muốn lên top và anchor tự nhiên ( click tại đây, xem tại đây, ở đây…)

Kết quả trong nghiên cứu đó khá thú vị, có đến 65% các website bị sụt giảm thứ hạng từ khóa vì đang sử dụng anchor text không tự nhiên. Đối với các trang không bị phạt họ sử dụng backlink tự nhiên nhiều hơn so với nhóm còn lại.

Như trước đây, các Seoer vẫn hay làm đó là muốn lên từ khóa nào, thì phải đặt anchor text đó trong backlink. Tuy nhiên hiện giờ cách thức này Google đã có hình phạt áp dụng. Vì thế chúng ta nên đa dạng hóa anchor text, như là full url, xem tai đây, đọc chi tiết tại đây…

Liên kết từ website có cùng ngành nghề

Các backlink chất lượng và phù hợp là chìa khóa để thoát khỏi lần update này. Theo Google Các liên kết phù hợp, liên quan có cùng ngành nghề sẽ giúp bạn có thêm lượng traffic từ chính lĩnh vực bạn kinh doanh. Ngoài ra còn giúp Google xác định phân khúc của bạn có phù hợp để từ khóa của bạn xuất hiện hay không? Bạn có thể dùng Open Site Explorer để check backlink có liên quan hay không?

Loại bỏ bớt liên kết

Nếu Penguin đã ghé thăm bạn vì bạn đang có nhiều liên kết không tự nhiên hoặc spam, thì bạn cần phải loại bỏ bớt các liên kết đó ngay lập tức. Bạn nên đánh giá chất lượng liên kết của mình mỗi tháng một lần, tìm kiếm các liên kết chất lượng thấp và loại bỏ.

Có nhiều dịch vụ giúp bạn theo dõi và loại bỏ các link chất lượng thấp, tuy nhiên khá tốn kém khi chúng ta phải mất 10$ cho mỗi liên kết. Có một cách khác là bạn có thể gửi list liên kết bạn muốn loại bỏ cho Google.

Loại bỏ duplicate content

Duplicate content cũng là những yếu tố làm giảm thứ hạng website của bạn. Bạn hãy thử sử dụngCopyScrape để kiểm tra xem nội dung của bạn có bị trùng lặp không nhé.
Nếu như khi sử dụng và phát hiện nội dung của bạn bị sao chép lại ở các trang khác, bạn có thể liên lạc với Google, đến submit báo cáo DMCA và yêu cầu loại bỏ nội dung đó.

Và khi bạn đã làm mọi thứ mà vẫn chưa thấy thứ hạng bạn tăng, trường hợp đó có thể do bạn tối ưu hóa website chưa đủ mạnh, số backlink chất lượng không nhiều hoặc đối thủ cạnh tranh của bạn đang có những bước tiến rất mạnh trong SEO. Trong giai đoạn Google Penguin còn update rất nhiều, bạn nên tập trung xây dựng nội dung chất lượng, xây dựng thương hiệu, xây dựng website hướng người dùng… để không bị đối thủ bỏ lại quá xa.

Chèn like facebook, google plus, Twitter Button vào website / blog

1. Tạo Facebook Like Button

Vào đề luôn cho mau, để tạo được button like bạn vào địa chỉ:http://developers.facebook.com/docs/reference/plugins/like/ kéo xuống đoạn giữa gặp một đống các tùy chọn để tạo ra button like face bạn khai báo các thông tin cần thiết cho nó: 1 Chèn like facebook, google plus, Twitter Button vào website / blog Like Button Facebook cho website Bạn thay đổi các tùy chọn đó và xem demo sao cho vừa ý, hiển nhiên là trước đó bạn đã tạo một trang trong facebook rồi, giống như face của bcdonline.net chẳng hạn. Tiếp đến bạn get code và làm theo hướng dẫn của nó. 22 Chèn like facebook, google plus, Twitter Button vào website / blog Get code Like Facebook Button Khi get code có nhiều lựa chọn cho bạn lấy code để vào trong website: HTML5, XFBML, IFRAME, Đường Dẫn URL. Tùy vào mức độ bạn tùy chỉnh mà có hỗ trợ hết các kiêu đó hay không tuy nhiên trong đó IFRAME là dễ sử dụng nhất bạn chỉ việc để vào nơi mà bạn muốn hiển thị trong site.

2. Thêm nút Google + 1 vào website

Đây là nút dễ làm nhất trong 3 button mình giới thiệu trong bài này, các bạn vào các website bây giờ hầu hết đều có nút này vì ai cũng muốn web mình sẽ xuất hiện ở kết quả tìm kiếm của google càng nhiều +1 thì độ tin cậy càng cao. Đầu tiên bạn vào đường link: http://www.google.com/intl/vi/webmasters/+1/button/ ở đây có nhiều tùy chọn cho bạn và kết quả demo giống như facebook like button. 3 Chèn like facebook, google plus, Twitter Button vào website / blog Tùy chon trong Google plus 1 website Sau đó bạn nhìn xuống bên dưới có đoạn code và bạn làm theo chú thích phía trên mỗi đoạn code.

// Đặt cuộc gọi hiển thị này ở nơi thích hợp
<script type=”text/javascript”>
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
–>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!–
// Đặt thẻ này ở nơi bạn muốn nút +1 hiển thị
<g:plusone></g:plusone>
// Đặt cuộc gọi hiển thị này ở nơi thích hợp
<script type=”text/javascript”>
  (function() {
    var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
    po.src = ‘https://apis.google.com/js/plusone.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
–>

 

Cơ bản như thế là đã được nút +1 của google rồi, bạn để đoạn trên ở nơi muốn hiển thị, đoạn thứ 2 vào trong thể head của website mình. Ngoài ra còn có một số tùy chỉnh nâng cao bạn tham khảo thêm nha!

3. Tạo Twitter Button

Cũng như Facebook và Google + Twitter là một trong những mạng xã hội lớn đáng được quan tâm, các doanh nhân, người nổi tiếng, ban nhạc hay doanh nghiệp… đều có sử dụng Twitter. Website của bạn muốn có button share Twitter ban truy cập vào địa chỉ:https://twitter.com/about/resources/buttons chọn kiểu hiển thị button twitter. Chon Twitter Button Chèn like facebook, google plus, Twitter Button vào website / blog Chọn Twitter Button Tiếp theo nhập và các thông tin cần thiết và get code để vào mơi muốn hiển thị button twitter như hình sau. Khai bao thong so va get code lay Twitter Button Chèn like facebook, google plus, Twitter Button vào website / blog