(Vietmkt360.com) - Cũng đã lâu rồi Vietmkt360 không viết về Thủ thuật Blogspot và cụ thể là tạo Widget Blogspot . Thời gian gần đây nhiều bạn hỏi mình cách tạo quảng cáo góc màn hình như thế nào mà làm cho tốc độ load trang nhanh nhất ! Hôm nay mình sẽ gửi đến các bạn thủ thuật Tạo quảng cáo góc màn hình . Code popup tạo quảng cáo này không dùng .JS nên không ảnh hưởng đến tốc độ load trang , rất hữu ích và đẹp mắt 

Ảnh minh họa :



Cách thực hiện :
1. Đăng nhập Blogger
2. Thêm tiện ích

 Blogspot : Chọn bố cục --> Thêm tiện ích HTML/JavaScrip và dán code bên dưới vào 
 - Website : Bạn thêm đoạn code sau lên trên thẻ đóng </body>
  • Đối với quảng cáo góc phải màn hình cho Blogspot



<script type="text/javascript">

function hide_float_right() {

    var content = document.getElementById('float_content_right');

    var hide = document.getElementById('hide_float_right');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_right {border: 1px solid #01AEF0;}

#hide_float_right {text-align:right; font-size: 11px;}

#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}

</style>

<div class="float-ck" style="right: 0px" >

<div id="hide_float_right">

<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>

<div id="float_content_right">

<!-- Start quang cao-->

  <a href="http://www.vietmkt360.com/" taget="_blank" ><img src="http://bit.ly/1lsfs7f" width="250" height="200"></a>

<!-- End quang cao -->

</div>

</div>
  • Đối với quảng cáo góc phải màn hình cho Website

<script type="text/javascript">

function hide_float_right() {

    var content = document.getElementById('float_content_right');

    var hide = document.getElementById('hide_float_right');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_right {border: 1px solid #01AEF0;}

#hide_float_right {text-align:right; font-size: 11px;}

#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}

</style>

<div class="float-ck" style="right: 0px" >

<div id="hide_float_right">

<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>

<div id="float_content_right">

<!-- Start quang cao-->
 <a href="http://www.vietmkt360.com/" taget="_blank" ><img src="http://bit.ly/1lsfs7f" width="250" height="200"></a>

<!-- End quang cao -->

</div>

</div>
  • Đối với quảng cáo góc trái màn hình cho Blogspot

<script type="text/javascript">

function hide_float_left() {

    var content = document.getElementById('float_content_left');

    var hide = document.getElementById('hide_float_left');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_left {border: 1px solid #01AEF0;}

#hide_float_left {text-align:left; font-size: 11px;}

#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}

</style>

<div class="float-ck" style="left: 0px" >

    <div id="hide_float_left">

<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>

<div id="float_content_left">

<!-- Start quang cao-->

     <a href="http://www.vietmkt360.com/" taget="_blank" ><img src="http://bit.ly/1lsfs7f" width="250" height="200"></a>

<!-- End quang cao -->

</div>

</div>
  • Đối với quảng cáo góc trái màn hình cho
<script type="text/javascript">

function hide_float_left() {

    var content = document.getElementById('float_content_left');

    var hide = document.getElementById('hide_float_left');

    if (content.style.display == "none")

    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }

        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';

    }

    }

</script>

<style>

.float-ck { position: fixed; bottom: 0px; z-index: 9000}

* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}

#float_content_left {border: 1px solid #01AEF0;}

#hide_float_left {text-align:left; font-size: 11px;}

#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}

</style>

<div class="float-ck" style="left: 0px" >

    <div id="hide_float_left">

<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>

<div id="float_content_left">

<!-- Start quang cao-->

   <a href="http://www.vietmkt360.com/" taget="_blank" ><img src="http://bit.ly/1lsfs7f" width="250" height="200"></a>

<!-- End quang cao -->

</div>

</div>
 - Chú ý : Những đoạn mình đổi màu các bạn thay đổi cho phù hợp với Website/blog của mình . Các bạn có thể thay đổi bằng các đoạn mã code khác như : code quảng cáo của Google adsense , code tăng like...
Chúc các bạn thành công .


Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Quay trở lại với chương trình mỗi ngày một thủ thuật Blogspot ( :( nhưng mình đã không làm được). Hôm nay, mình muốn giới thiệu tới các bạn một dạng sitemap hữu ích cho người xem Blog của bạn bằng việc tạo ra những mục lục thống kê nội dung dưới dạng 1 bảng 2 cột. Rất vừa mắt cho người xem.
Bạn sẽ thấy rõ hơn dưới bản demo trực tiếp và nếu bạn thích thú với sitemap dạng này thì hãy sử dụng nó bằng cách làm theo hướng dẫn được mình chia sẻ dưới đây.
Tạo sitemap theo dạng liệt kê theo bảng label cho Blogger
Để làm được như DEMO bạn làm theo hướng dẫn dưới đây.
Bước 1: Tạo một trang mới bằng cách vào bảng điều khiển Blogger -> Trang (Pages) → Trang mới (New Page) → Soạn thảo ở chế độ HTML
Bước 2: Dán code dưới đây vào nội dung trang

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://your-url.blogspot.com", // 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://3.bp.blogspot.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 type="text/javascript" src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Thay URL bằng URL Blog của bạn
Bước 3: Lưu mẫu lại và xem kết quả
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Cũng còn không lâu nữa là tết nguyên đán sắp đến. Gần như đây là thời gian khá bận rộn của mỗi người vì ai cũng muốn có một kỳ nghỉ tết thư giãn, thảnh thơi nên mong muốn sắp xếp, hoàn thành công việc của mình gọn gàng trước tết. Trang trí Blog, Website của bạn cho dịp tết nguyên đán này có phải là điều cần thiết không? Mình nghĩ là có rồi, nếu bạn muốn sự nổi bật và chào đón người đọc trong kỳ tết nguyên đán bằng một câu đối hoặc một lời chúc tết thật hay qua câu đối.
Thủ thuật tạo câu đối tết cho Blogspot và Website cực nhẹ

Như tiêu đề, bài viết này gửi tới bạn đọc một thủ thuật khá hay đó là tạo câu đối tết vào cho Blogspot, Website chỉ với 1 đoạn CSS đơn giản và không ảnh hưởng gì tới tốc độ tải trang cũng như liên quan đến độ SEO của Blog.
CODE: (dánh cho cả Blog và Website)

<a style="display:scroll;position:fixed;Top:0px;left:5px;" href="http://seophongvu.com" target="_blank"><img src="http://i1358.photobucket.com/albums/q765/phongvu18nd/1358174198_zpsc74e5e74.jpg" /></a>
<a style="display:scroll;position:fixed;Top:0px;right:5px;" href="http://seophongvu.com" target="_blank"><img src="http://i1358.photobucket.com/albums/q765/phongvu18nd/1358174232_zps89a1a2dd.jpg" /></a>


  • Cách làm đơn giản nhất trên Blogspot

Bạn có thể thêm bằng cách dán code vào 1 tiện ích HTML/Javascript
Vào bảng điểu khiển Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript

  • Cách làm trên Website

Tương tự như Blogspot, đối với Website bạn dán code nằm trong thẻ <body> là được.
Một số cặp câu đối cho bạn tham khảo và thay thế
cau doi tet, cung chuc tan xuan cau doi tet, van su nhu y

Chúc các bạn có một năm mới với nhiều niềm vui mới bên gia đình, người thương yêu!
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Một bài thay cho lời kết của bài viết SEO Onpage. Kéo dài cũng quá lâu rùi mà giờ mình mới quay lại, và thật sự xin lỗi cô dì chú bác, cùng toàn thể anh chị em. (^_^) Hôm nay mình chia sẻ với bạn đọc về 1 chút hiểu biết của mình về Google Webmaster Tools và hướng dẫn cách cài đặt vào Blogspot và Website.
Google Webmaster Tools và cách cài đặt cho Web, Blogspot

1. Một ít về Google Webmaster Tools

Google Webmaster Tools là 1 công cụ giúp phân tích và báo cáo cho bạn về khả năng hiển thị của Website bạn trên công cụ tìm kiếm. 
Đây là 1 công cụ quan trọng và thực sự rất cần thiết nếu bạn hướng tới làm SEO kết quả lên Google tìm kiếm. Google Webmaster Tools cho phép mọi thống kê về tình trạng Website của bạn, việc thu nhập dữ liệu trên site của bạn cũng được phân tích rõ ràng hơn, thêm vào đó là những chức năng như Submit URL Google (Tìm nạp như Google), phân tích Robots.txt ngay tại đó...
Còn chần chừ gì nữa, cài đặt ngay thôi.

2. Hướng dẫn cài đặt Google Webmaster Tools cho Website, Blogspot

Bước 1: Đăng nhập vào bảng điều khiển của Google Webmaster Tools và lựa chọn Thêm trang Web
Google Webmaster Tools và cách cài đặt cho Web, Blogspot
Thêm trang Web
Google Webmaster Tools và cách cài đặt cho Web, Blogspot

Có nhiều phương thức để Google Webmaster Tools xác nhận bạn là chủ Website Blog đó, và bạn lựa chọn phương thức của mình nhé:
Google Webmaster Tools và cách cài đặt cho Web, Blogspot
Các phương thức như:
- Xác minh qua Domain Godaddy: Theo như hình trên, bạn chỉ cần bấm vào nút xác minh và đăng nhập tài khoản Godaddy quản lý domain đó là được. Việc làm này tức là bạn đã đồng ý thêm 1 Record vào DNS của Domain đó.
 - Xác minh qua việc Upload File: Có hướng dẫn, bạn upload file đó lên theo các bước Google Webmaster chỉ.
- Qua thẻ HTML.
...

Góp ý khi sử dụng Google Webmaster Tools

- Hãy quan tâm đến tình trạng Website của bạn qua việc theo dõi thường xuyên những báo cáo từ công cụ này
- Tận dụng tối đa những hỗ trợ có trong đó.
- Xem chừng những cảnh báo lỗi được phản hồi về và tìm cách xử lý.
!
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Thêm 1 thủ thuật Blogspot sử dụng chia sẻ nội dung link Blog nữa mình muốn giới thiệu với các bạn đó là việc thêm nút Like Facebook. Khá nhỏ và khá tiện dụng, nút like Facebook sẽ được đặt dưới sát nội dung bài viết hoặc đặt ở dưới tiêu đề bài viết (bên trên nội dung bài viết) của bạn.

Để làm được điều này chúng ta thực hiện các bước sau
1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F) Tìm tới <data:post.body/> 
3. Dán code dưới đây ngay sau nó (nếu bạn muốn nút này nằm dưới nội dung - dán bên trên nếu bạn muốn nó nằm trên nội dung)
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
4. Lưu mẫu lại.
Kiểm tra kết quả.
Bạn vào Blog và vào bất kỳ 1 bài viết nào nhé.
Chúc bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Liên kết bên ngoài: Được hiểu là như 1 liên kết khác không nằm trong domain của Website. Khó nói quá nhưng ví dụ Blog mình giới thiệu liên kết của SEO Phong Vũ thì liên kết http://seophongvu.com/ đó được coi là liên kết bên ngoài của Blog này. Và hôm nay mình giới thiệu với các bạn 1 đoạn code, code này giúp bạn tự động mở tất cả liên kết bên ngoài trong 1 Tab, Windows mới. Bằng việc nó tự động thêm vào mỗi thẻ <a> của bạn 1 thuộc tính target="_blank". Điều này sẽ làm bạn giảm cực nhọc hơn khi phải thủ công tùy chọn mỗi khi đưa link vào nội dung Website, blog. Nó giúp giảm thời gian thoát khỏi Blog của bạn
Tự động mở liên kết bên ngoài trong 1 Tab, cửa sổ mới
Để làm được điều này các bạn sử dụng 1 đoạn mã JS. Ở đây mình hướng dẫn tới các bạn dùng trên Blogspot.

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: (Ctrl + F) tìm tới </head> và dán đoạn code dưới đây ngay trên nó
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<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>
Lưu ý: Nếu dòng File JS được bôi đỏ trong template Blogspot bạn đã có File JS đó thì bạn không cần thêm dòng đỏ đó nữa. Tránh trường hợp bị đụng nhau dẫn tới không hoạt động
Bước 3: Lưu mẫu lại
Hãy thử kiểm tra bằng việc liên kết đến 1 site bên ngoài (ví dụ Blog của mình chẳng hạn :) ) và check kết quả nhé
Chúc các bạn đầu tuần vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Goolge Plus, Facebook, Twitter...đều là những mạng xã hội được người dùng internet quan tâm. Facebok đã trở lên quá phổ biến với người dùng internet tại Việt Nam, mỗi máy tính mở lên có kết nối internet chắc chắn sẽ có kết nối Facebook. Việc sử dụng những chia sẻ của mạng xã hội làm tăng độ uy tín của Website, Blog của bạn. Ngoài ra nó giúp bạn quảng bá cực tốt và có lượng truy cập đến kha khá nếu như nội dung của bạn được bạn đọc chia sẻ nhiều.
Tiện đây nhắc luôn: Vào nhà tớ mà không chia sẻ là dễ bị ghẻ lắm đấy nhé. :D
Ở bài viết này, Phong chia sẻ với bạn đọc cách thêm nút chia sẻ link Web, Blog qua G+, FB, Twitter. Với những thủ thuật Blogspot mình chia sẻ luôn hướng tới sự cần thiết có trong 1 blog.
Nút chia sẻ liên kết qua G+, Facebook, Twitter cho Blogspot, Web
Demo trực tiếp tại: Blog làm đẹp

Hướng dẫn thêm nút chia sẻ liên kết qua G+, Facebook, Twitter


  • 1. Trên nền tảng Blogspot

- Bạn vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code dưới đây vào tiện ích vừa thêm
<!-- huong dan boi vuvanphong.com -->
<style>
#floatingbuttons {
    position: fixed;
    bottom: 25%;
    float: left;
    padding: 0px 0px 3px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    border-radius: 5px 5px 5px 5px;
    z-index: 10;
    right: 95%;
    border: 0px solid rgb(128, 128, 128);
}
#floatingbuttons .floatbutton{
 float:left;
 clear:both;
 margin:5px 4px 0 4px;
}
.addbuttons{
 clear:both;
 text-align:center;
 padding-top:5px;
} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{
 color:#fff;
 background:none;
 font-family:arial, sans-serif;display:block;font-size:9px;
 font-weight:bold;
 text-decoration:none;
 line-height:11px;
}
.addbuttons a:hover span{
 color:#fff;
 background:none;
 text-decoration:underline;
}
</style>
<br/>
<div id='floatingbuttons' title='Share this post!'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<!-- Medium Button -->
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<div class='floatbutton' id='facebook'>
<fb:like font='' layout='box_count' show_faces='false'/>
</div>
<div class='floatbutton' id='google+1'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size='tall'/>
</div>
<div class='floatbutton' id='twitter'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
</div>
</div>
<!--huong da boi vuvanphong.com -->
- Lưu tiện ích lại và thấy kết quả.

  • 2. Trên nền tảng Website mã nguồn khác.

Đối với Website xây dựng trên Wordpress, Joomla, Drupal, ASP.net...và những nền tảng khác, bạn hoàn toàn đưa được vào với việc sử dụng code trên chèn vào trong nội dung <body> ... </body> của trang Web.

  • 3. Nếu bạn cần hỗ trợ

Bạn có thể comment trực tiếp tại nội dung bài viết này. Mình nhận được comment của bạn sẽ phản hồi lại ngay.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Số đếm lượt xem bài đăng của Blogspot được thống kê trong bảng điều khiển Blogger, tuy nhiên nhiều blog muốn hiển thị số lần xem bài đăng đó ra ngay giao diện để bạn đọc Blog thấy được số lượt xem của họ là bao nhiêu. Việc tạo nên thủ thuật này cũng khá hay và Phong nhận thấy nó khá hữu ích cho blog của bạn mà không làm ảnh hưởng gì tới blog.
- Ưu điểm của tiện ích này là chiếm vị trí khá nhỏ và gọn gàng nhưng lại gây chú ý cho người xem luôn. Tốc độ load nhanh lấy ngay được dữ liệu đếm của Blogger.
DEMO

Hướng dẫn thủ thuật hiển thị số lượt xem bài đăng trong Blogspot


Để làm được thủ thuật này các bạn thực hiện các bước sau:
Bước 1: Đăng ký tài khoản Firebase
Firebase cho bạn đăng ký miễn phí để sử dụng tiện ích này, bạn VÀO LINK NÀY để đăng ký. Rất dễ dàng bạn tạo 1 App cho tiện ích này.
Hiển thị số lượt xem bài đăng trong Blogspot, Firebase
Mình có được 1 App là: https://vuvanphong.firebaseio.com/
Bước 2: Thêm code thống kê vào mẫu.
Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
-( Ctrl + F ) tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
/*-------- Thống kê bài viết. Hướng dẫn bởi vuvanphong.com  ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiejlpfRc5o0tjjj3XsqVQxh24VAUB7vpRWu31-xYc3IXNo1mG_TW2QlqUKIkvA4vpQJLZeNYpuIIdBoSWUgoLA1U_YQIp10HBHNymYqAIGuZr51wmLAgdkNfNbBaUmhz0jwYFg9p4cue/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBDv8i5dcw2cSLZ8YRaLt_mJhvWcj-qekBk5BCdRnpKtsreWig43UQJ4PA3NxsR67LRYRhCUAoZk0zJB341QIJOP7zGruw22a4pCfl5Z0OIoM4hdPj4oEJk58Ab_5iMPZGrlDNLK231qP/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
- Chữ bôi đỏ là màu sắc của số đếm,
-> Tiếp theo bạn tìm tới </body> và dán code dưới đây ngay trên nó.
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://vuvanphong.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>
- Liên kết App: https://vuvanphong.firebaseio.com/ được bạn thay đổi bằng link của bạn lấy.
-> Tiếp theo bạn tìm tới <data:post.body/> và dán code dưới đây ngay trên nó.
Chú ý: Nếu bạn tìm thấy nhiều <data:post.body/> thì hãy lựa chọn kết quả tìm thấy đầu tiên
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
PS: Đoạn Javascript này cần sự hỗ trợ của Jquery nên nếu trong Template bạn chưa thấy có thì thêm Jquery đó vào dưới <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
-> Bạn lưu lại mẫu, bấm F5 Blog để xem kết quả
Chúc bạn đầu tuần vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Với tiêu chí mỗi ngày share 1 thủ thuật hoặc 1 bài viết hữu ích cho bạn đọc. Blog Vũ Văn Phong dần hướng tới toàn diện về Thủ thuật Blogspot, thủ thuật dành cho Website và những tiện ích internet cần sử dụng. Và bài viết này mình sẽ share với các bạn 1 Code Popup quảng cáo hiện giữa trang Website, Blogspot. Với code dưới đây sẽ là tối ưu nhất về tốc độ load, yêu thích của người xem trang và nhấn được sự chú ý nhất khi người đọc vào site của bạn. Tùy chỉnh Popup chỉ xuất hiện 1 lần :) điều này thật cần thiết.
Thủ thuật liên quan: Tạo khung like Page Facebook vào Blogspot
Demo trực tiếp DEMO TẠI ĐÂY
Hướng dẫn tạo Popup quảng cáo hiện giữa trang Website, Blog
  • 1. Tạo Popup trên trang Blogspot

- Đối với Blogspot, bạn chỉ cần tạo 1 Widget HTML/Javascript và dán code dưới đây vào.
Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
Code:
<style type="text/css">
 /* Huong dan boi vuvanphong.com */
#mbt-counter {
        padding: 10px;
        font-family: oswald, verdana;
        background-color: rgba(0, 0, 0, 0)!important;
        color: #FFF!important;
        position: absolute;
        left: 59%;
        top: 12%;
        font-size: 15px;
}
        .reveal-modal h2 {
        position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}
 
    .reveal-modal-bg {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        }
 
    .reveal-modal {
        visibility: hidden;
        left: 50%;
        top:170px;
        margin: -200px -200px -200px -600px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHjCfoFXn2VVvgJBYwMMZUmKPiaH3kP-QknrvlV5aNSfSyfHFfwmkyzxJgIuXFU6BBnUgnP8tiNf_nLOTSTTwWpSUQ0d3iZjJaGtNkMJ3IgpVF0gTeIpqciyeqaq1mPNQjC8oO4MCWZuC/s1600/happy-new-year.png) no-repeat -17px 0px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        color: #FFF;
        }
     
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium         { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge         { width: 800px; margin-left: -440px;}
 
    .reveal-modal .close-reveal-modal {
        font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
        }
     
        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="https://fileitviet360.googlecode.com/svn/trunk/vuvanphong-popup.js"></script>
        <script type='text/javascript'>
            //<![CDATA[
     
            //Setting Time
            TargetDate = "12/25/2013 12:00 AM";
            CountActive = true;
            CountStepper = -1;
            LeadingZero = true;
            DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
            FinishMessage = "Chúc bạn vui vẻ !";
            //Hiding snowfall
            $(document).ready(function()
                        {              
            $('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
     
        //Setting cookie              
                if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
                $(document).snowfall('clear');
                $(document).snowfall.hide();
                $("#myModal").hide();
             
                }
                sessionStorage.setItem("Hide-MBT-Popup", 1);
     
                        });
                     
                        $(function() {
         
            // Setting Animation          
             $('#myModal').reveal({
                 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
                 animationspeed: 300,                       //how fast animtions are
                 closeonbackgroundclick: false,              //if you click background will modal close?
                 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
            });
         
            //Revealing Snowfall
            <!-- $(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});  -->
         
            });
         
            //]]>
        </script>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<div id="myModal" class="reveal-modal" >
        <h2><a href="http://www.vuvanphong.com" target="_blank">Blog Vũ Văn Phong</a></h2>
        <script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
        <a class="close-reveal-modal">&#215;</a>
        </div>
Trong đó:
- Khu vực chữ bôi đỏ là mã HTML hiển thị nội dung của quảng cáo.
- Dòng chữ Chúc bạn vui vẻ ! bạn thay bằng câu của bạn hoặc có thể xóa đi nếu muốn.
- Link hình ảnh nền được bôi xanh.

  • 2. Tạo Popup trên trang Website

- Đối với mã nguồn Website tự code, Wordpress, Joomla, Drupal, ASP.Net... thì các bạn hoàn toàn có thể dán code trên vào vị trí <body> của Website để hoạt động.

  • 3. Nếu bạn gặp rắc rối trong tạo POPup

Bạn có thể để lại Comment rắc rối của bạn, mình sẽ hỗ trợ tốt nhất giúp bạn tạo POPup hiển thị giữa trang của bạn thành công.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Đây không hẳn là rõ ý kiến của 1 bạn PM hỏi mình về thủ thuật Blogspot khi bạn có hỏi về nội dung như sau: "anh có thể tạo 1 widget hiển thị bài viết do mình chọn không. Ví dụ em muốn bài viết A, bài viết C, bài viết B chỉ có 3 bài đó hiển thị ở widget đó"
Đây là 1 điều rất dễ nếu bạn sử dụng cố định bài viết trong Widget đó. Tuy nhiên ở đây mình sẽ hướng dẫn chung nhất bằng cách sử dụng 1 Widget hiển thị bài viết theo nhãn Blogspot. Nếu bạn chỉ cần hiển thị 3 bài viết đó thì hãy gom 3 bài đó thuộc 1 nhãn nào đó và làm theo hướng dẫn dưới nhé. Còn nếu bạn muốn cố định 3 bài đó thì bài viết sau mình hướng dẫn các bạn kẻ bảng trong HTML để hiển thị theo ý muốn.


- Tại site ITViet360 mình có sử dụng thủ thuật này, bạn  có thể xem Demo trực tiếp ở đó.
Widget Label - Hiển thị bài viết theo nhãn theo nhãn Blogspot

Cách tạo Widget Label - Hiển thị bài viết theo nhãn theo nhãn Blogspot

Để làm được như trên các bạn thực hiện các bước sau:
Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
Bước 2: Dán code dưới đây vào tiện ích vừa thêm
<!-- Huong dan boi vuvanphong.com -->
<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
 <script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
  <script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 60;</script>
  <script type="text/javascript" src="http://www.itviet360.com/feeds/posts/summary/-/Source code?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó:
- var numposts: số bài viết hiển thị, yêu cầu của bạn là 3 thì bạn chọn 3 nhé.
- var numchars: Mô tả ngắn nội dung của bài viết.
- www.itviet360.com: Thay bằng domain Blog của bạn
- Source code: Tên Label bạn muốn hiển thị
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Facebook rộng tới mức mà không ai không chui vào ^_^. Việc sử dụng Facebook làm những chức năng trên Website, Blog cũng là những đáp ứng hay cho người vào xem. Ngoài ra Facebook sẽ giúp bạn tăng đáng kể lượt truy cập qua những tiện ích chia sẻ, Page và Comment Facebook.
Lợi ích khi sử dụng bình luận bằng Facebook cho Blogspot: Mỗi người dùng bình luận FB là đã chia sẻ bài viết, liên kết đó trên trang cá nhân của họ. Vì thế việc sử dụng Comment này giúp Blog của bạn được chia sẻ nhiều hơn. Nội dung được quảng bá rộng rãi hơn.
Tạo comment Facebook (FB) cho Blogspot (Blogger)
Demo tại bài viết: Ghép ảnh Online

Hướng dẫn Tạo comment Facebook cho Blogspot

Bước 1: Các bạn vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Ctrl + F tìm tới thẻ đóng </head> và dán code dưới đây ngay bên trên nó
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="650"></div>';
//]]>
</script>
trong đó:
data-num-post="5": là số bình luận hiển thị ra
width="650": bằng độ rộng của khung comment.
Bước 3: Bạn tìm tới <body> và dán đoạn code dưới đây ngay dưới nó.
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Bước 4: Bạn tìm tới đoạn: <b:include data='post' name='post'/> và dán đoạn code dưới đây ngay bên dưới nó
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Bước 5: Lưu mẫu lại và xem kết quả
Chú ý: Đoạn tìm ở bước 4 là theo mẫu chung, bạn hoàn toàn có thể tìm với vị trí mà bạn muốn để comment Facebook theo ý bạn bằng cách tìm tới khu vực <DIV> của nó và dán vào.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Một yêu cầu khá hay từ bạn có nickname con gái khi bạn hỏi Phong về thủ thuật nào giúp mình tạo được 1 Widget mà khi mình có kéo thanh cuộn trình duyệt xuống thì tiện ích đó bị dính lên trên cùng của trình duyệt....Nắm bắt được câu hỏi của bạn và gửi Website có chức năng tương tự thì mình biết đó là 1 kỹ thuật tạo Sticky - đó là kết dính 1 phần tử của Website, Blog luôn ở trạng thái lên đầu.
Hiệu quả của việc ghi chú kết dính này: Đó là làm người xem Website, Blog của bạn chú ý ngay tới phần bạn muốn người đọc hướng tới, chú ý tới. Đặc biệt khi bạn dính quảng cáo lại thì khá hiệu quả trong việc người xem hướng tới quảng cáo của bạn.
Ghi chú kết dính trong Blogspot khi kéo thanh cuộn trình duyệt

Rõ hơn hết là bạn xem Demo trực tiếp tại Blog demo: Trung tâm da liễu Đông Y Việt Nam bằng việc bạn kéo thanh cuộc trình duyệt xuống sẽ thấy.

Cách làm như sau:
Bước 1: Xác định tiện ích (Wiget mình muốn để kết dính) bằng cách vào bố cục -> lựa chọn tiện ích muốn dính -> Chỉnh sửa.
Có được ID của tiện ích như hình dưới

Bước 2: Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 3: Ctrl + F tìm tới </body> và dán code dưới đây trước nó
<script>
// Sticky widget by itviet360.com
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML6");
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style> 
- Trong đó HTML6 là ID của tiện ích vừa lấy.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Một câu hỏi nữa mình nhận được qua tin nhắn tới Page Line Vũ Văn Phong. Một bạn hỏi mình để ẩn đi những bài viết mới gần đây ngoài trang chủ của Blogspot. Vì đơn giản bạn ấy muốn 1 tiện ích HTML nổi bật của bạn ấy ngoài trang chủ.
- Các bạn cũng thấy ở 1 số Template tùy theo mục đích và nhu cầu sử dụng của từng người. Việc chỉ hiển thị 1 Widget như Blog Dịch vụ SEO làm cũng khá  thích hợp cho 1 Website dịch vụ.
Hướng dẫn ẩn bài viết ngoài trang chủ Blogspot
Demo tại Blog Dịch vụ SEO

Hướng dẫn ẩn bài viết ngoài trang chủ Blogspot

Bước 1: Đă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: Tìm tới đoạn code dưới (Chỉ cần Ctrl + F tìm tới Blog1 là thấy)
<b:widget id="Blog1" locked="true" title="Bài đăng trên Blog" type="Blog">
Thấy có ID đó là ok.
Bước 3: (Ctrl+F) Tìm tới </b:skin> và dán code dưới đây ngay dưới nó.
<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>
Bước 4: Lưu mẫu lại và xem kết quả nhé.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Google Adsense hiện tại đang là nhà mua quảng cáo giá cao và chất lượng nhất mà người dùng Website, Blog hướng tới bán. Cũng như nhiều bạn muốn kiếm tiền Online thông qua kênh quảng cáo này, Blogspot cũng như Youtube là 1 đứa con cưng của Google. Và việc Google ưu tiên để có thêm 1 acc hosted chỉ chuyên dùng cho Blogspot và Youtube cũng là điều dễ hiểu. Còn ở bài viết này, Phong sẽ hướng dẫn bạn cách đặt mã quảng cáo cho Blogger ở nhiều vị trí khác nhau trong Blog. Một lưu ý là các Blogspot các bạn đã đổi tên miền thì acc Hosted không hiển thị được quảng cáo nhé. Hosted chỉ dùng cho Youtube và .blogspot.com thôi.
Cần xem thêm: Mua bán Acc Google Adsense content và những "cú lừa" hoàn hảo

Cách đặt quảng cáo Google Adsense cho Blogspot


  • 1. Đặt bằng cách sử dụng Widget

Cách này thì khá đơn giản khi bạn chỉ việc thao tác 1 trong 2 lựa chọn sau:
- Thêm 1 tiện ích HTML và dán mã quảng cáo vào. Nếu bạn chưa rành về bố cục của Blogger thì xem bài viết làm quen với bố cục Blogger để hiểu rõ hơn vấn đề thêm này.
- Thêm trực tiếp tiện ích Google Adsense có sẵn trong bố cục của Blog.

  • 2. Đặt mã bằng cách dán thằng mã quảng cáo vào template Blogger

Điều này cực kỳ thuận lợi khi bạn có thể tùy chỉnh đặt ở nhiều vị trí khác nhau của Blog. Ví dụ vì muốn hướng tới người dùng Click quảng cáo tự nhiên và nhiều hơn nên đặt ở ngay trong phần nội dung của bài đăng. Ví dụ xem ở bài viết: Ghép ảnh Online này mình đã chèn ở vị trí bên trái nội dung và dưới cùng nội dung, 2 vị trí này được đánh giá khá cao về mặt hiệu quả

+ Vị trí số 1:
Có thể tùy chỉnh quảng cáo bên trái hoặc bên phải nội dung Website.
+ Vị trí số 2:
Vị trí này nên đặt giữ vì mĩ quan và cũng hiệu quả nữa.
Đối với 2 vị trí này bạn đặt trên Blogspot bằng cách sau
Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: (Ctrl + F)Tìm tới <data:post.body/>
Lưu ý: Có khoảng 5 tìm kiếm của <data:post.body/>, chọn cái ở vị trí có ghi chú <!-- POST --> nhé. Template của mình thì nó nằm ở vị trí số 4
<!-- Đặt Google AdSense hướng dẫn bởi www.vuvanphong.com -->
<div style='float:left; margin-right:15px'>
<div id='Google-AdSense' style='width:300px; height: 250px; margin:0 auto;'>
MÃ QUẢNG CÁO SỐ 1
</div>
</div>
<!--Kết thúc hiển thị vị trí 1-->
<data:post.body/> 
<!-- Hiển thị vị trí số 2 -->
<center>
MÃ QUẢNG CÁO SỐ 2
  </center>
<!-- Kết thúc hiển thị vị trí số 2 -->
Một lưu ý nữa là bạn sử dụng mã nguyên bản của Google Adsense đưa cho khi dán vào mẫu thì sẽ phát sinh lỗi thông báo: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.
Cách giải quyết là bạn thêm ="async" vào ngay đoạn khai báo Script của mã Adsense đó. Cụ thể
<script async ='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

Nếu bài viết còn thiếu sót, hãy để lại comment nhé :)
Chúc các bạn vui vẻ!
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Hầu hết mặc định của Blog hoặc 1 số template thiết kế đều mặc định khi không tìm thấy trang thì hiển thị dạng không có nội dung ở Body, ví dụ TRANG NÀY. Mặc dù không gặp lỗi gì ở vấn đề các bạn hay thắc mắc đó là như thế có ổn cho SEO không. Chỉ hơi thiếu chuyên nghiệp 1 ít thôi, chứ không vấn đề gì. :) Bài viết này Phong sẽ hướng dẫn các bạn tạo riêng 1 trang Error 404 Page not Found - để thông báo rằng, trang đó lỗi rồi. Quay về trang chủ đi :)
Error 404 Page not found - tạo trang thông báo lỗi Blogspot
Demo thì bạn BẤM VÀO ĐÂY.
1 Đoạn cod dưới đây sẽ giúp bạn thực hiện chuyển hướng những trang lỗi 404 về như dạng Demo trên.
Các bước làm như sau:
Bước 1: Vào bảng điều khiển Blogger -> Mẫu (template) -> Chỉnh sửa HTML (Edit HTML).
Bước 2: (Ctrl + F) tìm tới </body> và dán code dưới đây ngay bên trên nó.

<b:if cond='data:blog.pageType == "error_page"'>
<style>
#error-not-found {background: #ff0000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUXlzIahC6PIpW9VYCgOk64xG1GNvJAIzZFOMOC7viQSeEFwsR203_igAyAVtxnhC9zphzpqVfkSwuBbqnb1nA1XsuzlKaaeK8y6HTLwTbnU05cmGriCfRlI26JgqpalxR4XoX04QGcQ/s1600/bg_body.gif)no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%); background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUXlzIahC6PIpW9VYCgOk64xG1GNvJAIzZFOMOC7viQSeEFwsR203_igAyAVtxnhC9zphzpqVfkSwuBbqnb1nA1XsuzlKaaeK8y6HTLwTbnU05cmGriCfRlI26JgqpalxR4XoX04QGcQ/s1600/bg_body.gif)no-repeat top center,-webkit-gradient(radial, center 40%, 0, center 40%, 800, from(#ff0000), to(#880000) ); text-align:center; position:fixed; top:0px; right:0px; bottom:0px; left:0px; padding-top:270px; z-index:999999; } #error-not-found h1 { font-size:640px!important; position:absolute; font-family:Arial; top:70px; left:50%; letter-spacing: -8px; margin-left:-502px!important; width:960px; z-index:-2; color:rgba(0,0,0,.09)!important; } #error-not-found h2 { font-family:arial black; text-transform:normal; font-size:35px; line-height:66px!important; letter-spacing: -3px; color:#fff!important; margin:0!important; padding:0!important; } #error-not-found p a, #error-not-found p a:visited, #error-not-found p a:hover{ font-family:arial black; text-transform:normal; font-size:20px; line-height:40px!important; border:none; font-weight: bold; color:rgba(0,0,0,.5)!important; margin:0!important; padding:0!important; text-decoration:none!important; } </style> <div id='error-not-found'> <h1>404</h1> <h2>Blog Vũ Văn Phong</h2> <h2>Trang không tìm thấy</h2><br/> <p> <a href='/' title='Trở về trang chủ'>Trở về trang chủ</a></p> </div> </b:if>
Bước 3: Lưu lại và test demo ở 1 link bất kỳ không có trong Blog của bạn. Kết quả bạn thu được sẽ giống như demo. Bạn có thể chỉnh sửa những màu sắc, cỡ chữ...để có được những khác biệt riêng.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

1 Website bạn có nên có 1 Fan Page tương ứng với Website đó? Blog của bạn có muốn thêm 1 khung trang Like Facebook vào không?
- Page Facebook ngày càng được nhiều bạn quan tâm khi nó thực sự là 1 kênh theo dõi của người dùng. Khi bạn có người dùng theo dõi Website, blog thì chắc chắn rằng  số lượng lớn người dùng đó có sử dụng Facebook. Vậy thêm 1 kênh nữa giúp tiếp cận và đưa thông tin tới người dùng nhanh hơn, dễ dàng hơn và được chú ý hơn đó là qua kênh Facebook. Bài viết này Phong cũng giới thiệu với bạn cách tạo khung like Fan Page cho web, blog của bạn.
Trước tiên bạn cần có 1 Page Facebook, nếu chưa có bạn có thể xem: Cách tạo Page Facebook


Bước 1: Truy cập trang http://developers.facebook.com/docs/reference/plugins/like-box/
Bước 2: Tùy chỉnh thông số theo ý
Trong đó:
- Facebook Page URL: Link Facebook của bạn
- Width, Height: Chiều cao và rộng của khung
- Các giá trị Show bạn có thể tùy chọn và nhìn xuống dưới khung Like sẽ thay đổi theo tùy chọn của bạn.
Bước 3: Bấm Get Code và nhận được 2 đoạn mã như hình dưới
Để đưa vào Website các bạn dán Đoạn 1 + Đoạn 2 nằm trong <body> ... </body>
Để đưa vào Blogspot thì các bạn có thể thêm 1 tiện ích HTML/Javascript bằng cách vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascripts
Dán Đoạn 1 + Đoạn 2 vào tiện ích vừa thêm.
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Với nhiều mẫu thiết kế Blogger thì việc viết Blog theo dạng Blog cá nhân nên để hiển thị bài viết mới ngay ở trang chủ để tiện việc theo dõi của bạn đọc (Ví dụ Blog Vũ Văn Phong này). Tuy nhiên hiện này nhiều Blogger được thiết kế theo những mục đích khác nhau như giới thiệu công ty, giới thiệu dịch vụ...(Ví dụ như Blog Dịch vụ SEO) thì việc thiết kế để show được dịch vụ của mình ra là điều cần thiết. Thiết kế đó đã sử dụng ẩn những bài viết mới mặc định của Blogger. Vậy bạn có muốn những bài viết mới đó được hiển thị ở 1 vị trí nào đó. Recent Post Widget dưới đây sẽ giúp bạn làm được điều đó. Ngoài việc làm thủ thuật tạo Widget Recent Post này mình cũng hướng dẫn thêm những tùy chỉnh để bạn dễ dàng thể hiện lên Blog của mình.
Widget Recent Posts - Thêm  Bài viết mới cho Blogspot
Widget Recent Posts - Thêm  Bài viết mới cho Blogspot
DEMO trực tiếp tại Site Blog: Làm đẹp khỏe

Hướng dẫn thủ thuật Widget Recent Posts - Thêm Bài viết mới cho Blogspot

Có 3 tùy chỉnh đối với Widget Recent Posts này. Các bạn đều thực hiện thao tác chung là
Bước 1: Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML / Javascript.
Bước 2: Dán code dưới (1 trong 3) vào tiện ích vừa thêm

1. Widget Recent Posts chỉ hiển thị tiêu đề bài viết và mô tả ngắn

(Xem ở ảnh trên, loại bỏ của bài đăng)
<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
 <script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

2. Widget Recent Posts chỉ hiển thị tiêu đề bài viết

(Xem ở ảnh trên, loại bỏ hình ảnh đại diện bài viết và mô tả ngắn)
<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
<script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
 <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

3. Widget Recent Posts chỉ hiển thị tiêu đề bài viết và mô tả ngắn

(Như hình Demo)
<!-- Huong dan boi vuvanphong.com -->
<link href="https://fileitviet360.googlecode.com/svn/trunk/style.css" type="text/css" rel="stylesheet" />
 <script src="https://fileitviet360.googlecode.com/svn/trunk/json.js"></script>
  <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 = 60;</script>
  <script type="text/javascript" src="http://www.vuvanphong.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó có các tùy chọn được bôi đỏ bạn cần quan tâm:
var numposts = 3; : số bài viết mới được hiển thị ra
var showpostthumbnails = true; : Tùy chọn hiển thị hình ảnh đại diện của bài viết ra. Giá trị TRUE là có hiển thị, FALSE là không hiển thị.
var numchars = 60; : Số ký tự mô tả ngắn của bài viết mới đó
Tương tự những các giá trị khác như showdate (hiển thị ngày tháng), showcommetnum (Số bình luận)...
!
Chúc các bạn vui vẻ !
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ:

Một tiện ích được khá nhiều bạn quan tâm, tuy nhiên khi mình test thử nhiều tiện ích được chia sẻ trên mạng thì hầu hết đều có những hạn chế chung. Có thể không phải là 100% nhưng hiện tại mình thêm để làm DEMO ở khá nhiều Blog thì đều bị. Trước đây thì không bị nhưng giờ Phong chưa phân tích được lỗi này là sao: Đó là khi bạn thêm tiện ích bài viết ngẫu nhiên thì bị treo trình duyệt, treo bảng điều khiển, và load blog cũng treo luôn. Mình đang tìm cách khắc phục lỗi này.
Cập nhật ngày 18/7/2014 (đã khắc phục được)

1. Thêm tiện ích bài viết ngẫu nhiên

- Tiện ích này đã được mình test và không gặp vấn đề gì khi sử dụng. Tốc độ load nhanh cũng là ưu điểm của tiện ích này. Demo TẠI ĐÂY
Random Post - Tiện ích bài viết ngẫu nhiên cho Blogspot

Các bạn vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript và dán code dưới đây vào nó.
<style type="text/css">
.noop-random-posts ul li {
    list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlIN92r7jFM_eNzt_M8RIqAdrWuIfPvjbuM1oMfmYF3z3ENcsJVSpMPWuSLIlkYRLYl5ZL-hiSB6k253D_28JPfRTgSU3EeBL8bjdrjWzrWeGpKlpwUKVBJfIQevMK4sUUUyqWVjnl5w/s1600/tick+list+style.png");
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>
- Giá trị bạn cần quan tâm đó là: var numofpost=5 là số bài viết hiển thị ra widget. Link hình ảnh icon được bôi xanh bạn có thể thay đổi nếu muốn icon khác nhé.

2. Random Post - bài viết ngẫu nhiên cho Blogspot (chỉnh sửa template)

- Đây cũng là yêu cầu của bạn tại blog làm đẹp khỏe vì bạn có mẫu (template) có sẵn bài viết liên quan ở dưới 2 dạng, dạng khung hình ảnh và dạng theo dòng như dưới. Sau khi hỗ trợ thì bạn có thể thấy được ở phần Các tin khác đó là những bài viết được lấy ngẫu nhiên (Random) trong dữ liệu.
Ví dụ xem link bài viết bên Website đó: Chữa viêm nang lông
Random Post - Tiện ích bài viết ngẫu nhiên cho Blogspot

hay tất cả những template mà đã có bài viết liên quan rồi bạn hoàn toàn lấy đó để thêm được luôn bài viết ngẫu nhiên bằng cách xóa đoạn JS -/&quot; + data:label.name + &quot; này của Label. Để nó chỉ còn dạng
<script expr:src='&quot;/feeds/posts/default/?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
Như vậy nó sẽ lấy giá trị default là tất cả các bài đăng có trong dữ liệu Blog.
Nếu gặp khó khăn gì theo hướng dẫn, hãy để lại comment nhé.
Chúc các bạn vui vẻ!
Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤
Chia sẻ: