cara membuat Image pseudo style

Cara membuat Image pseudo style - cara membuat Image pseudo style cukup simpel, cara membuat Image pseudo style dapat anda pergunakan pada setiap gambar pada halaman anda, cara membuat Image pseudo style ini juga dapat anda manfaatkan untuk tampilan gambar pada postingan anda agar lebih menarik, untuk melihat tampilan cara membuat Image pseudo style, silahkan klik demo dibawah, nah bila anda tertarik untuk pemasangannya silahkan simak tutorial dibawah ini.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Image pseudo style
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Sabtu 01 February 2014
******************************************/
.image-pseudo-style {
position:relative;
z-index:1;
width:auto;
margin:0 auto;
padding:20px 0 0;
font:14px/1.5 Arial, sans-serif;
text-align:center;
color:#333;}
.image-pseudo-style:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
font-size:0;}
.pseudo-shadow {
position:relative;
float:left;
width:13%;
padding:0;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.pseudo-shadow:before,
.pseudo-shadow:after {
content:"";
position:absolute;
z-index:-2;}
.pseudo-shadow p {
font-size:16px;
font-weight:bold;}
.pseudo-show {border-radius:4px;}
.pseudo-show:before,
.pseudo-show:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);}
.pseudo-show:after {
right:10px;
left:auto;
transform:rotate(3deg);}
.paseudo-rotated {
box-shadow:none;
transform:rotate(-10deg);}
.paseudo-rotated :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border: solid 1px #999;}
/* Image pseudo style css end */

Install Program Tag HTML

• Setelah anda sudah memasang CSS cara membuat Image pseudo style ini saatnya anda memasang kode htmlnya.
• Copy code cara membuat Image pseudo style dibawah ini dan pasang diblog anda...
  

<!-- Image pseudo style code start-->
<div class="image-pseudo-style">
<div class="pseudo-shadow pseudo-show paseudo-rotated">
<p><img title="Rivai Silaban" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNXdQTMScOu2q01mQqPAURyePzwk7e0H9B41ZqrA7rvLGvAXGioxkf6V0Lcgx3ORBKXlxNaW-s5J_K9-49p7yrMDFXDEcB3hYG4CtbnEZ6Kp-zVld4-3uWTbAGDtexMkG7rptfLpqIiLE/s1600/silaban.png" alt="image pseudo style"/></p>
</div></div>
<!-- Image pseudo style code end-->

Kesimpulan

Silahkan anda edit code CSS cara membuat Image pseudo style ini untuk menyesuaikan pada thems template anda, bila anda merasa perlu membutuhkan informasi tambahan tentang pemasangan cara membuat Image pseudo style ini, silahkan kunjungi halaman sumbernya...

http://www.ideblogspot.com/2014/02/image-pseudo-style.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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 9:59 PM