|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
07-16-2012, 09:34 AM | #1 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر
بسم الله الرحمن الرحيم
في هذا الموضوع سنتعرف على طريقة إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر. أولا صورة ومثال حي عن السلايدر : من أهم مميزات هذا السلايدر أنه يشتغل ذاتيا "أوتوماتيكيا" بالإضافة إلى أنه يتيح لك إما عرض ’خر مواضيع المدونة أو عرض مواضيع عشوائية. الآن شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر : 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>
__________________
|
07-16-2012, 02:19 PM | #2 |
مدون جديد
تاريخ التسجيل: Jun 2012
المشاركات: 63
|
رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر
هايل .. شكراً لك وسؤالي هو .. يوجد في قالب مدونتي سلايدر ذاتي آخر.. أريد تغييره هل توجد خطوات لحذفه أم أقوم بتطبيق هذا الشرح فقط ؟
__________________
|
07-16-2012, 03:10 PM | #3 | |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر
اقتباس:
__________________
|
|
07-16-2012, 06:11 PM | #4 |
مدون نشيط
تاريخ التسجيل: May 2012
المشاركات: 117
|
رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر
__________________
http://kanoundjadid.blogspot.com/ |
07-16-2012, 09:20 PM | #5 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر
العفو أخي الكريم
__________________
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
مدونات, automatic slider, أوتوماتيكي, بلوجر, تشغيل ذاتي, سلايدر, شرح, إضافة |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
إضافة زر "أعجبني" من فيسبوك الى تدوينة بلوجر | 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 |
الساعة الآن 06:56 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |