Cara Membuat Cloning Google AdSense Ads

07:40:00
  
Cara Membuat Cloning Google AdSense Ads - AdSense merupakan layanan periklanan paling favorit yang sepertinya masih menjadi nomor satu dan mungkin tidak akan tergantikan untuk beberapa tahun mendatang.
Dan umumnya website yang "memajang" iklan AdSense atau menjadi publisher AdSense memiliki nilai tersendiri di mata para pengunjung blog dengan anggapan bahwa situs web tersebut memiliki kualitas yang baik dimata Google dan juga dimata pembaca tentunya.


Namun sayangnya untuk bisa memajang iklan dari google AdSense yang memiliki ciri khas itu tidak mudah, yakni harus melalui berbagai macam review dimana kriterianya hanya Google dan Tuhan yang tau persis.

Nah disini kami akan membagikan tutorial membuat box iklan yang sangat mirip dengan AdSense khusus untuk anda yang sampai saat ini belum bisa menjadi publisher AdSense.

Cara Membuat Cloning Google AdSense Ads

Dalam metode kali ini kita akan menggunakan 3 komponen utama yakni HTML, Css dan JavaScript.
Pertama kita siapkan dulu kerangka HTML seperti ini

<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
    <!-- Iklan -->
    <div data-header="Judul Iklan">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Judul Iklan</span>
      <span class='url-iklan' onclick="window.open('/');">url web pengiklan</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Isi iklan</p>
      </span>
    </div>
<!-- Penutup Iklan -->
<span class='icon-iklan'>
<a href='http://www.cloning-system.com'>Ads By CS Team</a>
</span>
  </div>
Jika ingin menambahkan iklan yang lain, tinggal tambahkan markup html dari <!-- Iklan --> hingga <!-- Penutup Iklan --> .
Kerangka html ini nanti bisa diimplentasikan ke bagian Widget HTML pada sidebar atau di tempat lain sesuai dengan kebutuhan.

Selanjutnya kita beri styling dengan menggunakan Css seperti ini

.iklan-teks {
    position: relative;
    margin: 0;
    padding: 10px;
    max-height: 300px;
    overflow: hidden
}
.iklan-teks div {
    position: relative;
    background: #FFF;
    height: 120px;
    padding: 8px 0;
    margin: 0;
    z-index: 1;
    color: #555
}
.iklan-teks h2.iklan-header {
    position: relative;
    background: #FFF;
    font-size: 18px;
    color: #3cc091;
    border-top: 1px solid #d8d8d8;
    border-radius: 0;
    padding: 8px 0;
    margin: 0;
    text-transform: none;
    cursor: pointer
}
.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;
    cursor: pointer
}
.isi-iklan span.judul-iklan {
    font-size: 18px;
    color: #3cc091;
    display: inline-block;
    cursor: pointer
}
.isi-iklan span.url-iklan {
    font-size: 12px;
    color: #3cc091;
    display: block;
    margin: 8px 0;
    cursor: pointer
}
.isi-iklan span.url-iklan:before {
    content: "\f0c0";
    font-family: FontAwesome;
    margin: 0 10px 0 0
}
.isi-iklan span.panah-besar {
    color: #fff;
    background: #3cc091;
    border-radius: 50%;
    height: 34px;
    float: right;
    width: 34px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
    transition: all .6s
}
.isi-iklan span.panah-besar:before {
    content: "\f054";
    font-family: FontAwesome;
    margin: 0 0 0 3px;
    font-size: 20px
}
.isi-iklan span.panah-besar:hover {
    background: #34495e;
    color: #fff
}
.isi-iklan p.isi {
    padding: 0;
    margin: 0 40px 0 0;
    color: #555;
    font-size: 12px;
    text-align: left
}
.icon-iklan {
    position: absolute;
    top: 0;
    right: -85px;
    background: #d3d3d3 url(http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png) 0 0 no-repeat;
    width: 100px;
    height: 15px;
    z-index: 99;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.icon-iklan a {
    float: left;
    opacity: 0;
    font-size: 11px;
    line-height: 15px;
}
.icon-iklan:hover {
    right: 0;
    background-position: 100% 0;
    padding-right: 15px;
    padding-left: 10px;
}
.icon-iklan:hover > a {
    opacity: 1;
    color: #333;
}

Letakkan Css diatas di dalam template dengan mengakses Template > edit HTML dan letakkan diatas ]]></b:skin> atau sebelum </style>

Selanjutnya untuk mengeksekusi kinerja box iklan ini kita menggunakan JavaScript seperti ini

(function(a) {
    a.fn.hoverTimeout = function(c, e, b, d) {
        return this.each(function() {
            var f = null,
                g = a(this);
            g.hover(function() {
                clearTimeout(f);
                f = setTimeout(function() {
                    e.call(g)
                }, c)
            }, function() {
                clearTimeout(f);
                f = setTimeout(function() {
                    d.call(g)
                }, b)
            })
        })
    }
})(jQuery);
(function(b) {
    b.fn.iklanaccordion = function(a) {
        a = jQuery.extend({
            active: 1,
            hovertimeout: 300,
            sUpSpeed: 500,
            sDownSpeed: 500,
            sUpEasing: null,
            sDownEasing: null
        }, a);
        return this.each(function() {
            var g = b(this),
                h = g.children("div[data-header]"),
                f = a.active - 1;
            h.each(function() {
                b(this).hide().before('<h2 class="iklan-header">' + b(this).data("header") + "</h2>")
            });
            g.children("div:eq(" + f + ")").show().prev().css("margin-top", "-47px").addClass("active");
            g.find(".iklan-header").hoverTimeout(a.hovertimeout, function() {
                g.children("h2").removeClass("active").animate({
                    marginTop: 0
                });
                h.slideUp(a.sUpSpeed, a.sUpEasing).animate({
                    marginTop: -47
                });
                b(this).addClass("active").next().slideDown(a.sDownSpeed, a.sDownEasing)
            })
        })
    }
})(jQuery);
$(function() {
    $(".iklan-teks-sidebar").iklanaccordion();
    $(".iklan-teks-post-footer").iklanaccordion()
});
$(".info-icon").hover(function() {
    $(".info-iklan").animate({
        right: 0
    }, 500, "easeInOutExpo")
}, function() {
    $(".info-iklan").animate({
        right: -103
    }, 500, "easeInOutExpo")
});
Letakkan JavaScript di dalam area body pada template , sebelum tag penutup </body>

Jika semua bagian sudah tertata sempurna, simpan dan lihat hasilnya.

Contoh bisa dilihat di sidebar sebelah kanan halaman ini ..
Cara Membuat Cloning Google AdSense Ads

: CS Team Tentang Kami Portfolio Kontak

CS Team adalah sebuah tim yang berfokus bekerja pada Blogger Design untuk meningkatkan pengalaman pada pengguna Website/ Blog berbasis Blogger.
Terimakasih telah membaca Cara Membuat Cloning Google AdSense Ads diatas dan semoga bermanfaat.

Mau bantu share artikel diatas ... ?

Related Posts

Previous
Next Post »

Silahkan tanyakan apa yang ingin anda tanyakan dengan bahasa yang mudah dimengerti .
EmoticonEmoticon