Banner Iklan Dengan CSS3

Banner Iklan Dengan CSS3 - Ketika blogwalking brada tentu sering melihat kolom iklan pada sebuah blog yang ditempatkan pada samping header atau diposisi sidebar dengan ukuran yang bervariasi. Banyak cara membuat kolom iklan supaya terlihat lebih menarik dengan sentuhan efect didalamnya. Untuk melengkapinya , kali ini saya akan memberikan tutorial cara membuat kolom iklan atau space iklan dengan CSS3 yang mempunyai ukuran 125x125 dengan posisi Horizontal. Kolom atau space iklan ini lebih pas ditempatkan disamping header . Untuk lebih jelasnya silahkan brada lihat screenshot dan demonya.

Sebelum Tersentuh Mouse

Sesudah Tersentuh Mouse

See Demo

Kustomisasi 

• Masuk pada edit template 
• Cari kode ]]></b:skin> 
• Masukan kode dibawah ini diatas kode ]]></b:skin> 

.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;
}

• Add Gadget / HTML Javascript 
• Masukan kode dibawah ini 

<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/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/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/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/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/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/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/AVvXsEgxvstiJFRzC-eg1D3fGDPijIF61fVHCkmN5jPaQS9BG9HEk_z6rT6nNirDuXO6p0EZlsFhIg3hDfVjMDrEkTPq6mfedF1uWA2YQ9ZshD6oGfg5jSbuHBuh5djFd0z62asGldYoLPEEFqVR/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Keterangan Iklan</strong>
</a>
</div>
</div></div>