We come with the latest version 1.6, get this theme through our official site.

JQuery Iklan Teks Google Adsense Ala Males Code

JQuery Iklan Teks Google Adsense Ala Males Code
Google Adsense

Pada kesempatan yang begitu sempit ini, kali ini saya akan membagikan tutorial untuk membuat iklan teks yang hampir menyerupai google adsense, ya ini adalah versi penyempurnaan dari miliknya Kang Ismet.

Penampakannya sendiri bisa dilihat disidebar saya, menarik bukan.

Dan Sesungguhnya ini hanya memanfaatkan teknik JQuery Saja, baiklah tanpa banyak kata langsung aja ke snippetnya.

Langkah awal : Simpan kode dibawah ini tepat diatas </head>

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

Langkah kedua : Simpan kode dibawah ini tepat diatas ]]></b:skin> atau </style>

#iklan-teks {
  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:#f0523f;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {border-bottom:0;}
#iklan-teks h2.iklan-header:first-child {border-top:0;}
#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:120px;
  padding:10px 70px 10px 10px;
  z-index:1;
  background:white;
  font:normal 13px Verdana,Tahoma,Serif;
  color:white;
  position:relative;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana,Tahoma,Serif;
  color:#f0523f;
  margin:0 0 5px 0;
}
a.judul {
  font:normal 20px Verdana,Tahoma,Serif !important;
  color:#f0523f !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana,Tahoma,Serif !important;
  color:#2c343e;
  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:#f0523f;
  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:#2c343e;}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:-4px;
  z-index:2;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#f2f2f2;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:-103px;
  color:#000;
  z-index:2;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
}

Langkah ketiga : Simpan kode dibawah ini pada widget HTML/Javascript

<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Blogger Tutorial' style='border-top:none'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Blogger Tutorial</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Blog yang berisi seputar kode-kode web pada platform blogger.</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhR8l166gLnghgpigfO2uFufO__rviGdLC3tkqWde0NNZbp3u4FB1PdOOqD6n_XTOeuXck8FgG6CXKhUNsdenIe6CGGF3QzFBdqZ1pcQwq1WPCQ5RWDnw4o3VpX83QmWc1EVaelxwksJ4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</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 alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhR8l166gLnghgpigfO2uFufO__rviGdLC3tkqWde0NNZbp3u4FB1PdOOqD6n_XTOeuXck8FgG6CXKhUNsdenIe6CGGF3QzFBdqZ1pcQwq1WPCQ5RWDnw4o3VpX83QmWc1EVaelxwksJ4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhR8l166gLnghgpigfO2uFufO__rviGdLC3tkqWde0NNZbp3u4FB1PdOOqD6n_XTOeuXck8FgG6CXKhUNsdenIe6CGGF3QzFBdqZ1pcQwq1WPCQ5RWDnw4o3VpX83QmWc1EVaelxwksJ4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>malescode.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhR8l166gLnghgpigfO2uFufO__rviGdLC3tkqWde0NNZbp3u4FB1PdOOqD6n_XTOeuXck8FgG6CXKhUNsdenIe6CGGF3QzFBdqZ1pcQwq1WPCQ5RWDnw4o3VpX83QmWc1EVaelxwksJ4/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <span class='info-iklan'>Ads by <data:blog.title/></span><span class='info-icon'><a href='#' target='_blank'><img alt='info' src='https://dl.dropboxusercontent.com/s/vf5xajbwo5kzhus/info.png'/></a></span>
</div>

Dan mungkin itu saja sih yang diperlukan, kalau ada yang kurang jelas atau ada kritik silahkan berkomentar dikolom yang tersedia.
Sekian terima kasih, semoga bermanfaat.
kembara Blogger

mas... request tutorial cara bikin dte eyes scroll kaya blog ni mas.


Rizky Kurniawan

kalau mau request yang begituan harus izin kepada pemiliknya

Unknown

wah keren mas, 7:(


Esgi Dendyanri

Komentar di blokir karena mengandung element yang tidak diperbolehkan pada kolom komentar.


Rizky Kurniawan

Silahkan Dicoba,

Terima Kasih :)

Anonim

nemu 1 blog yang templatenya keren + gak ada yang nyamain , mau saya samain gak mas?? :Q


Blog Billy Wadu

request thread comment dong,sekalian formnya ^:D

Kang Rian

demo nya ada gan?


Rizky Kurniawan

Gak ada kang. Khusus pengguna expert :D. Test di codepen aja kang.

Yuk Diskusi

Kalau ada pertanyaan yuk kita diskusikan