™» CGC Blog «™ 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.
Hình ảnh minh họa :
logo_exchange
* 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" 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.
Nguồn : w3blog.name.vn
Copy : CGC Blog
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

0 Bình Luận:

Đăng nhận xét

Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

 
CGC Forum | Thủ Thuật © 2011 - 2012 by Tran Viet Duc
Top Page