عرض المشاركات الشائعه على شكل سلايدر متحرك جذاب جدا

معظمنا يستخدم سلايدر فى مدونته لعرض تدويناته الهامه وربما لعرض تدويناته المهمله التى يود لفت النظر أو الإنتباه إليها, ولكن كل من يستخدمها يقوم بعملها يدويا, الآن تستطيع إستخدام سلايدر جميل جدا فى مدونتك يقوم بعرض المشاركات الشائعه أوتوماتيكيا, أى أنه يقوم بعرض تدويناتك الأكثر زياره والإكثر شعبيه آليا.

كل ما عليك فعله هو أن تتبع الخطوات السهله التاليه

إذهب إلى تخطيط الصفحه فى قالب مدونتك وقم بإضافة ( المشاركات الشائعه ) فى أعلى مدونتك, ذلك إن لم تكن مضافه بالفعل, فإن كانت مضافه قم بنقلها لأعلى مدونتك فقط.

ثم قم بإضافة أداة HTML / JAVASCRIPT جديده فى العمود الجانبى, وقم بلصق الكود التالى فيها

<style>
* {
    margin: 0;
    padding: 0;
}

body {
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
    border: 10px solid #ccc;
}

.scroll {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
    position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
    height: 318px;
}

#left-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
    padding: 10px;
    border: 1px solid #999;
}

.inside img {
    display: block;
    border: 1px solid #666;
    margin: 0 0 10px 0;
    width: 250px;
}

.inside h2 {
    font-weight: normal;
    color: #111;
    font-size: 16px;
    margin: 0 0 8px 0;
}

.inside p {
    font-size: 11px;
    color: #ccc;
}

a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

a:hover {
    border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

ثم قم بحفظ القالب وشاهد النتيجه الرائعه حقا.