OBin's Blog: thủ thuật blogspot

New

Mặc định Blogger không có sẵn widget Bài Viết Mới Nhất (Recent Post) nhưng chỉ cần vài thao tác đơn giản sau bạn sẻ tạo ra một widget có chức năng tương tự.

1 Đầu tiên bạn đăng nhập Blogger, chọn Layout, click Add Widget tại vị trí bạn muốn đặt widget, trong bài viết này là cột phải hoặc trái (style được viết cho dạng cột).
Khi cửa sổ Widget mở ra bạn chọn HTML/Javascript

Trong khung nhập nội dung bạn copy đoạn code dưới đây là paste vào:

<script style="text/javascript" src="http://yourjavascript.com/2151392498/recentposts.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Trong đó, bạn có thể cài đặt các thông số sau theo ý mình:

- posts_no là số bài được hiển thị
- showpoststhumbs là cài đặt ảnh đại diện bài viết ( true là có, false là không)
- readmorelink là cài đặt link xem thêm ( true là có, false là không)
- showcommentslink là cài đặt link comment ( true là có, false là không)
- posts_date là cài đặt thời gian bài viết ( true là có, false là không)
- post_summary là cài đặt đoạn mô tả ngắn trích từ nội dung bài viết ( true là có, false là không)
- summary_chars là độ dài của mô tả, tính bằng số kí tự

2 Bạn vào mục Template chọn Edit HTML, copy đoạn code dưới đây paste vào trước thẻ </head> trong template:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Bạn có thể chỉnh sửa lại style và font chữ theo ý mình, trong style này sử dụng font Oswald của Google Fonts.
Các bạn nhấn Lưu và xem kết quả nhé!

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

Xem thêm:
- 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 tạo trang liên hệ 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

Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website. Các bước thực hiện khá đơn giản. Ưu điểm là host nhanh, có thể chỉnh sửa file trực tiếp trên host, quản lý file dễ dàng và đặc biệt là hoàn toàn miễn phí.

Đầu tiên bạn phải có tài khoản Google, đăng nhập vào link drive.google.com

Sau khi đăng nhập Google Dive, bạn tiến hành tạo folder chưa file cần upload

Sau khi tạo folder bạn tiến hành share folder đó để sử dụng như một hosting, làm theo thứ tự như trong hình từ trên xuống:

Sau khi đã bật chế độ public cho folder, bạn tiến hành mở folder đó ra và upload file. Sau khi upload file bạn lấy id của file như sau:

Bạn copy đường dẫn và dán vào thanh địa chỉ :

Ví dụ: https://drive.google.com/open?id=0ByZ5fZboLO6CWVpefWi12NU1ER2s

Đoạn text được bôi đỏ là id của file, bạn copy phần này lại.

Dán vào thay cho phần files_id trong link bên dưới

https://googledrive.com/host/files_id

Sẻ thành link file host có thể sử dụng trên blog hoặc website như sau:

https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s

Với link này bạn có thể chèn vào web dễ dàng, ví dụ với file js như sau:

<script src="https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s" type="text/javascript"></script>

Lưu ý: Nếu bạn chỉ muốn share file không phải folder thì cách share file cũng tương tự.

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

Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách tạo và thêm sitemap vào Webmaster cho Blogger

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

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp