كيفية أضافة المشاركات الأخير على شكل سلايد شو تلقائي مع جي كويري لمدونات بلوجر

زوار ومتابعي المدونة الكرام

أسعد الله أوقاتكم بكل خير ومحبة

في درسنا اليوم سوف نتعرف على إضافة مهمة وجميلة وأحترافية ، إضافة المشاركات الأخير على شكل سلايد شو ، وهذه الأضافة تعرف زوار مدونتك بآخر مواضيع المدونة .

للمعاينة أنقر هنا

- طريقة التركيب :

1-ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- اختر من لوحة التحكم قالب ثم أختر تحرير قالب .

3- إبحث عن الوسم :
]]></b:skin>

4- ضع الكود التالي فوقه .

 /* START EasySlider By homeblog7.blogspot.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By homeblog7.blogspot.com */

4- بعد ذلك ابحث عن الوسم :
</body>

5- ضع الكود التالي فوقه .

 <!-- Start easy content slider by homeblog7.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by homeblog7.blogspot.com -->

6- بعد ذلك ادخل إلى تخطيط ثم إضافة أداة : HTML/JavaScript

7- ضع الكود التالي في صتدوق الأداة ثم إحفظ .

 <div id="slider">
<script style="text/javascript" src="https://googledrive.com/host/0BxFbqjck0GDdbmhVUUxnZG5qRmM"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://homeblog7.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

- التعديلات :
- استبدل رابط مدونتنا برابط مدونتك .