How To Create 300x250 And 125x125 Ads Box On Blog

How To Create 300x250 And 125x125 Ads Box On Blog - The existence of sidebar in the blog is not only used for the purposes of supporting blog content, but also can be used for self-ad space which usually display 300x250 banner ads or 125x125 ad banner. So this could be an alternative monitize blog other than Adsense or other ads.

However, the existence of 300x250 banner ads and 125x125 ads we must be neatly arranged so that the appearance does not damage the scene. Especially if the ad space is not yet filled with banners, then the appearance must be neat so that people know that we provide 300x250 banner ad slot and 125x125 banner ads.

For that we will now create 300x250 and 125x125 ad boxes on blogs using simple but look-good CSS and HTML and provide clear information to others that banner ad slots are available on blogs. With banner box 300x250 and 125x125 this then we can add source of income from blog. For the price of each banner ad slot is of course can be determined by your own as a blog admin, and could be the price of this banner ad slot can vary.

If the ad slot is not yet filled with an ad banner, the slot will display a text explaining that the slot is available for banner ads, both 300x250 banner ads and 125x125 banner ads. If you want to try to create and use it, please follow the steps below.

How To Create 300x250 And 125x125 Ads Box On Blog

1. Please add this CSS to your blog style, for AMP please add style amp-custom.

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.kotak_iklan{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
.kotak{background:grey;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}
.kotak:nth-child(1),.kotak:nth-child(3){margin-right:16.6666666667px}
.kotak:nth-child(1),.kotak:nth-child(2){margin-bottom:16.6666666667px}
.kotak a{position:relative;display:block;z-index:2}
.kotak:before{content:"Your Space 125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.kotak-300{width:300px;height:250px;}
.kotak.kotak-300:nth-child(1){margin-right:0;margin-bottom:0;}
.kotak_iklan.p0{padding:0;}
.kotak-300:before{content:"Your Space 300x250";}
.clear{clear:both;}

2. Then please save the following HTML code in the HTML / JavaScript widget in the sidebar.

<div class="kotak_iklan p0">
    <div class="kotak kotak-300">
    <!-- save the 300x250 banner below -->

    </div>
    <div class="clear"></div>
</div>
<br />
<div class="kotak_iklan">
    <div class="kotak">
    <!-- save the 125x125 banner below -->
 
    </div>

    <div class="kotak">
    <!-- save the 125x125 banner below -->

    </div>

    <div class="kotak">
    <!-- save the 125x125 banner below -->

    </div>

    <div class="kotak">
    <!-- save the 125x125 banner below -->

    </div>

    <div class="clear"></div>
</div>

3. Stay save banner-banner ads on the slots according to his description.

That's Tips on how to create 300x250 and 125x125 ad boxes on blogs, hopefully with this short enough article, can be useful for us and good luck.

Share :