Tự tạo quảng cáo giống với Google AdSense
Bạn đang muốn đặt quảng cáo lên website? Băn khoăn trong việc chọn lựa mẫu quảng cáo? OK, bài viết này là dành cho bạn. Mẫu quảng cáo này sẽ giống với quảng cáo văn bản của Google AdSense, một mẫu quảng cáo ưa nhìn với hiệu ứng bắt mắt, kích thích người dùng nhấp vào.
Hướng dẫn tạo quảng cáo giống với Google AdSense
Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code này vào trước thẻ
]]></b:skin>
#iklan-teks { height:275px; width:300px; background-color:white; position:relative; overflow:hidden; margin:20px auto; } #iklan-teks h2.iklan-header { cursor:pointer; background-color:white; background-image:none; font:normal 13px Verdana, Tahoma, Serif; color:#f0523f; border-top:1px solid #d8d8d8; padding:10px; margin:0; position:relative; text-transform:none; letter-spacing:0; } .iklan-teks-post-footer .iklan-header { border-bottom:0; } #iklan-teks h2.iklan-header:first-child { border-top:0; } #iklan-teks h2.iklan-header:before { content:" " ; width:0; height:0; position:absolute; top:20px; right:15px; border:5px solid transparent; border-color:#b2b2b2 transparent transparent; } #iklan-teks div { height:120px; padding:10px 70px 10px 10px; z-index:1; background:white; font:normal 13px Verdana, Tahoma, Serif; color:white; position:relative; border-top:1px solid #d8d8d8; } .judul { font:normal 20px Verdana, Tahoma, Serif; color:#f0523f; margin:0 0 5px 0; } a.judul { font:normal 20px Verdana, Tahoma, Serif !important; color:#f0523f !important; text-decoration:none; display:inline-block; } .isi-iklan a { font:normal 13px Verdana, Tahoma, Serif; color:green; text-decoration:none; display:block; margin-bottom:10px; } .isi-iklan a:hover { color:green; text-decoration:underline; } .isi { padding-top:15px; color:#222; text-align:left !important; } .panah-besar { background:#f0523f; border-radius:50%; cursor:pointer; height:34px; float:right; margin-right:-60px; margin-top:-40px; width:34px; text-align:center; line-height:34px; } .panah-besar:hover { background:#2c343e; } .info-icon { width:15px; height:15px; position:absolute; top:0; z-index:2; right:0; cursor:pointer; } .info-iklan { background:#f2f2f2; height:15px; border-bottom-left-radius:4px; position:absolute; top:0; right:0; color:#000; z-index:2; font:normal 11px Arial, Sans-Serif; text-align:left; overflow:hidden; padding:5px 19px 0 5px; }
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-37px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-37});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>
Nếu template của bạn đã có thư viện JQuery rồi thì xóa bỏ dòng đầu đi nhé:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
Bây giờ bạn vào Bố Cục ~> Thêm tiện ích HTML/Javascript
Sao chép và dán đoạn code dưới vào tiện ích HTML/Javascript rồi Lưu lại
<div class='iklan-teks-sidebar' id='iklan-teks'> <!-- ads 1 --> <div data-header='Blog DX'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blog DX</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Blog thủ thuật, công nghệ và mọi thứ.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span> </div> <!-- ads 2 --> <div data-header='Template'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Template Blogspot</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Chia sẻ Template Blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span> </div> <!-- ads 3 --> <div data-header='Blogspot Series'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blogspot Series</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Học và tìm hiểu về blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span> </div> <!-- ads 4 --> <div data-header='Thủ Thuật Blogger'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Thủ Thuật Blogger</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Kho thủ thuật blogger, blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span> </div> </div>
Sửa lại link, tiêu đề và mô tả phù hợp với quảng cáo của bạn
Nguồn Blog DX - Dxoan.com Demo mà bạn có thể vào xem thử theo link dưới đây:
http://vokichdoinguoi.blogspot.com/2017/03/vai-net-ve-hoa-thuong-thich-thanh-tu.html
Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..
0 Comments:
Đăng nhận xét