Thay đổi font chữ cho blogspot

Xin chào tất cả các bạn.

Hôm nay mình xin được chia sẻ cho các bạn cách để thay đổi font chữ trong blog của mình.
Một blog được xem là đẹp thì ít nhất blog ấy phải có font chữ đẹp, dễ nhìn và không bị lỗi.

Chắc các bạn nếu như đã tạo blog rồi thì có lẽ các bạn cũng hay gặp trường hợp này. Nếu như các bạn sử dụng một số template mặc định của blogger có thể sau khi ra trang chủ xem thì các bạn sẽ thấy chữ bị lỗi.

Vì sao lại như vậy ạ? Bởi vì các mẫu này được thiết kế cho nước ngoài chứ không phải dành cho Việt Nam nên các loại font chữ đó không hỗ trợ tiếng Việt.

Vậy tại sao khi bị lỗi thì nó lại chuyển thành một font khác vẫn hiển thị được tiếng Việt? Đó là vì các blog và trinh duyệt hiện nay đều có mặc định là nếu một đoạn văn bản nào đó mà không được định dang font thì nó sẽ hiển thị với font Arial.

Tiếp theo làm cách nào để có thể sửa được lỗi này????

Trước tiên chúng ta cần xác định được đoạn văn đó đang sử dụng loại font chữ gì. Các bạn hãy chọn đoạn văn bản cần các định ấn chuột phải rồi chọn kiểm tra phần tử.

Ngay sau đó một khung nhỏ sẽ hiện ra ở góc dưới màn hình của bạn. và bạn hãy để ý đến thuộc tính font-family nhé. Vì nó chính là thuộc tính quy định kiểu font chữ của chúng ta.

Như hình trên thì các bạn thấy rằng thuộc tính font-family của mình là 'open sans condensed',Arial,verdana. Do đó font chữ của mình là "open sans condensed". Tại sao lại là open sans condensed mà không phải Arial hay verdana? Nếu như không phải thì tại sao ta lại phải viết vào để làm gì?
Vâng bởi vì dấu nháy đơn đã quy định là font open sans condensed sẽ được ưu tiên hiển thị là font mặc định của chữ. Và nếu như trong trang web của chúng ta mà không có hỗ trợ font open sans condensed thì nó mới hiển thị chữ của bạn với font là Arial và verdana.

Tiếp theo chúng ta sẽ đi tìm hiểu cách sửa font chữ cho một phần tử trên blog.

Thứ nhất chúng ta cần xã định phần tử cần đổi font chữ.
Thứ hai là bạn hãy xem phần tử đó đang được quy định là font gì theo như mình đã hướng dẫn ở trên.
Thứ ba các bạn copy dòng bên trên và trước dấu ngoặc nhọn. Ví dụ như của mình sẽ là h1, h2, h3, h4, h5, h6.
Thứ tư các bạn vào quản lý mẫu và chọn chỉnh sửa html sau đó tìm đến đoạn chứa cụm từ này. Mẹo nhỏ cho nhanh đó là các bạn hãy nhấn ctrl + F rồi dán vào khung và nhấn ENTER.
Thứ năm là thay font chữ tại thuộc tính font-family thành font các bạn muốn. Rooid lưu mẫu lại và ra trang chủ xem kết quả.

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

Công cụ xem bài viết dưới dạng Grid hoặc List cho Blogspot

Xin chào các bạn, hôm nay Việt Blogger lại giới thiêu đến các bạn một thủ thuật khá là hay nữa đó chính là thêm tính năng xem bài viết trên trang chủ theo dạng Grid hoặc List.

Nếu như bạn nào chưa hiểu rõ thi có thể vào demo sau đây để có thể hình dung được nó là như thế nào nhé! switchgridandlist.blogspot.com

Được rồi. Chúng ta bắt tay vào làm ngay thôi.!

Bước 1:

Các bạn vào chỉnh sửa template và tìm đoạn code sau:

<b:section class='main' id='main' showaddelement='yes'>

Hoặc:

<b:section class='main' id='main' showaddelement='no'>

P/s: một số tem khi bạn tìm theo hai đoạn này mà không thấy thì bạn hãy chịu khó tìm theo  b:section class='main' hay showaddelement=' xem có đoạn nào tương tự không nhé!

Bước 2:

Các bạn tiếp tục copy đoạn code này và dán vào trước đoạn code trên

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
<div class='switch-left'> <span style='color: #CC0000;'>Recent</span> Post </div>
<div class='switch-right'>
<a class='bar_view' href='#'>Grid</a>
<a class='dat_view' href='#'> List </a>
</div>
</div>
</b:if>
</b:if>

Bạn có thể tùy chỉnh đoạn được đoạn <span style='color: #CC0000;'>Recent</span> Post cho phù hợp với blog của mình.

Bước 3: 

Các bạn tìm đoạn code sau

<div class='post hentry

Và thêm class bả cho nó  thì sẽ được như thế này

<div class='post bar hentry

Bước 4:

Copy toàn bộ đoạn code sau và chèn trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://trollvlhcv.googlecode.com/svn/trunk/demo/switch-display.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[
/**
* jQuery switch
*
* active class active pada switch grid atau list
* update by denddy gustiana
* http://under-88.blogspot.com/
* https://plus.google.com/109783772548428705949
*
*/
jQuery(document).ready(function () {
     var $box=jQuery(".post"),
           $bar=jQuery("a.bar_view");
     $dat=jQuery("a.dat_view");
     $dat.click(function () {
           $box.removeClass("bar");
            jQuery(this).addClass("active");
            $bar.removeClass("active");
            jQuery.cookie("dat_style", 0);
            return false
      });
      $bar.click(function () {
            $box.addClass("bar");
            jQuery(this).addClass("active");
            $dat.removeClass("active");
            jQuery.cookie("dat_style", 1);
             return false
       });
       if(jQuery.cookie("dat_style")==0) {
             $box.removeClass( "bar");
             $dat.addClass("active") }
       else {
             $box.addClass("bar");
             $bar.addClass("active")
        }
});//]]>
 </script>

Bước 5: 

Copy đoạn CSS này và chèn vào trước thẻ ]]></b:-skin> rồi nhấn lưu lại là xong nhé!

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
font-family:'PT Sans Narrow';
font-style:normal;
font-weight:400;
src:local('PT Sans Narrow'),local('PTSans-Narrow'), url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
border-bottom:5px solid #CC0000;
height:35px; color:#444;
 margin:0 10px;
padding:5px 9px;
text-transform:uppercase;
}
.switch-left {
width:360px;
float:left;
margin:0 auto;
padding-top:5px;
font:20px PT Sans Narrow;
text-shadow:1px 1px 0 #000;
color:#AAA;
}
.switch-right {
width:120px;
float:right;
margin:0 auto;
padding-top:10px;
}
.switch a {
border:1px solid #999;
font:11px Arial;
padding:3px 8px 3px 25px;
text-transform:none;
color:#aaa;
}
a.bar_view { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-Na0F7x3RCtUGNdX5Jzaavb_uGe53pe1w26-Ky9LsD2reizu7603mbdWj8W3SSliw2wh3XW0SpZbNikVlkADzNzEwgIRhXFgZswRRWnZn4aOey38ahh8ABPJtzbDEJQJjWtsEw4-2DYL/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEwdH_VdVYykth5mSawq1sG7IVWBQO6VY4j_tdHrQcFm56X-rEE8rRXsbBoW-5bdf5ouEMA-lB_Ao_6MWLRI_GP5YWMfx-aeXmbhDntU6FVs4fEs3mTN-flO8YtRy48LvDeLtl-E6JmLO/s1600/listed.gif) no-repeat 3px center;
 }
.switch a.active {
background-color:#aaa;
border:1px solid #999;
color:#111;
cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
background-color:rgba(0,0,0,0.3);
border:1px solid #000;
box-shadow:0 0 0 1px #333;
-moz-box-shadow:0 0 0 1px #333;
-webkit-box-shadow:0 0 0 1px #333;
-o-box-shadow:0 0 0 1px #333;
display:inline;
float:left;
height:160px;
list-style:none;
margin:10px 0 0 9px;
overflow:hidden;
 padding:2px 3px 5px;
position:relative;
text-align:center;
width:160px;
}
.bar h3 {
height:30px;
border:0 none;
line-height:8px;
margin:0 5px 5px;
padding:2px;
text-shadow:1px 1px 0 #000;
}
.bar h3 a {
font:14px PT Sans Narrow;
text-align:center;
line-height:16px;
}
.bar h3 a:hover {
color:#c1541a;
}
.bar .post-body {
background:none;
height:245px;
overflow:hidden;
 width:167px;
padding:0;
margin:0 0 .3cm;
 }
.bar img {
float:left;
height:110px;
 margin:0 18px;
width:110px;
}
 </style>
</b:if>
</b:if>

Xong. Và đây là kết quả.
Đây là dạng Grid

Đây là dạng List

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

Hiệu ứng phóng to ảnh khi rê chuột vào ảnh cho blogspot

Hiệu ứng phóng to ảnh khi rê chuột vào ảnh hay còn gọi là hover ảnh. Hiệu ứng này là cho bức ảnh của bạn to lên khi con trỏ truột di chuyển tới vị trí của tấm ảnh.

Có lẽ hiệu ứng này thì được áp dụng cho các trang web bán hàng nhiều hơn. Còn ở các thể loại web khác có lẽ bạn sẽ ít gặp hơn, bới lẽ nó cũng thực sự không cần thiết cho lắm.

Các bước thực hiện như sau:

Đầu tiên các bạn copy đoạn code sau và chèn vào trước thẻ </head> trong mãy của mình:

<style type="text/css">
.hovergallery img {
-webkit-transform:-scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:-scale(0.8); /*Mozilla scale version*/
-o-transform:-scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: [COLOR=#b30000]0.9[/COLOR]; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover {
-webkit-transform:-scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:-scale(1.1); /*Mozilla scale version*/
-o-transform:-scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1;
}
</style>

Bước tiếp theo các bạn các bạn sẽ sử dụng cặp thẻ sau trong khi viết bài.

<div class="hovergallery">
<img src="Link ảnh" />
<img src="Link ảnh" />
</div>

Như trong hình dưới đây nhé!

Lưu ý: khi viết bài các bạn chuyển sang thẻ html để chèn code nhé!

 Các bạn có thể xem demo dưới đây nhé:

Ảnh số một

Hoặc bạn có thể xem demo tại đây. Do trang mình bị lỗi chút nên không chuẩn.
giaydankinhnnd.com

BMag - Magazine Responsive Blogger Template

Hiện nay BMAG có lẽ đã là một một template được khá nhiều người biết đến bởi nó rất đẹp mắt và thân thiện với thiết bị di động. Vì sao lại như vậy? Bởi vì BMAG được tích hợp Responsive để phù hợp với tiêu chí mà Google đã đưa ra.

Không những thế mà BMAG còn nổi tiếng bới nó được áp dụng rộng dãi trên khá nhiều lĩnh vực. Từ tạp chí, blog tin tức cho đến blog công nghệ, giải trí vân vân... rất nhiều nữa.

Và điều đặc biệt nữa đó là BMAG tích hợp chèn Shortcode. Rất tiện dụng cho những bạn không biết nhiều về code. Và BMAG hoàn toàn chuẩn SEO và được viết trên nền tảng CSS3.

Các bạn hãy thử và cảm nhận nhé!

DEMO               DOWNLOAD

Share Template Planer Responsive Blogger

Đánh giá tem:

Planer Responsive Blogger hoàn toàn đáp ứng được các yêu cầu của một blog theo phong cách tạp chí. Đặc biệt làm blog cho tin tức, công nghệ, viết blog cá nhân,chia sẻ đa phương tiện và các loại niche blog. Đó là lý do tại sao bạn nên nhanh chóng tải mẫu này và sử dụng chúng. Template được thiết kế bằng HTML5 mới nhất và CSS3 techniques. Planer Responsive Blogger là một giao diện tương thích với hầu như tất cả các thiết bị thông minh. Vì vậy, bạn đọc của bạn sẽ yêu thích để lướt qua blog của bạn.

Các tính năng tiêu biểu:

• Hoàn toàn tương thích với di động: Theo tiêu chí thân thiện với thiết bị di động của google. Giao diện sẽ tự động điều chỉnh bố trí của nó theo kích thước màn hình của khách truy cập. Bạn có thể kiểm tra sự đáp ứng với các công cụ trong blog demo của chúng tôi.
• Tối ưu hóa công cụ tìm kiếm: Với thiết kế lần này Planer được tối ưu hóa cho công cụ tìm kiếm của blog và nó sẽ giúp bạn tăng lượng truy cập vào trang web và blog thích hợp của bạn rất nhanh chóng.
• Slider label nổi bật: Hiển nhiên trong blog của bạn thì sẽ có một chuyên mục được ưu tiên hơn. Vậy tại sao không sử dụng chức năng slider của template. Slide sẽ hiển thị các hình ảnh trực tiếp từ bài viết trong label bạn chọn.
• Các bài viết nổi bật: TRong thiết kế của planer không thể không nói đến chức năng bài viết nổi bật của nó. Blog của bạn có những bài viết hay và bạn muốn mọi người đọc chúng. Vậy tại sao không sử dụng chức năng này của template nhỉ?
• Các tính năng khác: Quảng cáo đã sẵn sàng, Menu Dropdown, Khung tìm kiếm, Chèn các nút mạng xã hội,footer được chia làm 3 cột, phong cách bài viết phổ biến và còn nhiều hơn nữa.

Hãy sử dụng và tận dụng hết các chức năng của nó nhé!

DEMO              TẢI VỀ

Một số cài đặt ban đầu cho Blogspot

Xin chào các bạn, hôm nay Việt Blogger xin được hướng dẫn các bạn cách thao tác cài đặt ban đầu khi mới bắt đầu tạo xong một blog trên blogger.com

1. Xóa quickedit

Để blog của cúng ta được đẹp hơn, có lẽ trước tiên là chũng ta nên tắt chức năng quickedit đi bằng cách copy và paste đoạn CSS nhỏ sau và trước thẻ ]]></b:skin> của giao diện mà bạn đang dùng.

.quickedit{
display:none;
}

Các bạn có thể thấy đây là trước

Sau khi sửa

2. Xóa bản quyền bởi blogger 

Có lẽ cái này cũng không cần thiết lắm đối với một số bạn. Nhưng theo mình không cần thiết để nó là gì cả.

Mặc định ban đầu khi vào bố cục thì bạn không thể xóa được widget này đi và nó đã tắt chức năng đó rồi. Để bật lên chúng ta lại vào sửa mẫu và tìm kiếm với từ khóa Attribution

Bạn  hãy để ý đoạn sau

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Các bạn hãy sữa chữ true thành false . Rồi các bạn nhấn lưu lại nhé!
Tiếp theo quay lại quản lý bố cục và xóa nó đi nào.

3. Xóa thanh điều hướng.

Các bạn hãy bào quản lý bố cục

Tìm đến thanh điều hướng và chọn chỉnh sửa
Tại cửa của sổ mới,
Bạn nhìn xuống dưới cùng và chọn tắt đi là được nhé!

4 Cài đặt mô tả và tiêu đề.

Để cài đặt cái này cho blog của bạn. Bạn hãy vào Cài đặt -> Cơ bản. Tiếp theo là nhập tiêu đề và mô tả theo ý của bạn thôi.

5. Thêm mô tả cho blog

Trước khi hướng dẫn thì mình cũng nói sơ qua về thẻ mô tả này. Nó là một thẻ meta giúp mô tả một cách khái quát nhất về trang web của bạn. Trong khi tiêu đề trang thì chỉ là một vài từ hoặc cụm từ, còn thẻ meta mô tả của trang thì lại có thể là một hoặc hai câu hoặc một đoạn ngắn. Giống như thẻ <title>, thẻ meta mô tả được đặt trong thẻ <head>. Vậy mô tả này được xuất hiện ở đâu?

Nó xuất hiện ngay trên trang kết quả tìm kiếm trên Google nhé! đây là ví dụ:

Để cài đặt phần mô tả này các bạn vào cài đặt rồi chọn Tùy chọn tìm kiếm> Sau nó bật môt tả tìm kiếm lên và nhập mô tả vào như trong hình.

Vậy là mình đã hướng dẫn các bạn cài đặt xong một số thứ cơ bản dành cho những bạn vừa tạo xong một blogspot rồi.

Chúc các blog của các bạn ngày càng phát triển nhé. Nếu trong bài viết có gì thiếu sót thì xin hãy để lại comment để bài viết đươc hoàn thiện hơn nhé!

Free download SNews - News/Magazine Responsive Blogger Theme

Nhận xét tem:
SNews là một template phù hợp nhất dành cho blog thuộc thể loại tạo chí. SNews - News/Magazine Responsive Blogger Theme có rất nhiều yếu tố mà trang web tạp chí cần thiết. Ví dụ như dễ danhg thay đổi cách bố chí các mục trong blog.Thay đổi vị trí widget xã hội, các bài trong widget và còn có nhiều sự lựa chọn để sắp xếp hơn nữa. Bạn có thể thấy được sự thoáng đãng trong template này.

Một số tính năng của tem:

• Current Version: 1.0.0
• Hoàn toàn tương thích với các loại thiết bị
• Có thể chọn nhiều hơn 10 bài đăng phổ biến gần đây
• Hỗ trọ hình ảnh từ blog khác khi không upload hình ảnh
• Tương thích cả ba loại comment (Blogger,Facebook,Disqus)
• Widget bài đăng gần đây
• Widget bài đăng ngẫu nhiên
• Widget hình ảnh trong bài viết
• Widget phản hồi gần đây
• Widget phản hồi gần đây của disqus
• Flickr Badge Widget
• Widget bài viết mới
• Related Post Widget
• Tối ưu hóa SEO
• Có Dropdown Menu
• Thiết kế chuyên cho quảng cáo
• Top Social Icon
• Social Counter Widget
• Author Profile
• Có phân trang
• Có ShortCodes
• Tương thích với các trình duyệt
• Professional admin layout, help you easy work with blog layout
• Support RTL
• Tùy chỉnh lỗi 404
• Lưu trữ trang
• Hố trợ chỉnh sửa: ảnh nền, màu nền, font chữ,...
• Support Print CSS and allow visitors share articles email

DEMO               TẢI VỀ

Tạo nút chia sẻ lên mạng xã hội cho Blogspot

Sau một hồi lướt qua các blog thủ thuật Blogspot mình thấy răng đa số các blog đều sử dụng chức năng chia sẻ bài viết lên các trang mạng xã hội.
Tuy nhiên những nút share ấy thường được gắn với những đoạn js được kết nối tới một sever bên ngoài. Điều này khiến cho blog của bạn load chậm hơn khá nhiều. Nhất là trong tình trạng đứt cáp như hiện nay :V

Để khắc phục điều này, Việt Blogger xin chia sẻ đến các bạn một đoạn code nhỏ nhằm chia sẻ bài viết của bạn lên Facebook, Twitter và Google+.

Bước 1: Các bạn vào trình chỉnh sửa tem của blog.
Bước 2: Các bạn copy đoạn code sau đây và gián vào bất kỳ vị trí nào bạn muốn hiển thị.

<div id='share-post'>
<a class='facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;' target='_blank' title='Chia sẻ lên Facebook'><span/>Facebook</a>
<a class='twitter' expr:href='&quot;https://twitter.com/share?=&quot; + data:post.url' target='_blank' title='Chia sẻ lên Twitter'>
<span/>Tweet</a>
<a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
<span/>Google+</a>
</div>

Bước 3: Làm đẹp cho nút share ( Mình lấy style bên terocket.com )
Các bạn copy đoạn CSS sau và dán vào trước thẻ ]]></b:skin> nhé!

#share-post {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
#share-post .facebook {
  background-color: #436FC9;
}
#share-post a {
  display: block;
  height: 32px;
  line-height: 32px;
  color: #fff;
  float: left;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 25px;
}
#share-post .facebook span {
  background-color: #3967C6;
}
#share-post span {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 10px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rFS7dytQRqErnNEQyDJOTCyiSPMmK9GXtdgh-rGqiaOyRD0ORazQtF0bovbT0ZSdtquZEVwwMIwRZUEnLV6VevjUCeZO8NUg5-xaPSLGl5peJZE_j6Bgx5V3OB0L2KwCW1BUy9saT3E/s1600/single-share.png) no-repeat;
}
#share-post .twitter {
  background-color: #40BEF4;
}
#share-post .twitter span {
  background-color: #26B5F2;
  background-position: -72px 0;
}
#share-post .twitter {
  background-color: #40BEF4;
}
#share-post .google {
  background-color: #EC5F4A;
}
#share-post .google span {
  background-color: #E94D36;
  background-position: -144px 0;
}
#share-post .google {
  background-color: #EC5F4A;
}

Xong rồi vào đây là kết quả.

Hi vọng bài viết sẽ có ích với các bạn!

Chèn Facebook comment vào Blogspot

Với sự lan tỏa khủng khiếp của mạng xã hội Facebook như hiện nay. Việc người người sử dụng Facebook, nhà nhà sử dụng Facebook là chuyện quá đỗi hiển nhiên.

Cũng vì nó phát triển quá là mạnh mẽ, khiến cho các diễn đàn của Việt Nam gần như chết đứng, những diễn đàn hiện nay còn tồn tại được cũng không mấy gọi là đình đám như ngày xưa.

Cũng chung số phận với diễn đàn. Bây giờ thực tế mà nói ra, viện mọi người viết blog để chia sẻ cũng giảm đi khá nhiều. Bởi lẽ việc sử dụng các blog hay diễn đàn thì có lẽ mọi người cảm thấy việc trao đổi không được nhanh chóng như là Facebook ( Ý kiến cá nhân :V )

Để thuận tiện hơn trong việc trao đổi kiến thức trên blog khi mà đã số mọi người đều sử dụng Facebook như vậy. Viietj Blogger xin được hướng dẫn các bạn chèn tiện ích Comment của Facebook vào chính blog của mình, nhằm nâng cao sự tương tác giữa người đọc và tác giả blog.

Các bước thực hiện như sau:

Bước 1: Các bạn vào phần Mẫu của blogger vào chọn Chỉnh sửa HTML

Bước 2: các bạn tìm đến thẻ </body> và thêm và trên thẻ đó đoạn code sau

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '922120084498892',
      xfbml      : true,
      version    : 'v2.3'
    });
  };
  (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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Với  922120084498892 là id của app. Các bạn tự thay bằng củacmình nhé!

Bước 3: Các bạn copy đoạn code dưới đây

<div class='fb-comments' data-num-posts='5' data-width='100%' expr:href='data:post.canonicalUrl'/>

Rồi chèn vào dưới đoạn

<b:includable id='comments' var='post'>

Bước 4: Bạn chèn vào dưới thẻ <head> hai thẻ sau

<meta content='ID Facebook của bạn' property='fb:admins'/>
<meta content='ID APP' property='fb:app_id'/>

Xong rồi đấy. Chúc các bạn thành công nhé!

Chèn link bài viết gốc khi bị sao chép

Chào các bạn, ở bài viết trước bên WordPress Plugin. Ở bài viết đấy mình đã hướng cách đóng dấu bản quyền cho ảnh rồi.
Còn ở bài này, mình sẽ hướng dẫn các bạn chèn link bài viết của mình vào blog khác, khi mà học copy từ bài biết của mình.

Các bước thực hiện như sau:

Bước 1: Các bạn vào quản lý Mẫu

Bước 2: Các bạn nhấn "ctrl + F" và nhập vào </body> để tìm kiếm
Bước 3: Copy đoạn code sau và chèn vào trên thẻ </body>

<!-- Tự động chèn link bài viết khi người khác copy bài viết từ website của mình -->
<script type='text/javascript'>
if(document.location.protocol==&#39;http:&#39;){
 var Tynt=Tynt||[];Tynt.push(&#39;cvtCjw6FGr46Jtacwqm_6l&#39;);
 (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://tcr.tynt.com/ti.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- END Tự động chèn link bài viết khi người khác copy bài viết từ website của mình-->

Bước 4: Lưu lại và xem kết quả.

Thủ thuật này có thể áp dụng cho cả các thể loại blog/web khác nữa nhé!

Template Sevida v1.7 - Responsive magazine cho Blogspot

Nhận xét Template:

Sevida là giao diện được thiết kế với phong cách báo chí cho Blogger. Với những tính năng được tích hợp phong phú. Giao diện hoạt động tốt trên nhiều thiết bị khác nhau. Với tốc độ load trang khá nhanh. Trên hết mẫu giao diện này đã tối ưu SEO Onpage cho trang Blog của bạn.

Bản Sevida lần này được cập nhật vào ngày 25/8/2014. Và cũng đang là bản mới nhất hiện nay.

Những điểm mới trong phiên bản này:

1. Thay đổi và chỉnh sửa

- Giảm bớt Script

- Cố định hình Regex làm cho đầy đủ hỗ trợ Youtube Thumbnail

- Ajax Search Result

2. Thêm các tính năng

- Tự động hiển thị icon của mạng xã hội (Khi bạn cập nhập tên) 

- Tự động chèn Google Map (Khi bạn chọn vị trí) 

- Author Profile picture on blog post 

- Disqus recent comment custom 

- Hỗ trợ cả ba loại hệ thống Comment


Hướng dẫn cài đặt

Sau khi giải nén, hãy mở thư mục Documentations rồi mở file index bằng trình duyệt web, trong đó sẽ có hướng dẫn cụ thể cài đặt như DEMO.

DEMO               Tải về

Magzima Magazine cho Blogspot

Đánh giá Template:

Magzima Magazine là một giao diện được thiết kế bởi UONG JOWO. Blog được thiết kế dành cho một blog tin tức, tập chí hay một blog thuộc thể loại giải trí, vân vân và vân vân. Blog được thiết kế với giao diện gồm 3 cột để đăng tải nội dung.

Giao diện được tích hợp responsive giúp cho blog có thể hiển thị tốt trên mọi thiết bị. Đúng với tiêu chí hiện nay của google.

Hãy cài đặt và cùng trải nghiệm nhé!

Demo           Tải về

Chuyển bài viết từ Blogspot sang WordPress

Hiện nay, Google không còn chấp nhận OAuth 1.0 nữa. Vì vậy plugin được WordPress giới thiệu để import bài viết từ blogger không còn hoạt động được nữa. Nếu bạn cài đặt và sử dụng thì sẽ nhận được thông báo này.

Để khắc phục tình trạng này, Mình xin giới thiệu tới các bạn plugin Blogger Importer Extended

Các bạn tự kích hoạt plugin nhé!

Và sau đây mình sẽ hướng dẫn các bạn thực hiện việc chuyển dữ liệu nhé!

Sau khi cài đặt xong các bạn vào mục  Công cụ -> Nhập vào -> Blogger Importer Extended

Một trang mới sẽ hiện ra. Các bạn chọn OK let's go nhé!

Bạn sẽ thấy một trang báo là Plugin sẽ kết nối với tài khoản Blogger của bạn.

Bạn nhấn Chấp nhận nhé!

Sau khi đồng ý, bạn sẽ được đưa về trang WordPress của mình, và lúc này danh sách các blog của bán sẽ hiện ra, bạn chọn blog muốn nhập và nhấn Start Import

Và quá trình Import bắt đầu

Sau khi nhập xong, chúng ta sẽ thấy một bảng mới hiện ra.

Tại đây bạn sẽ điều chỉnh tác giả của blogger cthay cho bạn trên WordPress. Bạn có thể dùng tên mặc định là admin, hay thay tên mới bằng cách điền vào ô bên cạnh. Xong rồi chúng ta click vào Asign authours. Nếu không muốn bạn có thể nhấn Skip để bỏ qua.

Đã hoàn thành việc Import. Ra xem kết quả nào!

Lưu ý: Khi sử dụng plugin này, các thẻ label của Blogger sẽ tương ứng với thẻ tag trong WordPress vì vậy các bạn cần sửa lại cho đúng với chuyên mục của mình nhé!

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

Khung tìm kiếm cho blogspot

Đối với một blog mới chỉ có vài bài viết thì việc xem các bài viết cũng không quá là khó khăn.
Xong nếu như là một blog đã có tới 100 hay vài trăm bài viết thì sẽ thế nào?
Việc bạn tìm được bài viết mà mình đang cần tìm trên blog ấy quả thực là rất khó khăn, dù nó đã chia thành các mục rất cẩn thận và chi tiết.

Để đơn giản hóa việc tìm kiếm và làm giảm thời gian phải lật từng trang trên blog. Hôm nay Việt Blogger xin hướng dẫn các bạn cách thêm công cụ tìm kiếm bài viết vào blog của mình.

Bắt đầu thôi!

Bước 1: Đăng nhập vào blog của bạn.
Bước 2: Kéo xuống phần quản lý bố cục

Bước 3: Copy đoạn code sau

<form id="vbg-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="Nhập từ khóa cần tìm" />
<input id="submit" type="submit" value="Tìm kiếm" />
</form>
<p style="display:none;">Khung tìm kiếm bởi <a href="http://www.vietbg.com">Việt Blogger</a></p>
<style>
#vbg-css3-search{
background:#B2D7FC;
background-image:0;
width:98%; height:35px;
overflow:hidden;
padding:10px
}
#search, #submit{float:left}
#search{
height:23px;
width:90.5%;
border:1px solid #a4c3ca;
font:normal 13px 'trebuchet MS', arial, helvetica;
background:#f1f1f1;
padding:5px 9px
}
#submit{
background:#46BE6E;
height:35px;
width:60px;
cursor:pointer;
font:bold 14px Arial, Helvetica;
color:#23441e;
border-width:0px;
margin:0 0 0 10px;
padding:0
}
#submit:hover{background:#95d788;background-image:0}
#submit:active{background:#95d788;outline:none}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}</style>

Bước 4: Chọn nơi bạn muốn hiển thị. Rồi click thêm tiện ích và chọn HTML/Javascript
Một của sổ mới hiện ra. Các bạn điền tên cho widget và paste đoạn code trên vào khung dưới.

Sau đó nhấn Lưu.
Xong rồi, ra trang chủ và xem kết quả thôi:

Hướng dẫn tạo trang báo lỗi 404 đẹp cho blogspot

Ở một bài trước, mình đã hướng dẫn các bạn chuyển hướng trang bị lỗi 404 về trang chủ rồi đúng không ạ?

Nhưng bạn lại không thích như vậy. Bạn muốn sẽ có một trang báo lỗi 404 đẹp cho blog của mình?
Hôm nay Việt Blogger xin hướng dẫn các bạn tạo một trang báo lỗi theo đúng như ý của bạn.

Bước 1:

Các bạn hãy copy và chèn đoạn css này vào trước thẻ </style> trong blog của bạn

/* Error 404 Rip By Tips24h.net*/
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-404{margin:11% auto}
#error-404 .box-404{width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative}
#error-404 .box-404::after{content:"width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%}
#error-404 h1{text-transform:uppercase}
#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}

Bước 2:

Chính là bước quan trọng nhất. Bước hiển thị trang báo lỗi ra màn hình.

Ở bước này chúng ta có hai cách nhé.

Cách 1:

Chèn bộ code báo lỗi ngay trên blog của bạn.

Bạn hãy chèn đoạn code sau trước thẻ </body> trong blog của bạn:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Địa chỉ ỦL không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị Admin blog gỡ bỏ</p>
<p>Trở về trang chủ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>

Cách 2:
Nhúng trang báo lỗi vào blog của bạn.
Với cách này, trước tiên chúng ta cần phải soạn thảo ra một trang báo lỗi riêng cho mình. Sau đó bạn up nó lên một host nào đó để có thể truy cập được vào tệp tin đó.
Sau khi là được những công việc đó rồi các bạn hãy dùng code này để chèn trang báo lỗi vào blog của bạn nhé. Cũng chèn trước thẻ </body> nhé

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
  <iframe height='100%' width='100%' src='link trang báo lỗi'/>
</div>
</b:if>

Xong rồi. Bây giờ lưu lại và ra xem kết quả nào:

DEMO: http://www.vietbg.com/trang-loi-404

Chúc các bạn có được một trang báo lỗi 404 như ý nhé!

Tối ưu hóa thẻ Meta Description cho Blogspot

Thẻ Meta Description là gì?

Đúng như tên gọi của nó, description trong tiếng Việt có nghĩa là mô tả hay miêu tả, thẻ meta description dùng để mô tả một cách khái quát, ngắn gọn nội dung trang Web của bạn. Google rất “quan tâm” đến thẻ meta description bởi vì nó muốn những snippet (đoạn trích ngắn) phải thể hiện chính xác trên trang kết quả. Khi thẻ này giúp người đọc hiểu rõ về nội dung của trang Web, Google sẽ “ưu tiên” sử dụng thẻ Meta Description.

Thêm thẻ Meta Description chung cho ​​Blogger.

Vào Blogger > Cài đặt > Tìm kiếm Tuỳ chọn
Tìm phần Thẻ Meta ,đánh dấu vào “Có” để Active .
Một box thoại sẽ xuất hiện , bạn viết thẻ meta cho trang chủ của bạn vào đây. Hãy chắc chắn rằng ko quá 150 ký tự.
Nhấp SAVE để xem thay đổi.

Bây giờ chuyển sang bước tiếp theo là làm thẻ Meta decription cho từng bài viết

Thêm thẻ Meta Tags cho từng bài viết

Khi viết bài mới ,bạn thấy “Mô tả Tìm kiếm” trong thanh bên, đơn giản là viết mô tả nội dung tóm tắt tìm kiếm cho bài viết đó.
Nếu bạn quên viết,google sẽ tự động lấy 1 đoạn ngẫu nhiên có liên quan trong bài bạn ra để hiển thị trên kết quả tìm kiếm .

Hướng dẫn tạo nút lên và xuống cho blogspot

Chào các bạn!
Chắc hẳn mọi người khi lướt web ai cũng đã gặp phải những trang web có nôi dung dài khiến cho trang web cũng dài theo không kém, và việc này khiến cho bạn cảm thấy khó chịu.
Vậy hãy cùng mình làm giảm bớt nhưng khó chịu đó đi bằng cách thêm vào blog nút back to top và back to bottom đơn giản nào.

Bước 1: Đăng nhập vào blogger.com, vào phần Dashboard > Design > Edit HTML > Expand Widget Templates.
Bước 2: Nhấn tổ hợp phím "ctrl" + "f" để bắt đầu tìm kiếm.
Bạn hãy nhập </body> vào khung tìm kiếm rồi nhấn "ENTER"
Tiếp theo bạn chỉ cần copy đoạn code sau và dán ngay trên thẻ </body> là xong nhé.

<!-- Go to top and bottom Start -->
<a href='#' style='display:scroll;position:fixed;bottom:35px;right:5px;' title='Go to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCFGnX6s8TIctXfw0m00gi_Kj402cKf6V82EUb4ZUPTPbAk2p1uptxMw0I3bJtkZ54d_14TzelmaF6brT5tJiExohV5JagbPQr7eARI-4u-4iAoKm-tlZtP7IZb_2Ij1-opx80tcc0aF9/s30/top.gif'/></a>
<a name="bottom"></a>
<a href='#bottom' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Go to Bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgEX2iMxF4LmY6idOV_qbrIP-Tb9Q-3eAgpP9rH6gITU27QLMvhiH8BEYTy20g1uMkQ81US4peDIaRZstOyJAQr_YOeKcG147RJlYdqqXnnp4MWPn_INvWhE0pJ6EYfqKLFBjooDLYeBFk/s30/down.gif'/></a>
<!-- Go to top and bottom End -->

Bước 3: Hãy ra trang chủ và hưởng thành quả của mình nào.
Và đây là kết quả của chúng ta.

Hướng dẫn chuyển hướng 404 về trang chủ blogspot

Như các bạn đã biết lỗi 404 thường xuyên xuất hiện trên website trong quá trinh lỗi phát sinh. Nếu như nó chẳng gay ảnh hưởng gì tới trang web của chúng ta thì có lẽ hôm nay mình đã không viết bài này. Nhưng có một vấn đề lớn đó là nhưng lỗi này thật sự không hề tốt cho công việc SEO của bạn, và đương nhiên nó sẽ bị Google, Bing hay công cụ tìm kiếm khác đánh giá thấp.

Vậy làm sao để xử lý các lỗi này được? Kể ra chắc cũng có một vài cách hay được áp dụng để xử lý lỗi này.

Nhưng theo mình cách nhanh nhất để xử lý chúng chính là Redirect lỗi 404. Ngĩa là sao ạ? Tức là chuyển hướng trang lỗi 404 về trang chủ( khi có người truy cập vào link lối thì người dùng sẽ được đưa về trang chủ blog.)

 Và sau đây là những bước hướng dẫn Redirect lỗi 404 mà các bạn nên áp dụng

Phương pháp nhanh chóng ,đơn giản nhất để chuyển hướng trang lỗi 404 về trang chủ của bạn trong Blogger theo SEO Onpage là hãy dùng Javascript.

Đầu tiên, vào bảng quản lý website Blogger. Sau đó ,vào như sau : Settings > Search Preferences > Custom Page Not Found > Edit .






Sau đó thêm đoạn code sau vào khung chỉnh sửa:

Bạn vừa nhấn vào một liên kết bị hỏng hay đã loại bỏ, vui lòng liên hệ admin để báo lỗi và được giải thích!
Bạn đang được chuyển hướng về trang chủ...
<script type = "text/javascript">
setTimeout(function()
{
location.pathname= "/"
},5000);
</script>

Bảng mã code sẽ được hiển thị giúp có thể chỉnh sửa theo ý của bạn. Sau đó click Save changes.

Sau đó, thông báo được hiển thị: “Shortly, the page you’re looking for in this blog dóe not exist. You will be redirect to homepage shortly” .
Lưu ý rằng con số 5000 tính theo dạng phần nghìn giây.

Thường thì người dùng sẽ được tự động redirect đến Homepage trong 5s. Khoảng thời gian này đảm bảo rằng có đủ thời gian để đọc thông báo.Bạn có thể F5 website của mình ,gõ địa chỉ bất kì chưa có trong website để xem đã redirect thành công chưa .

Việc tạo chuyển hướng 301 về homepage đã giúp góp phần loại bỏ được kkả năng bị google phạt vì lỗi 404.Giúp bạn SEO tốt hơn.

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

Mở liên kết ngoài trong một tab mới

Xin chào các đọc giả của Việt Blogger

Mình chắc rằng trong khi viết blog, sẽ có những trường hợp các bạn phải dẫn link ra ngoài blog của mình. Hay là những người khác trong quá trình bình luận họ cũng sẽ gắn thêm link của họ vào blog của bạn.

Và nếu như những độc giả của chúng ta click vào các đường link đó thì ngay lập tức họ sẽ được chuyển tới trang web mới và thoát ra khỏi trang web của bạn.

Vậy phải làm sao để khắc phục được tình trạng này?

Rất đơn giản thôi ạ. Các bạn chỉ cần làm theo 4 bước nhỏ sau đây là sẽ được ngay. Còn chần chừ gì nữa? Bắt đầu ngay thôi nào.

Cách 1: Dùng code + js

Bước 1: Cac bạn đăng nhập vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

Bước 2: Ấn tổ hợp phím (Ctrl + F) rồi điền vào ô tìm kiếm đoạn này "</head>" và nhấn phím "ENTER".

Bước 3: Các bạn copy đoạn code dưới đây và chèn ngay trên thẻ </head> nhé.

<script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);

});
</script>

Bước 4: Nói là bước cho hay thôi chứ thực ra là trỏ lại trang chủ để xem có hiệu quả không nhé.

Cách 2: Dùng tính năng của blogspot

(Lưu ý cách này chỉ áp dụng cho những link được chèn trong bài viết thôi nhé, các link khác sẽ không được)

Nếu sử dụng cách này, khi chèn link các bạn sau khi nhấn vào nút liên kết thì nhớ tích vào ô "Open this link in a new window" là được nhé!

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

Có gì không hiểu hãy để lại comment mình sẽ giải đáp cho các bạn nhé!