10 công cụ thiết kế Logo trực tuyến miễn phí

Nếu bạn không phải là một người sử dụng thành thạo các phần các miềm đồ họa như Photoshop hay Illustrator,.. thì sẽ thật khó để bạn có thể thiết kế được một logo đẹp mang phong cách riêng cho mình. Hôm nay mình xin chia sẻ với bạn một số công cụ thiết kế logo trực tuyến miễn phí nhưng không kém phần đẹp mắt và chuyên nghiệp để giúp bạn có được một logo mang phong cách riêng. Tất cả các dịch vụ trực tuyến này chứa hàng ngàn logo miễn phí được thiết kế sẵn cho bạn lựa chọn, bên cạnh đó bạn có thể chỉnh sửa theo ý tưởng sáng tạo của mình. Chỉ trong vài phút là bạn có được một logo rồi. Tất cả những công cụ này được chạy trên nền web, bạn có thể truy cập trực tiếp từ trình duyệt và bắt đầu thỏa chí sáng tạo cho cái logo của mình :D

Dịch vụ thiết kế Logo trực tuyến miễn phí:

1. Logo Maker

LogoMaker là một công cụ trực tuyến miễn phí thiết kế logo cho phép bạn tạo ra 6 logo miễn phí chỉ với vài cú nhấp chuột. Với kho logo được thiết kế rất chuyên nghiệp, bạn có thể được sử dụng cho bất kỳ loại dự án như kinh doanh hoặc sử dụng cho trang web của mình. Họ được cung cấp dịch vụ của họ trong một thời gian dài và họ đã chứng minh mình là một trong những công cụ thiết kế trực tuyến hàng đầu trong lĩnh vực này.

2. Flaming Text

Với công cụ trực tuyến này, bạn có thể nhận được biểu tượng cho sản phẩm, các công ty hay thương hiệu. Thư viện của họ có chứa hàng ngàn biểu tượng đẹp được cập nhật mỗi tuần. Bên cạnh đó bạn cũng có thể sử dụng công cụ này để tạo ra logo mang phong cách riêng.

3. Logo Garden

Logo Garden là một dịch vụ miễn phí cho phép bạn tạo các logo với độ nét cao miễn phí. Bạn có thể chọn một trong rất nhiều logo từ thư viện của họ và có thể chỉnh sửa nó vào dưới mọi hình thức. Chỉ sau vài bước đơn giản bạn sẽ có một logo đẹp và tải nó về.

4. Cool Text

Nếu bạn thích một phong cách logo dạng text thì đây là lựa chọn tốt nhất cho bạn. Công cụ trực tuyến này cho phép bạn tạo ra các logo dạng text rất đẹp, bạn có thể chỉnh sửa màu sắc, font chữ,... một cách dễ dàng.

5. Graphic Spring

Graphic Spring có giao diện thiết kế logo rất thân thiện với người sử dụng. Bạn có thể chọn bất kỳ logo được thiết kế sẳn từ thư viện của họ, ta có thể thêm văn bản, font chữ, thay đổi màu sắc và nhiều chức năng hơn nữa...

6. LogoSnap

LogoSnap giúp tạo ra logo và name card khác nhau để bạn chọn lựa. Bạn có thể save logo lại trên server của nó khi thiết kế. Với rất nhiều định dạng đầu ra cho việc phục vụ website của bạn.

7. CoolArchive Logo Maker

CoolArchive cung cấp nhiều logo đẹp website của bạn, có thể thêm màu sắc, font chữ, kích cở dễ dàng. Bên cạnh đó nó còn tích hợp rất nhiều nguyên liệu để bạn thiết kế logo như: icon, texture, graphics, button...

8. OnlineLogo Maker

OnlineLogo Maker rất dễ sử dụng, bạn không cần kỹ năng nào, nó rất phù hợp với những chủ doanh nghiệp nhỏ hay các trang web nhỏ không muốn bỏ nhiều tiền vào việc thiết kế logo.

9. LogoYes

LogoYescho phép bạn tự do thiết kế logo mà không cần nhờ đến bất kỳ sự trợ giúp nào khác. Đây một công cụ thiết kế logo online rất phù hợp với những ai muốn kiểm soát cả quá trình thiết kế logo.

10. Logo Ease

LogoEase là một trong những công cụ trực tuyến giúp bạn tạo mẫu logo miễn phí chỉ trong vài phút. Sau khi thiết kế xong, nó cho phép bạn save logo lại với nhiều định dạng khác nhau như PNG, JPG... Thư viện có sẵn rất nhiều hình ảnh, font chữ để bạn lựa chọn và sử dụng một cách khá dễ dàng.

---

Trên đây là một số lựa chọn tốt nhất thích hợp cho những người thiết kế logo không chuyên như tôi và bạn :P để có một logo được thiết kế chuyên nghiệp chỉ trong vài phút. Ngoài các dịch vụ phía trên, còn rất nhiều các dịch vụ khác trên internet. Nhưng theo tôi với các công cụ này đủ để bạn có một logo mang phong cách riêng của mình rồi!

Thêm một trích dẫn động (Animated Quote) cho Blogger

Blockquote (khối trích dẫn) là một thành phần được sử dụng rất nhiều trong các bài đăng trên blog. Đôi khi viết blog có đôi lúc chúng ta cũng cần phải sử dụng thẻ quote để hiển thị một trích dẫn, ta có thể hiểu đơn giản rằng nội dung của thẻ quote có thể là codeview, một đoạn trích dẫn hoặc một chú thích nào đó. Như các bạn cũng đã biết đa phần thì các thẻ quote mặc định trên các website chủ yếu là được bao bọc trong dấu ngoặc kép truyền thống, trong khô khan không thu hút được cái nhìn của người đọc. Vì vậy, hôm nay mình sẽ chia sẻ cho bạn thủ thuật làm sao để thêm một trích dẫn động (Animated Quote) vào blog của blogger, nó sẽ làm cho blog/web của bạn trở nên sinh động thu hút được cái nhìn của đọc giả hơn.

Dưới đây là một số trích dẫn với các hiệu ứng HTML5 và CSS3 chuyển động liên tục như mờ dần,bay lên, bay xuống,... trong rất đẹp mắt phải không :D

• It is the mark of an educated mind to be able to entertain a thought without accepting it.li>
• Education is the most powerful weapon which you can use to change the world.
• The roots of education are bitter, but the fruit is sweet.
• It's fine to celebrate success but it is more important to heed the lessons of failure.
• You can't have a light without a dark to stick it in.
• If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.

Thêm một trích dẫn động vào Blogger

Để thêm một trích dẫn động (Animated Quote) vào bài viết của Blogger, trước tiên bạn tạo một bài viết mới và chuyển sang chế độ HTML (Create new post =>> HTML) và thêm đoạn mã sau:

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

Sau khi bạn chèn đoạn mã trên vào bài viết, tiếp theo bạn chèn đoạn mã vào nơi mà bạn muốn hiển thị các trích dẫn (thay nội dung muốn hiển thị của bạn tương ứng với các thẻ <li> trong đoạn code phía dưới)

<div id="words">
<ul class="word-container">
<li data-author="--- Aristotle" data-easeout="lightSpeedOut">It is the mark of an educated mind to be able to entertain a thought without accepting it.li>
<li data-author="--- Nelson Mandela " data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li>
<li data-author="---  Aristotle " data-easein="fadeInDown">The roots of education are bitter, but the fruit is sweet.</li>
<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

Ngoài ra bạn cũng có thể thêm nó như một Widget để hiển thị trên trang chủ bằng cách:

- Vào Layout >> Add a Gadget >> HTML/JavaScriptAdd

- Thêm 2 đoạn code phía trên vào và Save lại

Vậy là xong, bạn vừa thêm thành công một trích dẫn động (Animated Quote) vào blog của bạn rồi đấy. Chúc bài viết của bạn trở nên sinh động, bắt mắt hơn,...thu hút được cái nhìn của người đọc hơn ^^

Thêm Welcome Bar của AddThis vào Blogger

Bạn nghĩ rằng viết blog là để xây dựng traffic? Tôi nghĩ rằng viết blog là cũng giống như trao đổi với đọc giả những nội dung mà mình quan tâm. Một blogger làm mọi thứ để giữ cho đọc giả của mình quan tâm, tham gia và luôn theo dõi nội dung trên blog của bạn. Đổi lại ta nhận được lưu lượng truy cập, nhận xét và những người theo dõi trên Facebook và các mạng xã hội khác từ người đọc.

Một trong những cách tốt nhất để thu hút sự chú ý cho đọc giả của bạn là thực hiện tạo một thanh chào đón hiển thị một thông điệp chào mừng ngắn gọn trong trang web/blog của bạn. Nó rất dễ thực hiện khi bạn sử dụng AddThis ( www.addthis.com ). Trong bài viết này tôi sẽ chỉ cho bạn cách để thực hiện thêm một Welcome Bar vào blog của bạn. AddThis cung cấp cho ta một tiện ích Welcome Bar miễn phí, nó có thể hiển thị tốt trên tất cả các trình duyệt hiện đại gồm cả IE 9 trở lên.  Welcome Bar của AddThis là hoàn toàn miễn phí.

Làm thế nào để thêm Welcome Bar của AddThis vào Blogger?

Vào https://www.addthis.com/get/welcome và đăng ký một tài khoản, nó cho phép đăng ký nhanh bằng các tài khoản mạng xã hội như facebook, Twitter hay Google +. Sau khi đăng ký xong, một bảng tùy chọn được hiển thị

Để tùy biến thanh hiển thị, bạn có thể chọn một những theme (màu) mà nó cung cấp sẵn, nhập vào thông điệp bạn muốn hiển thị, nhập liên kết cho nút được hiển thị trên thanh,...

Sau khi tùy chỉnh xong, bạn copy đoạn code được đề xuất bởi AddThis vào các trang muốn hiển thị trong blog của bạn. Thế là xong!

Sử dụng biểu thức điều kiện If - Else trong Blogspot

Thẻ điều kiện trong Blogger được sử dụng để kiểm tra 1 sự kiện. Nếu chúng thỏa điều kiện thì sẽ thực thi một hành động, ngược lại sẽ là một hành động khác được thực hiện. Đây là cách tuyệt vời để để làm những việc như ẩn các tiện ích , css, javascript, html... nhằm giải quyết các vấn đề cần thiết khi tối ưu cũng như thực hiện việc SEO trên Blogger và giúp bạn có một website vượt trội hơn trong quá trình sử dụng Blogger. Cách sử dụng khá đơn giản nên các bạn có thể yên tâm nếu các bạn không biết gì và lập trình.

Ví dụ, khi chúng ta muốn hiển thị "Hello world" trên tất cả trang bài viết và "Goodbye Cruel World" trên các trang còn lại thì nó sẽ như sau:

<b:if cond='data:blog.pageType == "item"'>
       Hello world
<b:else/>
       Goodbye Cruel World
</b:if>

+ Câu lệnh IF: Thực hiện 1 số câu lệnh khi điều kiện đưa ra là đúng.
+ Câu lệnh IF…ELSE: Thực hiện 1 số câu lệnh khi điều kiện đúng và 1 số câu lệnh khác nếu điều kiện là sai.

Sử dụng thẻ điều kiện trong Blogger

- Nội dung hiển thị cho trang chủ, trang label (Danh mục), trang lưu chữ archive

<b:if cond='data:blog.pageType == "index"'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị cho trang bài viết (Post)

<b:if cond='data:blog.pageType == "item"'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị trên các trang tĩnh (Pages)

<b:if cond='data:blog.pageType == "static_page"'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị cho trang lưu trữ (Archive)

<b:if cond='data:blog.pageType == "archive"'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị cho trang chủ (HomePage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị cho một URL chỉ định (thay PUT_URL_HERE bằng 1 URL)

<b:if cond='data:blog.url == "PUT_URL_HERE"'>
// Nội dung hiển thị
</b:if>

- Nội dung hiển thị cho Trang (Page) và bài viết (Post)

<b:if cond='data:blog.url == data:post.url'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung trên các trang Label (Nhãn)

<b:if cond='data:blog.searchLabel'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung cho nhãn (label) được chỉ định (ví dụ: Blogger)

<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'>
// Hiển thị nội dung với nhãn 'Blogger'
</b:if>

- Hiển thị nội dung sau bài viết đầu tiên trên các trang, Ví dụ: Trang chủ, Label,

<b:if cond='data:post.isFirstPost'>
// Nội dung hiển thị
</b:if>

- Hiển thị một nội dung khi có Backlink

<b:if cond='data:post.showBacklinks'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung cho tác giả bài viết (thay specific-name bằng tên tác giả cụ thể)

<b:if cond='data:displayname == "specific-name"'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó (thay number bằng một số)

<b:if cond='data:post.numComments == number'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt

<b:if cond='data:post.allowComments'>
// Nội dung hiển thị
</b:if>

- Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: http://nhatchanh.info/search?q=blogger tutorials)

<b:if cond='data:blog.searchQuery == &quot;blogger tutorials&quot;'>
// Hiển thị nội dung cho kết quả tìm kiếm `blogger tutorials`
</b:if>

- Hiển thị nội dung cho các trang lỗi 404

<b:if cond='data:blog.pageType == "error_page"'>
// Nội dung hiển thị
</b:if>

Bạn cũng có thể áp dụng cho kiểu so sánh khác "!="
Ví dụ:  Hiển thị một nội dung nào đó trên tất cả các trang ngoại trừ Trang chủ (Homepage)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
// Nội dung hiển thị
</b:if>

Sử dụng <b:else/>

- Nó được đặt trong thẻ Ví dụ: Hiển thị nội dung 1 trên Trang chủ. Ngược lại, nếu trang không phải trang chủ, thì nội dung 2 sẽ được hiển thị

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
     // Nội dung hiển thị 1
     <b:else/> 
     // Nội dung hiển thị 2
</ b: if>

- Các thẻ điều kiện có thể sếp chồng lên nhau. Ví dụ: Các nội dung sẽ được hiển thị trên trang bài viết, nếu url khác một địa chỉ nào đó thì hiển thị nội dung 1 và ngược lại sẻ hiển thị nội dung 2 (thay specific-URL-on-the-blog bằng 1 url cụ thể)

<b:if cond='data:blog.pageType == "item"'>
     <b:if cond='data:blog.url != "specific-URL-on-the-blog"'> 
            // Nội dung hiển thị 1
     <b:else/>
            // Nội dung hiển thị 2
     </b:if>
</b:if>

Xem thêm tại:

Layout Data Tags : Google Support for Blogger

Widget Tags for Layouts : Google Support for Blogger

Page Element Tags for Layouts : Google Support for Blogger

Cập nhật 04/09/2014

Tích hợp hệ thống Disqus Comment vào Blogspot

Disqus là hệ thống bình luận dễ dàng tích hợp hầu hết với bất kỳ nền tảng website nào. Việc tích hợp Disqus vào blog của bạn sẽ chỉ mất vài phút. Ưu điểm của Disqus hoàn toàn miễn phí và rất chuyên nghiệp.

Hệ thống này là thực sự tuyệt vời và nó là 1 hệ thống comment rất chuyên nghiệp cho tất cả các các trang web. Nó có thể tích hợp vào bất kỳ loại web nào và tôi đã thấy nhiều trang web phổ biến cũng đang sử dụng hệ thống này như CNN, The Next Web,...

Với các tính năng tuyệt vời của nó, ta có thể tích hợp vào các trang blog / trang web của mình một cách dễ dàng. Trong bài này tôi sẻ hướng dẫn bạn làm thế nào để:
Tích hợp Comment Disqus vào Blogspot
Hiển thị lượt comments ngoài trang chủ
Hiển thị comment mới nhất

Một số nét đặt trưng của hệ thống bình luận Disqus:

• Giao diện được thiết kế chuyên nghiệp, đẹp mắt. Với giao diện bắt mắt sẽ thu hút được nhiều đọc giả của bạn. Dể dàng quản lý bình luận của bạn bằng cách tạo một tài khoản Disqus.
• Một trong những tính năng nỗi bật của nó là, bạn có thể bình luận bằng cách đăng nhập để bình luận từ các trang mạng xã hội như Facebook, Google+, Twitter. Tuy nhiên, nếu bạn không muốn sử dụng các tài khoản để bình luận, bạn cũng có thể bình luận dưới dạng là khách khách truy cập.
• Một tính năng tuyệt vời là nó cho phép trả lời từng comment (threaded comments) sẽ giúp bạn trong việc thảo luận dễ dàng hơn. Bạn cũng có thể trả lời nhiều lần trên một bình luận. 
• Cho phép đánh giá bình luận, Có lựa chọn yêu thích ở phía trên nếu bạn yêu thích một bình luận nào đó bạn có thể bấm vào nó.
• Cho phép sắp xếp comment theo ngày, tháng, xếp hạng
• Có thể chia sẻ các bình luận lên mạng xã hội.
• Chỉnh sửa và Xóa bình luận: Nếu bạn đã đăng sai 1 bình luận, bạn có thể chỉnh sửa và xóa nó.
• Kiểm duyệt nhận xét: Bạn cũng có thể bật tính năng kiểm duyệt mỗi bình luận do độc giả của bạn gửi lên.
• SPAM: Bạn sẽ được an toàn bởi hệ thống chóng SPAM, nó có thể tự động phát hiện những bình luận cố tình SPAM và không được hiển thị.
• Tối ưu với các công cụ tìm kiếm. Đặc biệt với hệ thống server luôn trong trạng thái tốt nhất nên bình luận của bạn sẽ được cập nhật cũng như load cực nhanh.
• Và nhiều tính năng khác nửa...

Tích hợp Disqus vào Blogspot như thế nào?

Bước 1: Add a gadget

- Chọn Layout và  Add a gadget trong sidebar

- Thêm HTML/JavaScript

- Nhập  tiêu đề  là Disqus và nội dung  Ví dụ:

- Save lại.

Bước 2:  Thêm mã Disqus vào Template

- Vào Template chọn Edit HTML

- Tìm dòng: <b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>

Nếu muốn tích hợp luôn vào giao diện mobile thì bạn thêm mobile="yes"  sau khi thêm nó sẽ như thế này: 

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>

-Tìm đoạn code sau và xóa nó đi:

<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>

- Thay thế bằng:

<b:includable id='main'>
            <script type='text/javascript'>
                var disqus_shortname = 'EXAMPLE';
                var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";

                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = "<data:blog.url/>";
                }

                var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
                var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
            </script>

            <b:if cond='data:blog.pageType == "item"'>
                <style type='text/css'>
                    #comments {display:none;}
                </style>

                <script type='text/javascript'>
                    (function() {
                        var bloggerjs = document.createElement('script');
                        bloggerjs.type = 'text/javascript';
                        bloggerjs.async = true;
                        bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_item.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                    })();

                </script>
            </b:if>
                <style type='text/css'>
                    .post-comment-link { visibility: hidden; }
                </style>

                <script type='text/javascript'>
                (function() {
                    var bloggerjs = document.createElement('script');
                    bloggerjs.type = 'text/javascript';
                    bloggerjs.async = true;
                    bloggerjs.src = 'http://'+disqus_shortname+'.disqus.com/blogger_index.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);
                })();

            </script>
</b:includable>

- Save Template lại và xem kết quả

Như vậy là bạn đã tích hợp Disqus vào Blogger rồi. Và để có thể quản lý nội dung bình luận thì bạn phải tạo một tài khoản trên Disqus

Tạo tài khoản Disqus

Truy cập vào Disqus theo địa chỉ : https://disqus.com/. Tại trang chủ bấm vào Add Disqus to Your Site

và điền các thông tin để đăng ký 1 tài khoản bình thường

Sau khi đăng ký xong tài khoản của Disqus. Vào Setting

Sau đó di chuyển xuống Site Identity bạn sẻ thấy Shortname

Copy và điền nó vào shortname ở đoạn code phía trên (shortname ở trên là EXAMPLE thay thế nó bằng shortname của bạn) để quản lý comment. Vậy là xong!

Hiển thị lượt comments ngoài trang chủ

- Vào Template => Edit HTML tìm </body> và thêm đoạn code dưới đây vào trước nó (sửa lại shortname của bạn)

<script type="text/javascript">
var disqus_shortname = 'example'; //sửa lại shortname của bạn

(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

- Tìm  <div class='post-header-line-1'/> (1 template có thể có hơn 1 dòng này) và thêm đoạn code vào dưới nó

<!-- Disqus Comment Count Start-->
<a class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + "#disqus_thread"'/>
<!--Disqus Comment Count End-->

- Lưu Template lại

Hiển thị comments mới nhất

- Tiếp theo vào Layout bấm Add a Gadget mới chọn HTML/Javascript và thêm đoạn code dưới đây

<div id="dsq-recentcoment" class="dsq-widget">
<script type="text/javascript" src="http://_Disqus_Shortname_Cua_Ban.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=150&hide_mods=0"></script>
</div>

Ở đây mình hướng dẫn các bạn tích hợp nó bằng cách thủ công. Ngoài cách này, bạn có thể tích hợp theo các bước hướng dẫn của https://disqus.com

Tôi nghĩ rằng đây là một hệ thống bình luận tuyệt vời cho blog của bạn. Nếu bạn yêu thích nó, bạn có thể cài đặt ngay bây giờ, vì nó có đầy đủ các tính năng cho một hệ thống bình luận chuyên nghiệp.

Xem thêm tài liệu hướng dẫn tại đây

Blogger 404 Redirection - Chuyển hướng trang báo lỗi 404 cho Blogger

404 Not Found là một trong các thông báo lỗi rất phổ biến, nhằm thông tin cho người dùng khi một địa chỉ Web không được tìm thấy.Đối với website/blog, khi người dùng đi tới một liên kết nào đó trong trang của bạn nhưng máy chủ không tìm thấy nội dung, khi đó bạn sẽ thấy xuất hiện thông báo lỗi 404. Và nếu web/blog của bạn có nhiều trang lỗi 404 thì  các công cụ tìm kiếm như Google, Yahoo, Bing…sẽ đánh giá thấp giá trị nội dung website của bạn.

Nếu bạn đang sử dụng Google Blogger bạn cần phải thiết lập chuyển hướng các trang báo lỗi 404, nếu không sẽ ảnh hưởng đến kết quả tìm kiếm của bạn. Bài viết này sẽ hướng dẫn cho bạn làm thế nào để chuyễn hướng trang báo lỗi 404 cho Blogger một cách đơn giản. Bạn có thể thử tại đây bằng cách gõ một địa chỉ sai, Ví dụ: http://demo-tutorials.blogspot.com/dia-chi-nay-khong-ton-tai nó sẽ được chuyển đến http://demo-tutorials.blogspot.com/p/404.html

Xem thêm: Tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot

Bước 1: Đầu tiên vào Blogger tạo một trang báo lỗi thật đẹp với tiêu đề (Ví dụ: Page not found).

Bước 2: Vào Blogger, Chọn Settings => Search preferences

Bước 3: Địa chỉ trang 404 (tất cả các trang báo lỗi 404 sẽ chuyển hướng về địa chỉ này)

http://demo-tutorials.blogspot.com/p/404.html

Đoạn JavaScript dưới đây có chức năng chuyển hướng về một địa chỉ nào đó. Và sửa lại đường dẫn cho trang báo lỗi của bạn.

<script type = "text/javascript">
setTimeout(function()
{
location.pathname= "/p/dia-chi-trang-bao-loi.html"  //Dia chi cua ban
},
1000);
</script>

Bước 4: Copy đoạn JavaScript phía trên và Paste vào Custom Page Not Found. Cuối cùng click vào Save Changes

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

Làm thế nào để sử dụng Google Font cho Blogspot

Đôi khi font chữ, kích cỡ và màu sắc template của bạn không làm bạn hài lòng. Bạn muốn thay đổi nó cho đẹp hơn, cá tính hơn, mang phông cách riêng... Bạn có thể tham khảo bài viết dưới đây. Nếu bạn đang tìm kiếm Font chữ miễn phí, đẹp để thiết kế nội dung cho blog của bạn thì Google Font với trên 600 font chữ là một lựa chọn tốt nhất cho bạn.

Blogger sử dụng font của Google trong một thời gian khá dài, bạn có thể dễ dàng tìm thấy nó bằng cách nhấn vào Customize trong Template của bạn.

Nhưng ở đó không có nhiều font có sẵn để bạn lựa chọn phải không nào? Bạn có thể vào thư viện Google Font để lựa chọn cho mình những font thích hợp để đưa nó vào blog của bạn, bạn có thể tùy chỉnh font chữ cho Blog của bạn bằng một trong rất nhiều font chữ ở đó.

Một số Font chữ của Google:

Making the Web Beautiful!(Rock Salt)

Making the Web Beautiful!(Tangerine)

Making the Web Beautiful!(Ubuntu Mono)

Making the Web Beautiful!(Dancing Script)

Chèn vào Blogspot

Bước 1: Vào Google Font lựa chọn cho mình 1 font ưng ý. Sau đó bấm vào Quick - use

Giả sử ở đây tôi chọn font Dancing Script

Bước 2: Sau bấm vào Quick - use bạn sẽ được chuyễn đến trang tiếp theo, nơi bạn có thể lựa chọn các tùy chọn cho font chữ của mình

• Chọn kiểu bạn muốn hiển thị. Ở đây đối với font Dancing Script có 2 lựa chọn

• Chọn bộ ký tự bạn muốn hiển thị.
• Sau khi thiết lập nó sẽ tạo ra cho ta được 1 đoạn code, Ví dụ ở đây là: 

<link href="http://fonts.googleapis.com/css?family=Dancing+Script:700,400" rel="stylesheet" type="text/css">

Bước 3: Đăng nhập vào Blogger, vào Template và click Edit HTML
Bước 4: Tìm thẻ <head> và thêm đoạn mã sao chép ở phía trên vào dưới thẻ , nhưng ở đây bạn phải có thêm một dấu gạch chéo ( / ) như dưới đây:

<link href="http://fonts.googleapis.com/css?family=Dancing+Script:700,400" rel="stylesheet" type="text/css" />

Nếu bạn không thêm dấu gạch chéo / thì khi Save Template nó sẽ bào lỗi Error parsing XML (Lỗi cú pháp).

Bước 5: Bây giờ bạn có để định dạng lại font chữ của mình bằng CSS và thêm nó vào template của bạn ngay phía trước ]]></b:skin> Ví dụ, nếu bạn muốn hiển thị font chữ cho toàn bộ trang thì thêm:

body {
  font-family: 'Merienda', sans-serif;
}

Bây giờ giả sử bạn muốn tích hợp font chữ cho tiêu đề bài viết của bạn:

h3.post-title {
  font-family: 'Merienda', sans-serif;
}

Hoặc giả sử bạn muốn nó hiển thị cho Blockquotes thì thêm:

.post blockquote {
  font-family: 'Merienda', sans-serif;
}

...Để có thể thêm nhiều hiệu ứng cho font chữ, bạn có thể tham khảo qua Google Font Developer

Bước 6: Save Template

Ngoài ra:

- Bạn cũng có thể thêm nhiều font chữ khác nhau tại các vị trí muốn hiển thị bằng cách thực hiện tương tự như các bước phía trên và thêm các thuộc tính CSS tương ứng.

- Nếu tên font có khoảng trắng thì bạn thay khoảng trắng này bằng ký tự + Ví dụ: Dancing+Script

- Bạn cũng có thể yêu cầu nhiều font chữ cùng một lúc và bạn sẽ ngăn cách các font này bằng ký tự |
Ví dụ, mình yêu cầu 4 font chữ Rock Salt, Tangerine, Ubuntu Mono và Dancing Script thì stylesheet link của mình sẽ là:

<link href="http://fonts.googleapis.com/css?family=Merienda|Rock+Salt|Tangerine|Ubuntu+Mono|Dancing Script" rel="stylesheet" type="text/css" />

Tham khảo thêm tại:

• Web font documentation
• WebFont Loader
• Google Font Developer

Trong bài viết này mình đã hướng dẫn các bạn làm thế nào để thêm Google Font vào Blogspot, công việc này sẽ thật sự dễ dàng nếu bạn có 1 chút kiến thức về CSS. Mình mong rằng nó sẽ giúp bạn hiển thị các font chữ đẹp trên blog của bạn.

Tạo một ứng dụng upload hình ảnh lên Flickr bằng PHP

Flickr có giao diện lập trình ứng dụng mở (viết tắt là API). Điều này có nghĩa là ai cũng có thể viết chương trình của riêng mình để trộn lại dữ liệu Flickr (như ảnh, video, từ khóa, hồ sơ hoặc nhóm) theo những cách khác nhau.

Xem Demo

Có rất nhiều trường hợp mà bạn cần phải tạo ra một ứng dụng nhỏ cho trang web của bạn để bất cứ ai cũng có thể tải hình ảnh của họ lên để chèn vào bài viết. Trong bài này, tôi sẽ hướng dẫn cho bạn làm thế nào để có thể tạo ra một trang upload hình ảnh đơn giản lên server của FLickr bằng cách sử dụng thư viện phpFlickr. Với dung lượng lên tới 1Terabyle bạn có thể upload lên mà không phải lo lắn về dung lượng lưu trữ.

Đầu tiên, tạo một tài khoản Flickr

Bạn có thể đăng nhập vào Flickr qua Yahoo! hay Google hay Facebook. Bạn có thể đăng ký với flickr bằng cách click vào Tạo tài khoản Flickr. Bạn nên sử dụng bằng tài khoản của Yahoo! vì Flickr thuộc sở hữu của Yahoo!.

Tạo một ứng dụng Flickr

Bạn có thể xem các ứng dụng Flickr của bạn tại Flickr Apps . Thực hiện theo các bước dưới đây để tạo ra một ứng dụng flickr mới:

• Để tạo một ứng dụng mới bạn vào địa chỉ: http://www.flickr.com/services/apps/create/noncommercial/
• Điền vào tên của ứng dụng và mô tả ứng dụng của bạn.
• Sau khi hoàn thành, bạn sẽ nhận được "API Key" và "Secret" cho ứng dụng của bạn. Lưu ý rằng API Key và Secret là cái mà chúng ta cần tìm.

Bạn có thể xem tài liệu hướng dẫn Flickr API tại http://www.flickr.com/services/api/ . Hoặc bạn có thể sử dụng API Flickr trực tiếp để xây dựng ứng dụng upload hoặc bạn có thể sử dụng thư viện phpFlickr một wrapper php trên Flickr API. Ở đây ta sử dụng thư viện phpFlickr để truy cập vào Flickr API.

Bạn có thể tải về thư viện phpFlickr tại https://github.com/dan-coulter/phpflickr.

Upload tất cả các tập tin trong thư viện phpFlickr lên host của bạn. Bước tiếp theo là phần quan trọng nhất của việc tải lên hình ảnh lên server Flickr

Tạo API token

Trong thư mục phpFlickr, bạn sẽ tìm thấy file getToken.php có nội dung như sau: 

<?php
    /* Last updated with phpFlickr 1.4
     *
     * If you need your app to always login with the same user (to see your private
     * photos or photosets, for example), you can use this file to login and get a
     * token assigned so that you can hard code the token to be used.  To use this
     * use the phpFlickr::setToken() function whenever you create an instance of 
     * the class.
     */

    require_once("phpFlickr.php");
    $apiKey = "3852cb4ed22186257f37ac0317a18b13";
    $secret = "4372fb4c075f7ef2";
    $perms = "write";
    $f = new phpFlickr($apiKey, $secret);
    
    if(!$_GET['frob']){
        $f->auth($perms);
    }else {
        $tokenArgs = $f->auth_getToken($_GET['frob']);
        echo "<pre>"; var_dump($tokenArgs); echo "</pre>";
    }
    
?>

Trước khi bạn chạy file getToken.php để lấy API Token thì trước tiên bạn phải sửa lại địa chỉ Callback URL trong ứng dụng của bạn (địa chỉ xác thực):

• Tại App Type chọn Web Aplication
• Tại Callback URL Gõ đường dẫn đến địa chỉ host mà bạn upload code của ứng dụng.
• Ví dụ: http://example.com/_path_/getToken.php Đây là địa chỉ trang web mà flickr sẽ chuyển hướng sau khi bạn thực hiện xác thực.
• Bấm SAVE CHANGES

Bây giờ, trong trình duyệt, chạy đường dẫn tới file getToken.php.

Ví dụ: http://example.com/_path_/getToken.php . Nếu bạn chưa đăng nhập vào tài khoản thì nó sẻ chuyển bạn đến trang đăng nhập. Sau khi đăng nhập, trang web sẽ được chuyển đến địa chỉ giống hình dưới, và bạn nhấn vào nút OK., I'LL AUTHORIZE IT như trong hình.

Sau khi thực hiện xong các thao tác trên, bạn sẽ thấy được cái mã xác thực API Token mà ta cần như hình dưới đây. Nó là phần quan trọng nhất mà ta cần, bạn copy và lưu lại ở chổ nào đó để chúc nửa ta sử dụng.

Bây giờ ta đả có API Token

Tiếp theo tạo 1 file có tên index.php ta sử lý các sự kiện upload lên như: chỉ cho upload file ảnh, file ảnh không quá 512 kb...

<?php
//Include phpFlickr
require_once("phpFlickr/phpFlickr.php");

$error=0;
$f = null;
if($_POST){
    /* Kiem tra hinh anh va ten hinh anh duoc goi  */
    if(!$_POST['name'] || !$_FILES["file"]["name"]){
        $error=1;
    }else{
        /* Kiem cac tra loi khi upload hinh anh */
        if ($_FILES["file"]["error"] > 0){
            echo "Error: " . $_FILES["file"]["error"] . "<br />";
        }else if($_FILES["file"]["type"] != "image/jpg" && $_FILES["file"]["type"] != "image/jpeg" && $_FILES["file"]["type"] != "image/png" && $_FILES["file"]["type"] != "image/gif"){
            /* Kiem tra loai dinh dang tap tin */
            $error = 3;
        }else if(intval($_FILES["file"]["size"]) > 525000){
            /* Cac tap tin lon hon 512 KB se bao loi*/
            $error = 4;
        }else{
            $dir= dirname($_FILES["file"]["tmp_name"]);
            $newpath=$dir."/".$_FILES["file"]["name"];
            rename($_FILES["file"]["tmp_name"],$newpath);
            /* Gọi hàm uploadPhoto */
            $status = uploadPhoto($newpath, $_POST["name"]);
            if(!$status) {
                $error = 2;
            }
         }
     }
} 

function uploadPhoto($path, $title) {
    $apiKey = "3852cb4ed22186257f37ac0317a18b13";
    $apiSecret = "4372fb4c075f7ef2";
    $permissions  = "write";
    $token        = "72157645610485491-15d46a8296f212ce";

    $f = new phpFlickr($apiKey, $apiSecret, false);
    $f->setToken($token);
    return $f->sync_upload($path, $title);
}
?>

Tạo 1 Form Upload cho người dùng tải hình ảnh lên. và 1 số hàm sử lý lỗi cơ bản như sau:

<body>
<div id="doc" class="yui-t7">
   <div id="hd" role="banner"><h1>Photo Uploader by www.nhatchanh.info</h1></div>
   <div id="bd" role="main">
   <div id="mainbar" class="yui-b">  

<?php
if (isset($_POST['name']) && $error==0) {
    echo "<h4>Hình ảnh của bạn vừa được tải lên <a href='https://www.flickr.com/photos/nhatchanh/' target='_blank'>dòng ảnh</a> của tôi.</h4>";

}else {
    if($error == 1){
        echo "  <font color='red'>Vui lòng cung cấp cả tên và một tập tin cần tải lên</font>";
    }else if($error == 2) {
        echo "  <font color='red'>Không thể tải ảnh của bạn, hãy thử lại</font>";
    }else if($error == 3){
        echo "  <font color='red'>Chỉ hỗ trợ các định dạng JPG, JPEG, PNG hoặc GIF</font>";
    }else if($error == 4){
        echo "  <font color='red'>Kích thước hình ảnh lớn hơn 512KB, xin vui lòng tải lên một hình ảnh dưới 512KB</font>";
    }
?>
  <h2>Tải hình ảnh lên Server Flickr!</h2>
  <form  method="post" accept-charset="utf-8" enctype='multipart/form-data'>
    <p>Tên ảnh:   <input type="text" name="name" value="" ></p>
    <p>Hình ảnh: <input type="file" name="file"/></p>
   <p><input type="submit" value="Tải lên" class="btn-primary"></p>
  </form>
  <?php
}
?>
     </div>
    </div>
</div>
</body>

Source code đầy đủ của file index.php

<?php
//Include phpFlickr
require_once("phpFlickr/phpFlickr.php");

$error=0;
$f = null;
if($_POST){
    /* Kiem tra hinh anh va ten hinh anh duoc goi  */
    if(!$_POST['name'] || !$_FILES["file"]["name"]){
        $error=1;
    }else{
        /* Kiem cac tra loi khi upload hinh anh */
        if ($_FILES["file"]["error"] > 0){
            echo "Error: " . $_FILES["file"]["error"] . "<br />";
        }else if($_FILES["file"]["type"] != "image/jpg" && $_FILES["file"]["type"] != "image/jpeg" && $_FILES["file"]["type"] != "image/png" && $_FILES["file"]["type"] != "image/gif"){
            /* Kiem tra loai dinh dang tap tin */
            $error = 3;
        }else if(intval($_FILES["file"]["size"]) > 525000){
            /* Cac tap tin lon hon 512 KB se bao loi*/
            $error = 4;
        }else{
            $dir= dirname($_FILES["file"]["tmp_name"]);
            $newpath=$dir."/".$_FILES["file"]["name"];
            rename($_FILES["file"]["tmp_name"],$newpath);
            /* Gọi hàm uploadPhoto */
            $status = uploadPhoto($newpath, $_POST["name"]);
            if(!$status) {
                $error = 2;
            }
         }
     }
} 

function uploadPhoto($path, $title) {
    $apiKey = "3852cb4ed22186257f37ac0317a18b13";
    $apiSecret = "4372fb4c075f7ef2";
    $permissions  = "write";
    $token        = "72157645610485491-15d46a8296f212ce";

    $f = new phpFlickr($apiKey, $apiSecret, false);
    $f->setToken($token);
    return $f->sync_upload($path, $title);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Photo Uploader by www.nhatchanh.info</title>
   <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
   <link rel="stylesheet" href="style.css" type="text/css">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  
</head>
<body>
<div id="doc" class="yui-t7">
   <div id="hd" role="banner"><h1>Photo Uploader by www.nhatchanh.info</h1></div>
   <div id="bd" role="main">
   <div id="mainbar" class="yui-b">      

<?php
if (isset($_POST['name']) && $error==0) {
    echo "<h4>Hình ảnh của bạn vừa được tải lên <a href='https://www.flickr.com/photos/nhatchanh/' target='_blank'>dòng ảnh</a> của tôi.<br /><br /> Bấm <a href='https://www.flickr.com/photos/nhatchanh/".$status."'>vào đây xem hình ảnh vừa tải lên</a>.</h4>";
    
    // Lấy hình ảnh vừa upload
    $apiKey = "3852cb4ed22186257f37ac0317a18b13";
    $apiSecret = "4372fb4c075f7ef2";
    $f = new phpFlickr($apiKey, $apiSecret, false);
    $photo = $f->photos_getInfo($status,$secret = NULL );  
    $photoUrl = $f->buildPhotoURL($photo['photo']); 
    echo '<b>Link URL:</b>   <a href="'.$photoUrl.'" target="_blank">'.$photoUrl.'</a>';
    
}else {
    if($error == 1){
        echo "  <font color='red'>Vui lòng cung cấp cả tên và một tập tin cần tải lên</font>";
    }else if($error == 2) {
        echo "  <font color='red'>Không thể tải ảnh của bạn, hãy thử lại</font>";
    }else if($error == 3){
        echo "  <font color='red'>Chỉ hỗ trợ các định dạng JPG, JPEG, PNG hoặc GIF</font>";
    }else if($error == 4){
        echo "  <font color='red'>Kích thước hình ảnh lớn hơn 512KB, xin vui lòng tải lên một hình ảnh dưới 512KB</font>";
    }
?>
  <h2>Tải hình ảnh lên Server Flickr!</h2>
  <form  method="post" accept-charset="utf-8" enctype='multipart/form-data'>
    <p>Tên ảnh:   <input type="text" name="name" value="" ></p>
    <p>Hình ảnh: <input type="file" name="file"/></p>
   <p><input type="submit" value="Tải lên" class="btn-primary"></p>
  </form>
  <?php
}
?>
        </div>
    </div>
</div>
</body>
</html>

Xem DEMO Download Source

Lưu ý:

Với ví dụ trên tôi sử dụng api key, secret và token của tôi, bạn cần thay đổi api key, secret và token của bạn để hình ảnh được tải lên trên Photostream của bạn.

Tham khảo thêm:

• Flickr Services
• phpFlickr Library

Hướng dẫn thêm nút Google +1 vào Blogger

+1 là cách bạn thể hiện đánh giá cao cho bất cứ thứ gì thu hút sự chú ý của bạn trên Google+ hoặc trên các trang web yêu thích của bạn. Khi bạn đọc một bài đăng làm bạn muốn tán thưởng, +1 là hành động tán thưởng của bạn; khi bạn xem một video làm bạn cười không kiềm chế nổi, +1 là tiếng cười của bạn; khi bạn xem một hình ảnh chụp lại hoàn hảo khoảnh khắc đặc biệt đó, +1 là đánh giá 5 sao của bạn.

Bây giờ chúng ta bắt đầu thêm nút Google +1 vào bài viết Blogger. Ta có thể thực hiện bằng 2 cách, đầu tiên là 1 cách đơn giản bạn dễ dàng thực hiện bằng vài cú click, bạn cũng có thể tùy biến nút Google +1 cách thứ 2.

Cách thứ 1

Blogger đả tích hợp sẵn các nút để chia sẽ bài viết lên các mạng xã hội như Facebook, Twitter... tất nhiên là có cả nút Google +1. Để kích hoạt nó, bạn vào "Layout" bấm vào nút "Edit" nằm phía dưới "Blog Posts" chọn "Show Share Buttons" và lưu nó lại. Nhưng đây là cách bạn không thể tùy chỉnh hoặc chọn kích thước khác được.

Cách thứ 2

Bước 1: Đăng nhập vào Blogger và bấm vào "Template".

Bước 2: Nhấp vào "Edit Html" và kiểm tra "Expand Widget Templates".

Bước 3: Cấu hình các tùy chọn bên dưới để tạo ra nút Google +1 và đoạn Code sau đó Copy nó để thực hiện Bước 4.

Tùy chọn

Kích thước:
small
medium
standard
tall

Chú thích:
inline
bubble
none

Chiều rộng: pixels (?)

Ngôn ngữ:
Ngôn ngữ mặt định của Blog
Tiếng Việt
Tiếng Anh (United States)
Tiếng Anh (United Kingdom)

---

Vị trí:
None
Trái
Phải

Hiển thị trong:
Tất cả các "Bài viết" và "Trang"
Bài viết
Trang

Xem trước và mã Code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;">
<div class='g-plusone' data-size='tall' data-annotation='bubble' data-width='' expr:data-href='data:post.canonicalUrl'></div>
</div>
</b:if>

Bước 4: Tìm <data:post.body/> và thêm đoạn Code trên trước hoặc sau nó (Bạn có thể thêm nó ở cả hai nơi để hiển thị nút Google +1 trên và dưới bài viết).

Bước 5: Tìm </body> và thêm đoạn JavaScript dưới đây vào trước nó.

<script type="text/javascript">
  window.___gcfg = {lang: 'en-US', parsetags: 'onload'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Bước 6: Save Template của bạn lại.

Thông tin

• Kích thước: Với 4 kích cỡ cho bạn chọn lựa.
• Chú thích: Thiết lập chiều rộng chỉ cho phép khi bạn chọn chú thích là "inline". Chiều rộng mặc định là "450 pixel" và kích thước tối thiểu mà bạn có thể thiết lập là "120 pixel".
• Ngôn ngữ: Tự động nhận dạng ngôn ngữ cho blog của bạn và bạn cũng có thể tùy chọn các ngôn ngữ khác.

Lưu ý:

• Bạn có thể thay thế đoạn code ở bước 5 bằng đoạn này nếu nút +1 không hiển thị.

  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {lang: 'en-US'}
  </script>

• Để biết thêm thông tin, hãy vào documentation page.

Tạo Menu Accordion đơn giản với JQuery và CSS3

Accordion Menu hiện nay khá phổ biến với thiết kế web hiện tại, vì ngoài việc là một menu, nó có thể tùy biến để hiện thị nội dung, hình ảnh một cách rất chuyên nghiệp...

Bạn chỉ cần tìm từ khóa Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn cũng có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ.

Xin chia sẽ đến các bạn một đoạn code giúp tạo ra một menu Accordion ấn tượng với jQuery và CSS3 đơn giản. Ưu điểm của loại menu này là có thể tiết kiệm cho bạn nhiều khoảng không gian trên trang web của bạn hơn. Đoạn code dưới đây rất đơn giản nhưng cũng hiều quả và có ích cho bạn đấy, giờ mình cùng xem qua nhé.

Xem DEMO

Mã HTML:

<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        Nội dung Panel 1
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        Nội dung Panel 2
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        Nội dung Panel 3
    </div>
    <h2>Panel 4</h2>
    <div class='content'>
        Nội dung Panel 4
    </div>
</div>

Mã JQuery:

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Mã CSS:

#accordion {
 width:90%;
 margin:10px auto;
 border:2px solid white;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#accordion h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:7px 15px;
 background-color:black;
 font:bold 11px Verdana,Arial,Sans-Serif;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

#accordion .content {
 background-color:#ddd;
 padding:10px 15px;
 color:black;
 height:auto;    
}

#accordion h2.active {
 background-color:#4BB347;   
}

Như vậy là ta vừa tạo xong 1 Menu Accordion đơn giản rồi. Chúc bạn thành công !

Làm thế nào để thêm nút Like Facebook vào bài viết cho Blogspot

Chức năng Like facebook là một trong những cách bạn có thể giúp cho bạn chia sẻ bài viết của mình nhanh nhất mà khỏi phải vất vả vào facebook, copy link bài viết, viết giới thiệu bài viết, rồi enter. Các thao tác kể trên được giảm bớt một cách tối đa, chỉ cần nhấn vào nút like được tích hợp sẵn trên blog, bạn có thể giảm bớt số lượng các bước kể trên thành 2 bước, viết giới thiệu và enter.

Tạo nút Like Facebook cho Blogger

Bước 1: Đăng nhập vào Blogger và từ bảng điều khiển đi đến tab Template của blog. Tiếp theo bấm vào "Edit HTML" và kiểm tra "Expand Widget Templates".

Bước 2: Tìm <data:post.body/> và paste đoạn code phía dưới sau khi tùy chọn các thiết lập nằm trước nó.

Button Facebook

Layout:	standardbutton_countbox_count
Action Type:	likerecommend
Color Scheme:	lightdark
Font:	ariallucida grandesegoe uitahomatrebuchet msverdana
Chiều rộng mặt định (Recommended)	: px

Hiển thị trong Blogger

Float:	NoneLeftRight
Hiển thị trong:	Tất cả các trang ngoại trừ các trang tĩnhTrang bài viếtTất cả các trang

Xem trước và Nhận Code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;">
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</div>

</b:if>

Bước 3: Lưu Template của bạn lại và xem kết quả.

Các chức năng:

• Layout: Có 3 kiểu tùy chọn là Standard, button_count và box_count.
• Action Type: Có 2 kiểu hiển thị là  Like or Recommend.
• Color Scheme: Tùy chọn màu sắc của nút.
• Font: Chữ bạn muốn sử dụng.
• Width: Tùy chọn này cho những người dùng muốn thay đổi chiều rộng của nút Like. Nếu bạn không biết độ rộng mặc định theo chuẩn của Facebook thì để nguyên không thay đổi bất cứ điều gì ở đây.
• Show_faces: Lựa chọn để hiển thị hình ảnh hồ sơ cá nhân của bạn bè trên Facebook của bạn, những người đã thích bài viết của bạn. Mặt định là false, nếu bạn muốn thì bạn có thể thay đổi nó thành true nhưng bạn cũng phải thay đổi chiều rộng cho phù hợp.