Sürgülü Resim Açıklama Gadgeti

Görüntüleme

Merhaba arkadaşlar arşive aldığım kodlar arasında sizinle paylaşabileceğim bir gadgete rastladım.Düzenledim ettim gittim bişiler yaptım işte ortaya da şimdi paylaşacağım sürgülü resim açıklamalı gadget çıktı.Aslında düzenledim derken şimdi bazıları soruyor.Diyorlarki benim için hem arşivden aldım hem de düzenledim,dediklerini aslında duyar gibiyim .Düzenledim derken arkadaşlar kod ingilizce iken türkce haline çevrildi.Bir de bir kaç yeri değiştirdim.Ortaya muhteşem bir gadget çıktı.Bu gadgeti istediğiniz her altyapıda kullanabilir,her alana koyabilirsiniz.Orası size kalmış bir şey.Gadgette bir adet devamını oku butonu var resimin üzerine gelince resim %50 yukarı kayıyor ve resimin açıklaması ile devamını oku butonu ortaya çıkıyor.Css ve şık bir devamını oku butonu,pembe mause ile üzerine gelince pembe renk özelliğini kaybedip siyah renke dönüşüyor.Herneyse lafı uzatmadan kodlara geçeyim.

Demo

<!-- http://www.blogzamane.blogspot.com.tr/ -->
<!-- Kod Paylasim Merkezi -->
<script Language='Javascript'>
<!--
document.write(unescape('%3C%73%74%79%6C%65%3E%0A%0A%0A%75%6C%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%7B%0A%20%20%20%20%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%3B%0A%20%20%20%20%6D%61%72%67%69%6E%3A%20%30%3B%0A%20%20%20%20%70%61%64%64%69%6E%67%3A%20%30%3B%0A%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%20%7B%0A%20%20%20%20%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%20%2E%35%73%3B%0A%20%20%20%20%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%20%2E%35%73%3B%0A%20%20%20%20%2D%6D%73%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%20%2E%35%73%3B%0A%20%20%20%20%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%20%2E%35%73%3B%0A%20%20%20%20%74%72%61%6E%73%69%74%69%6F%6E%3A%20%2E%35%73%3B%0A%20%20%20%20%62%6F%72%64%65%72%3A%20%32%70%78%20%73%6F%6C%69%64%20%74%72%61%6E%73%70%61%72%65%6E%74%3B%0A%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%3A%68%6F%76%65%72%20%7B%0A%20%20%20%20%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%66%6F%72%6D%3A%20%73%63%61%6C%65%28%31%2E%32%29%20%74%72%61%6E%73%6C%61%74%65%28%31%35%70%78%29%3B%0A%20%20%20%20%2D%6D%6F%7A%2D%74%72%61%6E%73%66%6F%72%6D%3A%20%73%63%61%6C%65%28%31%2E%32%29%20%74%72%61%6E%73%6C%61%74%65%28%31%35%70%78%29%3B%0A%20%20%20%20%2D%6D%73%2D%74%72%61%6E%73%66%6F%72%6D%3A%20%73%63%61%6C%65%28%31%2E%32%29%20%74%72%61%6E%73%6C%61%74%65%28%31%35%70%78%29%3B%0A%20%20%20%20%2D%6F%2D%74%72%61%6E%73%66%6F%72%6D%3A%20%73%63%61%6C%65%28%31%2E%32%29%20%74%72%61%6E%73%6C%61%74%65%28%31%35%70%78%29%3B%0A%20%20%20%20%74%72%61%6E%73%66%6F%72%6D%3A%20%73%63%61%6C%65%28%31%2E%32%29%20%74%72%61%6E%73%6C%61%74%65%28%31%35%70%78%29%3B%0A%20%20%20%20%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%20%30%20%32%30%70%78%20%31%70%78%20%23%61%61%61%3B%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%20%7B%0A%20%20%20%20%62%61%63%6B%67%72%6F%75%6E%64%3A%20%6E%6F%6E%65%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%20%20%20%20%6D%61%72%67%69%6E%3A%20%35%70%78%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%20%20%20%20%70%61%64%64%69%6E%67%3A%20%35%70%78%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%20%20%20%20%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%0A%20%20%20%20%63%6C%65%61%72%3A%20%62%6F%74%68%3B%0A%20%20%20%20%6F%76%65%72%66%6C%6F%77%3A%20%68%69%64%64%65%6E%3B%0A%20%20%20%20%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%3B%0A%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%20%2E%61%76%61%74%61%72%49%6D%61%67%65%20%7B%0A%20%20%20%20%70%61%64%64%69%6E%67%3A%20%33%70%78%3B%0A%20%20%20%20%62%61%63%6B%67%72%6F%75%6E%64%3A%20%23%66%65%66%65%66%65%3B%0A%20%20%20%20%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%20%31%70%78%20%31%70%78%20%23%63%63%63%3B%0A%20%20%20%20%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%20%31%70%78%20%31%70%78%20%23%63%63%63%3B%0A%20%20%20%20%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%20%31%70%78%20%31%70%78%20%23%63%63%63%3B%0A%20%20%20%20%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%0A%20%20%20%20%6D%61%72%67%69%6E%3A%20%30%20%36%70%78%20%30%20%30%3B%0A%20%20%20%20%70%6F%73%69%74%69%6F%6E%3A%20%72%65%6C%61%74%69%76%65%3B%0A%20%20%20%20%6F%76%65%72%66%6C%6F%77%3A%20%68%69%64%64%65%6E%3B%0A%7D%0A%2E%61%76%61%74%61%72%52%6F%75%6E%64%20%7B%0A%20%20%20%20%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%31%30%30%70%78%3B%0A%20%20%20%20%2D%6D%6F%7A%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%31%30%30%70%78%3B%0A%20%20%20%20%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%20%31%30%30%70%78%3B%0A%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%20%69%6D%67%20%7B%0A%20%20%20%20%70%61%64%64%69%6E%67%3A%20%30%3B%0A%20%20%20%20%70%6F%73%69%74%69%6F%6E%3A%20%72%65%6C%61%74%69%76%65%3B%0A%20%20%20%20%6F%76%65%72%66%6C%6F%77%3A%20%68%69%64%64%65%6E%3B%0A%20%20%20%20%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%0A%7D%0A%2E%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%6C%69%20%73%70%61%6E%20%7B%0A%20%20%20%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%33%70%78%3B%0A%20%20%20%20%63%6F%6C%6F%72%3A%20%23%36%36%36%3B%0A%20%20%20%20%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%0A%20%20%20%20%66%6F%6E%74%2D%73%69%7A%65%3A%20%31%32%70%78%3B%0A%20%20%20%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%20%31%2E%34%3B%0A%7D%0A%0A%23%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%2E%69%6E%66%6F%20%7B%0A%20%20%20%20%74%65%78%74%2D%61%6C%69%67%6E%3A%20%72%69%67%68%74%3B%0A%20%20%20%20%68%65%69%67%68%74%3A%31%2E%32%65%6D%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%20%20%20%20%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%0A%20%20%20%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%20%31%65%6D%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%7D%0A%23%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%20%2E%69%6E%66%6F%20%61%20%7B%0A%20%20%20%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%20%62%6F%6C%64%3B%0A%20%20%20%20%66%6F%6E%74%2D%73%69%7A%65%3A%20%31%31%70%78%3B%0A%20%20%20%20%63%6F%6C%6F%72%3A%20%23%41%41%41%3B%0A%20%20%20%20%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%0A%7D%0A%23%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%3A%68%6F%76%65%72%20%2E%69%6E%66%6F%20%61%20%7B%0A%20%20%20%20%64%69%73%70%6C%61%79%3A%69%6E%6C%69%6E%65%21%69%6D%70%6F%72%74%61%6E%74%3B%0A%7D%0A%0A%0A%2E%69%6D%61%67%65%2D%62%6F%78%20%7B%0A%20%20%77%69%64%74%68%3A%32%38%30%70%78%3B%68%65%69%67%68%74%3A%32%38%30%70%78%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%77%68%69%74%65%3B%0A%20%20%62%6F%72%64%65%72%3A%31%70%78%20%73%6F%6C%69%64%20%23%63%63%63%3B%66%6C%6F%61%74%3A%6C%65%66%74%3B%6D%61%72%67%69%6E%3A%31%70%78%20%31%70%78%3B%0A%20%20%66%6F%6E%74%3A%6E%6F%72%6D%61%6C%20%6E%6F%72%6D%61%6C%20%31%32%70%78%2F%31%2E%34%20%53%65%67%6F%65%2C%22%53%65%67%6F%65%20%55%49%22%2C%41%72%69%61%6C%2C%53%61%6E%73%2D%53%65%72%69%66%3B%0A%20%20%63%6F%6C%6F%72%3A%23%33%33%33%3B%0A%7D%0A%2E%69%6D%61%67%65%2D%63%6F%6E%74%61%69%6E%65%72%2C%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%7B%68%65%69%67%68%74%3A%32%38%30%70%78%3B%62%6F%72%64%65%72%3A%35%70%78%20%73%6F%6C%69%64%20%77%68%69%74%65%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%23%66%66%63%3B%0A%20%20%74%72%61%6E%73%69%74%69%6F%6E%3A%6D%61%72%67%69%6E%2D%74%6F%70%20%2E%34%73%20%65%61%73%65%2D%6F%75%74%20%2E%34%73%3B%0A%7D%0A%2E%69%6D%61%67%65%2D%63%6F%6E%74%61%69%6E%65%72%20%69%6D%67%20%7B%0A%20%20%77%69%64%74%68%3A%32%38%30%70%78%3B%68%65%69%67%68%74%3A%32%38%30%70%78%3B%70%61%64%64%69%6E%67%3A%30%20%30%3B%6D%61%72%67%69%6E%3A%30%20%30%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%3B%6F%75%74%6C%69%6E%65%3A%6E%6F%6E%65%3B%6D%61%78%2D%77%69%64%74%68%3A%6E%6F%6E%65%3B%0A%20%20%6D%61%78%2D%68%65%69%67%68%74%3A%6E%6F%6E%65%3B%0A%20%20%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%62%6C%61%63%6B%3B%0A%7D%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%68%34%2C%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%70%20%7B%0A%20%20%6D%61%72%67%69%6E%3A%30%20%30%20%2E%32%65%6D%3B%70%61%64%64%69%6E%67%3A%30%20%30%3B%68%65%69%67%68%74%3A%37%30%70%78%3B%0A%7D%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%68%34%20%7B%0A%20%20%66%6F%6E%74%2D%73%69%7A%65%3A%31%32%30%25%3B%68%65%69%67%68%74%3A%61%75%74%6F%3B%0A%7D%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%2E%64%65%74%61%69%6C%73%20%7B%0A%20%20%70%61%64%64%69%6E%67%3A%31%30%70%78%20%31%32%70%78%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%0A%7D%0A%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%2E%6D%6F%72%65%20%7B%0A%20%20%63%6F%6C%6F%72%3A%77%68%69%74%65%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%0A%20%20%74%65%78%74%2D%61%6C%69%67%6E%3A%63%65%6E%74%65%72%3B%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%23%66%39%61%3B%68%65%69%67%68%74%3A%32%36%70%78%3B%6C%69%6E%65%2D%68%65%69%67%68%74%3A%32%36%70%78%3B%6D%61%72%67%69%6E%3A%31%30%70%78%20%30%20%30%3B%0A%7D%0A%0A%2E%69%6D%61%67%65%2D%62%6F%78%3A%68%6F%76%65%72%20%7B%62%6F%72%64%65%72%2D%63%6F%6C%6F%72%3A%23%62%62%62%3B%20%77%69%64%74%68%3A%32%38%30%70%78%3B%0A%20%20%68%65%69%67%68%74%3A%32%38%30%70%78%3B%7D%0A%2E%69%6D%61%67%65%2D%62%6F%78%3A%68%6F%76%65%72%20%2E%69%6D%61%67%65%2D%63%6F%6E%74%61%69%6E%65%72%20%7B%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%31%36%30%70%78%7D%0A%2E%69%6D%61%67%65%2D%64%65%74%61%69%6C%73%20%2E%6D%6F%72%65%3A%68%6F%76%65%72%20%7B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%62%6C%61%63%6B%7D%0A%3C%2F%73%74%79%6C%65%3E%0A'));
//-->
</Script>


<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFgpVDEWb8F0h4yU-BQlgVtAodREZgwTLw1go3pPbLf52eSXzzWpBbBXp8MTC4YRumOVUJvleIlkxZMiuVeLhQz5VHUPLd74QgeGonaUGYP5pg0W53w3c7rqPkQsCPW6uaOO5bjq6jGw/s1600/3.jpg" alt="Food">
  </div>
<div class="image-details">
   <div class="details">
    <h4>
Buraya başlık</h4>
<p>
Merhaba Arkadaşım!<br/>Bu kodu blogzamane'den aldım.Teşekkür olarak ise yorum atmayı hoş gördüm.
</p>
<p>
<a class="more" href="Link buraya">Devamını Oku</a></p>
<script Language='Javascript'>
<!--
document.write(unescape('%3C%2F%64%69%76%3E%0A%20%20%3C%2F%64%69%76%3E%0A%20%3C%2F%64%69%76%3E%0A%20%0A%0A%20%3C%64%69%76%20%73%74%79%6C%65%3D%22%63%6C%65%61%72%3A%62%6F%74%68%3B%22%3E%3C%2F%64%69%76%3E%0A%0A%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%22%62%74%74%5F%72%65%63%65%6E%74%5F%63%6F%6D%6D%65%6E%74%73%22%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%69%6E%66%6F%22%3E%3C%61%20%72%65%6C%3D%1D%65%78%74%65%72%6E%61%6C%1D%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%6C%6F%67%7A%61%6D%61%6E%65%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%20%74%69%74%6C%65%3D%22%4B%6F%64%75%20%53%69%74%65%6E%65%20%45%6B%6C%65%22%3E%53%69%74%65%6E%65%20%45%6B%6C%65%3C%2F%61%3E%3C%2F%64%69%76%3E%3C%2F%64%69%76%3E'));
//-->
</Script>
<!-- Kod Paylasim Merkezi -->
<!-- http://www.blogzamane.blogspot.com.tr/ -->

• Kod içerisinde şifreli kısımlara dokunmayınız!#Aksi taktirde kod çalışmaz.
• Kod içerisinde gerekli kısımları kendinize göre doldurunuz.