Blogunuza ekleyebileceğiniz bu eklenti animasyonlu, Resimli, son yazdığınız yazılarınızın kayarak aşşağı doğru akarak, listeleyen, bir jquery eklentisi. Bu klasik son yazılar eklentisilerinden farklı, dönerek zoom resim animasyonuyla sitenize renk katacak çok şık bir eklenti. Örnek için blogumun alttaki footer bölümüne bakabilirsiniz.
● Blogger animasyonlu, Resimli Son Yazılar Eklentisi.
● Aşağıya doğru kayan Jquery stil.
● Animated Scrolling Recent Post Widget.
Aşşağıdaki eklenti oluşturucuyla eklentinizi oluşturabilir,blogunuza ekleyebilirsiniz.
1. Kumanda paneline giriş yapın.
2. Yerleşim › Gadget ekle › HTML/Javascript bulun.
3. Aşağıda Oluşturduğunuz kodu kopyalayıp yapıştırın.
Yada aşağıdaki kodu manuel olarak blogunuza ekleyebilirsiniz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
#MEF-widget{overflow:hidden;margin-top:5px;height:385px;padding:0;}
#MEF-widget ul{width:295px;overflow:hidden;list-style-type:none;margin:0;padding:0;}
#MEF-widget li{width:282px;list-style-type:none;float:none;height:80px;overflow:hidden;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamPG3F6IhSVvb5_-ux7lr85wHxT1P1hSxbGCV55pn5YPlcI1QMVdN2y95OHUTq5Kj6cnsxI_ePJeV_DaR1EN5TTOXrvfscKdS0d4dKlfzVwCVlxJc_RDjB20rUmlxKS55CgIkPddE4-s0/s1600/Son_Konularmef.jpg) repeat-x;border:1px solid #ddd;margin:0 0 5px;padding:5px;}
#MEF-widget li a{text-decoration:none;color:#4B545B;font-size:13px;height:18px;overflow:hidden;margin:0;padding:0 0 2px;}
#MEF-widget img{float:left;margin-top:10px;margin-right:15px;background:#EFEFEF;border:0;}
#MEF-widget img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;background:-webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);-moz-box-shadow:0 0 3px rgba(0,0,0,.7);box-shadow:0 0 3px rgba(0,0,0,.7);padding:4px;}
#MEF-widget img:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
.spydate{overflow:hidden;font-size:10px;color:#0284C2;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;margin:1px 0 0;padding:2px 0;}
.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;margin:0;padding:0;}
</style>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 13;
acolor = "#666";
aBold = true;
icon = " ";
text = "Yorum";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://MeftunMede.Blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="MEF-widget">
<script src='http://meftun-mede.googlecode.com/svn/trunk/Resimli_kayan_son_konular_eklentisi.js' type='text/javascript'></script>
</div>
Kod içinde;
boxwidth : Eklentinin genişliğini ayarlayabilirsiniz.
numposts : Konu sayısını ayarlayabilirsiniz.
limitspy : Eklentide görünen kolon sayısı.
intervalspy : kaydırma hızı.
home_page: blogunuzun adresini yazın.(Sonundaki "/" slash sembolu kalacak.)
Kodu denemek için Online html editor'ü kullanabilirsiniz.Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...
