Cara membuat banner iklan dengan CSS3

 Cara membuat banner iklan dengan CSS3 - Banner merupakan salah satu media untuk mendapatkan iklan dari website atau blog. Kali ini saya akan share cara membuat baner banner iklan dengan CSS3. Check it out.

1. Masuk akun blogger anda.
2. Masuk Tab rancangan >> Tata letak >> Add Gadget.
3. Masukkan Kode Tag berikut.

<style type="text/css">.banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 14px 2px -10px #CCCCCC;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 652px;
    z-index: 15;
}
.corte-img {
    cursor: pointer;
    height: 167px;
    overflow: hidden;
    position: relative;
}
.corte-img > img {
    -moz-transition: all 500ms;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    position: absolute;
    z-index: 50;
    opacity: 1;
    left: 0;
}
.banners-pl:hover .corte-img > img {
    opacity: 0;
    margin-top: -167px;
}
.conten-pl-home {
    position: absolute;
    top: 0;
    z-index: 10;
}
.conten-pl-home a {
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 2px 0 #333333 inset;
    display: block;
    float: left;
    margin: 13px;
    padding: 6px;
    position: relative;
    text-decoration: none;
    width: 125px;
    height: 125px;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.conten-pl-home a:hover {
    background: #07aaee;
}
.banners-pl .conten-pl-home a strong {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    font-weight: normal;
    right: -20px;
    padding: 3px 6px;
    position: absolute;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
    top: 0;
    z-index: 9999;
}
.banners-pl .conten-pl-home a strong {
    opacity:0;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: 500ms;
    -o-transition-property: opacity, top;
    -o-transition-duration: 500ms;
    transition-property: opacity, top;
    transition-duration: 500ms;
}
.conten-pl-home  a:hover strong {
    opacity:1;
    top: 120px;
} </style>

<div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="http://i784.photobucket.com/albums/yy130/nakula1212/Spaceiklan_zps1574b011.png" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8hp5p2A5Yi2U4n1GK2ZkREzY_WvOhN9mt6d9LwVT6ShhPBIbKfCZ3V-IGRVKN-xWP19Sgm7X3JaIVQRB1FjaqeYJpkS6xnlhchIZf0FKBYtdG7rdG1qTt4E0IKhf6OBxVEOGKw5OyDqNf/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8hp5p2A5Yi2U4n1GK2ZkREzY_WvOhN9mt6d9LwVT6ShhPBIbKfCZ3V-IGRVKN-xWP19Sgm7X3JaIVQRB1FjaqeYJpkS6xnlhchIZf0FKBYtdG7rdG1qTt4E0IKhf6OBxVEOGKw5OyDqNf/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8hp5p2A5Yi2U4n1GK2ZkREzY_WvOhN9mt6d9LwVT6ShhPBIbKfCZ3V-IGRVKN-xWP19Sgm7X3JaIVQRB1FjaqeYJpkS6xnlhchIZf0FKBYtdG7rdG1qTt4E0IKhf6OBxVEOGKw5OyDqNf/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8hp5p2A5Yi2U4n1GK2ZkREzY_WvOhN9mt6d9LwVT6ShhPBIbKfCZ3V-IGRVKN-xWP19Sgm7X3JaIVQRB1FjaqeYJpkS6xnlhchIZf0FKBYtdG7rdG1qTt4E0IKhf6OBxVEOGKw5OyDqNf/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
</div>
</div></div>

4. Simpan dan lihat hasilnya.

Catatan :
Tulisan "Keterangan Iklan" silahkan ganti
"#" Ganti dengan link iklan
625 Ukuran Lebar
167 Ukuran Tinggi

Demikian post saya kali ini Semoga dapat sedikit membantu.