Membuat Iklan Text Dengan Info dan Close

Kemarin saya membuat Iklan Gambar dengan info dan sekarang Kang PP membuat iklan text yang ada infonya. Namun pada iklan text ini Kang PP menambahkan icon close yang jika diklik iklan akan hilang. Gak Percaya ? Coba pasang di blog anda.

Baca juga : Membuat Iklan dengan Info Ala Google Ads

• Demo

Kode CSS :

#ads { background:#EEE; margin:0 auto; position:relative; width:300px; height:250px; }
.ads-box { text-align:center; transition:all .9s ease-in-out; font-size:30px;padding:45px 0;}
a.adsurl{font-size:15px; color:#1FA67A;}
.ekstern { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX-st6sWJAUUwrV8y0EeQPqIMR9_gQFELTZ9T3dzUxDac8mpQDg8-Av9TEnvrF4oLQmqxoMQz4_6fkm3XeBOBc-RE-VpjDZQHnccDCuiqfFUkvVrNOn0QWKuz7TRmc72DY8P1TBg1ACYs/s1600/icon_go.png") 50% 50% no-repeat #4683EA; color:#FFF; font-size:22px; border-radius:4px; width:50%; height:40px; margin: 20px auto; display:block}
.infona{position: absolute;top: 0;right: 18px;background:#D3D3D3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AX-uXkhkxkb8L91rXJ5XkUC3lVtVhu8MQFUy0Wnj4KlMOnB-TxGVnk-CJcFyxuhhqI9iCdZ4rPPW8WOoutXRg0Q4CFa2ODvV02xqi0VrqB6Adq5HvOqGcru75hK8wnI9ac-z4jGSMJ0/s1600/iklan_kpp.png) no-repeat center;color: #fff;width:17px;height:17px;cursor: pointer;}
.infona:hover p{display:block;transform-origin: 100% 0%;animation: fadeIn 0.3s ease-in-out;}
.infona p{display: none;background-color: #D3D3D3;padding: 2px 6px;position: absolute;top: -11px;right:15px;width:60px;border-radius: 0 0 0 9px;color: #000;font-size: 11px;}
.closena {position: absolute;top: 0;right: 0px;background: #D3D3D3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEajHy2kp_SOC8Z_t5nmJsPIeN-30JYEKv7yUAloeFY-2M8OZn7knnRCTMQzPnQUB2RPqItsF4iMA0Byv1yTzAED3_LL7SkYpvRxC_iPn6b-_27kWXSsG5nkATjqjrfFRv8K7rFCk26XI/s1600/x_button_blue2.png) no-repeat center; width:17px;height:17px;cursor: pointer;}
.closena:hover {background: #333;}

Kode HTML :

<div id='ads'>
<div class='ads-box'>
    Advertise
    Here
    <a class='adsurl' href='#'>kang-pp.blogspot.com</a>
    <a class='ekstern' href='#'></a>
</div>
    <div class="infona">
        <a href="#" target="_blank" title="Iklan Oleh Kang PP"><p>By Kang PP</p></a>
    </div>
    <div class="closena" onclick="document.getElementById(&apos;ads&apos;).style.display=&apos;none&apos;;"></div>
</div>

Kode CSS bisa diletakan di atas kode ]]></b:skin> atau </style> . Dan semoga berhasil ^_^