رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر
تحديث الصفحة شرح تركيب سلايدر احترافي لمدونات بلوجر
التسجيل التعليمـــات التقويم مشاركات اليوم البحث


 
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
السابق المشاركة السابقة   المشاركة التالية التالي
قديم 08-12-2012, 02:36 AM   #1
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
Thumbs up شرح تركيب سلايدر احترافي لمدونات بلوجر
أنا : admin
سجل معنا لتتمتع بهذه الخاصية




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

أولا مشاهدة مثال حي عن السلايدر : مدونة تجريبية

صورة عن السلايدر :



شرح التركيب :

اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم ثم ابحث عن </head> وأضف قبلها مباشرة الكود التالي :

كود PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://bloggerexp.googlecode.com/svn/trunk/coin-slider.min.js' type='text/javascript'/> 

الآن ابحث عن ]]></b:skin> وأضف قبلها مباشرة أيضا الكود التالي :

كود PHP:
/*
 Coin Slider jQuery plugin CSS styles
 http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: right; }
.cs-buttons a { margin-right: 5px; height: 10px; width: 10px; float: right; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { text-align:right; width: 550px; padding:10px; background-color: #000000; color: #FFFFFF; }

.cs-next, 
.cs-prev { background-color: #000000; color: #FFFFFF; padding: 0px 10px; } 

القيمة 550px تُمثِل عرض مستطيل العناوين

الآن اضغط حفظ وتوجه إلى التخطيط (عناصر الصفحة) والصق الكود التالي في أداة HTML/JavaScript فوق مربع التدوينات، لا تنس تغيير ما يناسبك :

كود PHP:
<div id='coin-slider'>
 <a href="رابط الموضوع الأول">
  <img src="رابط صورة الموضوع الأول" />
  <span>عنوان الموضوع الأول</span>
 </a>
 <a href="رابط الموضوع الثاني">
  <img src="رابط صورة الموضوع الثاني" />
  <span>عنوان الموضوع الثاني</span>
 </a>
 <a href="رابط الموضوع الثالث">
  <img src="رابط صورة الموضوع الثالث" />
  <span>عنوان الموضوع الثالث</span>
 </a>
 <a href="رابط الموضوع الرابع">
  <img src="رابط صورة الموضوع الرابع" />
  <span>عنوان الموضوع الرابع</span>
 </a>
</div>
<script type="text/javascript">
 $(document).ready(function() {
  $('#coin-slider').coinslider({ width: 570, height: 250, navigation: true, delay: 5000 });
 });
</script> 

لاحظ أخي أن القيمة 570px تُمثِل العرض الحقيقي للسلايدر ويفضل أن تكون أكبر من القيمة السابقة (الخاصة بعرض مستطيل العناوين) بفارق 20px

لا تنس أن تُزِيحَ الأداة فوق مربع رسائل المدونة الإلكترونية ثم اضغط حفظ :



غير مسجل لا أسامح بنقل الإضافة دون ذكر المصدر.

غير مسجل إذا أعجبتك الإضافة لا تبخل علينا بالنقر على زر أعجبني للفيسبوك أسفله.

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
 

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
مدونات بلوجر, blogger, بلوجر, تركيب, سلايدر, سلايدشو, slider, slideshow

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك
BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
صندوق الإشتراك عن طريق البريد الإلكتروني لمدونات بلوجر (شكل احترافي) ilyass kéng إضافات وأدوات بلوجر 1 03-20-2013 12:47 PM
قالب احترافي مميز 2013 لمدونات بلوجر tafelalt قوالب بلوجر عربية ومعربة 1 01-15-2013 04:35 AM
قالب تايم كوست احترافي لمدونات بلوجر العماد قوالب بلوجر عربية ومعربة 2 12-30-2012 07:20 PM
شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر admin إضافات وأدوات بلوجر 4 07-16-2012 09:20 PM
مساعدة في تركيب سلايدر "ذؤيب" على المدونة ال شاوي ياس طلبات تعديل القوالب 5 06-14-2012 05:28 PM



سياسة الخصوصية - Privacy-Policy - اربط مدونتك بنا - حقوق الملكية والتأليف - الاتصال بنا - معهد خبراء بلوجر - الأرشيف - الأعلى


لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 01:55 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)