Moda blogcularına harika resim kodu

 Blog dunyasinda moda blogcularin sayisi hicde az degildir :)
 moda blogculari turk bloggerlerinden genelde bayanlar olur ve bloglarinda ne giydiklerini okuyucularina paylastiklari konularinda anlatirlar resimlerini cekip paylasim konularinda ve takilarin cantalarin elbisenin sapkanin falan marka ismini yazarak

sozum size moda blogculari :) artik  bu tur  paylasimlarin gorunusunu daha guzel ve profesyonel bir sekilde yapabilmeniz  mumkundur.

gelelim bu islemin nasil yapildigina

Blogun sablon bolumune geciyoruz > HTMLyi duzenle butonuna tikliyoruz > Widget Şablonlarını Genişlet secenegini seciyoruz 

ondan sonra  crtl ve   f  tuslarini ayni anda basiyoruz ekraninizda  arama kutucugu penceresi  acilacak o pencerede altaki kodu aratiyoruz

]]></b:skin>

ve bu kodu bulduktan sonra bu kodun hemen ustune gelicek sekilde altaki kodu ekliyoruz

.caja3 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja3 img {
width: 300px;
border: 3px solid #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
box-shadow: 1px 1px 4px #333;
}
.info3 {
position: absolute;
top: 30%;
opacity: 0;
width: 200px;
height: 110px;
padding: 5px;
text-align: left;
color: #eee;
background: #C14684; /*Para IE que no soporta RGBA*/
background: rgba(193,70,132,.8);
-moz-transform:rotate(180deg); /*Inicialmente boca abajo*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info3:after {
position: absolute;
top: 0;
right: -120px;
content:"";
display:block; /*Lo siguiente monta el triángulo*/
width:0;
height:0;
border-color:transparent transparent transparent #C14684;
border-color:transparent transparent transparent rgba(193,70,132,.8);
border-style:solid;
border-width:60px;
}
.imagen img {
position: absolute;
top:0;
border: 0;
height: 0; /*Segunda imagen no visible inicialmente*/
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja3:hover .info3 {
filter: alpha(opacity=100);
opacity: 1;
left:-100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.caja3:hover .imagen img {
top:0;
left:0;
height:450px !important;
border: 3px solid #333;
}

kodu ekledikten sonra sablonu kaydet butonuna tikliyoruz..
usteki islemi blogunuzda sadece bir defa yapiyorsunuz birdaha yapmiyorsunuz gelelim ikinci isleme

simdi arkadaslar diyelim ki blogunuzda yeni bir konu acmak istiyorsunuz ve o acicaginiz konuda resimleriniz bu sekilde gostermesini istiyorsaniz eger yapmaniz gereken altaki kodu acicaginiz konuya eklemenizdir..
bu islemi yapmak icin yeni konu actiginiz zaman yeni konu penceresinde uste iki tane buton var bildiginiz gibi Olustur ve HTML siz HTML butonunu tiklayacaksiniz

<div class="caja3"><a href="#"><img src=" resim linkiniz 1 " /><span class="imagen"><img src=" resim linkiniz 2 " /></span><span class="info3"> 
 Gömlek: POLO GARAGE </br>
 Ceket : H&M </br>
 Kolyeler : TWIST </br>
 Ayakkabı : DOLVE VITA </br>
 Çanta : LOUIS VUITTON </br>
 </span></a></div>

usteki kod'da degistirmeniz gereken yerler resim linkiniz 1 ve 2 ondan sonra ceket, kolyeler, ayyakkabi falan buralari sizin istediginize gore degistirebiliriniz
burada dikkat etmeniz gereken ornek kod'da 5 tane bolum var canta gomlek ayakkabi falan 5 bolum idealdir bunu siz 5 ten fazla yaparsaniz goruntutude kayma olabilir..

ÖRNEK (DEMO) GÖRÜNTÜYÜ GÖRMEK İÇİN BURAYA TIKLA

demoda gordugunuz resimler Duygu Senyurek arkadasimiza aittir

yorumlarinizi ve goruslerinizi bekliyorum iyi bloglamalar