14 Mayıs 2013 Salı
resimlerinize görsellik"de zenginlik kazandırcak, bu güzel eklentiyi sizlerle paylaşmak istedim.
bu eklentiyi nasıl ekleyeceginizi. resimli bir anlatım yapmak istedim. yeni başlayan ardaşlarımız icin ve bilmeyen arkadaşlar icin resimli, anlatım yapmak istedim. uygulamamıza başlamadan önce. demo görüntüsüne bakabilirsiniz.
şimdi gölgeli ve genişleyen resim eklentisi beğendiyseni uygulamaya başlayalım.
ilk olarak blogger sitemize giriş yapalım.
1 Adım Konturol panelinden aşagıda ki resimde gördügünüz gibi şablon sekmenine tıklayalım.
2 Adım : açılan sayfada resimde gördügünüz gibi html"yi düzenle butonuna basalım.
3 Adım : Ctrl + F yardımı ile açılan kod kutusu yerine ]]></b:skin> kodunu yapışdıralım. ve aratalım kodumuzu buldukdan sonra aşagıda"ki resimde ki gibi ]]></b:skin> kodunun hemen üstüne gelcek şekilde yapışdıralım.
<blockquote class="tr_bq">
.MBT-CSS3 img{ -webkit-transform:scale(<span style="color: red;">0.7</span>); /*Webkit 0.7 times the original Image size*/ -moz-transform:scale(<span style="color: red;">0.7</span>); /*Mozilla 0.7 times the original Image size*/ -o-transform:scale(<span style="color: red;">0.7</span>); /*Opera 0.7 times the original Image size*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla Animation duration*/ -o-transition-duration: 0.5s; /*Opera Animation duration*/ opacity: <span style="color: blue;">0.5</span>; margin: 0 10px 5px 0; } .MBT-CSS3 img:hover{ -webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/ box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; }</blockquote>
<div>
<br /></div>
<br />
<div class="MBT-CSS3">
</div>
- Resim genişligini degişdirmek isterseniz kırmızı ile işaretledigim yerlerle oynayabilirsiniz.
- Gölgelik alanını büyüklügüle genişletmek isterseniz mavi ile işaretledigim yerle oynayabilirsiniz.
Resim efekti kulanmanız icin gereken kod aşagıda verecegi kodu. nerde kulanmak istiyorsanız oraya ekleyerek kulanabilirsiniz. resim url yazan yere resim url koyunuz.
<div class="MBT-CSS3">
<img src="Resim Urlsi" />
</div>Resim efekti uygulamamız bitmişdir. bir başka paylaşımda görüşmek üzere..
