Membuat Iklan Teks Mirip Google AdSense

FANSUBLOGGER - Di pagi hari yang cerah ini. Saya mau share cara membuat iklan teks mirip dengan GA. Sampe sekarang saya belum diterima-terima sama GA :(. Jadi, saya share aja cara membuat iklan teks ala GA. Saya nemu artikel ini di blog nya Kang Ismet. Ok, kalo kalian penasaran, kita langsung aja ke cara pembuatan.

DEMO

Cara Pembuatannya yang mudah (mudah-mudahan)

1. Kalian masuk ke Akun Blogger > Pilih Template > Edit HTML > dan Pastekan Javascript beserta CSS nya. Untuk Javascript kalian bisa mempastekan di atas </head> atau </body>. Kalau untuk CSS di simpan diatas ]]></b:skin> atau </b:skin>.

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:30px 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;
}

(function($) {
    $.fn.iklanaccordion = function(settings) {
        settings = jQuery.extend({
            active: 1,
            sUpSpeed: 40,
            sDownSpeed: 40,
            sUpEasing: null,
            sDownEasing: null
        }, settings);

        return this.each(function() {
            var $this = $(this),
                $item = $this.children('div[data-header]'),
                activePanel = settings.active - 1;

            $item.each(function() {
                $(this).hide().before('<h2 class="iklan-header">' + $(this).data('header') + '</h2>');
            });

            $this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
            $this.find('.iklan-header').on("mouseover", function() {
                $this.children('h2').removeClass('active');
                $item.slideUp(settings.sUpSpeed, settings.sUpEasing);
                $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
            });

        });
    };

})(jQuery);

$(function() {
    $('#iklan-teks').iklanaccordion();
});
$(document).ready(function() {
    $('.info-icon').hover(function() {
        $('.info-iklan').toggle();
    });
});

2. Sekarang pastekan HTMl di bawah ini ke dalam Widget Text / Javascript.

<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Pasang Iklan di sini" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://fansublogger.blogspot.com' target='_blank'>Pasang Iklan di sini</a>
            <a href='http://fansublogger.blogspot.com' target='_blank'>fansublogger.blogspot.com</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.</span>
            <a class='panah-besar' href='http://fansublogger.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGD2nRLBj3tWSQHNrvX5zVwqEEf7vKpMW6sRoCJ2jB5JUHLlH1oIIFP9-bGq54SoRHnnkHzzdi91ZoNbq5MFNJlHR8kogBGD_DdhVALV62J-7LkNqQmjAr1e4gFyBUopCNsA8-JzvKGM/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://fansublogger.blogspot.com' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://fansublogger.blogspot.com' target='_blank'>fansublogger.blogspot.com</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://fansublogger.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGD2nRLBj3tWSQHNrvX5zVwqEEf7vKpMW6sRoCJ2jB5JUHLlH1oIIFP9-bGq54SoRHnnkHzzdi91ZoNbq5MFNJlHR8kogBGD_DdhVALV62J-7LkNqQmjAr1e4gFyBUopCNsA8-JzvKGM/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://fansublogger.blogspot.com' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://fansublogger.blogspot.com' target='_blank'>fansublogger.blogspot.com</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://fansublogger.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGD2nRLBj3tWSQHNrvX5zVwqEEf7vKpMW6sRoCJ2jB5JUHLlH1oIIFP9-bGq54SoRHnnkHzzdi91ZoNbq5MFNJlHR8kogBGD_DdhVALV62J-7LkNqQmjAr1e4gFyBUopCNsA8-JzvKGM/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://fansublogger.blogspot.com' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://fansublogger.blogspot.com' target='_blank'>fansublogger.blogspot.com</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://fansublogger.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGD2nRLBj3tWSQHNrvX5zVwqEEf7vKpMW6sRoCJ2jB5JUHLlH1oIIFP9-bGq54SoRHnnkHzzdi91ZoNbq5MFNJlHR8kogBGD_DdhVALV62J-7LkNqQmjAr1e4gFyBUopCNsA8-JzvKGM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh F-blogger</span>
    <span class='info-icon'><a href='http://fansublogger.blogspot.com' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVPl1NU-tUmSdV1w-mspO0tmSnfHI1l8aNBnvWYNZAEow6UjJM-_7QrvVID9K3dFXAjjBEs8mheyvXe6S7FJYeaZ6oXajpBLNu_CQ6gYd0A9OIG7fD9xGKpsB9txmfQdjHO4i_CTkf54/s1600/info-iklan.png'/></a></span>     
</div>