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

trik pendukung

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• widget social media scale di blogspot
• fungsi style clear both
• Tutorial menampilkan post date diwaktu yang sama
• feed validator tool
• cara membuat Google Plus buttons style
• cara mebuat fasilitas chat di blog
• cara membuat Blockquote di blogspot

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 speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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 speech bubble style
• cara membuat Google Plus buttons style
• help tooltip style blogspot
• cara membuat space iklan blogspot dengan CSS3
• cara membuat widget box rivai style

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