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 theo yêu cầu của bạn NguyenSon, 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.

Xem DEMO trên blogspot

* Và sau đây là các bước thực thủ thuật :
1. Vào bố cục
2. Vào phần tử trang
3. Tạo widget HTML/javascript ở footer rồi dán code bên dưới và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://data.fandung.com/blog/demo/logo-exchange/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>

- 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