Tạo baner động chèn quảng cáo luân phiên

Thủ thuật nầy tạo một baner động cho blog bằng hình thức chèn các baner quảng cáo luân phiên. Đây là tùy biến từ thuật thuật " Tiện ích auto Move Image Slider với carousel " của vnblognet.com.

Bài viết "Tạo bài đăng mới theo nhãn" cũng dựa trên thủ thuật nầy và cách áp dụng vào thủ thuật nầy cũng vậy đơn giản là thay đổi về hình ảnh, hình nền, chiều cao và rộng.
Ban có thể xem DEMO TẠI ĐÂY.

Cách chực hiện.

Bước 1:Tạo tiện ích auto Move Image Slider với carousel.

Truy cập vào blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) và dán đoạn code sau trên ]]></b:skin>

<!-- Tao baner 1 --> #myslides{ background:#cccccc; width: 762px; height:120px; margin-bottom:0px; } .stepcarousel{ position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 758px; /*Width of Carousel Viewer itself*/ height: 120px; /*Height should enough to fit largest content's height*/ margin: 0px 0px 0px 0px; } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: center; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px 0px ; /*margin around each panel*/ width:758px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ background:#ffffff; height:120px; border:0px solid #1d2c44; } .stepcarousel .panel p{ text-align: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px 0px ; /*margin around each panel*/ } .stepcarousel .panel h2{ text-align: left; /*leave this value alone*/ height:20px; overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px 0px ; /*margin around each panel*/ font-size:11px; font-weight:bold; text-align:center; font-family:Georgia,century gothic,Arial,verdana, sans-serif; } .stepcarousel .panel img{ float: right; /*leave this value alone*/ background:#ffffff; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px 0px 0px 0px; /*margin around each panel*/ padding: 0px 0px; } <!--Tao baner 1-->

Trong đoạn code trên bạn chỉ cần chú ý thay đổi điều chỉnh chiều rộng và chiều cao  trong đoạn code nầy.

#myslides{
background:#cccccc;
width: 762px;  (Chiều rộng tối đa của baner)
height:120px;  (Chiều cao tối đa của baner)
margin-bottom:0px;

overflow: scroll;
width: 758px; (Chiều rộng lướt quảng cáo)
height: 120px; (Chiều rộng lướt quảng cáo)
margin: 0px 0px 0px 0px;
.....
width:758px; (Chiều rộng hiển thị quảng cáo)
background:#ffffff;
height:120px;  (Chiều rộng hiển thị quảng cáo)
border:0px solid #1d2c44;
}

Bước 2: Dán đoạn code sau vào trên thẻ </head>

<!-- Tao baner 2 --> <script src='http://btemplatescripts.googlecode.com/files/auto-slider.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:6000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://lh5.ggpht.com/_pQs6qBh-Lcg/TO3Kwb_K8OI/AAAAAAAABFY/PVvHyUDZrd0/Black%2020x17.gif', 730, 106], rightnav: ['http://lh3.ggpht.com/_pQs6qBh-Lcg/TO3KwRhkPQI/AAAAAAAABFc/zz4Hs8OxKG8/Next%2020x17.gif', -60, 106]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script> <!-- Tao baner 2 -->

Bạn có thể thay thế 2 link hỉnh ảnh bằng hình ảnh của bạn. (Đây là linh 02 nút bấm tới và lùi của các baner quảng cáo.

Đường dẩn hình 1:  http://lh5.ggpht.com/_pQs6qBh-Lcg/TO3Kwb_K8OI/AAAAAAAABFY/PVvHyUDZrd0/Black%2020x17.gif

730 : Vị trí hiển thị nút bấm bên phải (tính bằng PX theo chiều rộng ).
106 : Vị trí hiển thị nút bấm bên phải (tính bằng PX theo chiều cao ).

Đường dẩn hình 2: http://lh3.ggpht.com/_pQs6qBh-Lcg/TO3KwRhkPQI/AAAAAAAABFc/zz4Hs8OxKG8/Next%2020x17.gif

60: Vị trí hiển thị nút bấm bên trái (tính bằng PX theo chiều rộng ).
106: Vị trí hiển thị nút bấm bên trái (tính bằng PX theo chiều cao ).

Bước 3: Chèn code qủang cáo.

Vào Thiết kế (Design) >> Phần tử trang (Page Elements) >> Thêm tiện ích(Add A Gadget) >> Html/Javascript và dán đoạn code dưới vào trong phần nội dung của Html/Javascript.

<!— Code bane 3 --> <div style='border: 1px solid #ffffff; background-color: #ffffff; width: 99%; text-align: left;'> <table> <tr> <td style='background-color: #ffffff;width: 174px;'> <div class='separator' style='clear: both; text-align: center;'> <a href='http://www.kynangso.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVVRpNOGddPOlET0qD58orxHJBL_O5o_7kQrh7ySEhHV6XHpLJXU8kNquHbnGLkLmwDUtSLFbW-Ddm5lYG-_4nCCl6DkAhriew2n7NlMTbuRxUDDfG9qUCJ2KOAW5IaPQE1bHdvFm5hE/'/></a></div> </td> <td> <div id='myslides'> <div class='stepcarousel' id='mygallery'> <div class='belt'> <!-- 1st Template --> <div class='panel'> <!-- Quang cao 1 --> </div> <!-- end code of 1st --> <!-- 2nd Template --> <div class='panel'> <!-- Quang cao 2 --> </div> <!-- end code of 2nd --> <!-- 3rd Template --> <div class='panel'> <!-- Quang cao 3 --> </div> <!-- end code of 3rd --> <!-- 4th Template --> <div class='panel'> <!-- Quang cao 4 --> </div> <!-- end code of 4th --> <!-- 5th Template --> <div class='panel'> <!-- Quang cao 5 --> </div> <!-- end code of 5th --> </div></div></div> </td> </tr></table></div> <!— Code bane 3 -->

Bước nầy bạn chèn các code quảnq cáo vào.
Chúc bạn thành công !.