OBin's Blog: web và lập trình

New

5 template WordPress Responsive tuyệt đẹp cho những ai cần. Download miễn phí.

1. InterStellar

2. Customizr

3. Twenty Fourteen

4. Aldehyde

5.Adamos

Trích từ wpmudev.org

Xenforo hiện nay được nhiều webmaster ưa chuộng vị tính năng hay, giao diện đẹp, load nhanh,... nhưng nhìn chung vẫn còn nhiều điểm bạn phải tự tay làm mới có được 1 diễn đàn ưng ý. Sau đây mời các bạn xem bài hướng dẫn cách thay đổi khung đăng ký thành viên trong diễn đàn Xenforo thành dạng popup để tự tay mình thay đổi giao diện đăng ký cho diễn dàn gọn gàng và pro hơn nhé.

Bước 1: Đăng nhập vào admin => Template => sidebar_visitor_panel => Tìm đoạn code sau:

<div class="section loginButton">
        <div class="secondaryContent">
            <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
        </div>
    </div>

và thay thế bằng đoạn code sau:

<div class="section loginButton">      
    <div class="secondaryContent">
        <label id="SignupButton"><a href="{xen:link 'register'}" class="inner OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
    </div>
</div>

=> Lưu lại

Bước 2: Vào Template => register_form => Tìm đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator"

và thay thế bằng đoạn code sau:

<form action="{xen:link 'register/register'}" method="post" class="xenForm AutoValidator formOverlay"

Lưu lại và ra trang chủ nhấn F5 và nhấn nút Đăng ký bên cột phải để xem kết quả nhé.

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

Giao diện mặc định khi muốn đăng nhập ở Xenforo là đổ xuống từ trên header, nhưng nếu bạn muốn thay đổi thành dạng pop up thì cũng không mấy khó khăn. Bạn chỉ cần làm theo các bước của bài hướng dẫn sau thì rất dễ dàng.

Bước 1: Đăng nhập Admin CP => Appearance => Templates => login_bar
=> Thêm đoạn code màu đỏ vào vị trí như bên dưới

<xen:require css="login_bar.css" />

<script>
XenForo.LoginBar = function(a){};
</script>

<div id="loginBar">
 <div class="pageWidth">
  <div class="pageContent"> 
   <h3 id="loginBarHandle">
    <label for="LoginControl"><a href="{xen:link login}" class="OverlayTrigger concealed noOutline">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></label>
   </h3>
   
   <span class="helper"></span>

   <xen:edithint template="login_bar_form" />
  </div>
 </div>
</div>

=> Nhấn Save để lưu sửa đổi

Bước 2: Vào Appearance => Templates => sidebar_visitor_panel
=> Thêm đoạn code màu đỏ vào vị trí như sau:

</div>
</div>

<xen:else />

<div class="section loginButton">  
 <div class="secondaryContent">
  <label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="OverlayTrigger inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label>
 </div>
</div>

</xen:if>

<xen:include template="ad_sidebar_below_visitor_panel" />

=> Nhấn Save để lưu sửa đổi

Bước 3: Vào Appearance => Templates => EXTRA.css
Thêm đoạn css sau:

.xenOverlay #pageLogin
    {

        background: rgba(0, 0, 0, 0.75);

        color: #ffffff;

        padding: 20px;

        border: 20px solid rgba(0, 0, 0, 0.25);

        border-radius: 20px;

        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    }

=> Nhấn Save để hoàn thành. Bây giờ bạn ra ngoài trang chủ, nhấn F5 để load lại trang và thử click đăng nhập xem kết quả nhé.

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

Ai mới bắt đầu tự bước vào lĩnh vực SEO đều phải làm quen với các khái niệm, những thuật ngữ hay những tên gọi đặc biệt trong lĩnh vực SEO. Robots.txt không hẳn là một khái niệm gì mà nó đơn giản chỉ là một file dữ liệu trên host. Nhưng nó có ý nghĩa gì trong SEO? Cách tạo ra nó như thế nào? Sau đây mời các bạn tìm hiểu nó qua bài viết đơn giản.

Khái niệm:
Robots.txt: Là một file đặt trong thu mục Root trên host, file text này chứa các câu lệnh cho phép quản trị viên website có thể chỉ định quyền hạn truy cập vào những thư mục, file... của bọ tìm kiếm. Từ đó các công cụ tìm kiếm sẻ chỉ index những nội dung nào bạn muốn mà thôi.

Cách tạo và sử dụng file Robots.txt:
Để tạo file robots.txt bạn chỉ cần sử dụng chương trình Notepad và gõ các câu lệnh đơn giản vào, sau đó lưu lại với tên robots.txt và upload lên thư mục Root của website là được.

3 lệnh cơ bản nhất của 1 tâp tin robots.txt:

User-agent: *
Allow: /index-ct/
Disallow: /admin/

Ý nghĩa:

- User-agent : Để xác định bot của công cụ tìm kiếm nào. Để dấu * là tất cả các công cụ tìm kiếm
- Allow: Cho phép bot vào thư mục, file
- Disallow: Không cho bot vào thư mục, file.

Lưu ý:
- Bạn có thể thêm nhiều dòng để cho phép hoặc không cho phép bot truy cập ở nhiều thư mục hoặc file khác nhau.
- Không thay đổi trật tự của các dòng lệnh (User-agent luôn ở trên).
- Phân biệt chữ hoa chữ thường.
- Không được viết dư, thiếu khoảng trắng.
- Không nên chèn thêm bất kỳ ký tự nào khác ngoài các câu lệnh.
- Mỗi một câu lệnh nên viết trên 1 dòng.
- Không được để khoảng trắng ở đầu dòng lệnh

Chúc các bạn làm SEO tốt!

10 WordPress Themes miễn phí tuyệt đẹp hỗ trợ responsive cho mọi người. Bạn có thể xem demo trực tiếp trước khi download.

Twenty Fourteen

Aldehyde

Adamos

Arcade

Alpha Forte

TYPAL

Hueman

Revera

Luminus

Point

Theo: wpmudev.org

[Tinhte] XenTag 2.1.3c là Plugin hỗ trợ SEO mạnh mẽ cho diễn đàn Xenforo được phát triển bởi diễn đàn Tinhte, với nhiều chức năng như tạo tag cho bài viết, diễn đàn, trang..., tạo #Hashtag cho bài viết, quản lý tags, tạo tag cloud, tự động chèn link tag, hỗ trợ search theo tag, có thể tạo nhiều widget theo tag...

Một số hình ảnh [Tinhte] XenTag:

- [Tinhte] XenTag 2.1.3c
- Dung lượng: 150kb
- Link download: http://www.mediafire.com/download/a7nqyzvaji30z55/[Tinhte]_XenTag_v2.1.3c.zip

Đôi khi bạn muốn tạo những nội dung nổi bật hoặc quảng cáo roll theo màn hình khi kéo chuột, việc này có vẻ sẻ phức tạp khi bạn tự viết bằng javascript. Nhưng với plugin ScrollToFixed thì việc đó thật dễ dàng.

Mời các bạn xem qua một số ví dụ về cách sử dụng:

Mặc định

$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});

Dùng với margin và limit

$(document).ready(function() {
  $('#cart').scrollToFixed({ marginTop: 10, limit: $($('h2')[5]).offset().top });
});

Header fixed và footer fixed với một thông số limit

$(document).ready(function() {
  $('.header').scrollToFixed();
  $('.footer').scrollToFixed( { bottom: 0, limit: $('.footer').offset().top } );
});

Dùng với nhiều option khác nhau hoặc tạo thêm sự kiện khi roll, ví dụ như đổi màu font chữ, background...

$(document).ready(function() {
    $('.header').scrollToFixed({
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('.footer').scrollToFixed( {
        bottom: 0,
        limit: $('.footer').offset().top,
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });

    $('#summary').scrollToFixed({
        marginTop: $('.header').outerHeight() + 10,
        limit: function() {
            var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 10;
            return limit;
        },
        zIndex: 999,
        preFixed: function() { $(this).find('.title').css('color', 'blue'); },
        preAbsolute: function() { $(this).find('.title').css('color', 'red'); },
        postFixed: function() { $(this).find('.title').css('color', ''); },
        postAbsolute: function() { $(this).find('.title').css('color', ''); }
    });
});

Bạn có thể xem demo trực tiếp một số ví dụ:

http://jsfiddle.net/y3qV5/434/ - Roll theo với một limit.
http://jsfiddle.net/k2R3G/81/ - Cố định header, làm cho nội dung nằm bên dưới nó.
http://jsfiddle.net/ZczEt/167/ - Ví dụ khá đầy đủ: Cố định header, footer và các thành phần theo một sự kiện
http://jsfiddle.net/y3qV5/435/ - di chuyển lên và dừng lại ở những khoảng thời gian khác nhau.
http://jsfiddle.net/y3qV5/769/ - Nhiều thành phần khác nhau cố định theo điểm dừng
http://jsfiddle.net/ZZYpG/68/ - Cố định và thay đổi ngày theo điểm cụ thể
http://bigspotteddog.github.io/ScrollToFixed/ - Những ví dụ thông dụng nhất

Cài đặt và sử dụng:

Bạn download plugin tại đây

Hoặc cập nhật bản mới nhất tại đây

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

Mặc định Blogger không có trang liên hệ mà chỉ có gadget form liên hệ, nhưng chỉ cần vài bước đơn giản bạn cũng có thể làm một trang liên hệ riêng cho blog của mình.

Các bạn làm theo các bước sau:

1. Tạo form liên hệ bằng gadget:
Bạn đăng nhập admin => Bố cục => Chọn 1 vị trí bất kì để đặt gadget, chọn Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ như trong hình

Điền thông tin cơ bản rồi nhấn Lưu lại

2. Ẩn Form liên hệ tại vị trí vừa Add:
Bạn vào Template => Edit HTML => Search và xóa đoạn code được bôi đỏ bên dưới:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
       
 <input class='contact-form-name' expr:id='data:widget.instanceId + 
&quot;_contact-form-name&quot;' name='name' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <input class='contact-form-email' expr:id='data:widget.instanceId + 
&quot;_contact-form-email&quot;' name='email' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <textarea class='contact-form-email-message' cols='25' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-email-message&quot;' name='email-message' 
rows='5'/>
        <p/>
        <input 
class='contact-form-button contact-form-button-submit' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-submit&quot;' 
expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
         
 <p class='contact-form-error-message' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-error-message&quot;'/>
          <p
 class='contact-form-success-message' expr:id='data:widget.instanceId + 
&quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>

</b:includable>

  </b:widget>

Sau đó bạn nhấn Lưu

3. Tạo trang liên hệ:
Bạn vào Pages => Tạo trang mới => mở khung soạn thảo ở chế độ HTML sau đó dán đoạn code bên dưới vào rồi nhấn Lưu

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Lưu ý: Trước khi nhấn lưu bạn nhớ đặt tên cho trang ví dụ như "Liên hệ" và cài đặt tùy chọn không cho phép Comment.

4. Style cho trang liên hệ:
Bạn vào Template => Edit HTML => Search "</b:skin>" và dán đoạn code này bên trong.

.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Sau đó nhấn Lưu và xem kết quả :

Lưu ý: Link trang liên hệ là link trang bạn vừa tạo nhé.

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