Membuat Iklan Teks ala Google AdSense ~ Blog Alvin Warasi

Membuat Iklan ala Google AdSense, ini tutorialnya saya dapat dari search google di Blog Mas KANGISMET, begitu saya dapat langsung praktekan di blog saya ternyata hasilnya tidak mengecewakan. Setelah saya pelajari sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Sekarang saya akan share kepada Anda bagaimana cara membuat iklan teks ala google adsense ini, dari pada saya diam-diam udah dapat caranya, mending saya bagiin :D tutorialnya;

Penampakannya kurang lebih seperti gambar dibawah :

Langkah 1: Simpan kode ini di atas </head>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

Langkah 2: Simpan kode CSS ini di atas ]]></b:skin> atau </style>

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#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:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.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:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  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: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

Langkah 3: Simpan kode ini pada widget HTML/JavaScript

<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://the-warasi.blogspot.com' target='_blank'>Blogger Tutorial</a>
            <a href='http://the-warasi.blogspot.com' target='_blank'>blog Alvin Warasi</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://the-warasi.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPJiOztj-Hcj0ysWeAqKU1TNP2Y4pavV5g4srxasSxmnDkZjAM6h7Bq0l-hdiwbbZ9P8RszpE1xoPPH-cR4QBkA6DCIVe0jnFU83B53qHWOSEyjrbVDcrY-Z4uWaW1UzA68U-R92bBvA/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>blog Alvin Warasi</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPJiOztj-Hcj0ysWeAqKU1TNP2Y4pavV5g4srxasSxmnDkZjAM6h7Bq0l-hdiwbbZ9P8RszpE1xoPPH-cR4QBkA6DCIVe0jnFU83B53qHWOSEyjrbVDcrY-Z4uWaW1UzA68U-R92bBvA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>blog Alvin Warasi</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPJiOztj-Hcj0ysWeAqKU1TNP2Y4pavV5g4srxasSxmnDkZjAM6h7Bq0l-hdiwbbZ9P8RszpE1xoPPH-cR4QBkA6DCIVe0jnFU83B53qHWOSEyjrbVDcrY-Z4uWaW1UzA68U-R92bBvA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'>blog Alvin Warasi</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQPJiOztj-Hcj0ysWeAqKU1TNP2Y4pavV5g4srxasSxmnDkZjAM6h7Bq0l-hdiwbbZ9P8RszpE1xoPPH-cR4QBkA6DCIVe0jnFU83B53qHWOSEyjrbVDcrY-Z4uWaW1UzA68U-R92bBvA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Alvin Warasi</span>
    <span class='info-icon'><a href='http://the-warasi.blogspot.com/2014/05/pasang-iklan-di-blog-alvin-warasi.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mgtT9qfGztzlNvKWsND5Pymc4wNUWXt-TPlpYdOzUjwUTWEJsCKU4vV3vhzTwjq713Fr6Lum5QmRNfw0X9x5bgSV8r9-i690G8pDTNAW6BVFLSBulj7MgXM8qjF-iCJS7Qyqfw64lKM/s1600/info-iklan.png'/></a></span>     
</div>

Silahkan edit judul dan link.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

0 Comments

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar