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;
}

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>

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 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/AVvXsEgW_-MW2SnRufTaBGHxk7bKf1fBR79ujGGQzOWpPFPid_7jBcSSOkOK0dlM0yPLmVMlV3aK09O94aS0eQzLLKg9p42f2n1c6VftLOMPZYYuwT10j1ZTjjhqujxGTPMEIUyOhB04oeqewbs/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/AVvXsEgW_-MW2SnRufTaBGHxk7bKf1fBR79ujGGQzOWpPFPid_7jBcSSOkOK0dlM0yPLmVMlV3aK09O94aS0eQzLLKg9p42f2n1c6VftLOMPZYYuwT10j1ZTjjhqujxGTPMEIUyOhB04oeqewbs/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/AVvXsEgW_-MW2SnRufTaBGHxk7bKf1fBR79ujGGQzOWpPFPid_7jBcSSOkOK0dlM0yPLmVMlV3aK09O94aS0eQzLLKg9p42f2n1c6VftLOMPZYYuwT10j1ZTjjhqujxGTPMEIUyOhB04oeqewbs/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/AVvXsEgW_-MW2SnRufTaBGHxk7bKf1fBR79ujGGQzOWpPFPid_7jBcSSOkOK0dlM0yPLmVMlV3aK09O94aS0eQzLLKg9p42f2n1c6VftLOMPZYYuwT10j1ZTjjhqujxGTPMEIUyOhB04oeqewbs/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>

Vậy là xong rồi, chúc bạn có một quảng cáo ưng ý !