Tạo Banner Quảng cáo dạng nổi (Floating Ads) kết hợp Pop-up cho Blogger

How to add floating ads in Blogger

Chắc hẳn khi vào một vài trang web bạn sẽ thấy các banner trượt dọc theo bài viết. Hôm nay Iris Tips sẽ hướng dẫn cho các bạn tạo các banner đó một cách dễ dàng. Ngoài ra widget này sẽ kết hợp hợp thêm link pop-up khi bạn nhấn vào nút Close (x) để đóng banner trên.

• DEMO

Cách thực hiện

Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán vào đoạn code sau

 <style>#IrisWidget{height:0px;width:auto;background:transparent url('..');background-repeat:repeat-x;text-align:left;padding-top:0px;}#spiceiris{height:260px;margin:0 auto;width: 300px;background:transparent;text-align:center;padding:4px;}#WidgetIris{opacity:1.0;height:auto;width:auto;position:fixed;bottom:5%;right:10%;background:transparent;padding:0px;z-index:1001;font-size:13px;}</style><script type="text/javascript">function getValue(){document.getElementById("WidgetIris").style.display = 'none';}</script><div id="WidgetIris"><div id="IrisWidget"><span style="color:#333333;font-size:13px;font-weight:bold;float:right;padding-top:1px;padding-right:10px"><a href="http://iris-tips.blogspot.com/2015/07/tao-banner-quang-cao-dang-noi-floating.html" target="_blank" onclick="getValue()">close (x)</a></span></div><div id="spiceiris"><p>  Your Ads Code Here  </p></div></div> 

Chỉnh sửa:
- bottom:5%, right:10% cho phù hợp với website của bạn.
- Your Ads Code Here: Nếu bạn chơi Google Adsense bạn có thể tham khảo bài viết này để tạo banner resposive phù hợp với mọi loại thiết bị.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm