Một tùy chọn khá cần thiết nếu bạn muốn thêm 1 điểm nhấn nào đó trong mỗi bài viết của Blogspot.
Bài viết này mình chia sẻ với bạn cách thêm quảng cáo tùy chọn dưới tiêu đề và sau cùng mỗi bài viết
Mục đích: chèn tùy ý vào dưới tiêu đề bài viết và dưới mỗi bài viết.

DEMO trực tiếp tại trang: Tin shock
CÁCH LÀM THỦ THUẬT
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 đoạn code

<div class='post-view'>

Dòng ngay sau code trên là

<data:post.title/>

- Để thêm vào sau tiêu đề bài viết thì bạn dán nội dung bạn muốn thêm sau dòng code <data:post.title/> trên nhé
3. Để dán sau dưới nội dung bài viết bạn tìm tới <data:post.body/> (ngay bên dưới dòng <data:post.title/>  ở trên ) và dán nội dung bạn cần hiển thị vào đó
Chúc các bạn thành công !

Đọc tiếp...

Xem bài viết trên phiên bản di động

Có 1 số bạn pm với mình hỏi về cách đặt Popup tại diễn đàn IT Việt. Đó là kỹ thuật sử dụng 1 đoạn code Javascript khá nhẹ và tiện ích cho sử dụng khi mình có thể chủ động ở thời gian hiển thị POPUP những lần sau. Và bạn cũng có thể tùy chỉnh cho POPUP đó chỉ hiển thị 1 lần / 1 IP / 1 ngày.

Code Popup quảng cáo 1 lần ngoài trang chủ cho Website, Blog

- Ở đây mình share code chung, đối với Website thì các bạn dán vào. blogger thì bạn có thể dán vào template hoặc dán ngay vào 1 tiện ích HTML/Javascript

<!-- --- popup ------>
<style type="text/css">
    #floating
    {
        z-index: 9999999;
        position: absolute;
        width: 600px;
        height: 420px;
        border: 0px !important;
    }
    #overPage
    {
        background: black;
        z-index: 9999999;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<div id="ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv" style="display:none">
    <div id="overPage">
    </div>
  <div id="floating" >
        <a href="javascript:closeMe();">
            <div style="margin:0 auto;background:url(http://diendan.itviet360.com/popup.gif) no-repeat center 0;width:600px;height:400px"></div>
             
        </a>
        <p style="float: right; position: relative;top:-413px; left:14px">
            <a href="javascript:closeMe();"><img src="http://diendan.itviet360.com/fancy_close.png"/></a>
        </p>
  </div>
</div>

<script language="javascript" type="text/javascript">
    function opennew(){
        var expire=new Date();
        expire=new Date(expire.getTime()+30000);
        document.cookie="VFGEN-FORUM=here; expires="+expire;
        window.open('http://www.8dichvuseo.com','_blank');
    }

    function GetCookie(name) {
          var arg=name+"=";
          var alen=arg.length;
          var clen=document.cookie.length;
          var i=0;
          while (i<clen) {
            var j=i+alen;
            if (document.cookie.substring(i,j)==arg)
              return "here";
            i=document.cookie.indexOf(" ",i)+1;
            if (i==0) break;
          }
          return null;
    }

    var visit=GetCookie("VFGEN-FORUM");
    if (visit==null){
      $("#ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv").show();
    }
        var lastScroll;
        var delay = 30;
        var speed = 50;
        var img_w = 490;
        var img_h = 360;
        function centerIt() {
            $("#overPage").css("width", $(window).width());
            $("#overPage").css("height", $(document).height());
            $("#floating").css("left", $(window).width() / 2 - img_w / 2);
            $("#floating").css("top", $(window).height() / 2 - img_h / 2 + $(document).scrollTop());
        }
        $(document).ready(function() {
            $("#overPage").css("opacity", 0.7);
            $("#overPage,#floating").show();
            centerIt();
        });
        $(window).scroll(function() {
            setTimeout(function() { ani(); }, delay);
            lastScroll = new Date().getTime();
        });
        $(window).resize(function() {
            centerIt();
        });
        function ani() {
            if ((new Date().getTime() - lastScroll) >= (delay - 20)) {
                $("#floating").animate({ top: ($(window).height() / 2 - img_h / 2 + $(document).scrollTop()) }, speed);
            }
        }
        function closeMe() {
            $("#overPage,#floating").hide();
            opennew();
        }

</script>
<!-----------end popup---------------->

Trong đó con số 30000 là thời gian các bạn muốn nó xuất hiện lại lâu hơn thì thay đổi số lớn hơn nhé. Đơn vị tính là s.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Button Share - điều không thể thiếu trên Website, Blog của bạn khi bạn muốn người xem chia sẻ dễ dàng hơn bài đăng đó với mạng xã hội. Hiện nay Facebook, Twitter, Google Plus vẫn đang là những Website mạng xã hội được nhiều người dùng nhất. Với bài viết này, ITViet360 sẽ hướng dẫn các bạn thêm Button share chỉ với Facebook, G+ và Twitter thật đơn giản.

Hướng dẫn thêm Button share chỉ với Facebook, G+ và Twitter
- Đối với trên Website: Bạn chỉ cần thêm Code vào vị trí nằm trong <body> ... </body>
- Đối với Blogspot: Bạn thêm vào template hoặc thêm vào 1 tiện ích HTML/Javascript là được.
Code để thêm:

<!--Button share chỉ với Facebook, G+ và Twitter - ITViet360 -->
<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>
<!--Button share chỉ với Facebook, G+ và Twitter - ITViet360 -->

Chúc các bạn vui vẻ !

Đọc tiếp...

Xem bài viết trên phiên bản di động

Kiếm tiền cũng là 1 mục đích của anh em yêu thích viết Blogger. Có nhiều cách kiếm tiền ngay trên blogspot của bạn. Với mình, lựa chọn nhà đặt quảng cáo thì Google Adsense vẫn là hướng khá tốt. Cũng như về giá cả và sự ưu ái cho .blogspot thì Google có sẵn kiếm tiền trong bảng điều khiển Blogger. Đăng ký đơn giản hơn nhiều.
- Còn bài viết này mình chia sẻ với bạn cách chèn quảng cáo Google Adsense vào Blogspot. Hướng dẫn này sẽ đưa ra nhiều vị trí khác nhau. Đặt ngay trong nội dung cũng có, và theo như mình theo dõi thì đặt quảng cáo trong nội dung hiệu quả Click hơn rất nhiều.

Cách chèn quảng cáo Google Adsense vào blogspot nhiều vị trí

1. Chèn quảng cáo vào tiện ích (Widget) có sẵn của Blog

Với vị trí chèn này bạn có thể dễ dàng thêm quảng cáo bằng cách vào bảng điều khiển blogger -> bố cục (Widget) -> Thêm tiện ích (Add a Widget) -> HTML/JavaScript (Hoặc tiện ích Adsense nếu tài khoản Adsense của bạn là chủ blog luôn)

2. Chèn quảng cáo vào template hiển thị trong nội dung bài viết.

Với cách chèn này, bạn sẽ phải vào template và đặt Code quảng cáo vào. blog thủ thuật Blogspot là mình đã cài thêm bằng cách này và cả cách 1 nữa.
- Một lưu ý là khi đặt quảng cáo trong temp các bạn hay gặp lỗi. Để khắc phục lỗi đó các bạn xem bài viết: Khắc phục lỗi attribute name async associated with an element type script...
Mình phân ra các vị trí có thể đặt quảng cáo trong 1 bài viết như sau:
a. Đặt quảng cáo ngay dưới tiêu đề bài đăng

- Vị trí 1: Các bạn tìm tới đoạn code
<div class='post-body entry-content'>
Nếu xuất hiện 2 đoạn code tìm được thì chọn đoạn code thứ 2 nhé. Và dán code quảng cáo ngay dưới nó
- Vị trí 2: Cũng dán code dưới đoạn tương tự ở trên nhưng chúng ta có 1 lưu ý và thêm 1 đoạn CSS để căn quảng cáo.

<!-- Đặt Google AdSense hướng dẫn bởi www.itviet360.com -->
<div style='float:left; margin-right:15px'>
<div id='Google-AdSense' style='width:300px; margin:0 auto;'>
Code quảng cáo đặt ở đây
</div>
</div>
<!--Ends Google AdSense-->

Nếu bạn muốn đặt cho hiển thị bên phải nội dung thì chuyển left thành right nhé.
b. Đặt quảng cáo sau cùng nội dung bài viết.
Với vị trí này các bạn tìm tới đoạn code
<data:post.body/>
Thường thì mỗi template có 2 đến 4 đoạn code đó. Mình sẽ hiển thị chỉ trong trang bài viết nên khi các bạn lựa chọn mã đó thì chú ý nhé. Cứ lưu lại và xem template để chọn được đúng mã <data:post.body/>
Chúc các bạn vui vẻ !

Đọc tiếp...

Xem bài viết trên phiên bản di động

.

Cũng như tiêu đề bài viết đưa ra đó là bài viết này mình sẽ hướng dẫn các bạn thủ thuật thêm comment Facebook cho Blogspot. Và trên nền Website khác như tự code PHP, ASP,...hoặc sử dụng Wordpess, Joomla, drupal thì bạn cũng có thể thêm hoàn toàn tương tự.
- Việc sử dụng comment FB có lợi ích: đầu tiên bạn hãy nghĩ đó là 1 ứng dụng cho phép chúng ta sử dụng hệ thống comment miễn phí. Mình tin chắc ai dùng internet cũng sử dụng FB nên đây là 1 loại bình luận rất tiện lợi cho người dùng. Hơn nữa nó còn tăng traffic cho Website khi người bình luận sẽ tự động đăng bình luận đó lên Facebook cá nhân của mình.
- Hạn chế của comment Facebook: đó là ở mức độ kiểm soát, bạn sẽ không thể nào kiểm soát được người dùng comment.

.

Hướng dẫn thêm comment Facebook (FB) cho Blogger, Website...

- Hướng dẫn dưới đây cho bạn làm chung trên mọi nền Website. Đối với Blogger thì mình chi tiết hướng dẫn.
Bước 1: Vào phần Mẫu (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọn Mở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="600"></div>';
//]]>
</script>

Trong đó:
data-href: là link của trang comment.
data-num-posts: Số comment hiển thị
data-width: Chiều rộng của comment
Bước 2: Chèn đoạn code sau dưới thẻ <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bước 3: Tìm đoạn Code bên dưới:

<b:include data='post' name='post'/>

Chèn đoạn code này ngay dưới đoạn vừa tìm được

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

Bước 4: Lưu mẫu (Save Template) và xem kết quả :)

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đây là 1 thủ thuật Blogspot khá hay cho người dùng vì khá nhiều bạn quan tâm đến tiện ích bài viết mới này. Phần lớn các template Blogger đều có hiển thị bài viết mới ở ngoài trang chủ. Tuy nhiên bạn cũng có thể hiển thị bài viết mới ở các trang bài viết, label nếu bạn dùng kết hợp thêm thủ thuật hiển thị tiện ích ở trang chủ hoặc trang cố định

- Và bài viết này mình giới thiệu với bạn 1 hiệu ứng đổi liên tục để thống kê bài viết mới cho Blogspot.

Bạn có thể xem Demo trực tiếp: Tại Đây

Cách làm như 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

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://vietzips.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=15'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Bài Viết Mới Nhất', numResults : 12, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Trong đó bạn cần lưu ý tới những thông tin sau:

- www.thanhnienbinhdinh.com : Thay thế bằng tên Blog của bạn

- Tiêu đề của tiện ích bạn sửa theo ý bạn, ở đây ghi là Bài Viết Mới Nhất.

- numResults : 12 : Đây là số bài viết sẽ hiển thị trong Widget.

Chúc các bạn vui vẻ !

Đọc tiếp...

Xem bài viết trên phiên bản di động