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

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

• سجل دخول الي لوحة تحكم بلوجر تصميم – عناصر الصفحه
• قم بتركيب اضافة المشاركات الشائعه تحت منطقة الهيدر مباشرة او فوق منطقة رسائل المدونة الالكترونيه
• قم مجددا بانشاء اداه جديده من نوع جافا سكربت وضع بداخلها الكود الموجود بالاسفل كاملا

<style>

#slider ol,#slider ul,#slider li
 {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
 list-style: none;
 }

.wrapper {
 width: 720px;
 margin: 0 auto;
 position:relative;
}

.clear {
 clear: both;
 }

.display-none {
 display:none;
 }

#slider {
 position: relative;
 top: -2px;
 z-index: 1;
 }

#slider .prev {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
 top: 150px;
 left: -51px;
 }

#slider .next {
 position: absolute;
 width: 21px;
 height: 21px;
 display: block;
 background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
 top: 150px;
 right: -51px;
 }

#slider #slider-wrapper {
 width: 720px;
 height: 300px;
 padding-top: 40px;
 overflow: hidden;
 z-index: 999;
 position: relative;
 }

#slider #slider-inner {
 width:9780px;
 height:300px;
 position:absolute;
 }

#slider .article {
 width: 150px;
 height: 300px;
 float: left;
 margin-right: 30px;
 }

#slider .article img {
 margin-bottom: 25px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
 }

#slider .article h2 {
 margin-bottom: 15px;
 line-height: 18px;
 }

#slider .article h2 a {
 font-size: 18px;
 color: #404040;
 font-weight: bold;
 text-shadow: 0 1px 0 #fff;
 line-height: 23px;
 }

#slider .article .meta-comments a {
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 text-shadow: 0 1px 0 #fff;
 }

#slider .article .item-snippet {
 margin-left: 15px;
 }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

قم بحفظ الاداه وشاهد النتيجه علي صفحة المدونه الرئيسيه