Cara membuat space iklan blogspot dengan
CSS3 - cara membuat space iklan blogspot dengan CSS3 tanpa jquery, cara
membuat space iklan blogspot dengan CSS3 ini hanya mengandalkan fungsi
CSS 3 saja sehingga codenya begitu ringan. Buat anda yang membutuhkan
tampilan space iklan yang unik dan memiliki tombol contact silahkan
memakai code ini, untuk melihat tampilan cara membuat space iklan
blogspot dengan CSS3 ini silahkan anda klik demo dibawah ini, dekatkan
cursor anda pada gambar yang berada di halaman demo, bila anda tertarik
memasang space iklan blogspot dengan CSS3 di halaman blog kesayangan
anda, silahkan simak tutorial dibawah ini, langsung saja menuju tutorial
cara membuat space iklan blogspot dengan CSS3 dibawah ini...
Code CSS here..
.lihat {width: 300px;height: 200px; margin: 5px;float: left;border: 10px solid #eee;overflow: hidden;position: relative;text-align: center;box-shadow: 1px 1px 2px #999;cursor: default;}
.lihat .masker,.lihat .content {width: 300px;height: 200px;position: absolute;overflow: hidden;top: 0;left: 0;}
.lihat img { display: block;position: relative;}
.lihat h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 17px;padding: 10px;background: rgba(255, 0, 0, 0.5);margin: 20px 0 0 0;font-family: Verdana;}
.lihat p {font-family: verdana;font-size: 12px;position: relative;color: #fff;padding: 0 20px 0 20px;text-align: center;line-height: 20px;}
.lihat a.informasi {display: inline-block;text-decoration: none;padding: 7px 14px;color: #fff;text-transform: uppercase;box-shadow: 0 0 1px #000;font-family: "Courier New", Courier, monospace;background-color: #2788C2;}
.lihat a.info: hover {box-shadow: 0 0 5px #000;}
.pasang-iklan img {transition: all 0.2s linear;}
.pasang-iklan .masker {opacity: 0;background-color: rgba(0,0,0, 0.7);transition: all 0.4s ease-in-out;}
.pasang-iklan h2 {transform: translateY(-100px);opacity: 0;transition: all 0.2s ease-in-out;}
.pasang-iklan p {transform: translateY(100px);opacity: 0;transition: all 0.2s linear;}
.pasang-iklan:hover img {transform: scale(1.1,1.1);}
.pasang-iklan a.informasi {opacity: 0; transition: all 0.2s ease-in-out;}
.pasang-iklan:hover .masker {opacity: 1;}
.pasang-iklan:hover h2, .pasang-iklan:hover p, .pasang-iklan:hover a.informasi {opacity: 1;transform: translateY(0px);}
.pasang-iklan:hover p {transition-delay: 0.1s;}
.pasang-iklan:hover a.informasi { transition-delay: 0.2s;}
Pasang code html cara membuat space iklan blogspot dengan CSS3 ini dibawah ini di dalam gadget blogspot anda.
Code HTML here..
<div class="lihat pasang-iklan">
<img alt="space iklan blogspot dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzG9XwT0c-IdMB9IimuQMe8-HridfX5Wicp3m0Jf1NTBwnSd2JxcxLVtUdD7rfvKXGdirS-LxU7UWEq0d9GDV1Fk2z1uRKhHm0LqTdS85CP_wL7AfiJqdCwf1EHReCIuA35b4r_z8oegU/s1600/iklan-1.jpg" title="space iklan blogspot dengan CSS3"/>
<div class="masker">
<h2>Pasang Iklan Anda</h2>
<p>Untuk memasang iklan anda di halaman situs ini, dengan fasilitas premium, silahkan hubungi sales kami...</p>
<a href="http://www.rivai.org/" class="informasi" target="_blank" rel="nofollow" title="Contact">Read More</a>
</div>
</div>
