OBin's Blog: thủ thuật blogger

New

Một blogger cần phải có nhiều kênh chia sẻ trong đó mạng xã hội Facebook là không thể thiếu. Để dễ dàng like và chia sẻ bài viết hay bạn chỉ cần đặt nút like tại trang chi tiết blog là được.
Sau đây là hướng dẫn nhanh cách gắn nút like (Like button) Facebook cho trang chi tiết blogger:

Bạn vào link sau để lấy code nút like Facebook: https://developers.facebook.com/docs/plugins/like-button

Điền đầy đủ các thông tin cần thiết như kích thước Width, bố cục (Layout) rồi nhấn Get Code, chú ý phần URL to Like bạn cứ để mặc định, khi gắn code vào template sẽ chỉnh lại sau.

Sau khi nhấn Get Code bạn được đoạn code sau:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Đăng nhập Blogger => Template => Edit => Chèn đoạn code trên vào sau thẻ <body> trong template của bạn.

Bước tiếp theo là gắn nút like vào vị trí mong muốn của bạn, thường thì nút like nằm dưới cuối cùng bài viết trong thẻ <div class="post hentry...

Sau khi tìm đến vị trí cần đặt nút like bạn dán đoạn code này vào, nhấn Save là được.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' expr:href='data:blog.url'></div>
</b:if>

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

Xem thêm:
- Top 20 template blogger cực đẹp, download miễn phí

- Các mẫu theme miễn phí tuyệt đẹp cho Blogger

- 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 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

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

Trong blogger thường hỗ trợ sẵn khung comment bằng tài khoản Google và nhiều openid khác nhau nhưng không hỗ trợ comment Facebook, vì vị muốn thêm comment Facebook bạn phải tự tay làm. Nhưng cũng không khó lắm đâu các bạn, chỉ cần làm theo các bước sau là bạn cũng có thể làm dễ dàng.

Bước 1: Đăng nhập blogger => Template => Edit HTML => Tìm (Ctrl + F) đoạn <html và thành <html xmlns:og='http://ogp.me/ns#'

Bước 2: Tìm <body> thêm đoạn code sau vào:

<div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : 'YOUR_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    };
    (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());
    </script

Thay YOUR_APP_ID thành App ID của bạn

Bước 3: Tìm thẻ <head> thêm vào bên dưới đoạn code sau:
<meta property = "fb:app_id" content= "YOUR_APPLICATION_ID" />Thay YOUR_APP_ID thành App ID của bạn

Bước 4: Tìm đoạn code sau: <div class='post-footer-line post-footer-line-2'>

Dán đoạn code sau vào bên dưới:

<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

Bước 5: Tìm <div class='post-footer-line post-footer-line-3'>
Dán đoạn code sau vào bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='900'/></div>
</b:if>

Sau đó các bạn lưu lại và chạy thử trong trang chi tiết bài viết xem kết quả nhé.

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

Graph Meta là thẻ meta không thể thiếu khi bạn muốn làm SEO web thông qua mạng xã hội Facebook, nhưng đối với một blogger thì thế nào? Sau đây là hướng dẫn các bạn cách gắn thể Graph Meta đơn giản nhất.

1 Vào Template => Edit Template => Ctr + F tìm thẻ <html

=> Chèn code định dạng dưới vào như sau: <html codehere>

xmlns:og='http://ogp.me/ns#

2 Ctr + F tìm <title><data:blog.pageTitle/></title> chèn đoạn code sau lên trên:

<!-- Open Graph Meta Tags begin -->

    <meta expr:content='data:blog.pageTitle' property='og:title'/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.postImageThumbnailUrl'>

      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

    </b:if>

    </b:if>

    <b:if cond='data:blog.pageType != &quot;item&quot;'><meta content='linkDefaultImageOg.jpg' property='og:image'/></b:if>

    <meta expr:content='data:blog.title' property='og:title'/>

    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

    <b:if cond='data:blog.metaDescription'>

      <meta expr:content='data:blog.metaDescription' property='og:description'/>

    </b:if>

    <meta content='61737022491256' property='fb:app_id'/> <!-- App id facebook  Nếu bạn không có thì xóa dòng này-->

    <!-- Open Graph Meta Tags end-->

3 Sửa những nội dung mặc định thành của website bạn và lưu lại.

- linkDefaultImageOg.jpg = Link hình ảnh mặc định của blog
- 61737022491256 = app id Facebook

Thử like hoặc share một nội dung nào đó trên trang bạn xem, bài viết sẻ được hiển thị đầy đủ gồm có Title, images, description, link => Bạn đã thành công!

Xem thêm:
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger
- Hướng dẫn gắn nhanh comment Facebook cho blogger
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger

Tạo và thêm sitemap vào Webmaster trong Blogger là một bước trong quá trình làm SEO cho blog của bạn. Sau đây mình sẻ hướng dẫn cách tạo sitemap đơn giản cho blogger:

Bước 1: Tạo sitemap
Thực ra sitemap trong blogger đã có sẵn, bạn chỉ cần móc nó ra sử dụng thôi
Bạn copy đoạn text sau:

User-agent: *
Disallow: /search
Allow: /
 
Sitemap: http://yourblogger.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

dashboard >> settings >> search preferences

dashboard >> settings >> search preference

Đăng nhập vào admin blogger -> dashboard >> settings >> search preferences -> Paste vào khung robots.txt:

Sau đó nhấn nút Save Changes

Bước 2: Submit Blogger sitemap của bạn trong Google webmaster tools -> add/test sitemaps:

 Sau đó bạn nhấn nút Submit sitemap để hoàn tất.

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

Hiện nay vì lý do nào đó hoặc do "lỗi trình quản lý" mà nhà mạng VNPT chặn tên miền blogspot.com khiến cộng đồng blogger và SEO Việt Nam cũng như nhiều blogger sống dựa vào viết lách và chia sẻ thông tin bổ ích bị ảnh hưởng.

Cộng đồng đã chia sẻ nhiều thủ thuật để có thể truy cập vào blogger như đổi DNS, đổi proxy, sử dụng tool... hoặc chuyển sang sử dụng nhà mạng khác như Viettel hoặc FPT :) Sau đây Beetiny blog xin chia sẻ một thủ thuật nhỏ khác nhằm giúp cho các blogger khắc phục tình trạng bị chặn hình ảnh từ domain blogspot.com.

Thực hiện:

Đăng nhập admin Blogger => Mẫu => Chỉnh sửa HTML => Chọn vào code và nhấn Ctr + F và nhập tìm thẻ </body>, đặt đoạn code sau đây trước thẻ </body> vừa tìm đó.

<script type='text/javascript'>
//<![CDATA[
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++) {
images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com");
}
//]]>
</script>

Sau đó nhấn Lưu mẫu

Đoạn code trên sẻ giúp blog của bạn tự động replace url của hình ảnh từ domain blogspot.com thành lh4.googleusercontent.com nhưng vẫn không mất hình ảnh ( blogspot.com và googleusercontent.com đều chung 1 nguồn là Picasa)

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

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp