Membuat Iklan Dengan Info Ala Google Ads

Oleh Unknown

Sabtu, 17 Januari 2015

Bagikan :

Tweet

Mungkin anda pernah melihat iklan dengan info di ujung kanan atasnya, biasanya itu merupakan Situs Periklanan yang memasang iklan pada publisher-publishernya. Dan kali ini saya akan membagikan tutorialnya.

Kode CSS :

.ikle{position:relative;width:300px;height:250px;margin:0 auto;overflow: hidden;}
.infona{position: absolute;top: 0;right: 0;background:#D3D3D3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGOdprJ-JmzsF25d6ytrN1fstFQe4PlR9pvYLlsH3sZGUnWh16UpkcTegtJq_fXjuDwegB0u29WigUv6U102xI0vM9oFeJav6OO-g0ST-zh59OW-O8N7CGLTSK6L-Rlz2-kYKTW8WtJs/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;}

Kode HTML :

<div class="ikle">
    <a href="#" target="_blank" title="Pasang Iklan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgolaIYQZwvHTnNe1ALRXd2Xro5PCUpIgyjRxESDSgnkivRqh5le66-ORg9I223kN6106ZIkyhHW4l4fwfATc9pJdG8zEXDBc2otlTXiQaBUgbNyVn96u3ZWcca3VNnJpAVHz_RqAv-yiI/s1600/300x250px.gif" alt="Pasang Iklan" title="Pasang Iklan"/></a>
    <div class="infona">
        <a href="#" target="_blank" title="Iklan Oleh Kang PP"><p>By Kang PP</p></a>
    </div>
</div>

Penasaran Hasilnya ? Lihat Demonya

• Demo On Blog
• Demo On JSFiddle

Semoga Bermanfaat ^_^

Tag : Tutorial Blog