Khoa học - Công nghệ

Home » Blogger

Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

Hướng dẫn cấu hình và cài đặt tên miền riêng cho Blogger

vncongnghe.com - Từ lúc Blogger chuyển đổi giao diện và nâng cấp một số tính, bên cạnh những cải tiến đột phá mới mà blogger mang lại thì cũng gây không ít khó khăn cho người dùng blog. Do giao diện mới, bố cục khác hẵn nên nhiều bạn chưa quen, chưa nắm rỏ vị trí các nút lệnh nên khó áp dụng những thủ thuật mà được viết đối với giao diện cũ. Tuy nhiên các bạn hãy lấy làm vui vì sự thay áo mới cùng với những cải tiến này của Blogger, vì sẽ mang lại nhiều điều rất hữu ích cho người dùng Blogger hiện nay đặc biệt là khả năng SEO. Ban đầu mình cũng rất khó chịu với giao diện mới tuy nhiên tìm hiểu một thời gian đã quen thì mình thấy hài lòng đặc biệt là những cải tiến mới của Blogger.

Trong những khó khăn mà nhiều bạn gặp phải và có trao đổi nhiều với mình đó là việc cài đặt tên miền riêng cho Blog của mình. Vấn đề cài đặt tên miền riêng hiện trở thành vấn đề cấp thiết và bắt buộc cho blogger hiện nay bởi việc ngăn chặn của các nhà mạng hiện nay. Và bài viết hôm nay thì mình chia sẻ cho các bạn cách để cài đặt tên miền riêng cho blog với cách cài đặt mới. Nhìn chung cách cấu hình cũng không có sự thay đổi nhiều so với trước đây tuy nhiên cần thêm một bước để xác thực tên miền đó là của chính bạn, bước này rất quan trọng nếu thiếu bước này các bạn có thể không thể cài đặt được tên miền của mình.

Ở đây mình đi ngược chút để việc cấu hình tên miền sau sẽ liên tục.

Đầu tiên bạn truy cập vào tài khoản Blogger và chọn Cài đặt (Settings)

Hướng dẫn cấu hình và cài đặt tên miền riêng cho Blogspot với giao diện mới

Chọn "Thêm tên miền tùy chỉnh" (Add a custom domain)

Sau đó chọn tiếp mục Chuyển sang cài đặt nâng cao (Switch to advanced settings)

Bạn hãy thêm tên miền mình vào (ví dụ: www.traidatmui.com), bạn khoan hả vội lưu lại (Nếu bạn save lại sẽ báo lỗi ngay) mà hãy chọn Hướng dẫn cài đặt (settings instructions).

Đến đây bạn check vào ô On a top-level domain (www.example.com) và xem để ý 2 thông số CNAME (2 khung màu đỏ) dùng để cấu hình tên miền của bạn sau này.

Đến đây chỉ là bước để xem thông số cài đặt CName. Bây giờ bạn hãy truy cập vào trang quản lý tên miền và đăng nhập vào bằng tài khoản của mình, chọn cấu hình DNS nhập 4 IP lần lượt bên dưới vào A records, Host Name là @ (Nếu chưa rỏ bạn có thể xem thêm cấu hình DNS):

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Đến phần CName thì bạn cũng nhập Host Name là www và Value là ghs.google.com. Trước đây đến bước này là có thể kết thúc, tuy nhiên bạn hãy tiến hành thêm 1 CName nữa, chọn Add CNAME Record và nhập 2 thông số mà bạn đã thấy ở trên (trong mục hướng dẫn cài đặt mà mình đóng khung ở bên trên) ví dụ ở trên ta thấy là "BPQ7FLNDO76J" và "gv-WGVSZSPJFHGIBW2BFF5GMORUOOA62YYZBCMFCNGUHKOJLCJZGPOA.domainverify.googlehosted.com." thì chúng ta sẽ thêm Host Name là BPQ7FLNDO76J và Value là gv-WGVSZSPJFHGIBW2BFF5GMORUOOA62YYZBCMFCNGUHKOJLCJZGPOA.domainverify.googlehosted.com. Sau đó chọn thêm là xong.

Như vậy là việc cấu hình của bạn đã xong, bạn hãy chờ khoảng vài tiếng sau hãy vào cài đặt tên miền cho Blogger của mình nhé.

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

Nguồn bài đăng: traidatmui.com

>> Xem thêm

Tiện ích đánh giá bài viết dạng ngôi sao cho Blogger

vncongnghe.com – Trước đây để có tiện ích đánh giá bài viết dạng ngôi sao thì các Blogger hay sử dụng đến js-kit-rating (http://js-kit.com/ratings.js) với 5 ngôi sao đánh giá. Tuy nhiên thời gian gấn đây file http://js-kit.com/ratings.js không còn hoạt động nữa dẫn đến tiện ích các blogger chèn vào blog mình bị die theo. Chính vì thế hôm nay mình xin chia sẻ cùng các bạn một cách để tạo tiện ích đánh giá dạng ngôi không chỉ cho cho bài viết trong blogger mà cả phần comment của blog. Hơn nữa, với tiện ích này bạn còn có thể biết được số lượt xem bài viết (view) trong blogger của bạn và dễ dàng tùy chỉnh.

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

Hình ảnh minh họa

Thật ra tiện ích này cũng đã được Blogger tích hợp sẵn trong Template, mình sẽ chia sẻ luôn cách kích hoạt tiện ích này để các bạn chọn tiện ích phù hợp cho blog mình.

A. Thực hiện với Graddit.com

Đầu tiên bạn hãy vào Graddit.com và chọn kiểu hay dạng ngôi sao mà mình ưng ý, sau đó chọn nền tảng (Platform) là Blogger (Nếu chèn vào comment bạn chọn Blogger comments) để lấy code.

Đến bước chèn vào Blogger

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)

5. Chèn code bên dưới vào sau thẻ <head>

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

6. Tìm đến đoạn code bên dưới hoặc tương tự

<div class='post-header-line-1'/>

7. Chèn code mà bạn vừa lấy tại Graddit.com ở trên vào ngay dưới code vừa tìm được (ví dụ code có dạng)

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>

8. Cuối cùng bạn save lại là xong

B. Kích hoạt tiện ích Rating của Blogger

Đầu tiên bạn vào địa chỉ http://draft.blogger.com và đăng nhập bằng tài khoản Blogger của mình.

Tiếp theo bạn vào phần bố cục (Layout) chọn Chỉnh sửa (Edit) của phần Post

Tiếp theo bạn Check "Hiển thị xếp hạng theo dấu sao" (Show Star Ratings)

Cuối cùng save lại là xong

Lưu ý: Đối với cách này thì đối với những mẫu bạn đã tùy chỉnh, đã loại bỏ các biến Variable có thể không hiện được, chỉ đối với những mẫu sẵn có của blogger kích hoạt sẽ được hiển thị ngay.

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

Nguồn bài đăng: traidatmui.com

>> Xem thêm

Auto Readmore phiên bản mới nhất cho Blogger

vncongnghe – Hôm nay vncongnghe xin chia sẻ cùng các bạn thủ thuật "Tự động tóm tắt bài viết cho Blogger" với cách hiển thị hoàn toàn khác so với thủ thuật trước đây. Với thủ thuật "Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger" mà mình chia sẻ trước đây chỉ giới hạn ở việc phần ảnh thumbnail và phần nội dung bài viết, còn những phần khác như tiêu đề bài viết, phần chân bài viết, ngày tháng đăng bài... sẽ tùy chỉnh theo mặc định của blogger. Nếu bạn thực hiện theo thủ thuật trước đây phần tiêu đề bài viết sẽ hiện thị ở trên còn hình ảnh và phần tóm tắt nội dung sẽ được hiện bên dưới và các phần khác sẽ được giữ nguyên không bị tác động đến.

Hình ảnh minh họa

Và thủ thuật mình sắp giới thiệu sẽ giúp bạn có thể tùy chỉnh cho cách hiển thị bài viết trông đẹp hơn, theo ý muốn của mình. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.

Lưu ý: Ở đây mình chỉ hướng dẫn chung với template cơ bản của Blogger, các bạn hãy tùy theo giao diện blog hiện tại của mình mà chỉnh sửa màu sắc lại cho phù hợp nhé

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;line-height:1.4;margin:0;padding:6px 8px}

.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:100px;width:120px;padding:2px}

.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}

.sumpost h2 a{color:#160}

.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}

.sumpost .postinfo .numcm{margin:0 2px 0 2px}

.sumpost .postinfo .author{margin:0 2px 0 0}

.sumpost .postinfo .numcm .num{color:#f80}

.sumpost .postinfo .label{margin:0 2px 0 2px}

.sumpost .postinfo .label a{color:#b0039a}

.readmore{float:right;margin:8px 0 0;padding:0 0 0 0}

.readmore a{color:#d7034e;padding:0}

.readmore a:hover{color:#00f}

.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}

6. Chèn tiếp code bên dưới vào trước thẻ </head>

<script type='text/javascript'>

var thumbnail_mode = "no-float" ;

no_image = "http://bit.ly/hGWr7r";

sumposts = 500; //số ký tự bài viết hiển thị khi có ảnh

</script>

<script src='http://data-traidatmuidotcom.appspot.com/scripts/auto_sumpost_new.js' type='text/javascript'/>

<style><b:if cond='data:blog.url == data:blog.homepageUrl'>.post-footer,.post h3,h2.date-header{display:none;}</b:if></style>

7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>

8. Thay thế code vừa tìm được thành đoạn code bên dưới

<b:if cond='data:blog.pageType == "static_page"'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<data:post.body/>

<b:else/>

<div expr:id='"summary" + data:post.id'>

<p><data:post.body/></p>

</div>

<b:loop values='data:post.labels' var='label'>

<script type='text/javascript'>

createSummaryAndThumb("summary<data:post.id/>","<data:post.title/>","<data:post.url/>","<data:post.author/>","<data:top.authorLabel/>","<data:post.numComments/>","<data:top.commentLabelPlural/>","<data:label.name/>","<data:postLabelsLabel/>","<data:label.url/>");

</script>

</b:loop>

</b:if>

</b:if>

9. Cuối cùng là Save lại.

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

Nguồn bài đăng: traidatmui.com

>> Xem thêm

Thể hiện Widget Label với nhiều cột

VNC - Blogger quản lý chủ đề của blog bởi những tên label. Có người sử dụng chúng như những Category trong Wordpress và để ở dạng list, cũng có người thì sử dụng như những thẻ Tag và để ở dạng cloud. Nếu blog của bạn đang hiển thị label ở dạng list, không cần quan tâm đến số đếm bài viết trong mỗi label và cũng không thường xuyên tạo một label mới thì không cần thiết phải sử dụng widget label của Blogger. Hãy tự tạo widget HTML/Javascript hoặc chèn ngay trong template đoạn mã để hiển thị những label, việc này sẽ giúp Blogger không mất công xử lý dữ liệu từ widget label rồi chỉ để hiển thị điều mà chúng ta có thể tự làm được với mã HTML đơn giản.

Còn nếu như bạn muốn dùng widget label để hiển thị số đếm bài viết, tự động cập nhật tên label mới và đang để hiển thị theo dạng list thì có một điều bất tiện là danh sách label này chỉ gồm 1 cột. Để hiển thị dưới dạng 2 cột hoặc nhiều hơn chúng ta thêm một vài thuộc tính cho style sheet của blog.

☼ Ảnh DEMO cho bài viết:

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.

.Label li{float:left;width:50%}

5- Xác định ID của Label bạn muốn chia cột. bằng cách Đăng nhập vào blog - Thiết kế - Phần tử trang (Bố Cục) - Bấm vào Chỉnh sửa Label bạn muốn và xem ID của Label tại URL của Label widget như hình:

- Trong ví dụ này Widget mình muốn chia cột là label1.

6- Tìm đến đoạn mã của widget label này (Ctrl + F với từ khóa id='Label1'). Các bạn sẽ tìm được đnạn mã tương tự như sau:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

- Trong đoạn mã của widget này có duy nhất 1 thẻ đóng </ul>, chèn đoạn mã dưới đây vào sau thẻ </ul>.

<div style="clear:both"/>

- Khi đó đoạn code trở thành như sau:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
<div style="clear:both"/>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

- P/s: Thay vì khai báo với class Label chúng ta có thể đổi thành id Label1. Ở đây mình khai báo với class để có thể sử dụng tiếp cho các thành phần khác cùng kiểu hiển thị. Hoặc khai báo với class cloumn chẳng hạn, khi đó cần thay thẻ mở <ul> bằng <ul class='cloumn'>.

- Với 2 cột thì thuộc tính width có giá trị 50%, 3 cột sẽ là 33%... Đây là giá trị tương đối, bạn có thể sử dụng giá trị tuyệt đối. Giả sử widget này đặt ở sidebar có width là 300px, muốn hiển thị 2 cột giá trị width của thành phần li trong Label sẽ là 150px, 3 cột là100px...

- Một điều đặc biệt lưu ý là giả sử widget này đặt ở sidebar và trong style sheet của bạn thành phần li của sidebar có thuộc tính margin cách trái hoặc phải với khoảng cách lớn hơn 0 thì bạn cần giảm giá trị width nhỏ hơn 50%.

Nguồn bài đăng: Namkna

>> Xem thêm

Thể hiện Widget Label với nhiều cột

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.

.Label li{float:left;width:50%}

- Trong ví dụ này Widget mình muốn chia cột là label1.

6- Tìm đến đoạn mã của widget label này (Ctrl + F với từ khóa id='Label1'). Các bạn sẽ tìm được đnạn mã tương tự như sau:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

- Trong đoạn mã của widget này có duy nhất 1 thẻ đóng </ul>, chèn đoạn mã dưới đây vào sau thẻ </ul>.

<div style="clear:both"/>

- Khi đó đoạn code trở thành như sau:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
<div style="clear:both"/>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

- P/s: Thay vì khai báo với class Label chúng ta có thể đổi thành id Label1. Ở đây mình khai báo với class để có thể sử dụng tiếp cho các thành phần khác cùng kiểu hiển thị. Hoặc khai báo với class cloumn chẳng hạn, khi đó cần thay thẻ mở <ul> bằng <ul class='cloumn'>.

- Với 2 cột thì thuộc tính width có giá trị 50%, 3 cột sẽ là 33%... Đây là giá trị tương đối, bạn có thể sử dụng giá trị tuyệt đối. Giả sử widget này đặt ở sidebar có width là 300px, muốn hiển thị 2 cột giá trị width của thành phần li trong Label sẽ là 150px, 3 cột là100px...

- Một điều đặc biệt lưu ý là giả sử widget này đặt ở sidebar và trong style sheet của bạn thành phần li của sidebar có thuộc tính margin cách trái hoặc phải với khoảng cách lớn hơn 0 thì bạn cần giảm giá trị width nhỏ hơn 50%.

Nguồn bài đăng: Namkna

>> Xem thêm

Mẹo để làm cho hình ảnh của Blogger thân thiện hơn trong việc SEO

VNC - Search Engine Optimization (SEO) là cách tốt nhất để tăng lưu lượng truy cập blog. Mặc dù bạn có nhiều bài viết, mà không biết các quy tắc cơ bản của SEO bạn không thể nhận được nhiều traffic. Phần lớn các bạn blogger mới sẽ sợ nghe điều này "thuật ngữ SEO". Vậy SEO là gì, thực ra SEO không khó lắm, nhưng phải chất lượng, súc tích và rõ ràng. Tối ưu hóa hình ảnh chiếm 20% độ quan trọng trong các tìm kiếm hàng ngày.Nếu bạn tối ưu hóa hình ảnh đúng cách sau đó bạn có thể nhận được lưu lượng truy cập nhiều hơn từ những gì bạn đang nhận được bây giờ.

Thẳng thắn mà nói thì blogger không bằng được Wordpress trong khoảng tối ưu hóa hình ảnh. Tuy nhiên không có nghĩa là blogger không thể được tối ưu hóa như Wordpress, nhưng để làm được điều đó bạn cần phải nỗ lực nhiều hơn và cần phải là một chuyên gia về Blogspot. Nào bây giờ chúng ta bắt đầu với việc tối ưu hóa hình ảnh cho Blogger:

I. Nhược điểm của Blogger để tối ưu hóa hình ảnh là gì ?

Blogger không có Plugin hoặc Widget để mà bạn có thể cung cấp các thẻ Title và Alt cho những hình ảnh.
Bạn không thể nén kích thước hình ảnh tự động.
Trong blog Blogger không có cách nào để cắt hình ảnh để phù hợp với cách bố trí của blog.

Đây là những nhược điểm lớn của nền tảng mặc định blogger ảnh hưởng đến việc tối ưu hóa hình ảnh. Và một vài bất lợi khác mà bạn sẽ hiểu sau khi đọc toàn bộ bài viết.

Trong bài viết này tôi sẽ giải thích tất cả các mẹo sử dụng mà bạn có thể làm cho hình ảnh của bạn trở nên thân thiện hơn rất nhiều trong SEO và bạn sẽ khắc phục được tất cả các nhược điểm trên.

II. Vậy làm thế nào để SEO hình ảnh trong Blogger?

1. Resize hình ảnh đúng cách:

Tôi thấy hầu hết những bạn mới sử dụng Blogger thường Upload ảnh trực tiếp mà không hề cắt xén ảnh trước khi Up lên, rồi sau đó sử dụng các tính năng thay đổi kích thước ảnh tự động của Blogger gợi ý là: trung bình, gốc, lớn và rất lớn. Sau đó các bạn luôn giữ Kích thước bản gốc bởi vì nếu bạn sử dụng các tùy chọn khác như trung bình hoặc lớn sau đó chất lượng hình ảnh sẽ bị kém đi.

Công cụ tốt nhất tôi khuyên bạn để cắt xén hình ảnh trực tuyến nên là cropp.me .
Đối với cắt xén và chỉnh sửa ảnh offline thì Adobe Photoshop là công cụ tốt nhất mà tôi thường xuyên sử dụng.

Lưu ý: Luôn luôn nhớ rằng kích thước hình ảnh của bạn không được lớn hơn chiều rộng của các body blog. Nếu hình ảnh của bạn lớn hơn so với body thì hình ảnh sẽ được ẩn đằng sau các widget hoặc nó có thể chồng lên nhau với các widgets mặc định. Mặc định thì các bạn nên để kích thước hình ảnh tối đa là 580px.

2. Thay đổi định dạng ảnh trước khi tải lên Blogger:

Thời gian tải trang là một trong những yếu tố quan trọng. Vì vậy để giảm thời gian tải trang các bạn cần phải Up lên các hình ảnh có dung lượng nhẹ nhất có thể.

Nếu bạn tải hình ảnh lên Blog và để Blogger lấy kích thước mặc định của ảnh nó sẽ tác động rất lớn tới thời gian tải blog của bạn.

Vì vậy, đầu tiên bạn phải để nén hình ảnh bằng cách sử dụng Yahoo Smushit .

Hiện nay tôi nhận thấy rằng Yahoo Smushit đi xuống, mất rất nhiều thời gian để tải lên cũng như tải ảnh xuống.
Công cụ thay thế tốt nhất cho Smushit là PunyPng. Tôi đã sử dụng công cụ này từ vài tuần nay và nhận thấy nó có tỉ lệ nén rất tốt. Cá nhân tôi nhận thấy rằng công cụ này tốt hơn nhiều so với Yahoo Smushit .

3. Thêm thẻ Alt và Title cho ảnh:

Thẻ Alt: có nghĩa là Altenative Information - thông tin thay thế cho người dùng không hiển thị được hoặc chọn ẩn hình ảnh trong trình duyệt, là một thuộc tính quan trọng của thẻ IMG. Hay nói cách khác. nội dung của nó sẽ hiển thị trên trình duyệt khi trình duyệt không thể trình bày được một hình ảnh vì lý do nào đó. Các SEO xem nội dung của thẻ ALT như là anchor text trong trường hợp hình ảnh là một liên kết.

Thẻ Title: dùng để cung cấp thông tin bổ sung thêm cho ảnh khi bạn di chuột qua một hình ảnh nào đó.Trên hình ảnh đó xuất hiện 1 nội dung biểu thị cho ảnh thì đó là công dụng của các thẻ tiêu đề Title.

Thẻ Alt và Title đóng một vai trò rất quan trọng đối với thứ hạng của hình ảnh trong kết quả tìm kiếm. Sau khi bạn tải lên một hình ảnh vào Blogger sau đó các bạn chọn chỉnh sửa ở dạng HTML tìm đến thẻ <img thêm tính năng Alt và Title như sau.

Khi bạn tải lên một hình ảnh sau đó chỉnh HTML code trông giống như sau:

<a href="http://3.bp.blogspot.com/_SoxppeH7x0/TNbfFpWlWFI/ AAAAA AAAAj4 /tzl_ZYIuES4/s1600/ATBSlider.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://3.bp.blogspot.com/_SoxppeH7x0/TNbfFpWlWFI/ AAA AAAAAA j4/tzl_ZYI uES4/ s200/ATBSlider.png" width="200" /></a>

Bạn phải thực hiện những thay đổi sau đây để làm cho nó thân thiện với SEO

<a href="http://3.bp.blogspot.com/_So-xppeH7x0/TNbfFpWlWFI/ AAAAAAAAAj4/tzl_ZYIuES4/s1600 / ATBSlider.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img title="ATB Slider" alt="ATB Slider" border="0" height="200" src="http://3.bp.blogspot.com/_So-xppeH7x0/TNbfFpWlWFI/ AAAAAAAAAj4/tzl_ZYIuES4/s200/ATBSlider.png" width="200" /></a>

Đây là phương pháp hướng dẫn sử dụng thêm thẻ Alt và Title. Trong bài tiếp theo tôi sẽ giới thiệu đến các bạn tính năng Tự động Thêm thẻ Title và Alt cho hình ảnh mà không cần phải làm thủ công cho mỗi bài viết của mình.

4. Đặt tên cho hình ảnh:

Tôi thấy hầu hết các bạn đều cho biết cách đặt tên hình ảnh mang tính chất tượng trưng như: image1, image2, hoặc 1,2,3... Nhưng đây không phải là cách đúng để tối ưu hóa hình ảnh của bạn để các Công cụ Tìm kiếm xếp hạng hình ảnh của bạn tốt hơn.

Bây giờ các bạn có thể thấy đường Link của hình ảnh hưởng như thế nào qua ví dụ như sau: Nếu bạn đang đăng 1 bài về Tiger mà bạn lại đặt tên cho nó là image25. Sau khi tải lên các bạn sẽ thấy liên kết url của bạn trông như sau:

http://3.bp.blogspot.com/ovUFOKRs_q0/Tmc_xBDJwwI/
AAAAAAAAE80/kL9_ck78C4c/s400/image25.png

Bây giờ image25 và Tiger không có điểm nào tương đồng cho nên bạn không nhận được bất kỳ kết quả nào cho điều này trên công cụ tìm kiếm.

Vì vậy bạn phải đặt tên cho hình ảnh của bạn là Tiger thay vì image25 sẽ tốt hơn cho Công cụ Tìm kiếm Tối ưu hóa . Bây giờ các bạn xem url của mình trông như thế nào sau khi bạn thay thế với Tiger.

http://3.bp.blogspot.com/ovUFOKRs_q0/Tmc_xBDJwwI/
AAAAAAAAE80/kL9_ck78C4c/s400/Tiger.png.

5. Tránh đặt tên hình ảnh với các khoảng trống (space):

Ví dụ nếu bạn đang viết một bài đăng trên Make Money Online và bạn muốn hiển thị một hình ảnh tương tự như Make Money Online.

Thông thường bạn sẽ cung cấp tên cho ảnh là Make Money Online.jpg. Tuy nhiên, các bạn không nên để các khoảng trống như thế này. Bởi vì các khoảng trống này thường được thay thế bằng %20 và điều này thì không hề có giá trị gì trong SEO. Cho nên tốt hơn hết là thay thế khoảng trống (space) với '-' hoặc '+'.

Bây giờ các bạn thay Make Money Online.jpg thành Make-Money-Online.jpg hoặc Make+Money+Online.jpg

Kết luận:

Hầu hết các blogger đều bỏ qua tối ưu hóa hình ảnh. Nếu bạn không tối ưu hóa hình ảnh đúng cách thì nó sẽ ảnh hưởng tới thời gian tải blog của bạn và thứ hạng trên công cụ tìm kiếm. Tuy nhiên các bạn không nên quá khôn ngoan đến mức tối ưu hóa mọi khía cạnh của blog để tránh khỏi hình phạt của Google (như Panda và Penguin).

Tham khảo alltechbuzz.net

>> Xem thêm

Mẹo để làm cho hình ảnh của Blogger thân thiện hơn trong việc SEO

Blogger không có Plugin hoặc Widget để mà bạn có thể cung cấp các thẻ Title và Alt cho những hình ảnh.
Bạn không thể nén kích thước hình ảnh tự động.
Trong blog Blogger không có cách nào để cắt hình ảnh để phù hợp với cách bố trí của blog.

II. Vậy làm thế nào để SEO hình ảnh trong Blogger?

1. Resize hình ảnh đúng cách:

Công cụ tốt nhất tôi khuyên bạn để cắt xén hình ảnh trực tuyến nên là cropp.me .
Đối với cắt xén và chỉnh sửa ảnh offline thì Adobe Photoshop là công cụ tốt nhất mà tôi thường xuyên sử dụng.

2. Thay đổi định dạng ảnh trước khi tải lên Blogger:

Nếu bạn tải hình ảnh lên Blog và để Blogger lấy kích thước mặc định của ảnh nó sẽ tác động rất lớn tới thời gian tải blog của bạn.

Vì vậy, đầu tiên bạn phải để nén hình ảnh bằng cách sử dụng Yahoo Smushit .

Hiện nay tôi nhận thấy rằng Yahoo Smushit đi xuống, mất rất nhiều thời gian để tải lên cũng như tải ảnh xuống.
Công cụ thay thế tốt nhất cho Smushit là PunyPng. Tôi đã sử dụng công cụ này từ vài tuần nay và nhận thấy nó có tỉ lệ nén rất tốt. Cá nhân tôi nhận thấy rằng công cụ này tốt hơn nhiều so với Yahoo Smushit .

3. Thêm thẻ Alt và Title cho ảnh:

Khi bạn tải lên một hình ảnh sau đó chỉnh HTML code trông giống như sau:


<a href="http://3.bp.blogspot.com/_SoxppeH7x0/TNbfFpWlWFI/       AAAAA AAAAj4   /tzl_ZYIuES4/s1600/ATBSlider.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://3.bp.blogspot.com/_SoxppeH7x0/TNbfFpWlWFI/ AAA AAAAAA j4/tzl_ZYI uES4/ s200/ATBSlider.png" width="200" /></a>

Bạn phải thực hiện những thay đổi sau đây để làm cho nó thân thiện với SEO

<a href="http://3.bp.blogspot.com/_So-xppeH7x0/TNbfFpWlWFI/ AAAAAAAAAj4/tzl_ZYIuES4/s1600 / ATBSlider.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img title="ATB Slider" alt="ATB Slider" border="0" height="200" src="http://3.bp.blogspot.com/_So-xppeH7x0/TNbfFpWlWFI/ AAAAAAAAAj4/tzl_ZYIuES4/s200/ATBSlider.png" width="200" /></a>

4. Đặt tên cho hình ảnh:

http://3.bp.blogspot.com/ovUFOKRs_q0/Tmc_xBDJwwI/
AAAAAAAAE80/kL9_ck78C4c/s400/image25.png

Bây giờ image25 và Tiger không có điểm nào tương đồng cho nên bạn không nhận được bất kỳ kết quả nào cho điều này trên công cụ tìm kiếm.

http://3.bp.blogspot.com/ovUFOKRs_q0/Tmc_xBDJwwI/
AAAAAAAAE80/kL9_ck78C4c/s400/Tiger.png.

5. Tránh đặt tên hình ảnh với các khoảng trống (space):

Ví dụ nếu bạn đang viết một bài đăng trên Make Money Online và bạn muốn hiển thị một hình ảnh tương tự như Make Money Online.

Tham khảo alltechbuzz.net

>> Xem thêm

Hướng dẫn làm tạo Sitemap cho Blogger

VNC - Tuy đã có nhiều bài viết hướng đẫn làm Sitemap cho Blogger trên mạng nhưng hầu hết đều không đầy đủ , rõ ràng và đặc biệt là thiếu hay gặp lỗi phổ biền là lỗi sau:

- Số post tối đa mà google đánh chỉ mục(index) dựa vào feed được mặc định chỉ là 25 post. Có nghĩa là Sitemap trang blog của bạn chỉ bao gồm 25 Entries mới nhất (tại thời điểm google index blog của bạn). Vậy thì những Entries còn lại của bạn thì sao? Tất nhiên chúng chẳng được Index bởi Google sitemap!

Bài viết này vncongnghe sẽ hướng dẫn các bạn Add Sitemap một cách chuẩn mực

Bước 1 – Đăng nhập vào Google Webmaster Tools với tào khoản Google của bạn (Gmail)

Đăng nhập vào Google Webmaster Tools với tào khoản Google của bạn (Gmail)

Bước 2 – Click vào nút ‘Add a site…’ như hình dưới

Bước 3 – Nhập địa chỉ blog cua bạn ví dụ blog của mình là http://www.vncongnghe.com/

Bước 4 – Xác minh quyền sở hữu tên miền của bạn bằng cách chọn xác minh bằng thẻ meta
Chú ý: Bạn có thể chọn cách xác minh qua việc upload file html nếu bạn có hosting riêng

Bước 5 - Đăng nhập vào Blogger tại đây rồi vào mục ‘Layout / Thiết kế’ –> Edit HTML/ Chỉnh sửa HTML (nếu bạn dùng giao diện tiếng việt)

Bước 6 – Chèm đoàn mã Meta bạn vừa copy vào phía dưới thẻ <head> như hình dưới

Bước 7 - Quay lại trang Google Webmaster Tools Click vào nút Verify (xác minh) như hình dưới

Bước 8 - Quan trọng nhất là Copy đoạn mã trong dấu sau: atom.xml?redirect=false&start-index=1&max-results=500

Copy đoạn mã atom.xml?redirect=false&start-index=1&max-results=500

Bước 9 – Trở lại trang Google Webmaster Tools rồi vào ‘Site Configuration’ –> ‘Sitemaps’ –> ‘Submit a Sitemap’. Paste đoạn mã atom.xml?redirect=false&start-index=1&max-results=500 vào trong ô text rồi click ‘Submit’ như hình dưới

Paste đoạn mã atom.xml?redirect=false&start-index=1&max-results=500 vào trong ô text rồi click ‘Submit’

Chú ý thêm nếu blog của bạn có nhiều hơn 500 bài viết thì bạn add thêm link sau:

atom.xml?redirect=false&start-index=1&max-results=100

atom.xml?redirect=false&start-index=101&max-results=100

atom.xml?redirect=false&start-index=201&max-results=100

atom.xml?redirect=false&start-index=301&max-results=100

atom.xml?redirect=false&start-index=401&max-results=100

atom.xml?redirect=false&start-index=501&max-results=100

atom.xml?redirect=false&start-index=601&max-results=100

atom.xml?redirect=false&start-index=701&max-results=100

Quy tắc: atom.xml?redirect=false&start-index=701&max-results=100
thì trong đó 701 là số thứ tự bài viết bắt đầu được index còn 100 là số bài viết sẽ được index bạn có thể tự thay để phù hợp với blog của mình

Nếu blog của bạn có nhiều hơn 500 bài viết

Tham khảo từ: vntim.blogspot.com

>> Xem thêm

Hướng dẫn làm tạo Sitemap cho Blogger

Bước 2 – Click vào nút ‘Add a site…’ như hình dưới

Bước 3 – Nhập địa chỉ blog cua bạn ví dụ blog của mình là http://www.vncongnghe.com/

Bước 5 - Đăng nhập vào Blogger tại đây rồi vào mục ‘Layout / Thiết kế’ –> Edit HTML/ Chỉnh sửa HTML (nếu bạn dùng giao diện tiếng việt)

Bước 6 – Chèm đoàn mã Meta bạn vừa copy vào phía dưới thẻ <head> như hình dưới

Bước 7 - Quay lại trang Google Webmaster Tools Click vào nút Verify (xác minh) như hình dưới

Bước 8 - Quan trọng nhất là Copy đoạn mã trong dấu sau: atom.xml?redirect=false&start-index=1&max-results=500

Chú ý thêm nếu blog của bạn có nhiều hơn 500 bài viết thì bạn add thêm link sau:

atom.xml?redirect=false&start-index=1&max-results=100

atom.xml?redirect=false&start-index=101&max-results=100

atom.xml?redirect=false&start-index=201&max-results=100

atom.xml?redirect=false&start-index=301&max-results=100

atom.xml?redirect=false&start-index=401&max-results=100

atom.xml?redirect=false&start-index=501&max-results=100

atom.xml?redirect=false&start-index=601&max-results=100

atom.xml?redirect=false&start-index=701&max-results=100

Tham khảo từ: vntim.blogspot.com

>> Xem thêm

5 kỹ thuật SEO đã lỗi thời

VNC - Nếu bạn dự định làm blog cho doanh nghiệp của mình và muốn làm SEO cho nó, vậy thì bạn không chỉ PHẢI biết các kỹ thuật SEO có thể hỗ trợ tốt nhất cho blog của bạn mà bạn còn phải biết các kỹ thuật SEO đã lỗi thời và Google không còn quan tâm nữa. Nếu bạn vẫn còn sử dụng những phương pháp này thì bạn không làm gì ngoài việc phí thời gian của mình. Bài viết dưới đây mô tả 5 kỹ thuật SEO đã lỗi thời mà không còn hữu ích đối với Google nữa.

Nhồi nhét keyword:

Khi mà SEO mới bắt đầu được sử dụng, vẫn chưa có nhiều sự cạnh tranh trong thế giới trực tuyến và các tác gia hay blogger thường quen với việc nhồi nhét rất nhiều từ khóa trong nội dung. Có một điều rõ ràng là nếu bạn cứ tiếp tục nhồi nhét keyword trong các bài viết của mình thì bạn sẽ không bao giờ cung cấp được nội dung chất lượng cho người đọc trên web của mình. Google đã biết về kỹ thuật xấu mà các chuyên gia SEO đã sử dụng và đó là lý do mà bạn không nên sử dụng những kỹ thuật này. Bạn nên sử dụng các từ khóa nhưng bạn phải sử dụng ở một mật độ vừa phải. Bạn nên giữ mật độ từ khóa chỉ khoảng 2% là tốt nhất.

Spam bình luận trên blog:

Một cách rất tốt để bạn tăng cường backlink cho website và tăng lượng truy cập bằng cách thêm link website của bạn vào bình luận blog. Tuy nhiên, nếu bạn làm quá mức việc này sẽ được Google gọi là spam bình luận. Hiển nhiên là điều này sẽ không tốt cho website của bạn. Các công cụ tìm kiếm sẽ phân tích mỗi backlink trên website của bạn và nếu chúng tìm thấy những backlink không cần thiết thì chúng sẽ chuyển thứ hạng website xuống dưới. Vì vậy, nếu muốn có thứ hạng cao trong SERP thì bạn không nên dính vào bất kỳ hoạt động nào như spam bình luận trên blog.

Đăng thông tin lên công cụ tìm kiếm:

Thật nực cười có rất nhiều người cung cấp dịch vụ để bạn có thể đưa website lên các công cụ tìm kiếm. Điều này chẳng giúp được gì cho bạn ngoài việc tốn tiền và thời gian. Nếu chúng tôi nói với bạn về thế giới SEO ngày nay thì kỹ thuật này không tạo nên sự khác biệt nào cả. Nếu bạn thật sự muốn đưa website của mình lên đâu đó thì bạn nên đưa lên các trang web social media như Facebook và Twitter.

Tối ưu hóa thẻ Meta:

Các thẻ Meta đã từng có một thời rất thịnh vượng khi các công cụ tìm kiếm đánh giá thứ hạng website thông qua những thẻ này nhưng không may thay, những thẻ Meta này không còn tác dụng nữa. Những thẻ này được dùng để cung cấp mô tả ngắn gọn về website của bạn và không gì khác nữa. Nếu bạn đang nghĩ rằng thêm thẻ Meta vào trang web của bạn sẽ giúp tăng thứ hạng SEO thì bạn hoàn toàn sai lầm. Bạn phải chú ý đến các chiến lược SEO thật sự để tăng thứ hạng trên kết quả tìm kiếm.

Trao đổi link:

Nghiêm túc đấy! Liệu bạn có nghĩ rằng trao đổi link sẽ giúp bạn chứ? Nếu bạn đang nghĩ như thế thì bạn sẽ mắc một sai lầm nghiêm trọng. Có một thời gian trao đổi link hoạt động tốt nhưng ngày nay, công cụ tìm kiếm không chú ý đến các link hai chiều nữa.

Theo aiim.edu.vn

>> Xem thêm