إضافة سلايدر أفقي لأخر المواضيع

السلام عليكم ورحمة الله وبركاته.
درس اليوم هو عن طريقة إضافة سلايد شو slideshow أفقي لمدونة بوجر .

أولا نستعرض مميزات سلايد شو slideshow الذي سنقوم بإضافته:
1. سهل التركيب و للغاية .
2. أنيق و غاية في الروعة .
3. يتناسق تلقائيا مع أي قالب(في ما يخص الأحجام) .
4. يعرض المواضيع بصورة تلقائية من دون أي تدخل منك .
5. لا يأثر على سرعة تحميل المدونة .

طريقة إضافة الأداة :

1. توجه للوحة التحكم الخاصة بمدونتك .
2. إختر تخطيط .
3. إضافة أداة .
4. ضع الكود التالي داخل مستطيل الأكواد الخاصة بالأداة:

<table border='0' bordercolor='#32B8DC' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>
<style text-type='CSS'>
img.label_thumb {float:right;padding:2px;background:#32B8DC;border:1px solid #070B06;width:80px;height:78px;margin-right:4px;margin-top:5px;margin-bottom:5px; }
img.label_thumb:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.8 }
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"https://sites.google.com/site/youmdamcom/no.png",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
var numposts = 11;
</script>
<script src='http://hanafi-hanga.blogspot.com/feeds/posts/default?alt=json-in-script&callback=labelthumbs' type='text/javascript'></script>
</td>
</tr>
</table>

5. قم بتغير ما كتب بالأحمر برابط مدونتك .
6. قم بحفظ الأداة .

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

شارك هذه الصفحة وتابعنا على صفحاتنا الرسمية

شارك الموضوع →

تويت

تابعنا →

إنشر الموضوع →