احدث اضافه للمشاركات الشائعه بشكل جديد ومتحرك لــ مدونات بلوجر

 

بسم الله والحمد لله والصلاه والسلام على اشرف خلق الله سيدنا محمد صلُ الله عليه وسلم.

نتطرق اليوم اخوتى لأحدث اضافه للمشاركات الشائعه كما بمواقع الاخبار والمواقع الكوبرى وهى شريط بأخر الاخبار 

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

لرؤيه مثال اضغط هنا

لتركيب الاضافه تابع معى.

من لوحه التحكم اختار تصميم ثم اضافه اداه اختار HTML/JavaٍScript 

ثم اضف الكود التالى بداخلها..

<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>a

واضغط حفظ.ثم اضف اداه المشاركات الشائعه ورتبهم كما بالصوره

ثم اضغط حفظ التغيرات ومبروك عليك.

تم بحمد الله