Membuat Iklan Teks ala Google AdSense

Membuat Iklan Teks ala Google AdSense

       Yap Mungkin masih banyak yang belum tahu tentang pemasangan  Iklan Teks ala Google AdSense , yap salah satu nya Bang Hermanto (hihi yang request posting tentang ini) .. Sebenar nya GA ini udah di bagikan cara nya oleh Kang Ismet , soal nya saya aja dari Kang Ismet ilmu nya, tapi yap ok lah saya posting cara nya. hihi

Hihi sebenar nya saya masih bingung masalah kode-kode jadi mengutip perkataan Kang Ismet aja "Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam² mending saya bagiin deh tutorialnya" Hihi yap itu lah yang dikatakan Kang Ismet
:

Yap langsung aja ke langkah-langkah nya, hihi

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>

buka disini:

/* 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;
}

Nah yang diatas bisa kita ubah untuk menentukan ketinggian dan lebar kotak iklan (yaitu ubah width dan height) dan juga bisa kita ubah warna nya(yang ini cari aja ya, hihi)
Langkah 3 : Simpan kode ini pada Widget HTML / JavaScript

Buka disini:

<div id="iklan-teks"> 

<!-- iklan ke 1 -->
    <div data-header="Makanan dari Mesin fhoto copy">
        <span class='isi-iklan'>Info terbaru 2014<a class='judul' href='' target='_blank'></a>
            <a href='' target='_blank'></a>
            <span class='isi'><a href="http://technetium-tc.com/id-920694" target="_blank"> Apa makanan Keluar dari Photocopy? kok bisa?? enak kali ya..</a>
            <a class='panah-besar' href='http://technetium-tc.com/id-920694' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxjoyqrISTrV-lf64gFr1vnlVx8Q1esZNZunVaZFIrKKTGTJx7VGyx97z28fehd5P356gC3wTHjxl3HyKMxfgaa1-y8JtiOCa3MGNJtvEMu2WNrQXBRt5RUYDx5EikWdOR4BZHmFVxN4/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div> 

 <!-- iklan ke 2 -->
    <div data-header="10 Tempat Keren diJakarta">
        <span class='isi-iklan'>Info terbaru 2014<a class='judul' href='' target='_blank'></a>
            <a href='' target='_blank'></a>
            <span class='isi'>
<a href="http://technetium-tc.com/id-888066" 
target="_blank">Kebanyakan orang jakarta sendiri tidak Tahu 10 tempat ini, padahal ini adalah tempat keren!</a>
            <a class='panah-besar' href='http://technetium-tc.com/id-888066' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxjoyqrISTrV-lf64gFr1vnlVx8Q1esZNZunVaZFIrKKTGTJx7VGyx97z28fehd5P356gC3wTHjxl3HyKMxfgaa1-y8JtiOCa3MGNJtvEMu2WNrQXBRt5RUYDx5EikWdOR4BZHmFVxN4/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
<!-- iklan ke 3 -->
    <div data-header="Inovasi Lari terbaru">
        <span class='isi-iklan'>Info terbaru 2014<a class='judul' href='' target='_blank'></a>
            <a href='' target='_blank'></a>
            <span class='isi'><a href="http://technetium-tc.com/id-864638" target="_blank"> Ini adalah Inovasi lari terbaru 2014 , di indonesia pun di lomabakan
 </a>

            <a class='panah-besar' href='http://technetium-tc.com/id-864638' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxjoyqrISTrV-lf64gFr1vnlVx8Q1esZNZunVaZFIrKKTGTJx7VGyx97z28fehd5P356gC3wTHjxl3HyKMxfgaa1-y8JtiOCa3MGNJtvEMu2WNrQXBRt5RUYDx5EikWdOR4BZHmFVxN4/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>

 
    <!-- iklan ke 4 -->
    <div data-header="Makanan Apa Ini?">
        <span class='isi-iklan'>Info terbaru 2014<a class='judul' href='' target='_blank'></a>
            <a href='' target='_blank'></a>
            <span class='isi'><a href="http://bit.ly/1eJGvmZ target="_blank"> Makanan ini dari Bhs.arab nya artinya dilipat? Makanan apa sebenarnya?? 
 </a>

            <a class='panah-besar' href='http://bit.ly/1eJGvmZ' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxjoyqrISTrV-lf64gFr1vnlVx8Q1esZNZunVaZFIrKKTGTJx7VGyx97z28fehd5P356gC3wTHjxl3HyKMxfgaa1-y8JtiOCa3MGNJtvEMu2WNrQXBRt5RUYDx5EikWdOR4BZHmFVxN4/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>

    <!-- info -->
    <span class='info-iklan'> Iklan oleh Randi Andrian </span>
    <span class='info-icon'><a href='http://produksi-sukabumi.blogspot.com/' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkvbWgfpR3ZrJ5sQtvEGhkrfBlyIKFNh9OH6wxQ5L0q8pjX-hc0aBNN3px20dHjTddnv9fkowJ-it8rhlxQiDerdrhVSZ_naNo-BAlTiKFkgpFk4D_qWd1UzCKql1l2Cw_u8QAE1eQ9B4/s1600/info-iklan.png'/></a></span>     
</div>

Sebenar nya tinggal copy aja sampai

iklan 1 , dan copy yang

sampai bawah . nah berapa pun banyak iklan yang ingin iklan ditampilkan bisa berapa aja, tapi perhatikan widht dan height kotak iklan.
Dan ini adalah contoh nya

Info terbaru 2014 Apa makanan Keluar dari Photocopy? kok bisa?? enak kali ya..

Info terbaru 2014 Kebanyakan orang jakarta sendiri tidak Tahu 10 tempat ini, padahal ini adalah tempat keren!

Info terbaru 2014 Ini adalah Inovasi lari terbaru 2014 , di indonesia pun di lomabakan

Info terbaru 2014 Makanan ini dari Bhs.arab nya artinya dilipat? Makanan apa sebenarnya??

Iklan oleh Randi Andrian

Yap itulah caranya, dan jangan lupa edit judul dan link nya, kalau misalkan kotak iklan nya kurang panjang, silahkan ubah width atau height nya. yap sebenarnya itu bisa dipakai apa aja, di isi gambar juga bisa, tinggal diganti isi Iklan nya dengan Link gambar(contoh nya bisa dilihat di blog golok saya, hihi) sumber : blog.kangisme.com Yap sahabat Renz, Semoga bermanfaat hihi