Nhóm lưu trữ: Web-Lập trình

Web, cách tiếp cận và đăng tải thông tin hàng đầu. Giờ đây, Web không còn xa lạ với hầu hết tất cả mọi người, tổ chức, doanh nghiệp… Chuyên mục này sẽ giúp bạn có thêm kiến thức, thông tin để bạn có thể làm chủ công nghệ từ đó nắm bắt cơ hội tốt hơn.

Tìm thông tin vị trí (location data) bằng Javascript

Tìm thông tin vị trí (location data) bằng Javascript

Nếu bạn muốn check thông tin vị trí (Location data) bằng Javascript,  bạn chỉ cần thực hiện như sau:

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);  // Vĩ độ
  console.log(location.coords.longitude); // Kinh độ
  console.log(location.coords.accuracy);  // Tính chính xác
});

Đoạn codes Javascript trên sử dụng API data của Geolocation API, bạn có thể vào địa chỉ này để tham khảo thêm.

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

 

Z-Kiwi

hieu-ung-tuyet-roi-cho-trang-web

Hướng dẫn tạo hiệu ứng tuyết rơi cho website

Sau đây là hướng dẫn ngắn gọn giúp website của bạn mang một phong cách mùa đông, phù hợp với không khí mùa Noel. Cụ thể trong hướng dẫn này sẽ giúp bạn tạo hiệu ứng tuyết rơi nhẹ nhàng và đẹp mắt mà không cần tốn nhiều thời gian và công sức.

Đầu tiên là bạn cần download file jquery sau về và chèn vào website bạn:

http://zkiwi.com/libs/js/snow.js

Tiếp theo là bạn download các bông tuyết: img.rar

Bạn có thể xây dựng cấu trúc HTML tương tự như bên dưới:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Web</title>
<script src="http://zkiwi.com/libs/js/snow.js" type="text/javascript"></script>
<script type="text/javascript">
   createSnow('http://zkiwi.com/libs/imgs/snow/', 30);
</script>
</head>

<body>
Nội dung trang web của bạn
</body>
</html>

Trong đó có đoạn Javascript createSnow('http://zkiwi.com/libs/imgs/snow/', 30); thực thi hiệu ứng. Bạn nhớ thay đổi đường dẫn chứa hình các bông tuyết và số bông tuyết xuất hiện (ở đây là 30), lưu ý số bông tuyết bạn đừng để quá nhiều vì sẽ ảnh hưởng đến việc load trang. Ngoài ra bạn cũng có thể tự thiết kế các bông tuyết theo ý bạn muốn.

Bạn có thể tham khảo Demo hoặc download toàn bộ filde mã nguồn về xử dùng cho trang web bạn. Chúc bạn thành công.

tab-noi-dung-jquery-html-css

Tabbed nội dung bằng jQuery + HTML + CSS cho Website

Bài viết sau sẽ hướng dẫn bạn sử dụng một chút jQuery, HTML và CSS để tạo ra nội dung dạng Tab (hay Tabbed). Một kiểu show dữ liệu tiết kiệm không gian web và được nhiều website sử dụng. Có một cải tiến đáng lưu ý là ghi nhớ tab được chọn, khi người dùng reload trang sẽ không mất đi trạng thái đang được chọn ở tab đang mở. Sau đây là các bước thực hiện để tạo ra ứng dụng Tabbed nội dung bằng jQuery + HTML + CSS cho Website của bạn.

tao-tab-noi-dung-bang-jquery-html-css

Đầu tiên ta có đoạn HTML và CSS sử dụng cho tab như sau:

<div class="tabbed">
  <ul class="tabnav">
    <li><a href="#tab1">Tab 01</a></li>
    <li><a href="#tab2">Tab 02</a></li>
    <li><a href="#tab3">Tab 03</a></li>
  </ul>
  <div class="tabcont">
    <div id="tab1" class="tabcontent">Nội dung tab 1 </div>
    <div id="tab2" class="tabcontent">Nội dung tab 2</div>
    <div id="tab3" class="tabcontent">Nội dung tab 3</div>
  </div>
</div>

CSS:

<style type="text/css">
.tabbed {
    padding:30px 0 0;
    position:relative;
    width:70%;
    margin:0 auto;
}
.tabbed .tabcont {
    background:#eee;
    padding:20px;
}
.tabbed .tabcont .tabcontent {
    display:none;
    position:relative;
    line-height:20px;
}
.tabbed .tabcont .tabcontent img {
    max-width:100%;
}
.tabbed .tabcont .tabcontent.active {
    display:block;
}
.tabnav {
    position: absolute;
    left:0;
    top:-1px;
    width:100%;
    border-bottom:1px solid #eee;
}
.tabnav li {
    float:left;
}
.tabnav li a {
    height:30px;
    line-height:30px;
    padding:0 14px;
    font-size:18px;
    font-weight:bold;
    border-radius:5px 5px 0 0;
    display:block;
    color:#333;
}
.tabnav li.active a {
    background:#eee;
    color:#376405;
}
</style>

 

Và ta có đoạn Script tạo chức năng tab như sau:

<script type="text/javascript">
$(function(){
    $('.tabbed').find('.tabcontent:first').addClass('active');
    $('.tabbed').find('.tabnav li:first').addClass('active');
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Trong đoạn Script trên, việc xác định Menu và và nội dung được chọn và tạo ra trạng thái active dựa trên việc người dùng click vào menu tab và sau đó dựa trên thuộc tính href của thẻ a mà người dùng vừa click vào.

Tới đây, bạn đã tạo được chức năng tab nội dung. Tuy nhiên, một bất tiện ở đây là khi người dùng click vào 1 tab, nội dung và menu của tab đó đang ở trạng thái active. Nếu người dùng reload trang web lại thì trang thái active đó lại mất đi và trở về với tab active mặc định lúc đầu. Giờ đây yêu cầu là cần phải cho trình duyệt ghi nhớ tab mà người dùng đã click vào, khi reload trang thì trạng thái active vẫn giữ ở tab mà người dùng vừa click. Để thực hiện điều này chúng ta dùng ứng dụng localStorage trong HTML5, và ta có đoạn Script như sau:

<script type="text/javascript">
$(function(){

    if(localStorage.getItem('active'))
    {    
        $('.tabbed').find(localStorage.getItem('active')).addClass('active');
          $('.tabbed').find('a[href='+localStorage.getItem('active')+']').parent().addClass('active');

    }
    else
    {
        $('.tabbed').find('.tabcontent:first').addClass('active');
          $('.tabbed').find('.tabnav li:first').addClass('active');
    }
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            localStorage.setItem('active', ntab);
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Ở đoạn mã trên, ta sử dụng localStorage để lưu trữ thông tin active khi người dùng click vào menu tab. Sau đó, gọi ra thông tin này để xác định tab nào đã được người dùng click chọn. Nếu người dùng, chưa click chọn tab nào thì trang thái active sẽ nằm ở vị trí tab active mặc định.
Lưu ý một điều là chức năng localStorage là ứng dụng của HTML5, vì vậy một số trình duyệt đời cũ sẽ không hỗ trợ chức năng này (IE7).

Đến đây, bạn đã có thể tạo cho website của mình một ứng dụng tab nội dung tối ưu mà không cần mất nhiều thời gian và công sức. Bạn có thể tham khảo Demo trên trong bài viết hoặc download file mẫu về máy. Chúc bạn thành công.

 

flash-actionscript-goi-ham-javascript

Gọi hàm Javascript từ file flash dùng ActionScript

Bài viết này sẽ hướng dẫn bạn sử dụng ActionScript 2 và 3(AS2 – AS3) để gọi một hàm(Function) hoặc 1 lệnh JavaScript từ file flash.

  1. ActionScript 3:
    Đầu tiên bạn cần tạo một hàm JavaScript mà bạn muôn gọi ra, ví dụ:

    <script>
    function showAlert()
    {
    
    window.alert('Hi, Everyone!');
    
    }
    </script> 

    Tiếp theo bạn sử dụng đoạn ActionScript sau để gọi hàm JavaScript trên ra:

        showButton.addEventListener(MouseEvent.CLICK, this.CallJSFunction);
        function CallJSFunction(event:MouseEvent)
            {
                ExternalInterface.call("showAlert()");
            }

    Để minh họa cho ứng dụng này bạn có thể tham khảo demo của bài viết
    ứng dụng nhỏ này với chức năng tính tổng 2 số và hiện kết quả trên màn hình,  kết hợp với việc gọi hàm javascript như trên ứng dụng này sẽ đồng thời sẽ show kết qua bằng popup window. Và code tương ứng được sử dụng trong demo là:

    Javascript:

    <script>
    function showAlert(e)
    {
    
    window.alert(e);
    
    }
    </script>
    

    ActionScript 3:

        showButton.addEventListener(MouseEvent.CLICK, this.CallJSFunction);
        function CallJSFunction(event:MouseEvent)
            {
                inputField3.text = Number(inputField1.text) + Number(inputField2.text);
                ExternalInterface.call("showAlert(\'" + inputField3.text + "\')");
            }

    Lưu ý: để chức năng hoạt động, bạn nhớ thêm một số thư viện vào ActionScript:

        import flash.display.*;
        import flash.events.*;
        import flash.external.*;
        import flash.text.*;

     

  2. ActionScript 2:Bạn có thể sử dụng lệnh getURL để gọi hàm javascript trong AS2. Như đoạn code bên dưới:
    getURL("javascript:showAlert();");

    Bạn có thể test nhanh bằng đoạn code:

    getURL("javascript:alert('Hi, Everyone!');");

Lưu ý chung là bạn cần phải thêm thuộc tính allowScriptAccess với giá trị là always cho các thẻ HTML hiển thị flash(object, embeb):

  • <param name="allowScriptAccess" value="always" />cho thẻ object
  • allowscriptaccess="always" cho thẻ embeb

 

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

tang-toc-web-bang-Gzip-Compression

Bật tính năng nén Gzip (Compression) cho Website

Để tăng tốc độ load trang web, có nhiều phương pháp dược dùng. Trong đó, phương pháp phổ biến và ưu tiên dùng là Gzip (Compression). Sau đây là hướng dẫn bật tính năng này cho website.

  1. Server Apache: Sử dụng file .htaccess, bạn có thể dùng 1 trong 2 cách sau:Sử dụng mod_deflate
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/xml application/xhtml+xml application/rss+xml application/x-javascript application/javascript
    </IfModule>

    Sử dụng mod_gzip:

    <IfModule mod_gzip.c>
     mod_gzip_on Yes
     mod_gzip_dechunk Yes
     mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
     mod_gzip_item_include handler ^cgi-script$
     mod_gzip_item_include mime ^text/.*
     mod_gzip_item_include mime ^application/x-javascript.*
     mod_gzip_item_exclude mime ^image/.*
     mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
     </IfModule>

    Ngoài ra, nếu bạn không thể thay đổi nội dung file .htaccess thì bạn có thể sử dụng đoạn code PHP sau:

    <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
  2. Server Nginx: Để bật chức năng Gzip trên server Nginx bạn cần thêm đoạn mã sau vào file config
     gzip on;
     gzip_comp_level 2;
     gzip_http_version 1.0;
     gzip_proxied any;
     gzip_min_length 1100;
     gzip_buffers 16 8k;
     gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
     gzip_disable "MSIE [1-6].(?!.*SV1)";
     gzip_vary on;
  3.  Server Windows: Bạn có thể tham khảo các bài viết dưới đây:

Để biết trang web của bạn đã bật Gzip hay chưa bạn có thể tham khảo thêm thông tin tại các bài viết Kiểm tra Gzip (Compression) của website. Chúc bạn thành công.

canh-giua-khung-hinh-cho-moi-trinh-duyet

Css canh giữa khung hình cho mọi trình duyệt

Việc canh giữa khung hình được áp dụng trên nhiều trang web, nhất là những trang bán hàng online cần show nhiều hình sản phẩm. Việc canh hình dù có kích thước lớn hay nhỏ đều nằm trong khung hình cố định và được canh giữa khung là một chuyện không dễ. Nhất là đối với người dùng ở Việt Nam còn sử dụng nhiều phiên bản trình duyệt đã lỗi thời. Tuy nhiên, mọi việc sẽ trở nên dễ dàng hơn nếu bạn biết chút ít về CSS và HTML. Bài viết sau đây sẽ hướng dẫn bạn thực hiện việc này.

Trong thiết kế giao diện, việc chia tỉ lệ hình ảnh và khung hình đồng thời cố định size khung hình thường thấy ở nhiều trang web. Tuy nhiên, phải làm sao đảm bảo việc size của hình được upload lên không phụ thuộc vào size khung ảnh. Cụ thể là cho dù bạn up hình có chiều rộng hay cao như thế nào(có thể vượt quá khung hình hoặc nhỏ hơn khung hình) nhưng nó vẫn nằm trong khung hình và phải nằm chính giữa khung hình.

Với yêu cầu như vậy ta có code HTML như sau:

<div class="img-wrap">
      <img src="canh-giua-hinh.jpg" />
  </div>

Và CSS:

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

Như ví dụ trên, khung hình cố định rộng x cao = 500px x 400px, với CSS như trên thì hình nằm trong khung sẽ được canh giữa khung và không bao giờ vượt qua khỏi khung cho dù chiều cao hay rộng của hình lớn hơn chiều cao hoặc rộng của khung. Tuy nhiên, CSS trên làm việc tốt ở các trình duyệt web mới và trình duyệt IE8 trở lên. Để IE7 (hiện tại còn khá nhiều người sử dụng) hiển thị tốt thì ta cần thêm đoạn CSS sau cho thẻ img:

margin-left:expression((500-this.width)/2);
margin-top:expression((400-this.height)/2);

Như vậy CSS đầy đủ sẽ là  :

.img-wrap {
    background:#fff;
    width:500px;
    height:400px;
    position:relative;
    display:block;
    box-shadow:0 0 10px #ccc;
    border:1px solid #ccc;
    margin:0 auto;
}
.img-wrap img{
    max-width:500px;
    max-height:400px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    margin-left:expression((500-this.width)/2);
    margin-top:expression((400-this.height)/2);
}

Bạn có thể tham khảo demo trong bài để dễ dàng thực hiện hơn. Chúc bạn thành công.

 

 

opensearch-cho-website

Thêm chức năng OpenSearch cho Website

Trước hết, chức năng OpenSearch là một chức năng mở rộng cho công cụ tìm kiếm trên các trình duyệt web. Thường bạn có thể thấy các trình duyệt có thêm công cụ tìm kiếm kèm theo. Khi click vào thanh xổ, bạn sẽ thấy một loạt các lựa chọn cho việc tìm kiếm, ví dụ như Yahoo, Google, Bing,… Bạn có thể chọn một trong số các nhà cung cấp này, khi gõ từ khóa và click search, kết quả tìm kiếm sẽ hiện ra và tất nhiên là kết quả tìm kiếm này sẽ hiện trên trang web dịch vụ tìm kiếm bạn đã chọn trước đó. Vậy, làm sao có thể đưa công cụ tìm kiếm trên trang web của bạn vào thanh tìm kiếm của người dùng?

tao-chuc-nang-opensearch-xml-cho-website

Có thể nói là rất đơn giản,  bạn có thể thực hiện theo các bước sau đây:

  1. Tạo một file .xml, đặt tên gì cũng được. Ở bài viết này xin đặt là opensearch.xml, và file này có nội dung như sau:
    <?xml version="1.0" encoding="UTF-8"?> 
    <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> 
       <ShortName>zKIWI</ShortName> 
       <Description>Tìm kiếm nội dung trên zKIWI</Description> 
       <Tags>zKIWI | Tips - Tricks - Hacks - Tutorials</Tags> 
       <Url type="text/html" template="http://www.zkiwi.com/search?q={searchTerms}"/> 
    </OpenSearchDescription>

    Bạn nhớ thay đổi thông tin trong file cho đúng với trang web của bạn:

    • Thẻ <ShortName> bạn để tên ngắn gọn của công cụ Search
    • Thẻ <Description> miêu tả công cụ tìm kiếm
    • Thẻ <Tags> là tên trang web của bạn
    • Thẻ Url là đường dẫn đến trang tìm kiếm của web bạn ví, bạn cần thay đổi đoạn http://www.zkiwi.com/search thành trang địa chỉ trang tìm kiếm của website bạn.
  2. Bước tiếp theo là làm sao cho công cụ  này hoạt động. Bạn chỉ việc upload file opensearch.xml vừa tạo ở trên vào thư mục của web và thêm đoạn code bên dưới vào thẻ Head của file HTML hay xHTML của bạn:
    <link rel="search" href="http://zkiwi.com/opensearch.xml" type="application/opensearchdescription+xml" title="zkiwi.com" />

Vậy là xong, thử nghiệm thành quả bằng cách refresh lại trang web của bạn và click vào box search trên trình duyệt để chọn công cụ tìm kiếm, công cụ tìm kiếm trên web bạn sẽ hiện ra và nhấn add vào. Sau đó chọn nó và thử tìm kiếm thứ gì đó.

Hướng dẫn trên hướng dẫn bạn thực hiện cho việc tìm kiếm nội dung trên web bạn bằng cách sử dụng ngay công cụ tìm kiếm của chính web bạn. Nhưng lời khuyên sau đây sẽ mang lại lợi ích tốt cho việc SEO nội dung trên web bạn thông qua công cụ tìm kiếm Google. Bằng cách tạo công cụ tìm kiếm nội dung trên trang bạn nhưng lại sử dụng web tìm kiếm của Google để lấy ra kết quả. Bạn làm như sau:

Trong thẻ Url của file opensearch.xml trên, bạn thay đổi nó như sau:
Từ:
<Url type="text/html" template="http://www.zkiwi.com/search?q={searchTerms}"/>

Thành :

<Url type="text/html" template="http://www.google.com/search?q=site:zkiwi.com {searchTerms}"/>

Đừng quên đổi domain zkiwi.com thành domain của bạn. Như vậy chức năng này sẽ tìm kiếm nội dung của web bạn bằng công cụ tìm kiếm Google và từ khóa mà người sử dùng gõ vào. Như vậy lợi ích cho SEO tìm kiếm nội dung trên trang bạn là quá rõ ràng.

Đến đây bạn đã có thể tạo chức năng OpenSearch cho web mình. Chúc bạn thành công.

 

remove-title-categories

Bỏ thuộc tính Title của menu(Categories) WordPress

Ở những website sử dụng mã nguồn WordPress, một điều dễ thấy là khi bạn rê chuột vô menu hay phân loại(Categories) thì thuộc tính Title của thẻ liên kết xuất hiện, như là “View all posts filed under…” hay “View all posts in…”. Đôi khi thuộc tính này không cần thiết và khiến người dùng khó chịu. Hướng dẫn sau sẽ giúp bạn loại bỏ thuộc tính này.

  1. Cách 1: Mở file functions.php trong Theme bạn đang dùng, sau đó copy và paste đoạn code này vào:
    add_filter( 'the_category', 'remove_category_link_prefix' );
    add_filter( 'wp_list_categories', 'remove_category_link_prefix' );
    function remove_category_link_prefix($output) {
            $replace = array( 
                    'View all posts in ',
                    'View all posts filed under ' 
            );
    
            return str_replace( $replace, '', $output);
    }
  2. Cách 2: Mở file functions.php trong Theme bạn đang dùng, sau đó copy và paste đoạn code này vào:
    function remove_title_attributes($output) 
    { 
       $output = preg_replace('` title="(.+)"`', '', $output); return $output; 
    } 
    add_filter('wp_list_categories', 'remove_title_attributes');
    add_filter( 'the_category', 'remove_title_attributes' );
    
  3. Cách 3: Sử dụng Plugin, bạn có thể download 1 trong 2 Plugin sau về và active để sử dụng:
    No Title Tooltips
    Remove Title Attributes

Vậy là bạn có nhiều lựa chọn cho việc sử lý vấn đề này. Chúc bạn thành công.

tu-dong-them--rel-nofollow-va-target-_blank-vao-lien-ket-trong-bai-viet-wordpress

Tự động thêm rel=”nofollow” và target=”_blank” vào liên kết trong bài viết WordPress

Hướng dẫn sau đây sẽ giúp bạn thêm thuộc tính rel với giá trị nofollow cho thẻ liên kết đến các trang web ngoài nằm trong nội dung của bài viết trong WordPress. Hướng dẫn bao gồm sử dụng Plugin và không sử dụng Plugin.

  1. Sử dụng Plugin: Hiện nay có rất nhiều plugin được sử dụng để hỗ trợ chức năng này, tuy nhiên theo kinh nghiệm dùng và thực tiễn sử dụng thì chỉ nên dùng những plugin nhẹ và gọn cho chức năng này. Hướng dẫn này khuyến cáo bạn sử dụng Plugin Nofollow for External Link. Một số điểm nổi bật của Plugin này như sau:
    • Thêm rel=nofollow vào tất cả các liên kết ngoài (external link) có trong bài viết cũng như Pages.
    • Thêm target=_blank(Mở tab mới) vào tất cả các liên kết ngoài có trong bài viết cũng như Pages.
    • Plugin này sẽ không thêm thuộc tính rel=nofollow và target=_blank vào các liên kết nội bộ (internal link) trong bài viết cũng như Pages.
    • Nếu liên kết ngoài đã được thêm thuộc tính target=_blank thì nó sẽ không thêm thuộc tính này lần nữa.

    Bạn có thể download về và cài đặt cho website.

  2. Không sử dụng Plugin: Có nhiều khuyến cáo không nên sử dụng Plugin trên website để giảm tốn kém tài nguyên web cũng như ảnh hưởng đến tốc độ web. Tuy nhiên, đối với Plugin trên thì việc này là không cần thiết vì đây là 1 Plugin đơn giản. Ngoài ra, việc sử dụng Plugin cũng giúp bạn dễ dàng cập nhật phiên bản mới. Đó là một lời khuyên, và bạn có thể không muốn sử dụng Plugin,  vậy bạn có thể làm theo cách sau:
    • Download plugin ở cách 1 về
    • Giải nén plugin đó
    • Mở file nofollow-for-external-link/nofollow-external-link.php
    • Copy đoạn code trong file này, ta có đoạn code như sau:
      add_filter( 'the_content', 'cn_nf_url_parse');
      
      function cn_nf_url_parse( $content ) {
      
      	$regexp = "<a\s[^>]*href=(\"??)([^\" >]*?)\\1[^>]*>";
      	if(preg_match_all("/$regexp/siU", $content, $matches, PREG_SET_ORDER)) {
      		if( !empty($matches) ) {
      
      			$srcUrl = get_option('siteurl');
      			for ($i=0; $i < count($matches); $i++)
      			{
      
      				$tag = $matches[$i][0];
      				$tag2 = $matches[$i][0];
      				$url = $matches[$i][0];
      
      				$noFollow = '';
      
      				$pattern = '/target\s*=\s*"\s*_blank\s*"/';
      				preg_match($pattern, $tag2, $match, PREG_OFFSET_CAPTURE);
      				if( count($match) < 1 )
      					$noFollow .= ' target="_blank" class="ext"';
      
      				$pattern = '/rel\s*=\s*"\s*[n|d]ofollow\s*"/';
      				preg_match($pattern, $tag2, $match, PREG_OFFSET_CAPTURE);
      				if( count($match) < 1 )
      					$noFollow .= ' rel="nofollow" ';
      
      				$pos = strpos($url,$srcUrl);
      				if ($pos === false) {
      					$tag = rtrim ($tag,'>');
      					$tag .= $noFollow.'>';
      					$content = str_replace($tag2,$tag,$content);
      				}
      			}
      		}
      	}
      
      	$content = str_replace(']]>', ']]&gt;', $content);
      	return $content;
      
      }
    • Dán nó vào file functions.php trong theme mà bạn dùng.

    Vậy là xong, bạn có đầy đủ những đặt điểm của Plugin đó mà không cần phải cài đặt Plugin.

Ngoài ra bạn có thể tham khảo bài viết Hướng dẫn thêm thuộc tính rel=nofollow cho liên kết trong website, Chúc bạn thành công.

drop-down-menu-css

Làm menu xổ xuống(drop-down menu) bằng css và html

Menu là một thành phần không thể thiếu của website. Việc xây dựng một hệ thống menu hợp lý và dễ sử dụng không hề đơn giản, nhất là những website có hệ thống đa cấp và phức tạp. Menu xổ xuống(drop-down menu) là sự lựa chọn hàng đầu cho những website này. Sau đây là phần hướng dẫn tạo một menu đa cấp chỉ dùng css và html, tinh chỉnh gọn nhẹ và dễ sử dụng.

drop-down-menu

Để có được một hệ thống menu đa cấp như trên, bạn có thể thực hiện theo các bước như sau:

  1.  Tạo một hệ thống menu HTML:
    Thường thì trong lập trình, hệ thống menu html sẽ tự sinh ra, sau đây là đoạn html mô phỏng cho một menu đa cấp

    <div>
          <ul>
            <li>
                <a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                </ul>
            </li>
       </ul>
    </div>
  2. CSS cho menu:
    <style type="text/css">
    .menu
    {
        width:70%; 
        height:30px; 
        line-height:30px;
        margin:0 auto;
    }
    .menu li
    {
        position:relative;
        display:inline-block;
        width:100%;
    }
    .menu li ul
    {
        position:absolute; 
        display:none;
    }
    .menu li:hover > ul
    {
        display:block;
    }
    .menu a
    {
        display:block; 
        color:#fff;
        background:#606c88;
    }
    .menu ul ul,
    .menu li:hover > a,
    .menu a:hover
    {
        opacity:.8;
    }
    /*Level 1*/
    .menu > ul > li
    {
        float:left;
        width:24%;
    }
    .menu > ul > li > a
    {
        width:94%;
        padding-left:3%; 
        padding-right:3%; 
        text-transform:uppercase; 
        font-weight:bold;
    }
    /*Level 2*/
    .menu > ul > li > ul
    {
        position:absolute; 
        top:100%; 
        left:0; 
        width:100%; 
    }
    .menu > ul > li > ul > li
    {
        width:100%;
    }
    .menu > ul > li > ul > li > a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    /* Level +++ */
    .menu ul ul ul
    {
        width:100%;
        left:100%;
        top:0;
        background:#a1b1d4;
    }
    .menu ul ul ul li
    {
        width:100%;
    }
    .menu ul ul ul li a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    
    </style>

    Code CSS sử dụng % làm đơn vị, vì vậy menu sẽ tự co giãn theo chiều rộng của website. Bạn có thể quy định cụ thể chiều rộng bằng cách  set chiều rộng cụ thể cho menu.

Bạn có thể sử dụng file demo để làm mẫu cho việc xây dựng menu cho website của mình. Bạn có thể sử dụng jQuery để tạo hiệu ứng cho menu trở nên mượt hơn, bài viết này hướng dẫn bạn sử dụng Css để tạo menu, vì vậy phần hướng dẫn sử dụng jQuery tạo hiệu ứng cho menu xin vui lòng xem hướng dẫn ở một bài viết khác.