cara membuat space iklan blogspot dengan CSS3

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

Demo

Pasang code CSS cara membuat space iklan blogspot dengan CSS3 ini didalam CSS blogspot anda.

Code CSS here..

/*****************************************
Name : space iklan blogspot dengan CSS3
By : Rivai Silaban | Blog Design
Update :Kamis 16 January 2014
site : www.rivai.org
******************************************/
.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;}
/*** www.rivai.org CSS space iklan blogspot dengan CSS3 and ***/

Pasang code html cara membuat space iklan blogspot dengan CSS3 ini dibawah ini di dalam gadget blogspot anda.

Code HTML here..

<!-- www.rivai.org code space iklan blogspot dengan CSS3 start-->
<div class="lihat pasang-iklan">
<img alt="space iklan blogspot dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHoFSZADRqPDAZQY03ci-pFwLeO4gX_Ogh15m63G2osQR8FmSh85YiVm8d6Se_pfUD_GVq9iahxbZwjr2AUwUT_Nvzho_ZezWheuFZmNlh91RxANfX95yCzbRB-tX1XR7tV1b3USove9z/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>
<!-- www.rivai.org code space iklan blogspot dengan CSS3 end-->

Bila anda masih belum memahami tata cara membuat space iklan blogspot dengan CSS3 ini silahkan kunjungi halaman sumbernya, dan lihat penjelasan detail codenya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/space-iklan-blogspot-dengan-css3.html

css

• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• css widget label blogspot accordion
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• help tooltip style blogspot
• cara membuat widget box rivai style

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:03 AM