Pure your ads with css3

MurliCyber    6/01/2014    Css3 , Original post , Tutorial blog    Comment   

Yeay,dihari minggu yang lagi cuaca gak jelas ini gw mau bagi bagi trick blogger lagi ah yaitu pure ads css3

kayak nya udah ada yang pernah request deh ini,tapi gak tau deh perasaaan gw udah ada yang request tapi belum gw kabulin hahahaha XD sekarang gw kabulin deh

apa itu pure ads css3?

seperti template zynation sebelum nya kan ada tuh di footer dalam post yang ada 3 slot banner 125x125 itu loh yang kalau di hover akan kebuka,keren kan? nah itu menggunakan css3 jadi css nya simple gak ribet sehingga di blog kalian gak terlalu berat waktu load post nya

dari pada gw jelasin panjang lebar,langsung aja deh liat demo nya

See the Pen Pure ads banner with css3 by Ojik kidiw (@kidiw) on CodePen.

gimana? keren kan

1.Cari kode ]]></b:skin letakkan kode di bawah ini di atas kode tadi

.banners-pl {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 2px 2px 2px #222;
    margin-bottom: 30px;
    padding: 8px;
    position: relative;
    width: 590px;
    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: 28px;
    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;
}

2.kalau mau di letakkan di dalam post/di footer post silahkan cari kode berikut
<div class='post-footer'> (setiap template kode nya berbeda beda) kalau udah letakkan kode di bawah ini di bawah kode tadi

 <div class="banners-pl">
<div style="position:relative">
<div class="corte-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVj5AqhGE4i1pFEV0_l7iW-_wMAiDLjuMFG6lwTCcQjfFvlbLEhAlLtxp0uvu34fpJCueCk4mHJrtf1OH1jm20JuZmnhVP-IcTb8pehtUEDvI27IGH5Tj3UJb0mNXarXmwhPtlsI-oF4U/s1600/ad88.jpg" />
</div>
<div class="conten-pl-home">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/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/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/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/AVvXsEif1zxE19tlY14C9hj58ut0y4U4_EqmqdZ9JfbzzF0yWKlV3qv2bTbESBy5VcYvS_JQChSos3kBQTqMkpJj0nIDhT6E6a6j0A2iMbS3Xa8b2pvRbNrL1ivX6WGN0Urp2zY7W7s9dyC5fgV6/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
</a>
</div>
</div></div> 

simpan template kalian
gimana gampang kan?

see you

source