Blogger Resimleriniz Mouse İle Canlansın

Benimde çok hoşuma giden ve ayrıca şuan için kullandığım resimleri mouse ile büyültüp küçültmeyi ilk yazımda sizlerle paylaşıyorum. Daha önce başka bir yerde görmedim. Orda burda varmıdır? bilmem. Neyse sizlerden de görmeyen var ve kullanmaya değer diyenleri varsa yazının gerisinde bana eşlik eder artk :)


Başlamadan önce lütfen şablonunuzun yedeğini alın ne olur ne olmaz :)



Yukarıda ki resimde olduğu gibi bir canlandırma yapmak çok fazla vaktimizi almadan 3 kolay adımda bitiyor.

1. HTML'yi Düzenle--->Widget Şablonlarını Genişlet diyoruz ve ctrl+f ile aşağıdaki küçük kodu buluyoruz.

]]></b:skin>

Bulduğumuz bu kodun hemen üst satırına alttaki kodu ekliyoruz.

{
img.expando{
border: none;
vertical-align: top;
{

2. Önce  "expando.js" dosyasını hotlinkfiles veya googlepage gibi ".js" uzantılı dosyaları barındırabileceğiniz bir siteye yüklüyoruz. Sonra yine arama ile aşağıdaki kodu buluyoruz.

</head>

Üste bulduğumuz kodun hemen üzerine aşağıdaki kodu yapıştırıyoruz..

<script type="text/javascript" src="expando.js">
</script>

Verilen koddaki expando.js kısmına yüklediğiniz dosyasının url'sini yazıyoruz. Sonra kaydedip çıkıyoruz.

3.Yazı yazarken ekleyeceğimiz resim url'sini alttaki kodun renkli kısmına ekliyoruz. Birden fazla resim için bu kodu çoğaltmak mümkün.

<p>
<img class="expando" border="0" src="amster2.jpg" width="100" height="75">
<img class="expando vacation" border="0" src="amster3.jpg" width="100" height="66">
<img class="expando" border="0" src="amster4.jpg" width="100" height="75">
</p>

<p>
<img class="expando cat" border="0" src="cat.png" width="200" height="88"></p>

Burada küçük bir ayrıntı olarak resmin ilk boyutunu ( width="200" height="88" ) keyfimize göre değiştirebiliriz.