»نشرت فى : الأحد، 2 فبراير 2014»بواسطة : »هناك تعليق واحد

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

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

 

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


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

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


<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://alahaywat.blogspot.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
هذه اهم التغيرات التي يجب عليك القيام بها نصيحة بسيطة أرى ان افضل مكان لوضع السلايد هو الأسفل
يمكن إعتباره كسلايدر الفوتر :)
المصدر
عين العرب

    اضف تعليقاً عبر:

  • blogger
  • disqus

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

كافة الحقوق محفوظة لمدونة واحــة الأحيـــــــــــــــــــــوات/ سالم بن فريج الأحيوي / 2016