Template blogspot Responsive chuẩn Seo - Simple is perfect

Template blogspot Responsive chuẩn Seo - Simple is perfect
Lâu quá không có bài viết mới cho mọi người, căn bản tại dạo này cuối năm nên hơi bận và cặm cụi ngồi làm cái template này coi như món quà nhỏ trước tết.

Như tên gọi của nó, Simple is Perfect, template này khá đơn giản và dạng thuần blogspot, thích hợp cho các blog các nhân, được phát triển dựa trên 1 template sẵn có. Các bạn chỉ việc upload theme lên blog và dùng bình thường. Ưu điểm của nó là đã được mình tối ưu SEO onpage kha khá, đơn giản, load nhanh, và được tích hợp tính năng Responsive - phù hợp với các thiết bị di động như iPad, smart phone...

Giới thiệu một số chức năng trong template


Template tông đỏ cho nó có tí không khí tết :D

Tổng quan template Simple is Perfect:

  • Giao diện Responsive cho các thiết bị.
  • Ngày tháng trên đầu blog.
  • Menu dropdow.
  • Menu tự động cho trang tĩnh.
  • Ticker tin hot, nổi bật bên dưới menu.
  • Phần dành riêng cho quảng cáo dễ dàng tùy biến bằng Widget theo đúng chuẩn 468x60.
  • Page Nav.

Phần bài viết của template

  • Bộ nút like và share facebook gọn nhẹ.
  • Phần tin tức liên quan trên đầu bài viết.
Để biết thêm thông tin chi tiết vui lòng "tham quan" thêm blog :D

Cài đặt template Simple is Perfect chuẩn Seo


Vì đây là dạng template thuần blogspot nên các bạn chỉ cần upload lên và sử dụng bình thường, chỉ cần cài đặt 1 vài bước đơn giản.
1. Cài đặt menu cho template
- Vào "chỉnh sửa HTML", tìm đến <div id='smenu'> và sửa lại các nhãn tương ứng.
- Lưu ý: Để hiện thị đúng số bài đăng, giữa nguyên: ?&amp;max-results=9

2. Thêm link cho phần ticker/ tin hot:
- Tìm đến đoạn: <div id='ticker'>
- ...

3. Bước cuối cùng
- Thêm meta keyword và description nếu muốn. Tìm đến đoạn dưới đây và sửa lại:
<meta content='Một sản phẩm của Cuộc sống muôn màu . info' name='description'/>
<meta content='Keyword 1, keyword 2,..' name='keywords'/>
- Vào phần "Cài đặt", "Bài đăng và nhận xét", chọn hiển thị tối đa 9 bài đăng.

À quên, bước cuối cùng, để sử dụng được Responsive của template, các bạn tắt tính năng giao diện điện thoại có sẵn của Blogger đi nhé ;)

Have fun

Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot

Trong các bài viết gần đây, thấy có khá nhiều bạn hỏi làm thế nào để thêm bộ nút chia sẻ mạng xã hội dạng nằm ngang bao gồm: Facebook, Google +, Tweet giống trong template tin tức Congly, nên hôm nay mình sẽ hướng dẫn các bạn cách add nó vào blogspot :-)

Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot


Cách thêm bộ nút chia sẻ mạng xã hội


Bước 1: Đăng nhập vào trang quản trị blog
- Vào "Mẫu" -> "Chỉnh sửa HTML".
- Thêm đoạn đoạn scripts sau vào trước thẻ </head>.
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fb7b814b14ef7b' type='text/javascript'/>

Bước 2: Tích hợp bộ nút chia sẻ vào Widget
- Vào "Bố cục" -> "Thêm tiện ích mới" tại vị trí bạn mong muốn.
- Chọn tiện ích HTML/JAVASCRIPTS.
- Thêm đoạn code sau vào nội dung của tiện ích:
<div class='addthis_toolbox addthis_default_style' style='padding:10px 2px'>
<a class='addthis_button_google_plusone' g:plusone:size='tall' style='padding-right:10px'/>
<a class='addthis_button_facebook_like' fb:like:layout='box_count' style='padding-right:10px'/>
<a class='addthis_button_tweet' style='padding-right:10px' tw:count='vertical'/>
<a class="addthis_counter"></a>
</div>

Bước 3: Lưu lại và xem kết quả :-)

Tạo playlist nghe nhạc trên đầu blog

Tạo playlist nghe nhạc trên đầu blog
Hôm nay, Cuộc sống muôn màu xin hướng dẫn một tiện ích khá đơn giản của bên thứ 3 hỗ trợ cho blogspot, website, giúp bạn dễ dàng thêm trình nghe nhạc vào blog của mình.

Hộp nhận xét mới có avatar đơn giản cho blogspot

Hộp nhận xét mới có avatar đơn giản cho blogspot
Chỉ với 2 bước, bạn sẽ có ngay tiện ích nhận xét mới kèm avatar khá đơn giản  và nhẹ cho trang blogspot của mình. Một tiện ích không thể thiếu cho các blog cá nhân, giúp ta dễ dàng theo dõi các lượt bình luận của khách truy cập mà không cần phải vào trang quản trị Blooger.

[Congly Version 2] Template tin tức giao diện chuyên nghiệp cho blogspot

Template tin tức giao diện chuyên nghiệp cho blogspot
Như đã giới thiệu ở bài Giao diện cho blogspot - Congly template (Version 1), ở bản này, ngoài các tiện ích và thay đổi, mình đã thay đổi và chỉnh sửa lại nhiều thứ, cũng như fix lỗi. Cảm ơn sự góp ý nhiệt tình của các bạn để template này ngày càng hoàn thiện hơn.

Thêm comment app Facebook cho blogspot (Mới)

Ở bài trước, mình đã hướng dẫn các bạn cách thêm bình luận facebook cho blogspot khá đơn giản, không cần phải xác thực tài khoản hay tạo App. Nhưng bất tiện ở chỗ bạn không thể quản lý bình luận của bạn đọc.

Bài viết này, mình sẽ hướng dẫn các bạn cách thêm bình luận Facebook vào blog quản lý bằng App.

Ưu điểm: Dễ dàng tiếp nhận cũng như quản lý tất cả các bình luận.

Giao diện quản lý bình luận của Facebook APP
Giao diện quản lý bình luận của Facebook APP

Cách chèn bình luận Facebook vào blogger và quản lý bằng APP


 Lưu ý: Để tạo app, tài khoản người dùng tại facebook của bạn phải được veryfi (xác thực), thông thường là qua mạng di động, các mạng như mobi hay vina... các bạn xác nhận bình thường, riêng mạng Viettel các bạn làm theo hướng dẫn:
Cách xác nhận tài khoản facebook qua mạng Viettel

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 1: Đăng ký app trên facebook
- Truy cập vào địa chỉ: https://developers.facebook.com/
- Tạo app mới như trong hình.

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 2: Đặt tên cho app (Ứng dụng)

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Nhập mã bảo vệ như trong hình sau khi chọn "Tạo ứng dụng"

Tạo ứng dụng facebook quản lý bình luận, nhận xét

Bước 3: Thiết lập ứng dụng vừa tạo tại Facebook

Thêm comment app Facebook cho blogspot (Mới)

Chèn khung nhận xét vào blogspot


Bước 4: Đăng nhập vào blogger, vào "Mẫu" -&gt; "Chỉnh sửa HTML"

- Thêm đoạn sau vào thẻ <html...
xmlns:fb='https://www.facebook.com/2008/fbml
- Đoạn sau vào trước thẻ </head>
<meta content='Mã ứng dụng' property='fb:app_id'/>
Thay thế Mã ứng dụng của app mà bạn đã tạo như trong hình tại bước 3.

Bước 5: Thêm đoạn mã bên dưới vào trước thẻ </body>
<div id='fb-root'/>
    <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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Bước 6: Thêm đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="540"></div>';
//]]>
</script>
Lưu ý:
- data-num-posts="5: Số nhận xét được hiển thị.
- data-width="600: Độ rộng của khung bình luận.

Bước 7: Chèn khung nhận xét facebook vào vị trí thích hợp trong blogspot

Thông thường ta sẽ chèn ngay phía bên dưới bài viết. Tìm một trong các đoạn code sau:
<b:include data='post' name='post'/>
Thêm đoạn code sau vào bên dưới đoạn vừa tìm được:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Lưu ý: Để xem và quản lý các bình luận, ta vào https://developers.facebook.com/tools/comments, chọn app vừa tạo.

Top 25 bộ phim xuất sắc của năm 2013

Clip  tổng hợp các bộ phim xuất sắc của năm 2013. Hãy xem và cảm nhận !

Cách xác nhận tài khoản Facebook mạng Viettel trong 3 bước

Trước việc xác thực tài khoản Facebook qua di động đối với mạng Viettel đã bị chặn, nên nhiều bạn mặc dù đã nhập số điện  thoại và "Gửi mã xác nhận" nhưng mãi vẫn không thấy có tin nhắn trả về, và hiện tại thì vẫn bị chặn :D nhưng giờ đây Facebook đã hỗ trợ Xác thực tài khoản đối với mạng Viettel rất đơn giản.

Cách xác nhận tài khoản Facebook mạng Viettel

Lấy link ảnh với size gốc từ Google Plus (Picasa) đơn giản

Picasa là một công cụ, tiện ích dùng để lưu trữ và chia sẻ hình ảnh chắc không còn xa lạ đối với mọi người, được Google mua lại và hiện tại đang là host nơi lưu các hình ảnh từ Blogger/ Blogspot. Trong bài này, Cuộc sống muôn màu sẽ hướng dẫn các bạn cách lấy link hình ảnh với size gốc trong 1 nốt nhạc :D
Lấy link ảnh với size gốc từ Google Plus
Thông tường khi post bài và chèn hình ảnh trong blogspot, mặc định ta sẽ có các link thu nhỏ của hình ảnh tương đương với kích cỡ như: nhỏ, trung bình, lớn. Tuy nhiên, đối với những hình ảnh lớn, dài với độ phân giải ví dụ như: 500 x 10000px thì cho dù có chọn kích cỡ "Lớn" hay "Kích thước ban đầu" thì hình ảnh vẫn rất nhỏ.

Cách lấy đường dẫn của hình ảnh với chất lượng gốc


Sau khi Chèn hình ảnh, các bạn qua phần HTML, thông thường link sẽ có dạng:
http://4.bp.blogspot.com/-_vC7PpydRqo/UpkrLVwXRuI/AAAAAAAACmw/nP9B1jCnQEg/s400/google-picasa-logo.gif

Hoặc
http://4.bp.blogspot.com/-_vC7PpydRqo/UpkrLVwXRuI/AAAAAAAACmw/nP9B1jCnQEg/w500-h670/google-picasa-logo.gif

Phần màu đỏ chính là kích cỡ của hình ảnh, để lấy được hình ảnh gốc, bạn chỉ việc thay thế thành s0, link với size gốc sẽ có dạng:
http://4.bp.blogspot.com/-_vC7PpydRqo/UpkrLVwXRuI/AAAAAAAACmw/nP9B1jCnQEg/s0/google-picasa-logo.gif

  • Mẹo:
Ta có thể áp dụng các này để phóng to hay thu nhỏ hình ảnh mà không cần qua bất cứ công cụ chỉnh sửa nào, chỉ cần thay thế phần kích cỡ (màu đỏ) của ảnh là được. ^^

Have fun !

Đô-rê-mon tập cuối - Do Fan tự vẽ

Doremon
Subscribe to: Posts (Atom)
Social
Liên kết bạn bè
My sites