الخميس, أبريل 05, 2012

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

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

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

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

ثم قم بإضافة أداة 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>
ثم قم بحفظ القالب وشاهد النتيجه الرائعه حقا.
من فضلك اضغظ لايك لمشاهدة لينك التحميل

9 تَعْلِيق:

  1. لم تظهر بشكل منسق في مدونتي لم تظهر سوى 4 مشاراكات من اصل 10 ؟؟؟؟؟؟؟؟؟؟؟؟

    ردحذف
  2. يوجد بالاكواد كود مكتبة الجى كويرى وهو التالى
    http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
    برجاء مراعاة عدم وجوده اصلا فى أكواد اتش تى ام ال لقالبك عند اضافة ذلك الكود

    ردحذف
  3. شوف سؤالي اللي في التدوية السابقة يا ياسو :) ضروري و حياتك

    ردحذف
  4. السلام عليكم ورحمه الله وبركاته لو سمحت يا استاز ياسو انا معايه قالب ومحتاج مساعدتك فيه انتا عارف ان مفيش حد دلوقتى بيساعد حد انا املى فى ربنا ثم فيك ودا اميلى يا ريت تكلمنى فى اقرب وقت
    hoda_alngm70@yahoo.com

    ردحذف
  5. السلام عليكم اخي لم تركب جيدا في مدونتي ارجوك ساعدني
    http://3oolom.blogspot.com/


    yahyaw1991@gmail.com

    ردحذف
  6. أزال المؤلف هذا التعليق.

    ردحذف
  7. شكرا جزيلا لك

    مدونة تعلم الالكترونية
    http://ta3allamm.blogspot.com

    ردحذف
  8. يسعدنا زيارتكم فى مدونة جابر حلمى الجامعة الشاملة
    gaberhelmy.blogspot.com

    ردحذف
  9. روعه جداً ، وشكرا ودائما متآلق بواضيعك الآجمل ,, سلمت يمناك ♥

    ردحذف