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('http://lh4.ggpht.com/_pt7i0nbIOCY/SRtNzbvDqPI/AAAAAAAAAXk/KxbvrpJ1DE4/ico-rss-trans_thumb%5B1%5D.png?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='http://lh5.ggpht.com/_pt7i0nbIOCY/SRGg-N2bQ4I/AAAAAAAAAVE/pG-pTLXsMtc/close_thumb%5B1%5D.png?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é.

7 Nhận xét on "Tạo 1 thanh thông báo nhỏ cho Blogger (tương tự plugin Stripe Ad của WordPress)"

ModestPC on 3 January 2009 at 00:29 said...

bài viết rất hay, cám ơn nhiều. Mình có thể liên kết với blog của bạn chứ.

Lê Hữu Tài on 27 January 2009 at 19:23 said...

Thủ thuật hay, nhưng mà chắc chỉ 1% blogger sử dụng thủ thuật này thôi. Mình thấy nó không ưu việt cho lắm khi code dài mà chức năng thì...

Benjami Tennyson on 27 January 2009 at 23:08 said...

Cũng tùy chứ bạn, nếu ta muốn thông báo một tin nhắn nào đó mà tạo được sự chú ý thì widget này rất hữu hiệu đấy. Mình cũng đã xem qua vài blog Blogger lẫn Wordpress đều dùng widget này trông rất tiện dụng. Vả lại, code tuy dài nhưng rất dễ dàng thêm vào, không rắc rối lắm đâu :D

share4u on 30 March 2009 at 11:16 said...

cảm ơn nhé cái này quá hay! mình đã áp dụng mọi người có thể xem thử: http://share-all-4u.blogspot.com

phattrien@so on 5 April 2009 at 23:28 said...

Quả thật thủ thuật của bạn nhiều thủ thuật hay lắm, nhưng mình không thích một thứ mà không phải ai cũng có: đó là cái nguồn bài viết, bài viết của bạn toàn bỏ cái đó, mình hơi thất vọng.

Benjami Tennyson on 6 April 2009 at 22:33 said...

@phattrien@so : Cám ơn bạn đã góp ý, mình xin nhận khuyết điểm và khắc phục. Hy vọng bạn vẫn tiếp tục ủng hộ Blog tin học ^^!

SoftPC on 17 May 2009 at 21:52 said...

Blog bạn khá hay đó

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3