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 :
DEMO
* 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:
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:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <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"].Pau<a href="http://ethongtin.net/index.php/category/thu-thuat-seo/"target="_blank"rel="external"title="Thủ thuật SEO" >seO</a>nMouseOver = 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ó
+ 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ó
1 2 3 4 5 6 | <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 :
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <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.
+ 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.
1 2 3 4 | 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"].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ị Leftthành Right
4. Save widget.
Chúc các bạn thành công.
Nhãn:
thủ thuật blogspot
trang trước
Responses
0 Respones to "Tạo widget “Logo Exchange” ở footer cho blogspot"
Đăng nhận xét