Manusia pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.

My Label Post

Home » Blogging » Membuat Iklan Teks Google AdSense ala Kang Ismet

Membuat Iklan Teks Google AdSense ala Kang Ismet

Cetak Sunting
Iklan Teks Google AdSense Ala Kang Ismet - Setelah modifikasi template, saya mencoba membuat iklan teks yang menyerupai GA. Ternyata banyak sahabat yang nanya cara pembuatannya. Bahkan ada sebagian yang maling kode diam2

Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam2 mending saya bagiin deh tutorialnya. 

Penampakannya kurang lebih seperti gambar ini :


Demo

 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://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
            <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPW0Iatn8FHljgBXSS8OYjUEpDzPpljRRQ4NcX55pa_IAwRCiPqFMyqzR7h07u5T_MLcOqIjmN3VL_XJXyMyATEqnua3eLJM0UF7y7LrG20pBz7E4iuYhph4Z0pQoKyfbiwwNONaJkO_Y/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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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/AVvXsEgPW0Iatn8FHljgBXSS8OYjUEpDzPpljRRQ4NcX55pa_IAwRCiPqFMyqzR7h07u5T_MLcOqIjmN3VL_XJXyMyATEqnua3eLJM0UF7y7LrG20pBz7E4iuYhph4Z0pQoKyfbiwwNONaJkO_Y/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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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/AVvXsEgPW0Iatn8FHljgBXSS8OYjUEpDzPpljRRQ4NcX55pa_IAwRCiPqFMyqzR7h07u5T_MLcOqIjmN3VL_XJXyMyATEqnua3eLJM0UF7y7LrG20pBz7E4iuYhph4Z0pQoKyfbiwwNONaJkO_Y/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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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/AVvXsEgPW0Iatn8FHljgBXSS8OYjUEpDzPpljRRQ4NcX55pa_IAwRCiPqFMyqzR7h07u5T_MLcOqIjmN3VL_XJXyMyATEqnua3eLJM0UF7y7LrG20pBz7E4iuYhph4Z0pQoKyfbiwwNONaJkO_Y/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwGNIhsy4krjwD8n3bujncH26smlTh0NcK15UrfMHTBp9sqn6YIpSALC9lSqUZLaf0TqrgHv7P_x7HofR-mAm6MTrFALI-hxbrpmdllLHtf2AvlNH7Dg8zavNWL4gvWLQGqkybIC8s6Q/s1600/info-iklan.png'/></a></span>     
</div>

Silahkan edit judul dan link.
ALA : Kang Ismet

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Facebook Google+ Twitter RSS
  1. Friends ForeverFebruary 8, 2014 at 8:48:00 AM GMT+7

    Ijin nyimak & ijin coba gan

    ReplyDelete
  2. Verdyansyah Indra PFebruary 8, 2014 at 9:07:00 AM GMT+7

    Keren gan, ijin coba :)

    ReplyDelete
  3. UnknownFebruary 8, 2014 at 11:17:00 AM GMT+7

    keren gan, langsung meluncur :D

    ReplyDelete
  4. Muhammad FaiqFebruary 8, 2014 at 12:01:00 PM GMT+7

    Thanks infonya gan.. Nice Post
    Ditunggu kunbalnnya.. sma followback blog saya..
    www.ashidiqfaiqq.blogspot.com

    ReplyDelete
    Replies
    1. YahyaFebruary 8, 2014 at 3:22:00 PM GMT+7

      Iya gan Sama-sama, thanks ya atas kunjungnnya

      pastinya gan :D

      Delete
  5. BloggerFebruary 8, 2014 at 12:09:00 PM GMT+7

    mantap gan, sayang ane udah g pake blogger,.. comment back y gan? info hp terbaru

    ReplyDelete
  6. Adetya PurwaditaFebruary 8, 2014 at 1:23:00 PM GMT+7

    sukses gan

    ReplyDelete
  7. AdministratorFebruary 8, 2014 at 2:54:00 PM GMT+7

    nice share gan :D

    ReplyDelete
  8. Fahmi MuhammadFebruary 8, 2014 at 7:02:00 PM GMT+7

    it's Simpel and easy learning for begginer... Visit back guys...
    ][http://bani-fahmi.blogspot.com/][

    ReplyDelete
  9. UnknownFebruary 16, 2014 at 8:59:00 AM GMT+7

    nice share gan

    ReplyDelete
  10. AnonymousFebruary 18, 2014 at 7:23:00 PM GMT+7

    keren gan, mirip adsense bener, izin coba gan

    ReplyDelete
    Replies
    1. YahyaFebruary 21, 2014 at 8:38:00 PM GMT+7

      iya gan, iya lah gan, silahkan gan, thanks yah gan

      Delete

Silahkan berkomentar sesuai dengan topik artikel di atas, komentar yang menyertakan link, iklan, spam, dan sejenisnya akan di hapus.

Assalamu'alaikum wr.wb

Nama Saya Yahya Suteja . Saya hanya seorang pendosa yang berusaha menjadi firqah najiyah dan jika ditanya Man Rabbuka, bisa jawab Allahu Rabbi.
dan saya hanya seseorang cuma bisa mengaji di ajikan sholat dan disholatkan.

Menghindari zinah
1. Ta'aruf
2. Khitbah
3. Akad
Itulah tips saya buat kalian yang ingin mendapatkan seseorang yang kamu sayang seumur hidup.
Cukup sekian dari saya, mohon ma'af jika ada salah-salah kata.

Wassalamu'alaikum wr.wb

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!
-->