Articles by "Blogspot"

Showing posts with label Blogspot. Show all posts

November 11, 2015 9 ,
Ở bài viết Cách hiển thị ảnh Blogspot bị VNPT chặn, _CTPG_ đã hướng dẫn các bạn cách xử lý vấn đề bị chặn ảnh bởi nhà mạng này một cách thủ công. Tuy nhiên, cách này chỉ nên được áp dụng nếu bạn tự quản lý được hình ảnh post ở Blogspot.

Cách khắc phục ảnh bị lỗi do VNPT chặn bằng Javascript

Ở bài viết này, _CTPG_ sẽ tiếp tục hướng dẫn các bạn cách khắc phục ảnh bị lỗi do VNPT chặn bằng một cách khác: Sử dụng Javascript để hiển thị ảnh, hay chính xác hơn là để thay đổi đường dẫn của ảnh. Vì VNPT chỉ chặn blogspot.com thôi.

Cùng theo dõi hướng dẫn sử dụng javascript để thay đổi đường dẫn ảnh của Blogspot nhé.

Cách khắc phục ảnh lỗi do VNTP chặn trên Blogspot

- Vào trang quản trị Blogger

- Truy cập vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Edit HTML

- Sau đó hãy thêm đoạn code bên dưới đây vào phía trên thẻ </body>:
<script type='text/javascript'>
//<![CDATA[
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++) {  
images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.ggpht.com");
}
//]]>
</script>
Ý nghĩa của đoạn code này là gì? Đoạn code Java này sẽ tự động thay đổi các đường dẫn hình ảnh có định dạng từ 1-9.blogspot.com sang đường dẫn lh4.ggpht.com. Vì thực chất ảnh up lên blogspot là ảnh up lên picasa, nên việc thay đổi đường dẫn hình ảnh này sang đường dẫn mới sẽ không ảnh hưởng đến hình ảnh.

- Tuy nhiên, bạn nên kiểm tra lại có phải toàn bộ ảnh đã được thay đổi đường dẫn hay không! Không phải teamplate nào các bạn thêm đoạn code này vào ngay phía trên </body> là được áp dụng đâu. Có thể đoạn code này thêm vào bên dưới các đoạn Javascript khác, và bị các đoạn js này chặn khiến cho nó không được áp dụng. Hãy thử di chuyển đoạn JS hiển thị ảnh này lên trên, miễn nằm trong thẻ <body> là được, và kiểm tra vị trí nào nó hoạt động. Đôi khi cũng gặp hiện tượng nó hoạt động nhưng lại chặn 1 đoạn JS khác, khiến đoạn JS đó không hoạt động được đấy ^_^

Kết thúc vấn đề tại đây, với 2 cách khắc phục ảnh lỗi do bị VNPT chặn được _CTPG_ chia sẻ, hy vọng các bạn có thể khắc phục triệt để lỗi này. Chúc các bạn thành công!
Read more »

November 06, 2015 3 , ,
Đa phần hiện nay, các bạn đều sử dụng những template Blogspot tùy chỉnh được chia sẻ trên mạng để làm giao diện cho Blogspot, vì nhiều lý do, trong đó lý do chính là giao diện đó đẹp, được tối ưu và phù hợp nhu cầu làm blog của các bạn.

Cách tối ưu Blogspot có 2 thẻ H1 trên 1 trang
Tối ưu Blogspot có 2 thẻ H1
Tuy nhiên, không phải template Blogspot nào cũng được tối ưu SEO hoàn chỉnh, mà lỗi phổ biến đó là xuất hiện 2 thẻ H1 ở 1 trang bài viết. Thường xuất hiện 2 thẻ H1 khi bạn sử dụng tiêu đề web mình là chữ, còn nếu thay ảnh vào thì vẫn có 2 thẻ H1, nhưng 1 thẻ H1 bị trống.

Điều này ảnh hưởng tới SEO cho Blogspot của bạn, tuy nhiên, nếu có 2 thẻ H1 thật sự thì cũng không ảnh hưởng nhiều tới kết quả đâu. Và, ở bài viết này _CTPG_ sẽ hướng dẫn các bạn thủ thuật tối ưu lại các thẻ H1 của blog các bạn. Đây là thủ thuật mình tối ưu cho chính blog của mình. Hãy cùng theo dõi nhé:

Cách tối ưu Blogspot có 2 thẻ H1

- Làm gì thì làm, đầu tiên là phải backup code trước đã nhé.

- Sau đó thì truy cập vào Chỉnh sửa HTML (Edit HTML)

- Click vào vùng code, sau đó bấm Ctrl + F để mở hộp tìm kiếm, và tìm đến đoạn chữ này:
shrink to fit then we expand the header.
- Ngay phía dưới nó là đoạn code bắt đầu từ:
<b:if cond='data:mobile'>
Cách tối ưu thẻ H1 Blogspot

Chúng ta sẽ thay toàn bộ đoạn code bắt đầu từ đoạn code trên đến thẻ:
</b:includable>
Thẻ này nằm ngay trên thẻ này:
<b:includable id='description'>
Tối ưu H1 cho Blogspot

- Thay toàn bộ đoạn code đó bằng đoạn code đã được mình tối ưu thẻ H1 ở đây (Có thể coi đoạn code dưới này để tìm đoạn code tương tự trong Blogspot của các bạn):
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' itemprop='name' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
</h1>
    <b:else/>
<p class='title' itemprop='name' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
</p>
</b:if>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' itemprop='name' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
</h1>
    <b:else/>
<p class='title' itemprop='name' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
</p>
</b:if>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' itemprop='name'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' itemprop='name'>
<b:include name='title'/>
</p>
</b:if>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
- Nhớ chú ý thay cho chính xác đoạn code như mình chỉ nhé. Sau đó lưu lại, và kiểm tra lại bằng các công cụ kiểm tra onpage.

- Ngoài ra, vẫn còn 1 đoạn code tối ưu H1 dành cho blog, mình có chia sẻ ở bài viết: Tối ưu thẻ H1, H2 cho Blogspot này, các bạn nên tham khảo thêm, đoạn H1 ở bài viết kia không nằm trong đoạn code tối ưu ở bài viết này.

Xong rồi đấy, nếu sau khi làm xong mà vẫn chưa tối ưu 2 thẻ H1 trên 1 trang thì comment bên dưới để mình xem qua blog của các bạn nhé :)
Read more »

November 04, 2015 7 ,
Lâu lâu trở lại với Blogspot, nay _CTPG_ xin hướng dẫn các bạn thủ thuật tạo nút chia sẻ (share) bài viết có hiệu ứng trượt mở rất độc đáo và đẹp mắt.

Hướng dẫn tạo nút chia sẻ bài viết Blogspot hiệu ứng trượt đẹp mắt

Các bạn có thể xem demo nút share đó tại đây nhé. Về cơ bản, nút share này sẽ được bao phủ lên bởi các một lớp, sau khi rê chuột vào thì lớp này trượt sang 1 bên để lộ nút chia sẻ, rất độc đáo và đẹp mắt. Phải nói là rất cuốn hút.

Nói dông dài làm gì, vào luôn chủ đề thôi:

Hướng dẫn tạo nút chia sẻ bài viết với hiệu ứng trượt đẹp mắt

- Đầu tiên, luôn phải backup code trước khi chỉnh sửa bất kỳ điều gì nha ^_^

- Tiếp theo, chúng ta cần thêm thư viện css cho nút chia sẻ bài viết này đã, bạn hãy thêm thư viện dưới đây phía trên <b:skin>:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
- Sau đó thêm đoạn css này vào phía trên thẻ ]]></b:skin>:
#share-buttons{
width: 100%;
display: inline-block;
text-align: center;
margin: 20px auto;
}
.share-button{
background:#DCE0E0!important;
position:relative;
display:block;
float:left;
height:40px;
overflow:hidden;
width:150px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0 7px;
}
.icon{
display:block;
float:left;
position:relative;
z-index:3;
height:100%;
vertical-align:top;
width:38px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:3px;
/*border-radius*/
-webkit-border-radius:3px 0 0 3px;
   -moz-border-radius:3px 0 0 3px;
        border-radius:3px 0 0 3px;
text-align:center;
}
.icon i{
color:#fff;
line-height:42px;
}
.pslide{
z-index:2;
display:block;
height:100%;
left:38px;
position:absolute;
width:112px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:0;
/*border-radius*/
-webkit-border-radius:0 3px 3px 0;
   -moz-border-radius:0 3px 3px 0;
        border-radius:0 3px 3px 0;
margin:0;
}
.pslide p{
font-family:Open Sans;
font-weight:400;
border-left:1px solid rgba(255,255,255,0.35);
color:#fff;
font-size:16px;
left:0;
position:absolute;
text-align:center;
top:8px;
width:100%;
margin:0;
}
.share-button .pslide{
/*transition*/
-webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
     -o-transition:all .2s ease-in-out;
        transition:all .2s ease-in-out;
}
.facebook1 iframe{
display:block;
position:absolute;
right:5px;
top:6px;
z-index:1;
}
.facebook2 iframe{
display:block;
position:absolute;
right:5px;
top:6px;
z-index:1;
}
.twitter iframe{
width:90px!important;
right:5px;
top:10px;
z-index:1;
display:block;
position:absolute;
}
.google #___plusone_0{
width:70px!important;
top:10px;
right:15px;
position:absolute;
display:block;
z-index:1;
}
.facebook1:hover .pslide{
left:-90px;
}
.facebook2:hover .pslide{
left:150px;
}
.twitter:hover .pslide{
left: -90px;
}
.google:hover .pslide{
left: 150px;
}
.facebook1 .icon,.facebook1 .pslide{
background:#305c99;
}
.facebook2 .icon,.facebook2 .pslide{
background:#305c99;
}
.twitter .icon,.twitter .pslide{
background:#00cdff;
}
.google .icon,.google .pslide{
background:#d24228;
}

- Về cơ bản chúng ta đã xong phần CSS định dạng cho đoạn code chia sẻ bài viết trong Blogspot này, giờ thì thêm đoạn Javascript này phía trên thẻ </body>:
<script type='text/javascript'>
/*<![CDATA[*/
(function () {
    var a = document.getElementById('SocialBar');
    var b = document.getElementById('social_share');
    b.innerHTML = a.innerHTML;
    a.parentNode.removeChild(a)
})();
/*]]>*/</script>
- Và cuối cùng, thêm đoạn HTML này ngay vị trí bạn muốn hiển thị nút chia sẻ:
<div id='social_share'>
<div id='share-buttons'>
<div class='facebook2 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> facebook </p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='fa fa-twitter'>
</i>
</i>
<div class='pslide'>
<p> twitter </p>
</div>
 <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>
               
                </a>
                <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='fa fa-google-plus'>
</i>
</i>
<div class='pslide'>
<p> google+ </p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
                <script type='text/javascript'>
                  window.___gcfg = {lang: &#39;id&#39;};
                                    (function() {
                                    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
                                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                                    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
                                   })();
                </script>
</div>
<div class='facebook1 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> fb share </p>
</div>
  <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
</div>
</div>
Xong, lưu lại và tận hưởng thành quả thôi. Nút chia sẻ bài viết này khá lớn, nổi bật nên càng tạo thuận lợi cho người đọc chia sẻ bài viết. Chúc các bạn thành công. Có gì thắc mắc thì cmt bên dưới _CTPG_ trả lời nhé ^_^
Read more »

September 30, 2015 2 , ,
Nếu bạn đang làm Blogspot, và đang tìm cách ẩn/hiện widget thì bắt buộc bạn phải có được ID của widget đó. Hoặc bạn đang muốn sticky/float một widget nào đó thì bạn cũng cần phải có ID widget. Và rất rất nhiều lý do khác để bạn cần phải có ID widget để có thể tùy chỉnh giao diện theo mong muốn của mình.

Cách tìm ID widget trong Blogspot

Hướng dẫn lấy widget ID trong Blogspot

Như đã nói ở trên, chúng ta cần phải có ID widget để sử dụng trong nhiều trường hợp khác nhau khi cần chỉnh code, tinh chỉnh giao diện. Ở đây mình sẽ hướng dẫn các bạn 2 cách để lấy id widget:

1. Sử dụng inspect element của các trình duyệt để lấy widget id:

- Truy cập vào trang quản trị Blogger

- Vào Bố cục (layout):
Cách tìm ID của một widget trong Blogspot

- Chuột phải vào widget cần lấy id, chọn Kiểm tra phần tử (Inspect element):

Cách tìm ID của một widget trong Blogspot

- Hãy để ý trên ảnh, và bạn sẽ lấy được ID widget:

Cách tìm ID của một widget trong Blogspot

2. Sử dụng đường dẫn widget để lấy widget id:

- Tương tự như các 1, truy cập vào trang quản trị blogger -> Bố cục:
Cách tìm ID của một widget trong Blogspot

- Chọn widget cần lấy ID, chọn Chỉnh sửa (Edit):

Cách tìm ID của một widget trong Blogspot

- Ở đường dẫn trên cùng của cửa sổ mới bật ra, kéo xuống cuối đường dẫn sẽ thấy widget ID:

Cách tìm ID của một widget trong Blogspot

Hi vọng các bạn thích bài viết này và mong rằng nó sẽ giúp các bạn mới tập làm blog hay làm web. Cảm ơn các bạn đã ghé thăm _CTPG_. Nếu cảm thấy hữu ích hãy đăng ký nhận bài viết mới qua mail và chia sẻ bài viết với mọi người nhé.
Read more »

September 25, 2015 2 ,
Với những trang lỗi 404, nếu không được tùy chỉnh gì thì nó thật sơ sài và chán ngắt ^_^ Vì thế, với mục đích làm đẹp trang 404, thì mình sẽ hướng dẫn các bạn cách tạo trang lỗi 404 với 1 hộp tìm kiếm đẹp cho Blogspot của bạn.

Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot

Trang lỗi 404 là gì?

Là trang sẽ xuất hiện mỗi khi người dùng truy cập vào web nhưng địa chỉ này không tồn tại, có thể đường dẫn này là của 1 bài viết cũ đã bị xóa, cũng có thể đó là 1 đường dẫn chưa từng tồn tại, do người dùng gõ nhầm. Trang 404 sẽ thông báo cho độc giả biết rằng bài viết đã bị xóa hoặc đường dẫn chưa từng tồn tại, và độc giả nên vào 1 đường dẫn khác.

Lợi ích của trang 404 là gì?

Như đã nói ở trên, trang 404 thông báo cho người dùng biết rằng đường dẫn này đã không tồn tại hay không còn tồn tại nữa. Ngoài ra trang 404 giúp thông báo với các bots tìm kiếm trang không tồn tại và điều hướng bots trên web, việc không có trang 404 sẽ làm cho website bị đánh giá thấp vì quá nhiều đường dẫn không tồn tại và báo lỗi.

Hướng dẫn cách tạo trang lỗi 404 với hộp tìm kiếm đẹp cho Blogspot

Vì trang 404 mặc định nó sẽ chẳng có gì, nhìn sẽ mất cảm tình. Vì thế, với thủ thuật blogspot này, mình muốn đưa 1 hộp tìm kiếm vào trang này, nhằm giúp người dùng tìm kiếm nội dung mình cần thông qua nó nếu gặp phải trang lỗi 404.

Trang lỗi 404 tùy chỉnh

- Truy cập vào trang quản trị Blogger

- Vào Cài đặt (Settings) -> Tùy chọn tìm kiếm (Search preferences):

Tùy chọn tìm kiếm (Search preferences)

- Tại mục Lỗi và chuyển hướng (Error and redirections) -> Không tìm thấy trang tùy chỉnh (Custom page not found), thêm vào đoạn code sau:

Không tìm thấy trang tùy chỉnh

<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    cursor: pointer;
}
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Tìm kiếm trên tranbadat.info' type='text'/>
    <button id='search-button1' type='submit'><span>Tìm kiếm</span></button>
  </form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">Trang này đã được xóa hoặc chưa từng tồn tại - Vui lòng truy cập <a href="http://www.tranbadat.info">_CTP_</a>
Bạn có thể thay các đoạn chữ và link màu xanh tùy theo ý của bạn nhé, hoặc để nguyên đó mà xài thôi.
- Sau khi chỉnh sửa xong thì lưu lại. Và hãy kiếm tra web của bạn bằng 1 đường dẫn bất kỳ để dẫn tới trang lỗi 404 xem. ^_^
Read more »

September 24, 2015 1 ,
Widget xếp hạng bình luận (Hay top commentators) sẽ xếp hạng các blogger bình luận nhiều nhất trên blog của bạn, cung cấp cho bạn chi tiết số bình luận của blogger đó trên website bạn trong khoảng thời gian nhất định.

Tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Lợi ích gì từ bình luận và widget xếp hạng bình luận?

Bình luận là một phần của Blogspot, việc bình luận nhiều giúp cho nội dung bài viết được tươi mới trong mắt bots và tạo ra sự trao đổi, tương tác giữa những người dùng trong blog. Trang blog có càng nhiều bình luận thì càng tốt, tương tác càng nhiều, càng chất lượng, sẽ giúp chúng ta hỗ trợ cho việc SEO Blogspot dễ dàng hơn.
Widget xếp hạng bình luận ngoài việc cho mọi người biết những ai tương tác nhiều trên blog này, thì nó còn giúp níu giữ độc giả. Bạn có cảm thấy hãnh diện khi thấy mình nằm trong danh sách này ở một blog lớn không? Và vô hình chung, việc xếp hạng bình luận này có thể tạo sư ganh đua giữa những độc giả bằng cách comment trao đổi để thay đổi xếp hạng của mình ^_^

Đây là ảnh ví dụ nếu sử dụng widget top commentators này cho Blogspot của mình:

widget xếp hạng bình luận (Top commentators)

Hướng dẫn tạo widget xếp hạng bình luận (Top commentators) cho Blogspot

Với widget này, số bình luận sẽ nằm bên phải tên người bình luận nhé.
- Truy cập vào trang quản trị Blogger:

- Vào Bố cục (Layout), chọn vị trí muốn hiển thị widget xếp hạng bình luận, và thêm tiện ích (Add widget):

-  Chọn HTML/JavaScript, và thêm đoạn code sau vào bên trong nó:
<style type="text/css">
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 8;
var minComments = 1;  
var numDays = 0;      
var excludeMe = true;  
var excludeUsers = ["Anonymous", "_CTPG_ 2015", "Trần Bá Đạt _CTPG_"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPBmBZM85Wf_WBODQM5IJ4VHY2InqR4Rj13uVVZYJmfdzrIu28G9lw2HACK3F3AN-JDTTNTddioa97ZwZm7XVHlp11_8T9Qn7afipt67PjxzETQen4dMXc-R2ZIXBACBezGP2OsmPcwcXi/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguODi0o8nJf8pf4poeRfigZHgRN5XYNA1Ng8W8uKXgoURZECq7mqlbonXplGZqz98YRQo1BhQB05qm-0WmzPOnVcRkG_Y_MBimQlm30vOKn4pakj_t1yhP1w9bna8QH3935vcYLyCMFp1X/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;
  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;
  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();
  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g);
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
 
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;
    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }
  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commentators">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
Trong đó:
  • Số 0 ở numDays đó là số ngày lấy xếp hạng bình luận. Nếu để số 0 tức sẽ lấy toàn thời gian. Còn để số khác ví dụ như 30, thì xếp hạng bình luận sẽ lấy trong 30 ngày gần nhất.
  • Chữ màu xanh, các bạn thay tên G+ của các bạn vào nếu không muốn nó xếp hạng mình vào đó.
  • Số 8 màu đỏ, nằm trong var maxTopCommenters = 8, tức là chỉ hiển thị tối đa top 8 người bình luận nhiều nhất, muốn chuyển thành top 10 thì cứ đổi số 8 thành 10 thôi.
  • var sizeAvatar = 33, số 33 tức avatar có kích thước là 33x33 px, muốn to hay nhỏ hơn thì cứ thay đổi số 33.

- Lưu lại, và hoàn thành!
Sau khi lưu lại bạn sẽ thấy xếp hạng bình luận cho Blogspot của mình. Khá đẹp và bắt mắt đấy nhé ^_^ Chúc bạn có blog đẹp!
Read more »

September 24, 2015 29 ,
Bạn muốn một trang chủ Blogspot có giao diện đẹp, hấp dẫn giống một trang báo tương tự như của tranbadat.info hay nhiều trang web khác? Các bài viết sẽ hiển thị theo các label, giúp chúng ta phân ra nhiều chuyên mục tại trang chủ, nhằm giúp độc giả tiếp cận nhiều hơn với các bài viết trên blog.

Hiển thị bài viết theo label tại trang chủ Blogspot

Thủ thuật Blogspot này sẽ sử dụng các label để hiển thị các bài viết trong các label này. Ví dụ, các bạn có thể thấy ở trang chủ của mình. Đó là các label: Blogspot, Windows, SEO, Thủ thuật CNTT và Ninja Coming. Mỗi label sẽ hiển thị các bài viết nằm trong Label đó. Rõ ràng với cách hiển thị truyền thống là phân trang của blogspot thì các phân các chuyên mục như thế này giúp độc giả dễ dàng tiếp cận các thông tin mà chúng ta đang cung cấp.

Hướng dẫn hiển thị bài viết theo label tại trang chủ Blogspot

- Như thường lệ, tốt nhất trước khi chỉnh sửa chúng ta nên Backup lại code web trước đã.

- Truy cập vào trang quản trị Blogger: https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

edit html


- Click vào vùng code, và tìm đến thẻ ]]></b:skin>, sau đó thêm đoạn code này vào phía trên nó:
img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }
- Tiếp tục tìm đến thẻ <head> và thêm đoạn code này vào phía dưới nó:
 <script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhazHSaCbVJduiWfOh9X9JSWfRvWlykE7xI0zf2oBi1JFhEjB9eTjM8FLz2-v-FFeh6hpQxLo_cZfX-4HNYn9oukyrJHXjKqt_ghlUKm0IkNSXh0iP8u9vj4_otq-Qfjt5u1vgN0et8tN0/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>
Sau đó lưu template lại.
- Cuối cùng, vào Bố cục (Layout), chọn vị trí mà bạn muốn hiển thị theo label, và thêm tiện ích (Add widget), chọn HTML/Javascript và thêm đoạn code này vào trong nó:
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó, chổ label name, các bạn thay bằng tên label muốn hiển thị ở trang chủ nhé.

- Lưu lại và tận hưởng thành quả, bạn đã có thể hiển thị bài viết theo label tại trang chủ blogspot rồi đấy.

Và nếu muốn thêm các label khác, bạn chỉ cần lấy đoạn code phía trên đổi label name thành các label khác rồi thêm vào các vị trí muốn thôi. Và để có giao diện thật đẹp như của mình thì các bạn cần biết CSS để chỉnh sửa bố cục trang web nhé.
Read more »

September 17, 2015 2 ,
Bạn có thấy rằng ở rất nhiều blog trong hộp bình luận có sự khác biệt giữa quản trị viên và khách không? Đó thường là những icon nhỏ như dấu tick, hình người (như của mình) hay là chữ Admin... Giúp người xem dễ theo dõi và biết đâu là Admin web và đâu là khách viếng thăm. Việc thêm các icon nhỏ như vậy giúp tạo ấn tượng cho người dùng, và những bình luận của admin sẽ được chú ý hơn.

Thêm xác nhận admin trong bình luận cho Blogspot
Nhiều template của Blogspot không hề có tính năng này, admin bình luận cũng giống như một thành viên bình luận thôi. Vì thế mình sẽ hướng dẫn các bạn thủ thuật thêm xác nhận admin thuật này, để không bỏ qua những lợi ích mà nó mang lại.

Hướng dẫn thêm xác nhận Admin trong bình luận Blogspot

- Truy cập vào trang quản trị Blogger: https://www.blogger.com/

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Edit HTML

- Click vào vùng code và tìm đoạn code sau:
.comments .comments-content .icon.blog-author
- Sau đó xóa hết toàn bộ code bên trong nó, code đó sẽ giống như thế này nhé:
background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); 
- Và sau đó thay đoạn code dưới đây vào:
background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;
Trong đó, đường dẫn màu xanh là đường dẫn cho icon làm xác nhận Admin, như trên là dấu tick màu xanh, các bạn có thể tạo ra các icon khác thay vào đường dẫn đó nhé.

Xem thêm:
- Lưu template lại và tận hưởng thành quả ^_^

Nếu có thắc mắc nào về việc thêm xác nhận Admin trong bình luận thì comment bên dưới nhé.
Read more »

September 13, 2015 8 , ,
Bạn muốn trang web của mình mới lạ với mỗi lượt truy cập, nhằm làm cho người xem đỡ nhàm chán với giao diện hiện tại? Mình đề xuất các bạn nên thay đổi màu nền cho Blogspot của bạn, và mình sẽ hướng dẫn một thủ thuật blogspot giúp các bạn tự động thay đổi màu nền mỗi khi truy cập vào trang blog.

Hướng dẫn tự động thay đổi màu nền cho Blogspot

Cách thức hoạt động của quá trình thay đổi màu nền

Trước khi vào hướng dẫn mình sẽ giải thích một tí về cơ chế hoạt động của phương pháp ở bài này: Đó là sử dụng JQuery để tự động hóa việc thay đổi màu nền mỗi khi trang web được làm mới. Bất cứ khi nào trang blogspot của bạn được refresh thì màu nền sẽ ngay lập tức thay đổi.

Có nghĩa là mỗi khi người xem refresh trang blog của bạn, thì đồng nghĩa họ sẽ nhận được một màu nền mới, có lẽ nó sẽ giúp tạo ấn tượng hơn với người xem.

Hướng dẫn tự động thay đổi màu nền cho Blogspot

Dưới đây là các bước để thay đổi màu nền, các bạn chỉ cần làm theo hướng dẫn là được.

- Truy cập vào trang quản trị Blogger của bạn ở địa chỉ: https://www.blogger.com

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Hướng dẫn tự động thay đổi màu nền cho Blogspot

- Giờ click vào vùng code, sau đó bấm Ctrl + F để mở hộp tìm kiếm, và tìm đến thẻ </head>, thêm đoạn code này vào ngay bên trên nó:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".post").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Lưu ý, nếu template bạn đã có sẵn jquery.min.js thì bạn có thể bỏ đoạn code này đi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
 - Lưu template lại
Sau khi lưu template lại thì bạn hãy thử ra kiểm tra blog mình xem thế nào, bạn sẽ thấy mỗi lần bạn F5 thì blog của bạn sẽ tự động thay đổi màu nền. Khá hấp dẫn phải không nào? ^^
Read more »

September 10, 2015 2 , , ,
Fabulous là một template blogspot chuẩn SEO cực kỳ sáng tạo dành cho các nhiếp ảnh gia, các nhà thiết kế. Fabulous template có giao diện cực kỳ thanh lịch và hiện đại với thiết kế responsive. Giao diện rất thân thiện với người dùng với nhiều tính năng và giao diện quản trị đơn giản.


Template Fabulous là lựa chọn tốt nhất để giới thiệu các tác phẩm của bạn trong công việc thiết kế, nhiếp ảnh hay nghệ thuật.

Một số tính năng của Templale Fabulous cho Blogspot

  • Thiết kế phong cách bộ sưu tập
  • Giao diện 2 cột
  • Full chiều rộng
  • Thiết kế hoàn toàn responsive
  • Nhiều tùy chọn tác giả
  • Widget đăng ký cập nhật thông tin
  • Trang 404 lỗi tùy chỉnh
  • Tối ưu hóa công cụ tìm kiếm
  • Phát triển bằng cách sử dụng CSS3 và HTML5
  • Tự động điều chỉnh kích thước ảnh thumbnails
  • Tương thích với các trình duyệt phổ biến
  • Thanh sidebar bên phải
  • Hệ thống bình luận Blogger
  • Các bài viết phổ biến với hình thu nhỏ
  • Hiệu ứng phóng to hình ảnh
  • Thanh menu xổ xuống responsive
  • Các bài viết liên quan với hình thu nhỏ
  • Các buttons chia sẻ mạng xã hội
  • Hộp tìm kiếm mở rộng khi rê chuột vào
  • Có hướng dẫn chỉnh sửa đi kèm
  • Vị trí đặt quảng cáo có sẵn
Read more »

September 08, 2015 13 ,
Sitemap là một thủ thuật Blogspot tạo ra một nơi chứa tất cả các bài viết, các label để tiện cho người dùng tìm kiếm, theo dõi. Sitemap được hướng dẫn ở bài này có giao diện khá đẹp, các bạn có thể xem ảnh demo bên dưới:
Hướng dẫn tạo sitemap cực đẹp cho Blogspot
Trước đây _CTPG_ đã từng có 1 bài viết hướng dẫn tạo sitemap, tuy nhiên, giao diện ở sitemap theo hướng dẫn đó chỉ đơn thuần là sắp xếp theo hàng dọc và từng label và bài viết sắp xếp liên tục nhau từ trên xuống dưới. Nên nếu có nhiều bài viết thì chắc chắn sitemap trên sẽ rất dài. Còn với sitemap được hướng dẫn ở bài này lại có giao diện sắp xếp rất khoa học. Nói chung là đẹp :)

Hướng dẫn tạo sitemap cực đẹp cho Blogspot


- Truy cập vào trang quản trị Blogger: https://www.blogger.com

- Vào Trang (Page), tiếp tục tạo trang mới cho sitemap (New page)

New page

- Chuyển sang tab HTML, dán đoạn code dưới đây vào:
<link href="https://dl.dropbox.com/s/83zedha973pbecv/tabbed-toc-skin-sitemap.css" media="screen" rel="stylesheet" type="text/css"></link>
<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.tranbadat.info/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://lh3.ggpht.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://dl.dropbox.com/s/jak1mqt2qj1msf4/tabbed-toc-sitemap.js" type="text/javascript"></script>
Đổi đường dẫn thành đường dẫn blog của bạn nhé. Ngoài ra nếu muốn tinh chỉnh gì khác thì bạn hãy chỉnh trong file CSS nhé ^_^

- Đặt tên cho sitemap và lưu lại. Done!

Sitemap hiện tại của _CTPG_ nằm ở địa chỉ này: http://www.tranbadat.info/p/sitemap.html
Read more »

September 05, 2015 11 , , ,
Các Blogger mấy hôm nay có lẽ vô cùng cực khổ, ngay trước ngày 2/9 nhà mạng FPT ra tay chặn IP của Blogspot, làm hàng loạt trang blog bị hiện tượng không ổn định, lúc load được trang, lúc không. Điều này ảnh hưởng rất lớn đến lượng visit của website cũng như gây ức chế cho người xem lẫn webmaster.

Cách dùng Cloudflare để không bị chặn Blogspot

Sau mấy ngày tìm cách fix, mình nhận được nhiều hỗ trợ của bà con blogger, tuy nhiên hầu hết các hỗ trợ này không có tác dụng mấy, như việc đổi DNS trên máy (Việc này chỉ giúp bạn vào được web chứ không giúp được người khác vào được web của bạn)... Tiếp đến, mình nghĩ đến việc nhà mạng chặn IP, vậy thì phải tìm cách đổi IP cho blog, nhưng việc đổi IP trên trang chủ tên miền không có tác dụng, đây là lúc mình nghĩ đến Cloudflare.

CloudFlare là một dịch vụ proxy trung gian, nghĩa là thay vì tên miền website của bạn sẽ kết nối với máy chủ qua IP của máy chủ thì lại kết nối đến CloudFlare, mỗi lượt truy cập đều kết nối và xử lý tại CloudFlare trước, điều này có nghĩa website của bạn sẽ được thay đổi IP, DNS.
Và sau khi mình sử dụng thủ thuật áp dụng CloudFlare vào website mình khoảng 3 tiếng sau, mọi thứ rất OK, không còn hiện tượng bị gián đoạn, lúc load, lúc không nữa. Dưới đây là hướng dẫn các bạn dùng CloudFlare.

Hướng dẫn dùng CloudFlare để không bị chặn Blogspot


- Bạn hãy truy cập vào website: https://www.cloudflare.com
Click vào sign up để tạo một tài khoản trên CloudFlare, việc tạo tài khoản là miễn phí. Sau khi tạo tài khoản thì đăng nhập vào đi nhé.

- Click vào Add site ở thanh menu trên cùng, và hãy thêm tên miền của bạn vào và bấm Begin scan:

Cách dùng Cloudflare để không bị chặn Blogspot

CloudFlare đang tiến hành quét tên miền của bạn.

Cách dùng Cloudflare để không bị chặn Blogspot

Sau khi scan xong thì tiếp tục bấm Continue Setup

- Tại đây là danh sách DNS records đã được quét, bạn hãy thêm 2 records TXT dưới đây vào nữa:
MARK.NS.CLOUDFLARE.COM
MARY.NS.CLOUDFLARE.COM
Bạn nhớ kiểm tra phần CNAME trong trang quản trị tên miền còn cái records nào chưa được đưa vào chổ này thì tự thêm vào nha, ví dụ như của mình dưới đây là đã thêm đầy đủ, gồm cả subdomain:

Cách dùng Cloudflare để không bị chặn Blogspot

Chú ý, các record CNAME trỏ về tên miền thì bạn chuyển sang đi qua đám mây nhé, chứ mặc định một số records mới thêm vào nó sẽ đi vòng qua đám mây, click vào đó để chuyển sang đi qua đám mây, tức qua CloudFlare trước.
- Sau khi thêm xong, thì bấm Continue, và chọn Free plan nhé, đây là gói miễn phí, tiếp tục Continue:

Cách dùng Cloudflare để không bị chặn Blogspot


 - Tại đây CloudFlare cung cấp cho chúng ta 2 name server, hãy lấy 2 nameserver này thay vào trong trang quản trị tên miền của bạn:

Cách dùng Cloudflare để không bị chặn Blogspot

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Ví dụ, mình dùng Godaddy thì Nameservers như thế này:

Cách dùng Cloudflare để không bị chặn Blogspot

Click vào Manage, và chon Custom, Add Nameserver:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Nhập 2 nameserver mà CloudFlare cung cấp vào đây và OK, tiếp tục bấm Save sau đó.

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Đây là nameserver sau khi đã thay đổi, là nameserver của CloudFlare:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

- Sau khi add namserver xong thì bạn quay lại trang CloudFlare, khoảng 10" sau bấm Recheck Namservers:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

 - Đây là khi bạn đã xác thực thành công:

Hướng dẫn thay Nameservers CloudFlare cho Godaddy

Xong, như thế là bạn đã dùng CloudFlare cho tên miền của bạn, nhưng thời gian để áp dụng hoàn toàn sẽ là khoảng vài tiếng sau khi bạn thực hiện dùng CloudFlare. Sau đó thì bạn sẽ không còn bị nhà mạng chặn nữa, truy cập khá mượt mà đấy :D Chúc các bạn thành công!
Read more »

August 31, 2015 18 ,
Thiết kế giao diện responsive hiện nay là một phần của một trang web chuyên nghiệp, và cả bạn, tôi và nhiều người khác đều thích một trang web có giao diện responsive. Hiện nay giao diện responsive đã trờ thành sống còn, khi các công cụ tìm kiếm ưu tiên nó hơn, và việc phải thiết kế 1 phiên bản di động cho website làm tốn chi phí nhiều hơn nữa.

Cách thiết kế giao diện responsive cho Blogspot

Rất nhiều template tùy chỉnh cho blogspot có responsive, tuy nhiên nhiều template bạn thích lại không có giao diện responsive này? Vậy điều bạn nên làm chính là tùy chỉnh lại giao diện cho blogspot theo hướng dẫn ở bài viết này để trang web của bạn có một giao diện responsive tương thích với mọi kích cỡ màn hình.

Trước tiên, giao diện responsive là gì?

Giao diện responsive dễ hiểu nhất là làm cho trang web tương thích với mọi thiết bị có kích cỡ màn hình khác nhau như PC, laptop, tablet, phablet, smartphone...

Thời gian gần đây rất nhiều blog được thiết kế có giao diện responsive để thay thế giao diện di động mặc định được cung cấp cho Blogger. Vì vấn đề xảy ra là giao diện cho di động chỉ tương thích với điện thoại, trên các máy tính bảng thì giao diện này không thể sử dụng được, vì thế giao diện responsive sẽ là giải pháp.

Câu hỏi đặt ra là: giao diện responsive tốt hơn giao diện di động mới chổ nào?

  1. Giao diện responsive sẽ thân thiện với SEO hơn giao diện di động
  2. Thiết kế responsive có thể tự điều chỉnh cho phù hợp với kích thước màn hình như máy tỉnh bảng, phablet...
  3. Thiết kế responsive giúp giảm tốc độ tải trang, tức là giúp tổng thể trang web được tối ưu hơn
  4. Nếu bạn sử dụng Google Adsense, thì quảng cáo đáp ứng sẽ tốt hơn rất nhiều trên giao diện responsive, giúp bạn tăng thu nhập

Hướng dẫn thiết kế giao diện responsive cho Blogspot

Để có thể thiết kế được giao diện responsive cho trang blogspot của bạn, đầu tiên đòi hỏi bạn phải có những kiến thức cơ bản về html và css đã, vì những hướng dẫn bên dưới này chỉ là những hướng dẫn chung, bạn muốn tùy chỉnh chính xác cho website của mình thì bạn phải nắm rõ thành phần của web mình đã.

- Truy cập trang quản trị của Blogger, tiếp tục vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Cách thiết kế giao diện responsive cho Blogspot

- Click vào vùng code, và tìm đến thẻ <head>, thêm code sau bên dưới nó:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
- Tiếp tục tìm đến thẻ ]]></b:skin>, và thêm đoạn code này vào phía trên nó:
@media screen and (max-width : 1280px) {
/* Cho kích thước màn hình nhỏ hơn 1280 ---*/
/* code css cho desktop ---*/
}
@media screen and (max-width : 1024px) {
/* Cho kích thước màn hình nhỏ hơn 1024 ---*/
/* code css cho tablets ---*/
}
@media screen and (max-width : 768px) {
/* Cho kích thước màn hình nhỏ hơn 768 ---*/
/* code css cho tablets nhỏ ---*/
}
@media screen and (max-width : 640px) {
/* Cho kích thước màn hình nhỏ hơn 640 ---*/
/* code css cho iphone ---*/
}
@media screen and (max-width : 480px) {
/* Cho kích thước màn hình nhỏ hơn 480 ---*/
/* code css cho smartphone ---*/
}
@media screen and (max-width : 320px) {
/* Cho kích thước màn hình nhỏ hơn 320 ---*/
/* code css cho điện thoại nhỏ ---*/
} 
Đây là code css tương ứng với từng thiết bị và kích thước màn hình. Bây giờ bạn có thể tùy chỉnh code các thành phần tương ứng với các kích thước màn hình được rồi.

Thay thế / * code css cho...---* / bằng các id và class của tiêu đề, body, sidebar, footer và các phần khác của blog của bạn.

(max-width: ** px) là chiều rộng tối đa mà code sẽ làm việc giống như nếu bạn đặt mã trong phần max-width là 320px thì khi kích thước màn hình nhỏ hơn 320 px thì đoạn code trên sẽ được áp dụng, còn lớn hơn 320px thì code này sẽ không có tác dụng

Nếu bạn đặt css cho ID1(ví dụ thôi) trong max-width 480 nhưng không phải đặt 320 thì có nghĩa là code css ID1 đó sẽ áp dụng cho khoảng kích thước màn hình từ (0-480), nhưng nếu cả css ID1 trong max-width 320 (Có tùy chỉnh thông số) thì code css sẽ áp dụng: ID1 (tùy chỉnh thông số) từ (0;320) và ID1 từ (320-480).

Ví dụ:
@media screen and (max-width: ****px)
{
#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

Một số css quan trọng trong thiết kế giao diện responsive:

  1. Chiều rộng luôn sử dụng %, không được sử dụng px, ví dụ như width:100%
  2. Luôn sử dụng đơn vị em cho kích thước, thay thế cho px. Ví dụ 10em thay cho 10px
  3. Margin:auto để tự động căn giữa và nếu muốn cách các mép một giá trị nào đó thì sử dụng đơn vị % nhé
  4. Display:none để ẩn các thành phần khác
Chú ý: Các đơn vị chiều dài trong giao diện responsive nên là đơn vị % nhé, để tránh trường hợp một số thành phần bị lỗi không hiển thị được.
Hy vọng với bài viết này đã giúp cho bạn "thông não" được các vấn đề liên quan đến giao diện responsive, và hy vọng bạn sẽ thiết kế được một giao diện responsive tốt cho blogspot của bạn. :D
Read more »

August 31, 2015 2 ,
Bạn vào rất nhiều blogspot thường thấy cuối mỗi bài viết có 1 widget về tác giả bài viết đó, ví dụ như của mình. Widget tác giả bài viết này nhằm cung cấp thông tin cho người dùng về tác giả của bài viết, bạn có thể tùy viết gì trong đó miễn bạn thấy hợp lý và gây ấn tượng cho người xem.

Hướng dẫn thêm widget tác giả bài viết vào Blogspot
Việc thêm widget tác giả bài viết là một thủ thuật blogspot để giúp việc kết nối của bạn với mọi người dễ dàng hơn, và tạo thương hiệu cho blog của bạn. Việc có thông tin tác giả sẽ gây hứng thú hơn cho người xem, họ sẽ trao đổi nhiều với bạn hơn, và điều này giúp xây dựng lòng tin và uy tín cho các bài viết của bạn.

Một số tính năng của Widget tác giả bài viết này:

  1. Đơn giản nhưng chuyên nghiệp
  2. Responsive
  3. Không ảnh hưởng tới tốc độ load trang vì chỉ có một hình ảnh
  4. Dễ dàng tùy chỉnh code
Ngay bây giờ mình sẽ hướng dẫn các bạn thêm nó vào cuối mỗi bài viết, còn việc tùy chỉnh nội dung thế nào là của các bạn nha, cả việc tùy chỉnh cho đẹp mắt nữa ^_^

Hướng dẫn thêm widget tác giả bài viết vào Blogspot


- Truy cập trang quản trị Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)

Hướng dẫn thêm widget tác giả bài viết vào Blogspot

- Click vào vùng code và bấm Ctrl + F để mở hộp tìm kiếm, tìm đến thẻ ]]></b:skin>

- Thêm đoạn code CSS dưới đây vào phía trên nó:
.i-author {overflow: hidden;padding: .7em;background: #ECF7FF;}
.i-author img {float: left;height: 5.5em;padding: 2px;margin: 0px 5px 2.5em 0px;width: 5.5em;border: 1px solid rgb(0, 4, 91) !important;border-radius: 50%;}
.i-author h4 {color: #000000;font-size: 1.5em;margin: 0px;padding: 0px 0px .5em 0px;}
.i-author p {color: #434343;font-size: 1em;line-height: 1.7em;margin: 0;}
.i-social{font-size:1.3em;margin-top: 5px;}
 Trong đó #ECF7FF là màu nền của widget, thay màu cho phù hợp với web bạn.

- Tiếp tục tìm đến đoạn code này:
<div class='post-footer-line post-footer-line-1'>
Có thể sẽ tìm thấy đến 2 đoạn code trên, bạn hãy làm bước tiếp theo với từng cái nhé.
- Thêm đoạn code này phía trên nó:
<div class='i-author'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQZxsRvdRwCh1Qi7MUi-W1yEYDQ1i2pnLwl2timDnvheAhzsFPvO_gK7lSiMXwK-NoJjr-NSZkbr7DqIzih5sPkBPe5TPbXS8fMeAQuUA_tivwtb-FBPrWJGYicvSKGmy4sW2ET49bR6j/s320/CTPG+tron.png'/><h4>Trần Bá Đạt (_CTPG_)</h4>
<p>Viết nội dung về bạn</p>
<div class='i-social'>Theo dõi tôi: <a href='https://twitter.com/_CTPG_' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> | <a href='https://www.facebook.com/tranba.dat.1' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> | <a href='https://plus.google.com/+TranBaDat' rel='nofollow'><font color='#dd4b39'>Google Plus</font>0
</a></div>
</div>
 Thay tương ứng các thông tin của bạn vào từng vị trí màu xanh nhé.

Hướng dẫn thêm widget tác giả bài viết vào Blogspot

Sau khi hoàn thành xong thì bạn hãy lưu template lại và tận hưởng widget tác giả bài viết cho Blogspot của bạn đi nào :D  Nhớ là nên thay đổi thông số cho phù hợp với template của bạn nhé :)
Read more »

August 27, 2015 1 , , ,
Simple Grid là một template chuẩn SEO cho Blogspot với phong cách lưới cực đẹp, nhìn rất trang nhã với giao diện sáng sủa. Simple Grid được thiết kế hoàn toàn responsive và đã được tối ưu SEO.

Simple Grid - Template cho Blogspot cực đẹp - Responsive

Đây là một template rất đẹp với giao diện 1 cột, thích hợp cho các trang web cá nhân

Một số thông tin về template Simple Grid:

  • Sử dụng Plugin Masonry
  • Thiết kế dạng lưới
  • Giao diện 1 cột
  • Footer có 3 cột
  • Đã tối ưu SEO 
  • Hệ thống bình luận Blogger
  • Vị trí đặt quảng cáo cũng responsive
  • Thiết kế sáng, sạch sẽ
  • Breadcrumbs
  • Thanh điều hướng top
  • Thanh menu cố định xổ xuống
  • Màu chủ đạo: Trắng, đen
  • Có bài viết liên quan
  • Hộp tìm kiếm
  • Các buttons chia sẻ mạng xã hội
  • Nút back to top
  • Widget theo dõi các mạng xã hội
  • Widget liên hệ
  • Widget Sitemap
  • Thông tin về tác giả
Read more »

August 26, 2015 5 , ,
Nofollow những liên kết trỏ ra ngoài blogspot là một điều vô cùng cần thiết để giữ những bọ tìm kiếm ở lại trang web của các bạn. Việc thêm nofollow sẽ giúp web bạn có độ trust hơn và hỗ trợ SEO cho Blogspot tốt hơn.

Cách tự động thêm nofollow liên kết ngoài trong Blogspot

Bình thường khi viết bài, việc thêm nofollow thủ công vào liên kết rất dễ dàng, nhưng bạn không nhất thiết phải làm thủ công như vậy. Hôm nay _CTPG_ sẽ hướng dẫn các bạn dùng một đoạn Jquery để tự động thêm nofollow cho tất cả các liên kết ra ngoài Blog của bạn.

Làm thế nào để thêm nofollow link out khi viết bài?


Như đã nói ở trên, bạn có thể thêm nofollow cho đường dẫn khi viết bài, bằng cách sau:

Cách tự động thêm nofollow liên kết ngoài trong Blogspot

Cách đặt tự động nofollow cho liên kết ngoài Blogspot


- Truy cập vào trang quản trị blog của bạn.

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Cách tự động thêm nofollow liên kết ngoài trong Blogspot

- Click vào vùng code và bấm Ctrl +F để mở hộp tìm kiếm, và tìm đến thẻ </head>, thêm đoạn code này vào phía trên nó:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://www.tranbadat.info"])').attr('rel', 'nofollow');
jQuery('a[href*="https://"]:not([href*="https://www.tranbadat.info"])').attr("target", "_blank");
    });
</script>
Trong đó:
+  Đoạn js màu đỏ, nếu bạn đã có đoạn nào tương tự trong code thì bỏ nó đi nhé.
+ Thay đường dẫn trang web của bạn vào chổ màu xanh nhé, đường dẫn phía trên sẽ là thêm nofollow tất cả các đường dẫn khác ngoài đường dẫn trang của bạn. Bạn có thể thêm nhiều trang khác bằng cách  thêm [href*="http://www.duongdankhac.com"] ngay phía sau, ngăn cách bởi dấu ","
+ Đoạn jQuery có "target","_blank" có nghĩa là những đường dẫn khác sẽ tự động mở cửa sổ mới khi click vào ngoại trừ những đường dẫn được chỉ định ở trên.
- Sau khi thêm thì bạn lưu template lại và tận hưởng thôi. Mọi đường dẫn ra ngoài trang web của bạn đều đã tự động thêm nofollow rồi đấy. :)

Nếu có thắc mắc gì thì cmt bên dưới nhé!
Read more »

August 25, 2015 2 ,
Bạn muốn tăng view cho Blogspot của bạn? Vậy thì hãy nghĩ đến việc làm cho Blog của bạn tự động tải lại (refresh) trang sau 1 thời gian. Mỗi lần refresh như thế thì với bộ đếm của Blogspot sẽ tính cho bạn một lượt view.

Tự động tải lại (refresh) trang cho Blogspot

Làm thế nào để tự động làm mới trang Blogspot?

Cách dưới này chỉ sử dụng một thẻ meta khai báo một khoảng thời gian. Khi đạt đến khoảng thời gian đó thì trang web sẽ tự động tải lại, và giúp bạn có thêm một view nữa.

Cách tự động tải lại trang cho Blogspot

Như đã nói ở trên, chúng ta chỉ cần dùng một thẻ meta để chỉ định nó làm điều đó, chứ không dùng tới JavaScript nên không ảnh hưởng đến tốc độ tải trang đâu.
Xem thêm: Tạo nút chia sẻ bài viết hiệu ứng trượt tuyệt đẹp
- Truy cập vào trang quản trị Blogger.

- Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML):

Edit HTML

- Tìm thẻ </head> và thêm thẻ meta này lên phía trên nó:
<meta content='120' http-equiv='refresh'/>
Trong đó, 120 là thời gian để tải lại trang web của bạn (tính bằng giây nhé). Ở đây là 120s, tức 2' sẽ được tải lại trang 1 lần
Chú ý: Nên căn chỉnh thời gian tải lại trang cho hợp lý, tránh gây ức chế cho người xem. Ví dụ trang bạn là trang video, mà toàn để 2' load lại thì đang xem video có 2' lại load lại trang -> load lại video sẽ gây ức chế cho người xem đấy. Thời gian khuyến nghị của mình là 5" nhé :D
Read more »
Subscribe to: Posts (Atom)
Test © 2016. All Rights Reserved.
Powered by Blogger

Author Name

Contact Form

Name

Email *

Message *

Powered by Blogger.