Ẩn bài viết ở trang chủ blogspot

04:23 Add Comment
Việc ẩn bài viết ở trang chủ ta phải dùng một thủ thuật khác với thủ thuật ẩn widget, nếu dùng thủ thuật ẩn widget thì bài viết không được ẩn hoàn toàn. Vì thế mình sẽ dùng CSS kết hợp lệnh để ẩn nó.

Đây là thủ thuật đơn giả nên mình sẽ không post hình minh họa kết quả.

Hướng dẫn chuyễn đổi mã HTML sang HTMLX để chèn vào blogspot thành công

07:42 Add Comment
Chào các bạn. Nay Minh Dũ Blog xin hướng dẫn cho các bạn cách Convert mã HTML sang HTMLX để chèn vào blogspot thành công.

Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery cho Blogger, Wordpress

11:08 1 Comment
Lời đầu tiên thì xin độc giả thứ lỗi vì đã quá lâu rồi không đăng bài mới, để blog trống không lâu quá chắc nhiều người cũng quên mất mình luôn rồi. Đối với những độc giả thường xuyên của blog mình, về tương lai mình sẽ có gắng sắp xếp thời gian tiếp tục với các bài viết hướng dẫn mọi người về Blogger, lập trình, marketing, adsense,... cũng như giải đáp thắc mắc nhiều hơn cho mọi người nhé.

Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot. Thế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.

Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.

Cấu trúc HTML

Đối với cấu trúc cho việc làm Tab Nội dung thì khá đơn giản.
<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>

 Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ul có class là tabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ul có class là tab chứa nội dung tương ứng với các tab đó.


Phần CSS

color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}
Đoạn css trên thì có một số điểm nổi bật như này thôi, một là các thẻ li chứa các tab sử dụng CSS property là display: inline-block giúp cho toàn bộ các tab đứng trên cùng 1 hàng. Thứ 2 là toàn bộ các thẻ li chứa nội dung đều sẽ bị ẩn (display: none), và những thẻ li nào có class là active sẽ được hiển thị (display: block).

Tính năng với jQuery 

Đây chắc là đoạn code quan trọng nhất giúp toàn bộ mọi thứ hoạt động, nó khá đơn giản thôi cùng xem nhé.

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
 
 Đầu tiên chúng ta sẽ lắng nghe mọi hoạt động của toàn bộ các phần tử trên web, khi mà người dùng nhắp chọn vào thẻ li bất kì trong cặp thẻ ul có class là tabs, nếu thẻ nhắp chọn vào đang được mở rồi (có class là active) thì thôi, ngược lại nếu nó không phải thì thêm class là active vào thẻ đó, và tiếp tục tìm đến thẻ li hiện tại đang có class là active và xóa nó đi.

Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.

Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.


Sử dụng trong bài viết Blogger như thế nào

Mục này mình hướng dẫn cho những bàn nào ko rành chỉ muốn xài thôi cho Blogger, Blogspot nhé. Đầu tiên bạn phải chắc rằng trong template của mình có sử dụng jQuery. Tiếp tục là lúc soạn thảo bài viết các bạn chuyển qua soạn thảo ở chế độ HTML.

Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.

Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.

P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua minhdudesign@gmail.com. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T

 

Cách rút gọn link gửi tin nhắn đến fanpage mới nhất 2017

10:27 Add Comment
Facebook mới thông báo cập nhật nhiều tính năng thú vị cho phần tin nhắn (Facebook Messager), trong đó có việc rút gọn link gửi tin nhắn đến fanpage hay profile. Như vậy thay cho cách thủ công trước đây, việc gửi link fanpage inbox cho khách hàng đã dễ dàng hơn rất nhiều.

Cách rút gọn link

Link rút gọn này có cấu trúc: m.me/username . Trong đó username chính là URL của fanpage/profile. Ví dụ:
Fanpage nào chưa thiết lập URL thì truy cập vào đây để cập nhật: https://www.facebook.com/username
Ưu điểm của phương pháp này là khi click vào đường link sẽ dẫn đến giao diện của Messenger.com (nếu dùng bản desktop) hoặc ứng dụng Messenger (nếu dùng trên Mobile). Cửa sổ chat bật ra chính là trò chuyện với Fanpage/Profile đó luôn.

Cách sử dụng link rút gọn

  • Dùng link này như phần Call to Action (kêu gọi hành động) trên fanpage của mình. Khách hàng có thể chủ động click để nhắn tin về fanpage.
  • Thêm đường link trong nội dung quảng cáo hay khi trả lời khách hàng, mời gọi họ chủ động inbox cho fanpage.
Thêm một cách đơn giản hơn để kết nối giữa khách hàng và chủ fanpage. Các bạn thử nghiệm xem và thông báo kết quả về cho hiSella nhé.
Nguồn: Facebook Business

Hướng dẫn fix lỗi không hiển thị ảnh Blogspot do nhà mạng chặn

08:42 Add Comment
Từ cuối năm 2015 thì một số nhà mạng tại Việt Nam đã chặn Blogspot, như nhà mạng VNPT, họ chặn tất cả những gì liên quan đến Blogspot nhằm chống mấy blog phản động, nhưng đối với những Blogger chân chính thì đây là một điều thiệt thòi rất nhiều.

Hướng dẫn nhập thông tin thanh toán khai báo thuế Verify Tax Facebook Audience Network

23:10 Add Comment
Chào các bạn mình xin hướng dẫn các bạn cách nhập thông tin thanh toán khai báo thuế để nhận tiền từ Facebook Audience Network.

Trong phần mạng đối tượng bạn chọn vào Payout nếu ngôn ngữ tiếng anh còn thanh toán nếu ngôn ngữ tiếng Việt nhé.

tiếp theo điền thông tin công ty của bạn vào như hình nhé. (lưu ý điền sao cũng được)


Hướng dẫn các bạn cách xem mã số thuế cá nhân của mình nhé. các bạn truy cập vào địa chỉ này
http://masothuecanhan.vacom.vn/
Điền số CMND của bạn vào nhập mã xác nhận và chọn tra cứu
Sau khi tra cứu thành công thông tin thuế cá nhận của bạn sẻ hiện ra bạn coppy mã số thế của bạn và điền vào bước ở trên nhé.

Điền thông tin chủ doanh nghiệp


Điền thông tin thanh toán. bước này quan trọng nhất nhé. điền phải đúng mới được thanh toán nhé.



Thêm quản trị viên để quản lý nhé.



thông báo thành công



Sau khi hoàn thành xông bước đăng ký ta quay trở lại Thanh toán của mạng đối tượng. chọn vào công ty vừa tạo xong và chọn thêm để khai báo thuế nhé.



Ta chọn kiểu khai báo thuế là W-8BEN tức là người đống thuế cá nhân không ở Hoa Kỳ. Down mẫu khai báo thuế đó về máy bạn.



Bây giờ mình xin hướng dẫn các bạn điền vào mẫu khai báo thuế W-8BEN. mình đã điền sẵng rồi các bạn xem và sửa lại thông tin của bạn lại và up file lên chọn lưu thay đổi


Khi bạn đã Verify Tax thành công thì nó sẻ như thế này nhé.

Chúc các bạn làm thành công và kiếm thật nhiều từ Facebook Audience Network.

Hướng dẫn hiện quảng cáo facebook audience trên desktop

18:40 1 Comment
Chào các bạn, mình xin hướng dẫn các bạn cách hiển thị mã quảng cáo facebook audience trên desktop
Facebook Audience đã ra từ đầu năm đến nay nhưng cũng ích người biết đến. nay mình thấy có một số bạn đang tìm hiểu nên mình xin viết bài hướng dẫn này vì facebook audience chỉ hiển thị trên chế độ Mobile.
Để hiển thị được mã quảng cáo Audience trên desktop bạn vui lòng đăng ký tại đây.  Instant Articles Signup


Sau khi click vào đăng ký thì danh sách các fanpage của bạn được hiện ra. bạn chọn một page để tạo ra một app Instant Articles

Sau khi nhấn vào truy cập thì nó sẻ hiện lên một bảng ta nhấn tiếp tục.
Tiếp đó nó đưa ta vào trang cấu hình bài viết tức thời ta kéo thanh trược xuống ngay phần Công cụ
Ngay phần xác nhận URL ta coppy đoạn <meta của nó và vào code web của bạn thêm vào trên thẻ </head>, sau khi lưu website bạn lại thì ta quay lại thêm tên miền của mình vào. bạn nên khai báo có www và không có www vào nhé.


Ngay phần mạng đối tượng ta chọn vào dấu tích vào bắt đầu.

Cuối cùng là bạn lấy code và đặt lên website thôi nhé. chúc các bạn thành công.
Lưu ý: quảng cáo chỉ hiện khi người dùng đăng nhập facebook nhé.

Hướng dẫn kiếm tiền admob cùng eCreateApp

19:28 Add Comment
Chào các bạn! bài viết này mình xin hướng dẫn cho các bạn cách kiếm tiền từ google admob cùng với hệ thống eCreateApp.

Đăng ký: Bài đăng (Atom)