How to Create an Ad Box on the Sidebar - Blogxhtml
News Update
Loading...

Wednesday, 9 September 2020

How to Create an Ad Box on the Sidebar


This time I will make an article about How to Create an Ad Box on the Blog Sidebar
this ad box has 4 ad boxes, and not much CSS is used,
we just get to the point.

Prior to the point of this article. Read this first.
For those of you who use Arlina Design's custom template, usually the CSS already exists, so you can go straight to point no. 5


ok, here's how.

How to Create an Ad Box on the Sidebar


1. Login to your Blogger
2. click Template> Edit HTML
3. Add the CSS Script below, add it before the </style> code

.kotak_iklan {margin:auto;transition:all 1s ease-out;}
.kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-two .widget-content{padding:0;border:0;}
.kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;}
.kotak_iklan img{background:#fff;text-align:center;margin:5px 2.5px;padding:2.5px;border:1px solid #ddd!important;transition:all .6s ease-out}
.kotak_iklan  img:hover {background:#fff;border-color:#bbb!important;}
.kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out;}
.kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-two .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
.kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-two .widget {margin-bottom:0;padding:0;}
.kotak_iklan2  img {text-align:center;transition:all 1s ease-out;}
.kotak_iklan2  img:hover {transition:all .5s ease-out;}
.kotak_iklan3 {position:relative;margin:0 auto;}

4. if so, Save> Layout> Add Widget> HTML / Javascript
5. Enter the script below. Save

<div class="kotak_iklan">
<a href="http://abdurrahim-id.blogspot.com/" title="Abdurrahim ID" target="_blank"><img class="noborder" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJychP8h-EvZJj-JsSQ05snxZprs3oSqzaWpUuiw17OqdMmRKXlO8oznR-U70eXmiHsmbx8L7Eo3TDYEi89z_7pQhYZ-x8ZIVGAbvpjwvoh5OAo32ftKHT8Hl6-Qo8DIc5u5qoXDgAnDI/s1600/Abdurrahim+ID.png" alt="3xploi7" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a>
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a> 
<a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="http://1.bp.blogspot.com/-AzY4b7aWefY/VXoZ6aD1m3I/AAAAAAAACac/jY9906KnHSs/s1600/125x125.jpg" alt="alt gambar" width="125" height="125" /></a> 
</div>

If, you have a problem, please comment below.

Share with your friends

Add your opinion
Disqus comments
Notification
BLOGXHTML.BLOGSPOT.COM is a blog where you can learn HTML, CSS, and JavaScript, SEO along with creative CSS Animations.
Done