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

 

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




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 07-16-2012, 09:34 AM   #1
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
Thumbs up شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

أنا : admin




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

أولا صورة ومثال حي عن السلايدر :

صورة السلايدر الأوتوماتيكي :



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

من أهم مميزات هذا السلايدر أنه يشتغل ذاتيا "أوتوماتيكيا" بالإضافة إلى أنه يتيح لك إما عرض ’خر مواضيع المدونة أو عرض مواضيع عشوائية.

الآن شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر :

1- من تحرير HTML علم على توسيع قوالب عناصر واجهة المستخدم وابحث عن :

كود:
]]></b:skin>

أضف قبل هذا الكود مباشرة الكود التالي :

كود:
/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
right:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
left:0px;
text-align:right;
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;
right:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
right:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
right: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/next.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.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:right;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:right;
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
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

ومن تحرير HTML ابحث عن :

كود:
</body>

وأضف قبلها الكود التالي :

كود:
<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='https://bloggerexp.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

وأخيرا وليس أخيرا اضغط حفظ.

2- من تصميم ثم عناصر الصفحة قم بإضافة أداة HTML/JavaScript والصق الكود التالي :

كود:
<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 3;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://arblogger-templates.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
مع تغيير :
  • http://arblogger-templates.blogspot.com برابط مدونتك
  • var numposts_gal = 3 : هو عدد المواضيع المراد عرضها بالسلايدر
  • var numchars_gal = 150; : هو عدد حروف الوصف
  • var random_posts = false; // random posts : اجعله false لعرض آخر المواضيع أو true لعرض مواضيع عشوائية.
وقم بحفظ الأداة وإزاحتها إلى المكان الذي تريد عرض سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر عليه.

الدعم العربي

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

مركز رفع موسوعة العربية
قديم 07-16-2012, 02:19 PM   #2
orix
مدون جديد
 
تاريخ التسجيل: Jun 2012
المشاركات: 63
افتراضي رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

أنا : orix




هايل .. شكراً لك

وسؤالي هو .. يوجد في قالب مدونتي سلايدر ذاتي آخر.. أريد تغييره

هل توجد خطوات لحذفه أم أقوم بتطبيق هذا الشرح فقط ؟

الدعم العربي

orix غير متواجد حالياً   رد مع اقتباس
قديم 07-16-2012, 03:10 PM   #3
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة orix مشاهدة المشاركة
هايل .. شكراً لك

وسؤالي هو .. يوجد في قالب مدونتي سلايدر ذاتي آخر.. أريد تغييره

هل توجد خطوات لحذفه أم أقوم بتطبيق هذا الشرح فقط ؟
تم رفع القالب جاهز في طلبك http://www.bloggerexp.com/showthread.php?t=2728&page=2

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
قديم 07-16-2012, 06:11 PM   #4
أسامة المسيلي
مدون نشيط
 
تاريخ التسجيل: May 2012
المشاركات: 117
افتراضي رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

أنا : أسامة المسيلي




بارك الله فيك على الإضافة الجميلة اخ عثمان

الدعم العربي

أسامة المسيلي غير متواجد حالياً   رد مع اقتباس
قديم 07-16-2012, 09:20 PM   #5
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

أنا : admin




اقتباس:
المشاركة الأصلية كتبت بواسطة أسامة المسيلي مشاهدة المشاركة
بارك الله فيك على الإضافة الجميلة اخ عثمان
العفو أخي الكريم

الدعم العربي

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

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

الكلمات الدليلية (Tags)
مدونات, automatic slider, أوتوماتيكي, بلوجر, تشغيل ذاتي, سلايدر, شرح, إضافة


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
إضافة زر "أعجبني" من فيسبوك الى تدوينة بلوجر abdoumara إضافات وأدوات بلوجر 6 03-01-2013 05:46 PM
أداة "موضوع عشوائي" لمدونات بلوجر abdoumara إضافات وأدوات بلوجر 0 02-01-2013 09:24 PM
مساعدة حول "كيفية إضافة أو تغيير ايقونة المدونة في بلوجر" Youness طلبات الدعم الفني 5 11-02-2012 10:09 PM
إضافة "متابعة عبر البريد الاكتروني" في بلوجر بلال حمدان إضافات وأدوات بلوجر 1 10-09-2012 02:58 PM
مساعدة في تركيب سلايدر "ذؤيب" على المدونة ال شاوي ياس طلبات تعديل القوالب 5 06-14-2012 05:28 PM





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

Powered by vBulletin™ Version 3.8.7
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 11:04 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)