المشاركات الشائعه بشكل جديد ومتحرك بخاصية الانيميشن

السلام عليكم ورحمة الله وبركاته موعدنا اليوم مع درس تعددت اشكاله ويبق التطبيق كما هو في جميع الحالا اسهل مما يكون

مع اضافه جماليه تضفي على المدونه رونق واحترافيه عاليه ..المشاركات الشائعه بشكل جديد ومتحرك بخاصية الانيميشن.

لرؤية مثال على الاضافه شاهد الرابط التالى ...
ان اعجبتك شكل الاضافه قم بتطبيق ما يلي سجل دخول الى لوحة تحكم مدونتكاذهب الى تصميم – عناصر الصفحه

قم باختيار اداه جديده “واختر المشاركات الشائعه”(ان كانت مضافه عندك من قبل لا تقم باضافتها ثانية)
فوقها مباشرة قم بفتح اداه جديده “من هذا النوع جافا سكربت “HTML/Javascript”
كما في الصوره بالاسفل وضع داخل الاداه الكود الموجود في الصوره المرفقه داخل التدوينه وقم بحفظها.

Explanation of Popular Post with Animation

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

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

الموضوع الاصلي (www.abu-farhan.com)