Tạo widget “Logo Exchange” ở footer cho blogspot

Việc trao đổi logo với nhau là 1 cách rất tốt để quảng bá blog của mình tới mọi người, đa phần các logo liên kết này đều được đặt ở footer. Hôm nay mình sẽ giới thiệu cho các bạn 1 khung để chèn các logo liên kết vào. Với khung “logo exchange” này, các logo liên kết sẽ được chạy lần lượt từ phải qua trái với 1 chút hiệu ứng từ javascript.

Demo for Post

Ảnh minh họa:

☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Bảng điều khiển (Dashboard)
3- Chọn Bố cục (Layout)
4- Click chọn Thêm tiện ích (Add Widget) => Và chọn HTML/Javarscrip => Xem video:

5- Dán đoạn code bên dưới vào trong tiện ích HTML/Javarscrip vừa tạo:

<style type="text/css">
.box {
 float: left;
              border-top:2px solid #ddd;
              border-bottom:2px solid #ddd;
              background:url(http://data.fandung.com/blog/demo/logo-exchange/bg-banner.png) no-repeat top left;
              padding-left:45px;
}

</style>

<script type="text/javascript" src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/logo-footer.js"></script>
 <div id="ctl00_plcMain_divLogo" class="box" style="width: 100%">
             <div id="Logo_wrapper">
 <div style="overflow:hidden;position:relative;height:99px;width:960px;" id="Logo_Div"><table cellpadding="0px" cellspacing="0px" style="position:relative;width:960px;" id="Logo_FrameContainer"><tbody>
                        <tr><td id="Logo_frame0" style="overflow:hidden;">
                            <a href="URL liên kết 1" target="_blank">
                                <img src="URL ảnh lk 1"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td><td id="Logo_frame1" style="overflow:hidden;">
                            <a href="URL liên kết 2" target="_blank">
                                <img src="URL ảnh lk 2"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td><td id="Logo_frame2" style="overflow:hidden;">
                            <a href="URL liên kết 3" target="_blank">
                                <img src="URL ảnh lk 3"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td><td id="Logo_frame3" style="overflow:hidden;">
                            <a href="URL liên kết 4" target="_blank">
                                <img src="URL ảnh lk 4"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td><td id="Logo_frame4" style="overflow:hidden;">
                            <a href="URL liên kết 5" target="_blank">
                                <img src="URL ảnh lk 5"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td></tr></tbody></table></div>
      <script type="text/javascript">window["Logo"] = new RadRotator('Logo',4);window["Logo"].AutoAdvance = 1;window["Logo"].FrameTimeout = 4000;window["Logo"].RotatorMode = 'Scroll';window["Logo"].NumberOfFrames = 5;window["Logo"].PauseOnMouseOver = 1;window["Logo"].HasTickers = 0;window["Logo"].FrameIdArray = new Array('Logo_frame0','Logo_frame1','Logo_frame2','Logo_frame3','Logo_frame4');window["Logo"].ScrollSpeed = 10;window["Logo"].ScrollDirection = 'Left';window["Logo"].UseSmoothScroll = 1;window["Logo"].SmoothScrollDelay = 10;window["Logo"].Start();</script>
</div>
    </div>

Lưu ý: Để sử dụng lâu dài các bạn hãy tải file javarscrip (logo-footer.js) về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.

Sau đây là 1 vài hướng dẫn nhỏ :
+ Nếu muốn thêm nhiều logo liên kết khác thì thêm đọan code tương tự như bên dưới vào ngay sau nó

<td id="Logo_frame4" style="overflow:hidden;">
                            <a href="URL liên kết 5" target="_blank">
                                <img src="URL ảnh lk 5"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td>

+ và ta sẽ có code như bên dưới :

<td id="Logo_frame4" style="overflow:hidden;">
                            <a href="URL liên kết 5" target="_blank">
                                <img src="URL ảnh lk 5"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td><td id="Logo_frame5" style="overflow:hidden;">
                            <a href="URL liên kết 6" target="_blank">
                                <img src="URL ảnh lk 6"
 alt="" height="85" width="85" border="0" />
                            </a>
                        </td>
...
...
...

+ nhớ thay đổi tên id (Logo_frame1, Logo_frame2,…) của thẻ td cho các đọan code mới thêm vào cho chính xác và tuần tự.
+ sau khi thêm code HTML, ta sẽ chỉnh lại code javascript. và bên dưới là 1 số đọan code phải thay đổi khi thêm nhiều logo liên kết.

window["Logo"] = new RadRotator('Logo',4);
window["Logo"].NumberOfFrames = 5;
window["Logo"].FrameIdArray = new Array('Logo_frame0','Logo_frame1','Logo_frame2','Logo_frame3','Logo_frame4');
window["Logo"].ScrollDirection = 'Left';

+ window["Logo"] = new RadRotator(‘Logo’,4); –> giá trị 4 là số logo liên kết sẽ được hiển thị, ví dụ trong demo là 8
+ window["Logo"].NumberOfFrames = 5; –> 5 là số liên kết logo. lưu ý giá trị này phải chính xác, nếu sai hiệu ứng sẽ ko hiển thị. nếu thêm nhiều logo khác thì phải thay đổi lại giá trị này.
+ window["Logo"].FrameIdArray = new Array(‘Logo_frame0′,’Logo_frame1′,’Logo_frame2′,’Logo_frame3′,’Logo_frame4′); –> khi tăng thêm 1 hoặc nhiều logo thì phải chỉnh lại giá trị của mảng này, ví dụ tăng thêm 1 logo thì thêm 1 giá trị của mảng nữa. ví dụ :
window["Logo"].FrameIdArray = new Array(‘Logo_frame0′,’Logo_frame1′,’Logo_frame2′,’Logo_frame3′,’Logo_frame4′,’Logo_frame5′);

+ window["Logo"].ScrollDirection = ‘Left’; –> nếu muốn khung liên kết chạy theo chiều ngược lại thì thay giá trị Left thành Right

4. Save widget.

Chúc các bạn thành công.

Theo: mothuthuat