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;
}
Thêm tiếp đoạn code dưới vào trước thẻ
</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>
Làm xong thì Lưu Mẫu lại.
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 Sinh Viên Tin Học</a><a href='http://svtinhoc.blogspot.com' target='_blank'>http://svtinhoc.blogspot.com/</a><span class='isi'>Blog thủ thuật, công nghệ và mọi thứ.<a class='panah-besar' href='http://svtinhoc.blogspot.com/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4JWtWvPDd4cyLtX0zCYwnHFGMLkYl8TlTmfFHC590GIC5LGP7VvnGPx1SUY8uMF9C_HvrxpFPcvgZDXOl_e4eTYGF-EKk1se-xuhY-xehKsLDL40cefKQzalnCghuIsiEclVUT2iV3Y/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://svtinhoc.blogspot.com/' target='_blank'>Template Blogspot</a><a href='http://svtinhoc.blogspot.com/' target='_blank'>http://svtinhoc.blogspot.com/</a><span class='isi'>Chia sẻ Template Blogspot.<a class='panah-besar' href='http://svtinhoc.blogspot.com/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4JWtWvPDd4cyLtX0zCYwnHFGMLkYl8TlTmfFHC590GIC5LGP7VvnGPx1SUY8uMF9C_HvrxpFPcvgZDXOl_e4eTYGF-EKk1se-xuhY-xehKsLDL40cefKQzalnCghuIsiEclVUT2iV3Y/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://svtinhoc.blogspot.com/' target='_blank'>Blogspot Series</a><a href='http://svtinhoc.blogspot.com/' target='_blank'>http://svtinhoc.blogspot.com/</a><span class='isi'>Học và tìm hiểu về blogspot.<a class='panah-besar' href='http://svtinhoc.blogspot.com/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4JWtWvPDd4cyLtX0zCYwnHFGMLkYl8TlTmfFHC590GIC5LGP7VvnGPx1SUY8uMF9C_HvrxpFPcvgZDXOl_e4eTYGF-EKk1se-xuhY-xehKsLDL40cefKQzalnCghuIsiEclVUT2iV3Y/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://svtinhoc.blogspot.com/' target='_blank'>Thủ Thuật Blogger</a><a href='http://svtinhoc.blogspot.com/' target='_blank'>http://svtinhoc.blogspot.com/</a><span class='isi'>Kho thủ thuật blogger, blogspot.<a class='panah-besar' href='http://svtinhoc.blogspot.com/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4JWtWvPDd4cyLtX0zCYwnHFGMLkYl8TlTmfFHC590GIC5LGP7VvnGPx1SUY8uMF9C_HvrxpFPcvgZDXOl_e4eTYGF-EKk1se-xuhY-xehKsLDL40cefKQzalnCghuIsiEclVUT2iV3Y/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
Vậy là xong rồi, chúc bạn có một quảng cáo ưng ý !
Không có nhận xét nào:
Đăng nhận xét