Tạo quảng cáo giống với Google AdSense chuyên nghiệp

Tạo quảng cáo giống với Google AdSense chuyên nghiệp

Đă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='Phan Hùng Blog'> <span class='isi-iklan'><a class='judul' href='http://www.phanhung.info' target='_blank'>Phan Hùng Blog</a><a href='http://www.phanhung.info' target='_blank'>www.phanhung.info</a><span class='isi'>Blog cá nhân, chia sẻ kiến thức.<a class='panah-besar' href='http://www.phanhung.info' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikULqS72djyaI-5_Hdb_Zlc2lhfKTQJmqm9oFpI4YcX4JoiaPrmqTaAl6F8hPuduM0VWrzoVK_aclHncLhpO9U8PVOIlBaE7Mp9YhPskjhDpHY6bOIV5LBmUsFb2woq-j-JimB3nPiqeE/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.phanhung.info' target='_blank'>Template Blogspot</a><a href='http://www.phanhung.info' target='_blank'>www.phanhung.info</a><span class='isi'>Chia sẻ Template Blogspot.<a class='panah-besar' href='http://www.phanhung.info' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikULqS72djyaI-5_Hdb_Zlc2lhfKTQJmqm9oFpI4YcX4JoiaPrmqTaAl6F8hPuduM0VWrzoVK_aclHncLhpO9U8PVOIlBaE7Mp9YhPskjhDpHY6bOIV5LBmUsFb2woq-j-JimB3nPiqeE/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.phanhung.info' target='_blank'>Blogspot Series</a><a href='http://www.phanhung.info' target='_blank'>http://www.phanhung.info</a><span class='isi'>Học và tìm hiểu về blogspot.<a class='panah-besar' href='http://www.phanhung.info' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikULqS72djyaI-5_Hdb_Zlc2lhfKTQJmqm9oFpI4YcX4JoiaPrmqTaAl6F8hPuduM0VWrzoVK_aclHncLhpO9U8PVOIlBaE7Mp9YhPskjhDpHY6bOIV5LBmUsFb2woq-j-JimB3nPiqeE/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.phanhung.info' target='_blank'>Thủ Thuật Blogger</a><a href='http://www.phanhung.info' target='_blank'>www.phanhung.info</a><span class='isi'>Kho thủ thuật blogger, blogspot.<a class='panah-besar' href='http://www.phanhung.info' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikULqS72djyaI-5_Hdb_Zlc2lhfKTQJmqm9oFpI4YcX4JoiaPrmqTaAl6F8hPuduM0VWrzoVK_aclHncLhpO9U8PVOIlBaE7Mp9YhPskjhDpHY6bOIV5LBmUsFb2woq-j-JimB3nPiqeE/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 : phanhung.info

>