EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

سلايدر آخر مواضيع المدونة بشكل جديد

السلام عليكم
إخواني الكرام كيف الحال اليوم بإذن الله سأقدم لكم سلايد جديد ومميز يخص آخر مواضيع المدونة
يضهر مواضيع المدونة ككل وليس قسم معين وهذا شيئ جيد ويبحث عنه الكثيرين
كي لا اطيل عليكم صورة من الإضافة

سلايدر آخر مواضيع المدونة بشكل جديد

كما ترون في الصورة السلايدر يضهر صورة مصغرة زائد العنوان بالإضافة إلى ملخص صغير من الموضوع
يمكنك التحكم في عدد المواضيع التي تريد إظهارها ويوجد زرين لتصفح المواضيع بطريقة أسهل وأسرع
والجميل في هذا السلايدر هو سهولة التركيب

لإضافته لمدونتك قم بإضافة أداة جديدة ثم ضع فيها هذا الكود

<style>
/*!
 * Custom TinyCarousel for Blogger by Taufik Nurrohman
 * Visit: http://www.dte.web.id
 */

.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;
  text-align:right;
}
.tinycarousel-viewport {
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;
}
.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:white;
  color:#666;
}
.tinycarousel-inner {
  padding:10px;
  border:1px solid #ccc;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}
li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0;
  padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 0;
  background:none;
}
.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;
}
.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;
}
.tinycarousel-footer {
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(#555,#333);
  background-image:-moz-linear-gradient(#555,#333);
  background-image:-ms-linear-gradient(#555,#333);
  background-image:-o-linear-gradient(#555,#333);
  background-image:linear-gradient(#555,#333);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
}
.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#666;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 2px 0 0;
  color:white;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
}
.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;
}

/* Orientasi Vertikal */
.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;
}
.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;
}
.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom:0;
}
    </style>
<div id="tinycarousel-container" class="tinycarousel"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var tinycarousel_config = {
    url: 'http://www.arabe-eye.com/',
    numPosts: 12,
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "يناير",
        "فبراير",
        "مارس",
        "أبريل",
        "ماي",
        "يونيو",
        "يوليوز",
        "غشت",
        "شتمبر",
        "أكتوبر",
        "نوفمبر",
        "دجنبر"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    nav: {
        prevText: '&gt;',
        nextText: '&lt;',
        showText: 'هنا {num} موضوع'
    },
    carousel: {
        axis: "x",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>

أهم خطوة هي تغيير رابط مدونتي برابط مدونتك
ثم للتحكم بعدد المواضيع التي تريد إظهارها في السلايدر غير القيمة 12 هنا numPosts: 12
هذه اهم التغيرات التي يجب عليك القيام بها نصيحة بسيطة أرى ان افضل مكان لوضع السلايد هو الأسفل
يمكن إعتباره كسلايدر الفوتر :)

أتمنى ان يعجبكم بالتوفيق للجميع ودمتم في رعاية الله وحفظه

هناك تعليقان (2):

  1. تظهر التسميات لاكن لا تظهر صور المواضيع
    ممكن توضيح السبب

    ردحذف
  2. أخي في الغالب المشكل ان الصور من موقع اخرى بينما يجب ان تكون الصور مرفوعة من بلوجر نفسه أتناء كتابة الموضوع وليس فقط نسخها من مواقع اخرى

    ردحذف

التالي السابق الرئيسية