Skip to content Skip to sidebar Skip to footer
Home / Tutorial Blog

Cara Membuat Widget Iklan Teks Seperti Iklan Google Adsense

By Teuku Taufik 5 comments

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Assalamu’alaikum Wr. Wb

 

Widget Iklan Teks Seperti Iklan Text Google Adsense -blogsitaufik.blogspot.comBlog Si Taufik | Selamat datang cobt di ruang sederhana saya ini, semoga betah main-main kesini yah :) , oh yah seperti janji saya dengan seorang temen saya untuk membagikan tutorial tentang bagaiman Cara Membuat Widget Iklan Teks Seperti Iklan Text Google Adsense, sebelumnya saya juga sudah posting artikel tentang Kode Warna HTML yang mungkin juga bisa bermanfaat dalam pembuatan widget ini.

Apa Itu Google Adsense?
Google Adsense (GA) merupakan sebuah program periklanan yang dikelola oleh Google, dimana program ini memberi kesempatan bagi para pemilik situs web berskala besar maupun kecil untuk mendapatkan uang dengan menampilkan iklan google bertarget di situs mereka, apabila iklan  tersebut di klik oleh visitor maka pemilik blog atau website tersebut akan mendapatkan bayaran dari google berupa dollar, itulah sedikit pengertian tentang Google Adsense (GA). Iklan Google Adsense (GA) sendiri teridiri dari dua katagori yaitu iklan berupa gambar dan iklan berupa text.

Nah, di kesempatan ini saya akan share bagaiman Cara Membuat Widget Iklan Teks Seperti Iklan Text Google Adsense, source kode tutorial ini bukanlah hasil dari tangan saya sendiri melainkan saya dapat dari Google dan di blog-blognya Master, saya hanya mengeditnya sedikit saja untuk menyesuaikan dengan blog saya ini. Oke cobt bagaimana cara menerapkannya langsung saja kita ke TKP, Cekkidot…!

 

Langkah-langkah Membuat Widget Iklan Teks Seperti Iklan Google Adsense

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Copy-Paste kode dibawah ini kode ini di atas </head>

<script src='https://googledrive.com/host/0BzVPzn2_hNfjcWJ6bWNYMjcyV28' type='text/javascript'/>

4. Copy-Paste kode CSS ini di atas ]]></b:skin> atau </style>

 

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:325px;
  height:259px;
  background-color:#FFFAFA;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:rgb(255, 253, 253);
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:#db001e;
  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:#db001e;
  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:110px;
  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;
}

 

5. Selanjutnya Klik  Simpan Template

6. Kemudian pilih  Tata Letak >> Tambahkan Gadget>>HTML/JavaScript

7. Copy-Paste Kode dibawah ini ke Widget HTML/JavaScript

<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blog Si Taufik" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://www.blogsitaufik.web.id' target='_blank'>Blog Si Taufik</a>
            <a href='http://www.blogsitaufik.web.id' target='_blank'>blogsitaufik.web.id</a>
        <span class='isi'>Bacalah...! Dengan Ilmu Hidup Jadi Mudah, Dengan Seni Hidup Jadi...</span>
            <a class='panah-besar' href='http://www.blogsitaufik.web.id' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFoFeP_c-jVHWz6ITuCyvUJlyrIMqgQcqlOWa5NOAPUqlxK20VJ1lL6MgXC3Z3EuC04rRluKxH9iD9mAIO2cmWSwCZkGdrzlbmcNQKohtnXg0yC4o6ePQC-3CYR-vw9k024YlFTVcmRE8/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://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>blogsitaufik.web.id</a>
            <span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
            <a class='panah-besar' href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.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/AVvXsEiFoFeP_c-jVHWz6ITuCyvUJlyrIMqgQcqlOWa5NOAPUqlxK20VJ1lL6MgXC3Z3EuC04rRluKxH9iD9mAIO2cmWSwCZkGdrzlbmcNQKohtnXg0yC4o6ePQC-3CYR-vw9k024YlFTVcmRE8/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://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>blogsitaufik.web.id</a>
            <span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
            <a class='panah-besar' href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.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/AVvXsEiFoFeP_c-jVHWz6ITuCyvUJlyrIMqgQcqlOWa5NOAPUqlxK20VJ1lL6MgXC3Z3EuC04rRluKxH9iD9mAIO2cmWSwCZkGdrzlbmcNQKohtnXg0yC4o6ePQC-3CYR-vw9k024YlFTVcmRE8/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://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'>blogsitaufik.web.id</a>
        <span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
            <a class='panah-besar' href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.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/AVvXsEiFoFeP_c-jVHWz6ITuCyvUJlyrIMqgQcqlOWa5NOAPUqlxK20VJ1lL6MgXC3Z3EuC04rRluKxH9iD9mAIO2cmWSwCZkGdrzlbmcNQKohtnXg0yC4o6ePQC-3CYR-vw9k024YlFTVcmRE8/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Ads By Blog Si Taufik</span>
    <span class='info-icon'><a href='http://blogsitaufik.blogspot.com/2013/03/pasang-iklan-disini.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijM2wj1vh9rmZn2zxwIOfPdv9vYVhxbYKeyku2gOjIUHIJaldac8xjYz1MmYbJeU9X6P-WPL2vlkWj87CL4J5MY6kX06qVTO0Zga6kEIZ7XbHqkmdE7DTBhYTYtHyyYlRntwJFtFJk9dA/s1600/info-iklan.png'/></a></span>    
</div>

 

  *Silahkan Cobt edit judul dan link serta text keterangannya.

8. Terakhir Simpan.

Hhmm… Siap juga artikel ini, alhamdulillah satu lagi kebaikan dalam berbagi pengetahuan tercapai, semoga bisa memberi manfaat untuk cobt semua, bantu juga share kepada  cobt lainnya tentunya dengan berpedoman pada aturan yang berlaku. Sampai disini dulu pertemuan kita di kesempatan ini, semoga di lain waktu Allah masih memberikan kita kesempatan untuk bertemu lagi di ruang yang sederhana ini. Insyaallah.

Source code by blog.kangismet.net

Selamat Mencoba & Semoga Bermanfaat
“ Tinggalkan Sebuah Komentar Anda Berupa Kritik/Saran Yang Bersifat Membangun”

Wassalam

Teuku Taufik
Teuku Taufik Hi, Taufik disini dan Saya adalah seorang pembelajar yang menyukai kegiatan Blogging, Digital Marketing, Traveling

5 comments for "Cara Membuat Widget Iklan Teks Seperti Iklan Google Adsense"

  1. Anonymous12 September, 2014 12:50

    Nice post gan :) ... tapi sayangnya iklan yang di pasang ini klo di klik ga bisa menghasilkan $ hehe :v

    ReplyDelete
    Replies
    1. Teuku Taufik12 September, 2014 18:03

      Hhh... ini bisa kita gunakan buat dpetin reff gan atau buat yg membutuhkan js iklan.

      Terimakasih gan udh ikut membantu dalam penyempurnaan skrip nya, sekarang sudah terlihat sempurna di browser Mozilla. :))

      Delete
  2. Unknown11 October, 2014 09:30

    uwah tutorialnya bermanfaat gan dan ngebantu banget. ijin praktekin :)

    ReplyDelete
  3. Mas Blogging15 December, 2014 20:25

    wahh boleh juga dicoba nih mas, terima kasih telah berbagi :)

    ReplyDelete