08‏/01‏/2016

لقد عدنا مجددا بتدوينة من قسم السلايدرات لمن يرغب بتركيبه في موقعه فهذه التدوينة مخصصة خصيصا لك. سنتعرف على سلايدر تلقائي يعرض أجدد المواضيع يحتوي على صورة وزر اقرأ المزيد وكذلك نبذة عن الموضوع
 لذا وبدون إطالة أترككم مع المعاينة
شرح طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
/*Slider V1 www.ar1web.com */
#featuredSlider{ background: #fff; float: right; margin: 10px; padding: 0 0 10px; border: 1px solid #E4E3E3;width: 96.2%;height: 285px;position: relative; color: #666;direction: rtl; }
.featured-thumb {float: right; margin: 5px 0; padding: 0px; padding-left: 10px;}
#featuredSlider .container { margin:8px 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle { padding-top: 15px; font: 16px droid arabic kufi, serif; text-align: right; font-weight: 700;}
.featuredTitle a{color:#FC4F3F}
.featuredTitle a:hover{color:#000}
p.text-ar1web { font: 12px/1.9em tahoma;}
a.readmore {float: right; border: 1px solid #BFBFBF; background: #FFF; display: block; font: bold 10px droid arabic kufi; margin: 10px 0 0 0; padding: 4px 10px; color: #383737;}
a.readmore:hover {color: #FC4F3F;border:1px solid #ABAAAA;}
.slides{width:100%!important;height:280px!important}
.navigation {float:left;overflow:hidden;position: relative;bottom:7px}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(http://2.bp.blogspot.com/-j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }

/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}
3. ابحث عن </head> ثم ضع قبله الكود التالي
<script src='//cdn.rawgit.com/iHussam/ar1web/master/cycle.js' type='text/javascript'/>
<script src='//cdn.rawgit.com/iHussam/ar1web/master/slider2.js' type='text/javascript'/>
4. يتمثل الكود التالي في وضعه بالمكان المناسب لك وأفضل مكانه له هو فوق المواضيع كما بالمعاينة لذا إن أردت وضعه هناك فابحث عن <b:section class='main' id='main' showaddelement='no'> بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featuredSlider'>
<div class='container'>
 
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 2000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>
         </div> <!--end .container-->
</div> 
</b:if>
التغييرات الأساسية
1. لتعديل مقاس السلايدر فالرقم محدد بالأحمر في كود المرحلة 1
2. لتعديل توقيت سرعة المواضيع فالرقم محدد بالأزرق في كود المرحلة 4 إذا أردت تسريعه فعليك خفض الرقم مثلا من 2000 إلى 1000 والعكس إذا أردت تبطيئه
3. إن كنت تتوفر على خط Droid Arabic Kufi فقم بحذفه من الكود الأول هو محدد بالبرتقالي
لقد عدنا مجددا بتدوينة من قسم السلايدرات لمن يرغب بتركيبه في موقعه فهذه التدوينة مخصصة خصيصا لك. سنتعرف على سلايدر تلقائي يعرض أجدد المواضيع يحتوي على صورة وزر اقرأ المزيد وكذلك نبذة عن الموضوع
 لذا وبدون إطالة أترككم مع المعاينة
شرح طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
/*Slider V1 www.ar1web.com */
#featuredSlider{ background: #fff; float: right; margin: 10px; padding: 0 0 10px; border: 1px solid #E4E3E3;width: 96.2%;height: 285px;position: relative; color: #666;direction: rtl; }
.featured-thumb {float: right; margin: 5px 0; padding: 0px; padding-left: 10px;}
#featuredSlider .container { margin:8px 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle { padding-top: 15px; font: 16px droid arabic kufi, serif; text-align: right; font-weight: 700;}
.featuredTitle a{color:#FC4F3F}
.featuredTitle a:hover{color:#000}
p.text-ar1web { font: 12px/1.9em tahoma;}
a.readmore {float: right; border: 1px solid #BFBFBF; background: #FFF; display: block; font: bold 10px droid arabic kufi; margin: 10px 0 0 0; padding: 4px 10px; color: #383737;}
a.readmore:hover {color: #FC4F3F;border:1px solid #ABAAAA;}
.slides{width:100%!important;height:280px!important}
.navigation {float:left;overflow:hidden;position: relative;bottom:7px}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(http://2.bp.blogspot.com/-j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }

/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}
3. ابحث عن </head> ثم ضع قبله الكود التالي
<script src='//cdn.rawgit.com/iHussam/ar1web/master/cycle.js' type='text/javascript'/>
<script src='//cdn.rawgit.com/iHussam/ar1web/master/slider2.js' type='text/javascript'/>
4. يتمثل الكود التالي في وضعه بالمكان المناسب لك وأفضل مكانه له هو فوق المواضيع كما بالمعاينة لذا إن أردت وضعه هناك فابحث عن <b:section class='main' id='main' showaddelement='no'> بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featuredSlider'>
<div class='container'>
 
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>            <script>
$(&#39;.slides&#39;).cycle({
  fx:     &#39;fade&#39;,
  speed:  &#39;slow&#39;,
  timeout: 2000,
  pager:  &#39;.pagination&#39;
  });
</script>
</div>
         </div> <!--end .container-->
</div> 
</b:if>
التغييرات الأساسية
1. لتعديل مقاس السلايدر فالرقم محدد بالأحمر في كود المرحلة 1
2. لتعديل توقيت سرعة المواضيع فالرقم محدد بالأزرق في كود المرحلة 4 إذا أردت تسريعه فعليك خفض الرقم مثلا من 2000 إلى 1000 والعكس إذا أردت تبطيئه
3. إن كنت تتوفر على خط Droid Arabic Kufi فقم بحذفه من الكود الأول هو محدد بالبرتقالي
37 Blogger تعليقات
Disqus
37 التعليقات
المشرف
avatar

سلايدر جميل الشكل، بسيط وسريع
باركك الله عزيزي، بالتوفيق في قادم
التدوينات، تقبل تحياتي!

المشرف
avatar

سلايدر جميل الشكل، بسيط وسريع

المشرف
avatar

كل يوم ادخل للمدونة امنا ان اجد تدوينة بعنوان "بعد طول الانتضار قالب عرب ويب الحالي 2016 الان مجانا للتحميل"

المشرف
avatar

شكرا لكم اخواني الأفاضل تشرفوننا دائما بتشجيعاتكم
@ Leo San
@ Mgrdegh Gh
@ Mohamed Talidi :ماكرهتش أخويا ولكن القالب لن ينشر لربما بعد عامين... إن كتب لنا الله عمرا

المشرف
avatar

اين تحميل القوالب

المشرف
avatar

الملحقات والقوالب تكون روابطها بالسيدبار

المشرف
avatar

شكراً لك وبشدة بجد رائع كـ العادة , لكن هناك سؤال اريد أن اسالك عن تدوينة اخرى لكني راعيت شروطك ولم اكتب مشكلتي هنا اين اكتبها وارجوانك تجاوبني عليها بخصوص قالب الله يحفظك ^^

المشرف
avatar

العفو اخي وشكرا على حرصك
على العموم يمكنك طرح السؤال هنا إن كان مشكل اطرحه هنا :
http://www.ar1web.com/2015/03/do-you-have-problem-in-blogger.html

المشرف
avatar
المشرف
avatar

للأسف لم أجد كود الخطوة الرابعة

المشرف
avatar

لتجده بكل تأكيد ابحث عنه من خلال "الانتقال إلى الأداة" اضغط على "BLOG1" وسيحولك إليه

المشرف
avatar

على الرحب خويا

المشرف
avatar

السلام عليكم اخي حسام
شكرا لك على السلايدر . هل من حل لإيقاف السلايدر الموجود في هذا القالب وتعويضه بهذا لأن الأول يشتغل احيانا ويتجمد غالباhttp://www.ar1web.com/2015/04/intime-tempalte-responsive.html

المشرف
avatar

عليكم السلام، نعم يمكن أخي هل تريد الخطوات ام ماذا؟

المشرف
avatar

اهلا اخي حسام نعم اخي ان أمددتني بالخطوات فسأكون شاكرا لك . لأن القالب هو الأجمل بالنسبة لي لكن مشكلة السلايدر لازلت ابحث عن حل دون جدوى.وشكرا لكم ولمدونتكم مسبقا

المشرف
avatar

الخطوات طويلة وتتطلب شرح أكثر أرسل القالب وسأضيفها لك : info@ar1web.com

المشرف
avatar

تم ارسال القالب اخي حسام شكرا لكم على الإهتمام

المشرف
avatar

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

المشرف
avatar

حسنا، سأضع بدلها أخرى

المشرف
avatar

وأخيرا اخي حسام تم حل المشاكل المتعلقة بالقالب . توصلت به وركبته بنجاح
شكرا لك على المجهود الرائع تستحقون كل التقدير والإحترام .شكرا مرة ثانية

المشرف
avatar

على الرحب والسعة تشرفنا بخدمتكم

المشرف
avatar

السلام عليكم انا عندي نفس المشكلة بس الللي عندي مش بيشتغل خالص و مش عارف انزل ده كيف امسح القديم و انزل الجديد بتاعك او كيف اشاغل القديم بتاعي يرجة المساعدة

المشرف
avatar

ملقتش اخر كود اخى ؟

المشرف
avatar

إضغط على الانتقال الى الاداة واختر Blog1 سيوجهك إليه

المشرف
avatar

أرسل قالبك وسأحاول تركيبه لك : info@ar1web.com

المشرف
avatar

لكن لا يعرض مواضيع مدونتي

المشرف
avatar

السلام عليكم سلايد رائع اخي لكن عندي مشكلة ان السلايد ملتصق بالتدوينة الاولي فما العمل ؟

المشرف
avatar

أهلا بك، تابع معي في الكود الأول الخطوة 1 ستجد في السطر الأول هذا :
margin: 10px قم بتغيره بهذا : margin: 0 0 30px auto يمكنك التعديل على المسافة بزيادة الرقم 30

المشرف
avatar

تم التعديل بنجاح , موفق إن شاء الله ..

المشرف
avatar

السلام عليكم , سلايدر جميل اخي لكن كيف اجعل السلايدر يظهر في
الصفحة الرئيسية فقط ، لانه يظهر في الاقسام وصفحة البحث ؟

المشرف
avatar

اهلا بك، في الكود الاخير بالخطوة 4 ستجد هذا الكود :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
غيره بهذا :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

المشرف
avatar

تقدر اخي الكريم تركبه لمدونتي كل ما اركبه يظهر بشكل كبير واحين لا يظهر

المشرف
avatar

ممكن ان تركبه لي

المشرف
avatar

اخي حسام السلايدر ياتيني في الفوق فوق الاقسام مساعدة اخي

المشرف
avatar

عندي مشكلة مكان سلايدر تبقى بيضاء مع العلم ان لدي عدة مواضيع وشكرا

المشرف
avatar

أخي لم أجد كلمة head في قالبي

المشرف
avatar

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة