طريقة إضافة سلايدشو slideshow لمدونة بلوجر.

اليوم أتيتكم بأسهل طريقة لتركيب السلايد شو لمدونات بلوجر

الطريقة تتوافق مع جميع القوالب

طريقة تركيب الاضافة

توجهو ا الى تصميم >> تحرير html >> توسيع القالب علامة صح >> ctrl+f

وابحث عن الكود التالى

< head/>

ولاتنسى اخذ نسخه من القالب

ثم انسخ هذا الكود قبله مباشرة

<script

src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'

type='text/javascript'></script><br />
<br />
<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images

slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('
<li id="slideshow-caption" class="caption"><div
class="slideshow-caption-container">
<h3>
</h3>
</div>
</li>
');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow
a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow
a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') :
$('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back
 to the first image
var next = ((current.next().length) ? ((current.next().attr('id') ==
'slideshow-caption')? $('ul.slideshow li:first') :current.next()) :
$('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher
z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script><br />
<style type="text/css">
ul.slideshow {
list-style:none;
width:400px;
height:250px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:400px;
height:250px;
border:none;
}
#slideshow-caption {
width:500px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

ثم قم بحفظ العمل

وتوجه الى لوحة التحكم >> اضافة اداة ( الافضل فى اعلى المدونه ) >> ثم html/javaScrept

ومن ثم قم باضافة الكود التالى مع مراعاة التغيرات

<ul

class="slideshow">

<li><a href="ضع هنا رابط التدوينه1"><img src="ضع هنا رابط

الصورة1="عنوان الموضوع1" alt="" /></a></li>

<li><a href="رابط التدوينه2"><img src="ضع هنا رابط صورة

الموضوع2" title="عنوان الموضوع 2" alt="" /></a></li>

<li><a

href="http://bolggerfans.blogspot.com/"><img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNmiAxLRmkQJu_cqmXlLymsYhcvZhKMrerYB5fRKeRZO99Ep22KblcILeBvdVY6Xvc1CW0jVCJL9u_QeOhQF-DGWImDeHKAdSGlRrhoZ9HE010QBILySGCxSaa9XbVSsmVd1GfIWAGIQ/s1600/.jpg"

title="اكبر 5 اخطاء يقع فيها المدون" alt="" /></a></li>

<li><a

href="http://bolggerfans.blogspot.com/"><img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lJS2zRCm34bCnGfAZB1QrHUvR6c2yIV3AsMXl1btgQYD8ORmPlIqtkTh6o6aWybw4hyphenhyphenpRsxsWWTEDg5j0h85t3330YonQzIu3C6xSGlWeleU3zyE2toJwExZK5yboxg1DJm0fEbtkuw/s1600/.jpg"

title="أدسنس ..وما وراء السر العظيم" alt="" /></a></li>

<li><a

href="http://bolggerfans.blogspot.com/"><img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1guiDg_X95DtliFagfK_91USyWLI-tZP09xRviUx9ZRdXhKw3XteNdV0I5Z7kV3mVAnFCrFeFu6CjVgBWDu7YxBBLZnDLJY8mMeWEg-IxaRfDB7b9nyKv34Y1liN0L7-0UeIoBSwLIo/s1600/.jpg"

title="Alexaمـاهـواليكسا" alt="" /></a>

</li>

<li><a

href="http://rain7.blogspot.com/2012/09/blog-post_4.html"><img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYw-iSY2HfNOVNgb4MCjCUkYDVvDNh1NTui0FNvk2a0SAe9ODyxHXfTViX4Vt9AAImTbnA4u4ih3pTGi6oZqnhFWMv25qehzeLLIBR2pPLdddmau6OlgwEHDjTCRn1_aCFLT2dZWWID60/s1600/.jpg"

title="حمل عدد لامتناهى من البرامج بضغظة زر" alt=""

/></a></li>

</ul>

ضع هنا رابط التدوينه >> قم بتغيرها برابط الموضوع الاول
ضع هنا رابط الصورة >> وهى ان تقوم بالضغط على صورة الموضوع لو فتح فى صفحه جديده قم بنسخ الرابط
او ان تضغط كليك يمين على الصورة ونسخ الرابط url
عنوان الموضوع >> وهو عنوان التدوينه المطلوبه