Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, January 16, 2014

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="http://1.bp.blogspot.com/-zczxP3melnM/UtbNWVLdKiI/AAAAAAAACKg/k-pTvoNFkSA/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

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

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 10:03 AM

2 comments :

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog