Nội dung trượt Nivo [2] - Trình diễn ảnh

Nivo Slider là một plugin trình diễn ảnh rất đẹp, hổ trợ nhiều kiểu chuyển động khác nhau mà không dùng đến flash.

Bạn đã xem bài viết Nội dung trượt Nivo [1] và đã cảm nhận được sự mượt mà của Nivo. Hôm nay mình giới thiệu thêm một kiểu trình diễn nửa của Nivo nhưng lại thiên về trình diễn ảnh có chứa liên kết đến bài viết hoặc sản phẩm phù hợp cho Blogger.

Chèn quảng cáo vào baner blog

Quảng cáo được chèn vào baner của bog hiện nay có thể nói là một trào lưu... Có nhiều cách thực hiện, hôm nay giới thiệu đến các bạn một cách chèn quảng cáo vào baner của blog mà không xoá nhiều code trong templates.Lúc đầu mình tìm trên google để chèn quảng cáo vào baner của mình .. nhưng không có bài viết nào hướng dẩn nào mình thực hiện được cả cuối cùng mình ... dọc trong blog của mình.

Bước 1: Đăng nhập vào Blogger » Thiết kế » Phần tử trang » Chỉnh sửa tiện ích tiêu đề (Định cấu hình tiêu đề) nằm phía dưới trang điều hướng.

Tiếp theo chèn baner vào Blog. Bạn phải chọn vị trí " Thay cho tiêu đề và mô tả ".

Lưu ý: Baner chèn vào blog làm ảnh nền không có tác dụng liên kết. Bạn có thể chèn một ảnh trong suốt vào làm ảnh nền sau đó có thể tùy chỉnh thêm baner theo ý của mình...

Bước 2: Vào chỉnh sửa HTML (Edit/Html) » Mở rộng tiện ích tìm đến đoạn code có dạng sau (Code nằm trong cặp <header>......</header>)

<!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>

Bạn xóa đoạn code màu đỏ và thay thế đoạn code quảng cáo của bạn.

Cách chèn quảng cáo và vị trí  hiển thị quảng cáo bạn có thể xem thêm các bài viết liên quan sau:

1.Tạo baner động chèn quản cáo luân phiên xem demo dạng nầy tại đây

2.Chèn baner quảng cáo luân phiên xem demo dạng nầy tại baner blog nầy.

Tag xoay với jQuery

Thông thường các tag xoay tròn 3d (hoặc Menu) được thực hiện với hiệu ứng Flash...tuy nhiên Flash thì có có mang tính thương mại nhiều hơn. Trong bài này xin giới thiệu một dạng tag xoay tròn với hiệu ứng jQuery để các bạn tham khảo. Thủ thuật này chạy được trên hầu hết các trình duyệt thử nghiệm trên IE6-IE9, Chrome, Opera, Safari...
Bạn có thể xem demo thủ thuật này tại phần tag ở cuối bài viết nầy.

Bước 1: Đăng nhập vào Blogger » Thiết kế (Design) » Chỉnh sửa HTML (Edit/Html) » Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head> <!-- Tag xoay --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/jquery.aall.1.0.0.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/showhide.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/jquery.mousewheel.js' type='text/JavaScript'/> <script src='http://www.professorcloud.com/js/cloud-carousel.1.0.5.js' type='text/JavaScript'/> <script src='http://www.professorcloud.com/js/slimbox-2.03/js/slimbox2.js' type='text/JavaScript'/> <script type='text/javascript'> $(document).ready(function(){ $("#da-vinci-carousel").CloudCarousel( { reflHeight: 56, reflGap:2, titleBox: $('#da-vinci-title'), altBox: $('#da-vinci-alt'), buttonLeft: $('#but1'), buttonRight: $('#but2'), yRadius:40, xPos: 120, yPos: 90, speed:0.15, mouseWheel:true }); $("#carousel2").CloudCarousel({ xPos:115, yPos:40, FPS:30, autoRotate: 'left', autoRotateDelay: 1200, speed:0.2, mouseWheel:true, bringToFront:true }); }); </script> <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-254857-6']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <!-- Tag xoay -->
Chú ý:
...................
yRadius:40,
xPos: 120,
yPos: 90,
speed:0.15,

$("#carousel2").CloudCarousel({
xPos:115,
yPos:40,
...................
Các chỉ số màu xanh là chiều rộng và chiều cao hiển thị của hình ảnh xoay.
Bạn nên tải file .JS lưu trử trên host để tránh một ngày nào đó file nay không hoạt động.

Bước 2: Dán đoạn code bên dưới vị trí muốn hiển thị. <!-- Tag xoay --> <div id='carousel2' style='width:230px; height: 160px; background:#transparent url();overflow:scroll;'> <a href='Link của tag 1' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 1' title='' width='50'/></a> <a href='Link của tag 2' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 2' title='' width='50'/></a> <a href='Link của tag 3' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 3' title='' width='50'/></a> <a href='Link của tag' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh' title='' width='50'/></a> <a href='Link của tag 4' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 4' title='' width='50'/></a> <a href='Link của tag 5' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 5' title='' width='50'/></a> </div> <!-- Tag xoay -->
Bạn thay thế các Link của tag, Link hình ảnh, title, alt, chiều rộng và chiều cao cho phù họp theo web/blog của bạn.

Nếu bạn bạn dán code này trong templates thì giữ nguyên code, còn dán vào HTML/javascript thì nên thay thế các dấu (') thành dấu (").

Chúc thành công.

Nguồn: professorcloud.com