› ›

Membuat Iklan Teks ala Google AdSense

By Sunday, 30 March 2014 Add Comment Edit
Iklan Teks ala Google AdSense
 penampakannya kurang lebih begini :D
langsung aja deh ke TKP :D


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://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Ads Gratis</a>
            <a href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang Iklan Gratis</a>
        <span class='isi'>Pasang Iklan gratis di mas mora blog</span>
            <a class='panah-besar' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.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/AVvXsEiaLXTVn_d-I80Ctzd14TJBnVSP1WisqmSHB5Om5K1HorZbQknDF7F_UQQLIqQ4yWlImJESvZYMhBRQbgeg-XH_WP26qk1UhKYRN4FfFNTbdffrWVho9_IRKjqMIh0PPbCj2Db2RVx7gdI/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan Gratis di Sini">
        <span class='isi-iklan'><a class='judul' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang Iklan Gratis di Sini</a>
            <a href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang iklan Gratis</a>
            <span class='isi'>Pasang iklan gratis Anda di sini, hanya 0 ribu / bulan.
            <a class='panah-besar' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.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/AVvXsEiaLXTVn_d-I80Ctzd14TJBnVSP1WisqmSHB5Om5K1HorZbQknDF7F_UQQLIqQ4yWlImJESvZYMhBRQbgeg-XH_WP26qk1UhKYRN4FfFNTbdffrWVho9_IRKjqMIh0PPbCj2Db2RVx7gdI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan gratis di Sini">
        <span class='isi-iklan'><a class='judul' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang Iklan gratis di Sini</a>
            <a href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang iklan gratis</a>
            <span class='isi'>Pasang iklan gratis Anda di sini, hanya 0 ribu / bulan.
            <a class='panah-besar' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.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/AVvXsEiaLXTVn_d-I80Ctzd14TJBnVSP1WisqmSHB5Om5K1HorZbQknDF7F_UQQLIqQ4yWlImJESvZYMhBRQbgeg-XH_WP26qk1UhKYRN4FfFNTbdffrWVho9_IRKjqMIh0PPbCj2Db2RVx7gdI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan gratis di Sini">
        <span class='isi-iklan'><a class='judul' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Pasang Iklan gratis di Sini</a>
            <a href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'>Mas Mora Blog</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 0 ribu / bulan.
            <a class='panah-besar' href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.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/AVvXsEiaLXTVn_d-I80Ctzd14TJBnVSP1WisqmSHB5Om5K1HorZbQknDF7F_UQQLIqQ4yWlImJESvZYMhBRQbgeg-XH_WP26qk1UhKYRN4FfFNTbdffrWVho9_IRKjqMIh0PPbCj2Db2RVx7gdI/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Mas Mora</span>
    <span class='info-icon'><a href='http://mas-mora.blogspot.com/2013/10/pasang-iklan-gratis-di-mas-mora.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jo-6BtCY81t605Ahi6j4MW8Dvw3kHDrSFTxGqdLAf9R3kLUc9Ny2umhcPkDiqyQrDx9UGrQ6QsP98ZRA7ZMEywn5LkTMFE7El9OOaa0ncyyZFkVIOtjO-NRGqQUzlmRJOsgsQ5485Vs/s1600/info-iklan.png'/></a></span>    
</div>
Silahkan agan edit judul dan isinya :D

0 Response to "Membuat Iklan Teks ala Google AdSense "

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel