OBin's Blog: web va lap trinh

New

OpenCart là một mã nguồn mở dùng làm shop bán hàng trực tuyến khá phổ biến hiện nay. Trong danh mục sản phẩm mặc định nó hỗ trợ show ra số lượng sản phẩm có trong danh mục ( Category product count ) nhưng tùy vào nhu cầu mà ta muốn show hoặc không show nó. Sau đây là cách nhanh để ẩn hoặc remove nó.

Cách ẩn số lượng sản phẩm trong danh mục OpenCart

1 Tắt / mở trong Admincp

Trong admincp của opencart có hỗ trợ chức năng tắt và mở phần này, khi cài mặc định nó được mở.
Để tắt bạn làm theo các bước sau: Đăng nhập Admin => Cài đặt hệ thống => Cấu hình hệ thống

Chọn chỉnh sửa shop của bạn:

Click tab Tùy chọn, tại phần "Hiển thị sản phẩm có trong danh mục" bạn chọn là Không

Sau đó nhấn lưu là xong!

2 Remove hoàn toàn trong code:

Nếu bạn cảm thấy phần này không cần thiết và muốn bỏ luôn thì làm như sau:
Trên hosting bạn tìm file /catalog/controller/module/category.php mở trên trình chỉnh sửa
tìm đến đoạn code:

'name'        => $child['name'] . ' (' . $product_total . ')',

chỉnh nó thành như sau:

'name'        => $child['name'],

Tiếp theo tìm đoạn code:

'name'        => $category['name'] . ' (' . $product_total . ')',

Chỉnh thành:

'name'        => $category['name'],

Lưu lại và nhấn F5 để xem kết quả nhé

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

Xem thêm:
- Cách gắn nhanh bản đồ Google Map vào trang liên hệ Opencart
- Hướng dẫn xóa hoặc thay đổi thông tin bản quyền OpenCart dưới chân trang
- Hướng dẫn cách gắn Google Analytics vào Opencart
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột (Column)

Bootstrap là một framework front-end cực kỳ mạnh và phổ biến nên mình không cần phải giải thích về nó nhiều nữa. Hôm nay mình xin hướng dẫn cách sử dụng Grid System trong Bootstrap để phân chia cột ( Column ) cho bố cục của website mà không cần phải css gì thêm.

Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column )

1 Bootstrap Grid System

Bootstrap Grid System cho phép bạn tạo được tối 12 cột đều nhau trên một trang hoặc chia theo từng khối riêng:

Bootstrap Grid System sẽ tự thay đổi theo kích thước trình duyệt (Responsive)

2 Grid Classes

Grid Classes là những class dùng để gán css theo mỗi kích thước trình duyệt khác nhau:
- xs (điện thoại)
- sm (tablets)
- md (desktops)
- lg (lớn hơn desktops)

3 Cấu trúc cơ bản của Bootstrap Grid:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

- Chia 2 cột đồng đều:

<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>

- Chia 2 cột không đồng đều:

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-9">.col-sm-9</div>
</div>

- Chia 3 cột đều:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

.... bạn có thể tự vận dụng để chia cột theo ý mình nhé.

4 Chia cột responsive:

Bạn có thể sử dụng grid class để phân chia theo từng giao diện riêng. Ví dụ:

  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 1 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 2 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 3 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> ... </div>

Trong ví dụ trên, khi giao diện mobile thì tự động sẻ thành 1 cột lớn (col-xs-12), giao diện tablet thì tự động chuyển thành 2 cột đều (col-sm-6), giao diện desktop => 3 cột đều (col-md-4) và khi giao diện màn hình lớn => tự động chia thành 6 cột đều nhau (col-lg-2)

Rất dễ dàng phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bạn đang tự học ngôn ngữ lập trình C++ nhưng chưa biết bắt đầu từ đâu? Vậy thì mình khuyên bạn bỏ sách vở nặng nề sang một bên hãy tìm đến các website học lập trình trực tuyến ngay và luôn. Tại đó bạn sẽ tìm được level thích hợp của mình và bắt đầu học nhanh và hiệu quả hơn với nhiều phương pháp học đơn giản nhưng cực kỳ hiệu quả. Sau đây mình xin giới thiệu đến các bạn một số website học lập trình C++ hay mà lại miễn phí hoàn toàn.

1 sololearn.com

Đầu tiên là phải kể đến trang này vì phương pháp học khá hay "Học mà chơi, chơi mà học". Các bài học từ đơn giản đến nâng cao thông qua những ví dụ cụ thể và thực hành ngay trên trình duyệt.

Top những trang web học C++ trực tuyến miễn phí

Ngoài ngôn ngữ lập trình C++ ra bạn còn có thể học nhiều ngôn ngữ khác từ website này. Tuy nhiên bạn đang nghiên cứu ngôn ngữ nào thì hãy tập trung vào ngôn ngữ ấy trước đã :D

Bạn có thể bắt đầu học miễn phí tại đây

2 tutorialspoint.com

Trang thứ hai mình kể đến là trang tutorialspoint.com, cũng với phương pháp học lý thuyết đi đôi với thực hành ngay trên trình duyệt nên bạn sẽ dễ dàng tiếp thu thông qua từng ví dụ cụ thể từ cơ bản đến nâng cao.

Cũng như sololearn.com thì tutorialspoint.com cũng có vô vàng các ngôn ngữ khác để bạn tự khám phá.

Hãy bắt đầu học C++ tại đây

3 learncpp.com

Với đặc thù là phương pháp cổ điển nặng lý thuyết, bạn phải tự thực hành trên chính công cụ lập trình của bạn nhưng bù lại trên site này bạn có thể thảo luận tự do, trao đổi kinh nghiệm với khá nhiều lập trình viên khác.

Bạn có thể học ngay tại đây

4 cplusplus.com

Phương pháp dạy học có cả lý thuyết lẫn thực hành ngay trên trình duyệt nhưng giao diện cũng khá cổ điển. Nhưng bù lại ví dụ khá cụ thể, lý thuyết rõ ràng từ cơ bản đến nâng cao, bạn có thể tự học tại đây mà không tốn một xu học phí nào :D

Hãy bắt đầu học tại đây

5 cprogramming.com

Không có phương pháp học tập gì đặc biệt, khá nặng về lý thuyết, bạn phải tự học và thực hành thông qua những lý thuyết có được trên website. Nhưng cũng chính vì thế có thể bạn sẽ nắm vững chắc kiến thức hơn đấy :))

Tìm hiểu thêm tại đây nhé !

Chúc các bạn học thật tốt !!

Xem thêm:
- Ebook tự học lập trình C++ tiếng Việt
- Ebook Nguyên tắc cơ bản của lập trình máy tính với C#
- Tổng hợp các ebook lập trình iOS từ cơ bản đến nâng cao - Phần 1
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Tài liệu học lập trình java cơ bản [Tiếng Việt]
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Bootstrap Framework chắc hẳn đã quen thuộc với nhiều người làm web, silder cũng là phần không thể thiếu trong một website. Bootstrap hỗ trợ slider mặc định sử dụng hiệu ứng trượt ngang, nhưng để đổi hiệu ứng này sang Fade in - Fade out thì phải làm như thế nào? Sau đây mời các bạn tham khảo biết viết dưới để xử lý vấn đề này nhé!

Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out

1 Tạo slider đặt tại vị trí bạn muốn trên website, code slider của Bootstrap như sau:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

2 Tại cuối file css của website bạn thêm đoạn css cho hiệu ứng fade như sau:

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

Lưu ý: Mặc định code html slider Bootstrap tại thẻ <div id="carousel" không có class "carousel-fade" , ta thêm class này để slider nhận hiệu ứng từ css bạn đã thêm ở bước sau.

Các bạn có thể download file demo ở đây

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

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Đối với một website có nhiều bài viết trích dẫn link nguồn hoặc link download thì việc tạo một trang chờ chuyển hướng là vô cùng quan trọng vì nó giúp giải quyết toàn bộ link out gây ảnh hưởng xấu đến SEO. Nhưng đối với blogger thì phải làm như thế nào? Sau đây mình xin chia sẻ cách làm cực kì đơn giản, cách làm này mình cũng thực hiện cho blog này :D

Hướng dẫn tạo trang chờ chuyển hướng ( Redirect Page ) cho blogger

Các bạn thực hiện theo các bước sau:

1 Tạo trang chờ chuyển hướng (Bạn làm theo các bước như trong hình)

Bạn đăng nhập admin Blogger => Chọn tab Trang => Chọn Tab Trang mới để tạo một trang mới

Tại tab tạo Trang mới bạn làm theo các bước như trong hình trên, bước 5 bạn copy đoạn code bên dưới:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var time = 20;
var page = getQueryVariable("t");
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();

$(document).ready(function(){
 $('.link-out-btn').click(function(){
    window.location = page;
 });
 $('#linkout').text(page);
});

</script>
<br />
<div>
<h3>
Bạn vừa nhấp vào một liên kết không thuộc <b>www.obinb.com</b>, trang sẽ tự chuyển sang liên kết bạn vừa nhấp sau <span id="timecount"></span> giây!</h3>
<div>
Liên kết bạn muốn đến:</div>
<div>
<span id="linkout"></span></div>
<div class="link-out-btn">
Click vào đây để chuyển trang ngay và luôn!</div>
</div>

Lưu ý: Trong đoạn code trên
- var time = 20 nghĩa là thời gian chờ chuyển là 20 giây, bạn có thể thêm hoặc bớt
- Bạn sửa nội dung www.obinb.com theo ý bạn
- Styles page này bạn tự chỉnh tùy ý.

Sau đó bạn xuất bản page, khi xuất bản bạn được link có dạng như sau:

http://www.obinb.com/p/blog-page_3.html

2 Cách sử dụng

Cách sử dụng rất đơn giản, khi chèn link bạn chỉ cần thêm vào trước link out như sau:
Link out ban đầu : http://linkout-page.com
Link out sau khi thêm: http://www.obinb.com/p/blog-page_3.html?t=http://linkout-page.com
Nghĩa là sau khi click vào link out bạn vừa chèn, thì tự động chuyển sang trang chờ chuyển hướng bạn vừa tạo.
Các bạn có thể xem Demo

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Trong bất kì diễn đàn nào thì vị trí quảng cáo sau bài viết đầu tiên cực kì quan trọng vì thu hút người dùng, dễ thấy và không làm khó chịu người xem. Nhưng trong diễn đàn Xenforo để đặt quảng cáo ở vị trí này ta phải làm sao? Sau đây xin mời các bạn tham khảo cách làm nhanh gọn lẹ này nhé!

- Đăng nhập admincp => Templates => ad_message_below

- Trong template bạn sẽ thấy có đoạn code:

<xen:hook name="ad_message_below" />

- Đặt đoạn code sau bên dưới nó:

<xen:if is="{$post.position} == 0">
 Code banner của bạn
</xen:if>

- Đoạn code trên xác định vị trí là bài viết đầu tiên, quảng cáo sẽ không xuất hiện trong bài viết reply hay comment.
- Bên trong đoạn code trên bạn tùy ý đặt banner.

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

Xem thêm:
- Hướng dẫn tạo biến dùng chung toàn bộ template Xenforo ( Global Template Variable )
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo

Trong template Xenforo mặc định đã hỗ trợ nhiều biến dùng chung ( Global Variable ) nhưng đôi khi việc custom template khiến bạn phải tạo ra những biến không có sẵn để đặt tùy ý bất cứ nơi đâu trong template diễn đàn. Việc này thật đơn giản, bạn chỉ cần thực hiện các bước trong hướng dẫn sau đây:

1Tải và cài đặt Plugin Global Template Variable

- Tải plugin tại đây
- Cài đặt: Giải nén và upload folder "library" lên folder root của diễn đàn trên host. Từ admincp Xenforo chạy install plugin trỏ tới file install file "addon-semprot_gtv.xml" vừa giải nén.

2 Tạo biến custom theo ý muốn:

- Sau khi cài đặt plugin, bạn mở file /library/Semprot/GlobalTemplateVariable/Listener.php trên host vừa upload, thêm biến tùy ý như những biến có sẵn là is_handsome và is_fat:

<?php
class Semprot_GlobalTemplateVariable_Listener
{
    public static function template_create(&$templateName, array &$params, XenForo_Template_Abstract $template)
    {
        $params['is_handsome'] = true;
        $params['is_fat'] = false;
        $params['example'] = "www.obinb.com";
    }

}

3 Sử dụng biến vừa tạo:

Với những biến bạn vừa tạo, bạn có thể tùy ý sử dụng ở mọi template của giao diện Xenforo. Ví dụ:
Tại template PAGE_CONTAINER ta đặt đoạn code như sau:

<xen:if is="{$is_handsome}">
You are handsome.
<xen:else />
You are not handsome.
</xen:if>

<xen:if is="{$is_fat}">
You are fat.
<xen:else />
You are not fat.
</xen:if>

Lưu ý: Plugin Global Template Variable hỗ trợ Xenforo version 1.4

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

Xem thêm:
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo

Website của bạn vừa bị hack hoặc chứa liên kết download mã nguồn độc hoặc virus nhưng bạn hoàn toàn không biết cách phát hiện chúng như thế nào. Sau đây blog xin giới thiệu đến các bạn một số công cụ quét mã độc online miễn phí cho website.

Những công cụ quét mã độc, malware, virus miễn phí tốt nhất cho website

1 Scan My Server

là một trong những báo cáo toàn diện nhất về các vấn đề bảo mật như SQL Injection, Cross Site Scripting, PHP Code Injection, Source Disclosure, HTTP Header Injection, Blind SQL Injection và nhiều hơn nữa. báo cáo quét được thông báo bằng email với bản tóm tắt độ bảo mật cũng như mức độ dễ tấn công hay không.

Các bạn có thể sử dụng công cụ này tại địa chỉ : www.scanmyserver.com

2 SUCURI

SUCURI là một trong những trang web quét mã độc và malware cho website phổ biến nhất . Bạn có thể làm một thử nghiệm nhanh cho website để quét Malware, Website blacklisting, Injected SPAM và Defacements

Các bạn có thể sử dụng công cụ này tại địa chỉ : sitecheck.sucuri.net

3 Quttera

Quttera kiểm tra trang web phần mềm độc hại và các lỗ hổng bảo mật. Nếu quét trang web của bạn cho các tập tin độc hại, các tập tin đáng ngờ, PhishTank, Safe Browsing (Google, Yandex) và danh sách miền Malware.

Các bạn có thể sử dụng công cụ này tại địa chỉ : www.quttera.com

4 Unmask Parasites

Công cụ quét nhanh và thông báo đến bạn những vấn đề bảo mật trên trang, bạn có thể dùng công cụ này tại địa chỉ: www.unmaskparasites.com

5. Norton Safe Web

Quét nhanh website bạn có trong danh sách website an toàn của Norton không nhé

Địa chỉ: safeweb.norton.com

6 Malware Removal

Đây là công cụ kiểm tra toàn diện website của bạn và tìm ra những lỗ hổng bảo mật. Bạn có thể dùng miễn phí tại địa chỉ: www.web-malware-removal.com/website-malware-virus-scanner

Xem thêm:
- Cách chạy lệnh Javascript sau khi load trang hoàn tất
- Lấy đường dẫn URL và Title trang hiện tại bằng Javascript hoặc jQuery
- Lấy đường dẫn URL của trang hiện tại bằng PHP
- Hướng dẫn resize ảnh đơn giản bằng PHP
- Tài liệu lập trình PHP và MYSQL bằng Tiếng Việt miễn phí
- Ebook căn bản lập trình PHP và MySQL bằng tiếng Việt

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp