Thêm Goole+ Badge vào Blogger/Blogspot

Google Badge là một khung giới thiệu tác giả với đường Profile Google+, ảnh đại diện và ô theo dõi.

Bước 1: Truy cập Blogger » Bố cục
Bước 2: Chọn vị trí muốn hiển thị Google+ Badge » Thêm tiện ích » Huy hiệu Google+
Bước 3: Tùy chỉnh cho phù hợp với blog của bạn và lưu lại.

Thêm tiện ích

Chọn huy hiệu Google+

Chỉnh sửa và lưu lại

Read More

Cách tạo menu cho blogger/blogspot với HTML và css

Cách tạo menu cho blogger/blogspot với HTML và css

Ảnh demo: 

Bước 1: Thêm đoạn HTML này vào nơi muốn hiển thị Menu

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#link">News</a></li>
  <li><a href="#link">Contact</a></li>
  <li><a href="#link">About</a></li>
</ul>

Bước 2: Thêm Css cho Menu » Copy Css dưới đây Paste lên trước thẻ </style>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #4CAF50;
}

Edit và lưu lại. 

Read More

Thêm tìm kiếm tùy chỉnh của Google vào blogger/blogspot.

Với tìm kiếm tùy chỉnh của Google, khi search/tìm kiếm một từ khóa của bạn, các kết quả tìm kiếm trên Google sẽ hiển thị ngay trên Blog của bạn mà không phải ra trang chủ Google tìm. Công cụ tìm kiếm tùy chỉnh này sẽ giúp hiển thị tất cả các bài viết có liên quan đến từ khóa được tìm kiếm nên sẽ không bao giờ bỏ sót bất cứ bài viết nào.

Ưu điểm của tìm kiếm tùy chỉnh:

• Tìm kiếm hiển thị ngay trên blog

• Kết quả tìm kiếm là kết quả tìm kiếm trên Google chứ không phải tìm kiếm như mặc định

• Hiển thị cả bài đăng và trang trong kết quả tìm kiếm của Google

• Nếu từ khóa được tìm kiếm không có dấu theo tìm kiếm mặc định thì kết quả tìm kiếm là không, ngược lại đối với tìm kiếm tùy chỉnh thì vẫn hiển thị đầy đủ kết quả tìm kiếm

• Tăng số lần hiển thị bài viết trên máy tìm kiếm Google giúp SEO tốt hơn 

• Đẹp và chuyên nghiệp hơn hẳn.

Demo tìm kiếm tùy chỉnh:

Bước1:Truy cập vào đây và đăng nhập với tài khoản Google của bạn sau đó chọn Add

Điền đầy đủ thông tin phù hợp với Blog của bạn và nhấn Tạo

Lúc này Google hiện bảng thông báo thành công, sau đó bạn nhấn Nhận mã

Tiếp tục vào Chỉnh sửa công cụ tìm kiếm  » chọn Giao diện » Chỉ kết quả » Lưu & Nhận mã.

Copy đoạn mã nhận được và chuyển qua bước 2 

Bước 2: Mở tab blogger lên, vào Trang » Tạo trang mới » Đặt tên cho trang là SEARCH rồi Chuyển qua HTML dán đoạn code vừa nãy vào và lưu lại.
Bước 3: Truy cập Mẫu » Chỉnh sửa mẫu »  tìm đoạn 

<div id='header-search'>

Nhận thấy code như vậy

<div id='header-search'>
<form action='/p/search.html' class='searchform clearfix' method='get' role='search'>
<input class='searchbox' style='display: none;' type='text'/>
</form>
</div>

Thay đoạn màu xanh thành đường link trang tìm kiếm của bạn. Lưu lại và xem kết quả.

Chỉ với 3 bước đơn giả, blog của bạn đã có một tìm kiếm tùy chỉnh đẹp mắt và đầy công dụng 

Read More

Tạo khung chứa code đơn giản

Trong khi viết bài chúng ta thường gặp phải các dòng code. Vì thế có một cái khung chứa nó thì quá tuyệt 
Cách thêm khung chứa code đơn giản:
Dán đoạn css này lên trên thẻ ]]></b:skin>

pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9  top right no-repeat;padding:10px;overflow:auto;
} 

Để thêm code vào khung, chuyển qua HTML và sử dụng:

<pre> chèn code vào đây </pre>

Lưu ý: Code phải được mã hóa trước khi chèn vào khung hoặc dán với văn bản thuần túy 

Read More

Thêm hộp tác giả/Author Box phía dưới bài viết.

 Hộp giả là một phần nhỏ trong một blog mà tác giả của blog có thể hiển thị thông tin về bản thân, hồ sơ xã hội và hình ảnh. Đây là một tiện ích rất tiện dụng cho blog. Thông qua tiện ích này, bạn có thể chia sẻ với độc giả các liên kết hồ sơ phương tiện truyền thông. Giúp tăng độ thẩm mỹ và chuyên nghiệp :3

Cách thêm hộp tác giả/Author Box:

Bước 1: Vào Mẫu -----> Chỉnh sửa HTML -----> tìm đến thẻ ]]></b:skin> và thêm code này lên trên nó:

.wc-aboutauthor { float:left; width:100%px; padding:15px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:url(' http://3.bp.blogspot.com/-t5gDiTb7yUc/UjiYfNUgBBI/AAAAAAAACXI/J1tb_tlU5-k/s1600/backgrounds.png' ); color:#444444; } .wc-aboutauthor h5 { color:#6E6F69; font-family:Arial; font-weight:bold; text-shadow:#64665b 0 1px 1px; font-size:18px; margin-bottom:-4px; margin-top:-6px; } .wc-aboutpic { float:right; margin:0 0 0 10px; } .wc-aboutpic img { border:1px solid #999999; -webkit-transition:-webkit-transform .15s linear; -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; transition:transform .15s linear; -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); -moz-box-shadow:0 3px 6px rgba(0,0,0,.25); box-shadow:0 3px 6px rgba(0,0,0,.25); padding:5px 5px 5px 5px; -webkit-transform:rotate(+5deg); -moz-transform:rotate(+5deg); -ms-transform:rotate(+5deg); -o-transform:rotate(+5deg); transform:rotate(+5deg); float:left; } .wc-aboutpic img:hover { background:#FFFFFF; -webkit-box-shadow:0 0 10px rgba(0,0,0,.3); -moz-box-shadow:0 0 10px rgba(0,0,0,.3); box-shadow:0 0 10px rgba(0,0,0,.3); -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); } .wc-aboutsoc img { height:35px; margin-bottom:-13px; } .wc-aboutsoc p { font:16px georgia; color:#ffffff; background:#ea5a50; display:inline; border-radius:5px; padding:5px; margin-right:30px; }

Bước 2: Tìm đến đoạn mã <data:post.body/> và thêm code dưới đây lên trên nó: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='wc-aboutauthor'>
 <div class='wc-aboutpic'>
 <img alt='Author image' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibQhkT8goKoAoDiHUZYlauwpkgZknWblS-tBf_0dlkRTK6I81xZvDEbNQYUrkfhheljo2f9Aq1IU6smzPkyDDAiZzGP-bGyFo2sdVWkwMWi0Pic1eMRAvnLRxxrnBaPyreXpTm67P6QRk/s577-no/13906849_303026530051630_3282969108113662243_n.jpg' width='100'/>
 </div>
 <h5>Phần giới thiệu của bạn vào đây :</h5>
 <div style='text-align: justify;'>
 <b>Tên của bạn ở đây</b></div>
 <div class='wc-aboutsoc'>
 <p> Tìm tôi trên
 </p>    <a href='https://facebook.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUyiG_9YEVxc6jvFCYTJdUfmvALz4-aqZ_ZrTuGp1KCvhoBXawG2hROCgLmlpnmc0e4sHJqY8PevrnI1HloHhrhTaQ1YBr6PfU_IEAHI7C35crmrGqakqEzQEuPurI64wi1u-1j-n4dI5/s1600/Facebook+Square.png' target='_blank' width='40px'/></a>
 <a href='https://twitter.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJoWSCrei-KivvvWHHvqKBC1-TPUl0Bwpkier2wGdupuzlr3clW4Xdwb_7YovIwY5IyKZ4Dmp7_BeWhluH2YAKnE-vtqUt_Feama9Ub1vvt8f2JgJbgcaIqAwsqQGhAMzp8Q2PICuTG99/s1600/Twitter+square.png' target='_blank' width='40px'/></a>
 <a href='https://plus.google.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_JVUynmsPkXZY9lTWqtPzlaMhhQiX7fR3dQMfJIQ7kHl6CrIsUyjMpmayE92DbL1VPnN1IxQ9BDwPhV4lBdGSJJNt_aRf97B0Q-FV3J3JgY9j3spdfj-AP_W2ap9982E2IyX6Puy5Ii2L/s1600/Google+plus+square.png' target='_blank' width='40px'/></a>
 <a href='http://youtube.com/ID' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTj-TrF0CiVcIVzVktO5vGcRqc46H54K9HBOQx3FE-QxzxP-z6GWgjAWRoUlO5o96FmmGpYFkaQKIclVMndEPQCnmxj2hkXjMvYjxYcrt-hpJSUOw33XJnr1ICLspznC5J6_UCdsawNSk/s1600/Youtube+square.png' target='_blank' width='40px'/></a></div>
 </div>
 </b:if>

Tùy chỉnh các thông tin cho thù hợp với blog/website của bạn. Nhấn lưu mẫu và xem kết quả.

Read More

Thêm nút lên đầu trang/ Back to top cho Blogger/ Blogspot

Hầu hết trên tất cả các Template, theme đều có sẵn nút Lên đầu trang/back to top.Lợi ích của nó là giúp người đọc trở lên đầu trang nhanh chóng mà không cần kéo thanh cuộn.
 Tuy nhiên một số template thì không có hoặc template tự thiết kế chưa có. 

Cách thêm nút Lên đầu trang/Back to top :

Bước 1: Thêm đoạn Css này vào dưới thẻ ]]></b:skin>

/* Lên đầu trang */

#scrolltotop{border-radius:2px;background:#00deff;text-align:center;line-height:40px;
-o-border-radius:2px;-ms-border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;
position:fixed;bottom:10px;right:0;cursor:pointer;display:none;color:#fff!important;
font-size:25px;width:100%;height:40px;margin-right:14px}key{border:1px solid gray;
font-size:1.2em;box-shadow:1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 3px;
padding:1px 5px}.post-header-line-1 {overflow:hidden}
#scrolltotop{color: #000;width: 40px !important;}

Bước 2: Tìm đến thẻ </body> và thêm code sau lên trên nó:

<div id='scrolltotop'><i class='fa fa-angle-up'/></div><script type='text/javascript'>
$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0)
{$(&quot;#scrolltotop&quot;).fadeIn()}else{$(&quot;#scrolltotop&quot;).fadeOut()}});
$(&quot;#scrolltotop&quot;).click(function(){$(&quot;body,html&quot;).animate({scrollTop:0},
800)})});</script>

Nhấn lưu mẫu và xem kết quả.

Read More

Chèn Plugin bình luận Facebook vào bài viết

Nói một tí về bình luận Facebook. Vì Facebook là phổ biến nhất nên việc chèn thêm bình luận Fb vào bài viết là rất cần thiết. Nó giúp độc giả chia sẻ suy nghĩ hay đóng góp ý kiến một cách dễ dàng và thuận tiện.

Đầu tiên, truy cập vào đây để cài đặt Plugin bình luận: Cài đặt Plugin bình luận 
Ở đây có rất nhiều mục cài đặt, tuy nhiên chúng ta chỉ cần quan tâm đến Bộ cấu hình Plugin bình luận

Click chọn Bộ cấu hình Plugin Bình Luận và bắt đầu trình tạo mã bình luận:

• URL để bình luận : Dãn link bài viết cần thêm plugin bình luận vào
• Chiều rộng: là chiều rộng của khung bình luận ( thường thì từ 650-750px )
• Số bài viết: là số bình luận tối đa để hiển thị trên bài viết

Sau khi điền đầy đủ link và thông số thì cuối cùng là nhấn lấy mã và làm theo hướng dẫn:

Vậy là xong !

Read More

Đặt liên kết URL tùy chỉnh cho bài viết và trang blogspot

Cách đặt liên kết URL tùy chỉnh cho bài viết Blog

Giới thiệu một tí về URL :

URL là viết tắt của "Uniform Resource Locator" được sử dụng để tham chiếu tới tài nguyên trên mạng Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL, còn được gọi là địa chỉ web hay là liên kết mạng (nói gọn là liên kết)

• URL của bài đăng cũng khá quan trọng, nó giúp hiển thị ngắn gọn hoặc dễ nhớ và cũng thuận tiện trong việc chia sẻ và cũng thể hiện được nội dung chính  của bài viết.
• Việc đặt URL tùy chỉnh còn giúp ích trong việc SEO rất nhiều

Đơn giản là thế này thôi, vào phần liên kết bên góc phải bài đăng:

Nhấn vào liên kết =)) Chọn Liên kết URL tùy chỉnh =)) Tùy chỉnh liên kết

Nhấn hoàn thành và Xuất bản.

Read More

Xóa thuộc tính bản quyền cung cấp bởi Blogger

Xóa thuộc tính bản quyền blogspot. Xóa dòng chữ Powered by Blogger. Hướng dẫn xóa dòng chữ Powered by Blogger. Cách xóa thuộc tính bản quyền blogger.

Đầu tiên, vào Mẫu > chỉnh sửa HTML > Nhấn Ctrl + F > Tìm từ Attribution1

Tìm đến đoạn mã <b:widget id='Attribution1' locked='True' title='' type='Attribution' visible='true'>

Thay True thành False rồi lưu mẫu:

Xóa thuộc tính bản quyền: Vào bố cục > Tìm đến thuộc tính bản quyền > Chỉnh sửa > Xóa và lưu lại.

Read More

Chèn Comment Facebook vào Blog/Website nhanh.

Vì Facebook là phổ biến nhất hiện nay nên việc chèn thêm comment bình luận Facebook vào bài viết là rất hữu ích. Nó giúp độc giả chia sẻ suy nghĩ hay đóng góp ý kiến một cách dễ dàng và thuận tiện:

• Giao diện đơn giản, thân thiên.
• Người dùng không phải đăng nhập vì đã có sẵn tài khoản Facebook
• Không tốn công lập trình, không phải lưu trữ và quản lý các comment.
• Nội dung bình luận được chia sẻ cho bạn bè của người bình luận.
• Có thêm một lượng lớn traffic miễn phí đến từ mạng xã hội
• Chăm sóc, tương tác tốt với người dùng

Việc chèn Comment bình luận Facebook cũng khá đơn giản, chỉ cần vài thao tác nhẹ và đơn giản:

Đầu tiên, vào chỉnh sửa mã HTML, copy đoạn code dưới  và dán vào phía trên thẻ </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="650"></div>';
//]]>
</script>

• data-num-posts="5" : Là số bình luận hiển thị 
• data-width="650px" : Là chiều rộng của khung bình luận

Tiếp theo, copy đoạn code dưới đây và Paste (dán) vào phía trên 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 = "//connect.facebook.net/vi_VN/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Đặt khung comment (bình luận) Facebook vào bài viết:

Thông thường, các comment (bình luận) Facebook sẽ nằm ở cuối mỗi bài viết. 

Tìm đoạn mã <b:include data='post' name='post'/>

Copy đoạn code dưới và dán vào phía dưới dòng  <b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> document.write(fbcm); </script> </b:if>

Nhấn lưu mẫu và xem kết quả.

Read More

Cài đặt giao diện template cho blog

Cách cài đặt giao diện template

Truy cập Mẫu ( Template ) chọn Sao lưu và khôi phục

Nhấn chọn tệp và chọn giao diện template ( đuôi .Xml ) sau đó tải lên.

 

Read More

Loại bỏ dòng chữ 'Hiển thị các bài đăng có nhãn *** '

1. Các bạn đăng nhập vào Blog

2. Nhấn vào Mẫu =)) Chỉnh sửa HTML

3. Nhấn tổ hợp phím Ctrl + F sau đó tìm đến từ 'top' name
4. Bạn tìm đến đoạn mã sau

<b:include data='top' name='status-message'/>

Bạn bôi đen và xóa đoạn mã đó đi

5. Nhấn 'Lưu Mẫu' và quay lại Blog xem kết quả

Read More