إضافة أداة مشاركات شائعه متحركه لبلوجر Animated Recent Posts With Spy

بسم الله والحمد لله
موضوع اليوم عن كيفيه إضافة أداه مواضيع شائعه أو مشاركات شائعه بالصور والنصوص ومتحركه بطريقه جميله جدا من أعلى إلى أسفل ولكن أولا أريد أن أقدم جزيل الشكر إلى  Abu-Farhan
للشرح تابع الأتى
-- سجل دخولك فى مدونتك بلوجر
-- إنتقل إلى التصميم >> إضافة أداه >> HTML JAVASCRIBT
-- ضع الكود التالى بها وأختر عنوان لها 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">

<!--



#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYmEhp3AToYCyL0Lc8ZK3wMxfSOqH4Fi9CxX6ud4r9jB806Xl1lU1YSWarAEr_8bT4awOujmdQbv6PsOOrXqMcDXY3rfLhbIReMgvLzqwYyaeTd3lflE2ymjNoTXKTZVaLZCNqkSn5jEs7/s1600/bdlab-blogspot-com.jpg) repeat-x;

border:1px solid #ddd;

}



#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}



.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}



-->

</style>



<script language='JavaScript'> 



imgr = new Array();



imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwgL1zCc9PGRx5yqjbsGbdtGiGd4vcnDElj6-5F0OpBBGLetmGK3qz93gurP9KS8lqjgBj9OAm4KXF7cMbrn38JqIg-2_HGTVBorZg3kyGwal42yb8f9kOX6ZaKqF4fgRCzG0TyJGrmA/s400/noimage.png";



imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwgL1zCc9PGRx5yqjbsGbdtGiGd4vcnDElj6-5F0OpBBGLetmGK3qz93gurP9KS8lqjgBj9OAm4KXF7cMbrn38JqIg-2_HGTVBorZg3kyGwal42yb8f9kOX6ZaKqF4fgRCzG0TyJGrmA/s400/noimage.png";



imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwgL1zCc9PGRx5yqjbsGbdtGiGd4vcnDElj6-5F0OpBBGLetmGK3qz93gurP9KS8lqjgBj9OAm4KXF7cMbrn38JqIg-2_HGTVBorZg3kyGwal42yb8f9kOX6ZaKqF4fgRCzG0TyJGrmA/s400/noimage.png";



imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwgL1zCc9PGRx5yqjbsGbdtGiGd4vcnDElj6-5F0OpBBGLetmGK3qz93gurP9KS8lqjgBj9OAm4KXF7cMbrn38JqIg-2_HGTVBorZg3kyGwal42yb8f9kOX6ZaKqF4fgRCzG0TyJGrmA/s400/noimage.png";



imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwgL1zCc9PGRx5yqjbsGbdtGiGd4vcnDElj6-5F0OpBBGLetmGK3qz93gurP9KS8lqjgBj9OAm4KXF7cMbrn38JqIg-2_HGTVBorZg3kyGwal42yb8f9kOX6ZaKqF4fgRCzG0TyJGrmA/s400/noimage.png";

showRandomImg = true;



boxwidth = 255;



cellspacing = 6;



borderColor = "#232c35";



bgTD = "#000000";



thumbwidth = 70;



thumbheight = 70;



fntsize = 12;



acolor = "#666";



aBold = true;



icon = " ";



text = "comments";



showPostDate = true;



summaryPost = 40;



summaryFontsize = 10;



summaryColor = "#666";



icon2 = " ";



numposts = 10;



home_page = "http://hend-moments.blogspot.com/";



limitspy=4

intervalspy=4000



</script>



<div id="spylist">

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>

</div>

ملحوظه
هناك أشياء عليك بتغييرها
-- غير home_page بعنوان مدونتك
-- تستطيع تغيير العروض عن طريق  width : 220px;
width:208px:

-- تستطيع تغيير أحجام الصور عن طريق  thumbwidth = 70;

thumbheight = 70;

-- عدد المواضيع التى تريد أن تظهر عن طريق  numposts = 10;

Share

Tweet abuiyad