Tạo 1 thanh thông báo nhỏ cho Blogger (tương tự plugin Stripe Ad của WordPress)

Nếu bạn nào đã từng xem qua các blog được viết dưới nền WordPress, sẽ thấy được một plugin gọi là Stript ad được tạo bởi MaxBlogPress .Plugin này giúp đăng các thông báo nhỏ tới người đọc. Đây là một tiện ích hay, vậy làm sao để thêm được vào Blogger ? Bài viết này sẽ giúp các bạn.

Bên dưới đây là hình ảnh của Stript ad . Mình đã áp dụng nó trên nền Blogger và hoạt động rất tốt

Nếu bạn cảm thấy thích tiện ích này, hãy đọc hướng dẫn cách cài đặt bên dưới nhé

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần bật Mở rộng Mẫu tiện ích) . Lưu ý là hãy back-up lại template để tránh trường hợp làm sai nhé.
   
2. Thêm đoạn code này vào ngay trước thẻ ]]></b:skin>
   
   
   #mta_bar {
   background:#003366;
   border-top: 3px solid #6699ff;
   margin: 0;
   padding: 7px 0;
   z-index: 100;
   bottom:0px;
   right:0px;
   width: 100%;
   overflow: auto;
   position: fixed;
   }
   * html #mta_bar{
   /*IE6 hack*/
   position: absolute;
   width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
   }
   #mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
   #mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
   #mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
   #mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
   #left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOWbNp4vBIFhMkN_gx9W3an5PvAT_7qchW7wi0N5sifwOumFqy4IRhdnoAQVTMMzfNNaA3zAJiALAx74TmK_qk5nLTB1UqWtvLwUEBDtaN3R7rQThE-M4DS1bL-ciLvJT8as-5Y3TzXQ/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
   #left_bar a:hover { text-decoration: underline; color: #fff; }
3. Tiếp tục thêm đoạn code này vào ngay trước thẻ </head>
   
   
   <script type='text/javascript'>
   //<![CDATA[
   var mta_arr = new Array();
   var mta_clear = new Array();
   function mtaFloat(mta) {
   mta_arr[mta_arr.length] = this;
   var mtapointer = eval(mta_arr.length-1);
   this.pagetop = 0;
   this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
   this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
   this.mtasrc.height = this.mtasrc.offsetHeight;
   this.mtaheight = this.cmode.clientHeight;
   this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
   var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
   mtabar = mtabar;
   eval(mtabar);
   }
   function mtaGetOffsetY(mta) {
   var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
   var parentOffset = mta.mtasrc.offsetParent;
   while ( parentOffset != null ) {
   mtaTotOffset += parentOffset.offsetTop;
   parentOffset = parentOffset.offsetParent;
   }
   return mtaTotOffset;
   }
   function mtaFloatInit(mta) {
   mta.pagetop = mta.cmode.scrollTop;
   mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
   }
   function closeTopAds() {
   document.getElementById("mta_bar").style.visibility = "hidden";
   }
   //]]>
   

   </script>

4. Cuối cùng, tìm thẻ </body> và thêm đoạn code sau (Với đoạn code cuối cùng này, bạn có thể tùy chỉnh theo ý thích, dưới đây là code của blog mình)
   
   
   <div id='mta_bar'>
   <div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/boyproDX' target='_blank'>Đã có hơn 100 người đăng kí nhận tin qua RSS, còn bạn thì sao?</a></span></div>
   <span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;boyproDX.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7T7IyAN1MeiZ60i8v6CiMUiK6PpREANGX6-9Atow-YsB0kdO8FL6qzoahO6JZwj_-tUGaO72tw0MANgDPVQtL8XgktMkpLer-uEIH5JT31-lGAedUMlOAxwfph0LHD3-1DFLNHbN2U4/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>
5. Lưu lại template và thưởng thức kết quả
   

Vậy là các bạn đã tạo được cho Blog mình 1 thanh thông báo rồi đấy. Nếu cảm thấy thích plugin này, hãy để lại comment như một lời động viên mình nhé !

P/s : Hãy đăng kí nhận tin qua RSS hoặc theo dõi (Follow) Blog của mình để nhận thông báo về các bài viết mới nhất nhé.