Cara Memasang Iklan Ditengah Postingan

Periklanan adalah salah satu cara webmaster untuk menghasilkan uang dari blognya. Dan salah satu jenis periklanan adalah iklan teks. Ya, walaupun iklan teks sudah mulai ditinggalkan.

Jika kita memasang iklan dari jaringan periklanan, maka kita sudah tidak perlu repot soal kode iklan. Cukup kita masukan ke blog saja. Tapi beda halnya jika kita ingin memasang iklan mandiri (iklan sendiri). Kita harus mendesign terlebih dahulu tampilannya, ya tentu saja supaya lebih menarik dimata pengunjung.

Dan di artikel ini, kita akan membahas cara membuat iklan teks mirip Google Adsense. Kali ini kita akan membuat single ad, untuk multiple ads akan kita buat di artikel berikutnya.

Pertama, buat terlebih dahulu CSS-nya. Bisa kamu masukan ke file .css atau di headtags. Jika kamu menggunakan Blogger / Blogspot, masukan kode css berikut diatas ]]></b:skin>

CSS

.adblock {

    background: #fff;

    width: 100%;

    height: auto;

    margin: 0 auto;

    padding: 0;

    text-align: center;

    position: relative;

    border: 1px solid #ddd;

}


.adblock .title {

    font: 22px Roboto;

    color: #365DF6;

    padding: 10px 10px 2px;

    text-align: left;

    line-height: 1.3em;

    max-height: 3.7em;

}


.adblock .desc {

    font: 14px Roboto;

    color: #808080;

    padding: 1px 10px 10px 10px;

    text-align: left;

    line-height: 1.3em;

    height: auto;

}

.adblock .title:hover {

    text-decoration: underline;

}

.adblock .home {

    font: 12px Arial;

    color: #317107;

    padding: 0 0 0 10px;

    text-align: left;

    display: block

}

.adblock .home:hover {

    text-decoration: underline;

}



.adblock .server {

    position: absolute;

    bottom: -10px;

    line-height: 1em;

    right: 0;

    padding: 5px;

    background: #eee;

    font-size: 10px;

    border-radius: 5px 0 0;

    border-top: 1px solid #ddd;

    border-left: 1px solid #ddd;

}

.adblock .server a { color: #666; }

   

.adblock {

    background: #fff;

    width: 100%;

    height: auto;

    margin: 0 auto;

    padding: 0;

    text-align: center;

    position: relative;

    border: 1px solid #ddd;

}

.adblock .title {

    font: 22px Roboto;

    color: #365DF6;

    padding: 10px 10px 2px;

    text-align: left;

    line-height: 1.3em;

    max-height: 3.7em;

}

.adblock .desc {

    font: 14px Roboto;

    color: #808080;

    padding: 1px 10px 10px 10px;

    text-align: left;

    line-height: 1.3em;

    height: auto;

}

.adblock .title:hover {

    text-decoration: underline;

}

.adblock .home {

    font: 12px Arial;

    color: #317107;

    padding: 0 0 0 10px;

    text-align: left;

    display: block

}

.adblock .home:hover {

    text-decoration: underline;

}



.adblock .server {

    position: absolute;

    bottom: -10px;

    line-height: 1em;

    right: 0;

    padding: 5px;

    background: #eee;

    font-size: 10px;

    border-radius: 5px 0 0;

    border-top: 1px solid #ddd;

    border-left: 1px solid #ddd;

}

.adblock .server a { color: #666; }

File css sudah selesai, sekarang kita buat kode iklannya. Berikut ini kode iklan HTMLnya.

<div class="adblock">

<a href="http://id.lipsum.com/" rel="nofollow" target="_blank"><div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus non leo molestie, eu hendrerit justo tincidunt. Suspendisse a consequat risus. Suspendisse potenti. Praesent augue nibh, laoreet et varius eget, pharetra non lorem. Integer accumsan enim neque. Sed molestie, orci eu gravida gravida, justo massa dignissim dui, ac fringilla.</div>

<a href="http://lipsum.com/" rel="external nofollow" target="_blank"><div class="home">lipsum.com</div></a>

<p class="server">Ad by <a href="http://lipsum.com/" rel="external nofollow">Lipsum</a></p>

</div>

   

<div class="adblock">

<a href="http://id.lipsum.com/" rel="nofollow" target="_blank"><div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></a>

<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus non leo molestie, eu hendrerit justo tincidunt. Suspendisse a consequat risus. Suspendisse potenti. Praesent augue nibh, laoreet et varius eget, pharetra non lorem. Integer accumsan enim neque. Sed molestie, orci eu gravida gravida, justo massa dignissim dui, ac fringilla.</div>

<a href="http://lipsum.com/" rel="external nofollow" target="_blank"><div class="home">lipsum.com</div></a>

<p class="server">Ad by <a href="http://lipsum.com/" rel="external nofollow">Lipsum</a></p>

</div>

Kode HTML diatas adalah kode iklannya, bisa kamu sesuaikan dengan detail iklan kamu. Nah, berikut ini contoh penggunaannya.

<div class="adblock">

<a href="http://clients.hostwaper.com/aff.php?aff=426" rel="nofollow" target="_blank"><div class="title">Beli Domain atau Hosting? Hostwaper Saja!</div></a>

<div class="desc">Hosting PHP dengan cPanel lengkap. Auto installer 350  script website dengan Softaculous. Kelola email, database My SQL, files, subdomain dengan mudah! Harga mulai Rp. 60.000 per tahun.</div>

<a href="hhttp://gpanduan.blogspot.com/" rel="external nofollow" target="_blank"><div class="home">hostwaper.com</div></a>

<p class="server">Ad by <a href="http://gpanduan.blogspot.com/" rel="external nofollow">Martin MS Blog</a></p>

</div>

  

Nah, html diatas bisa kamu sesuaikan dan bisa kamu pasang di manapun, di situs kamu. Dan coba lihat hasilnya