سلايد شو (SlideShow) قمه في الابداع لمدونة بلوجر يعمل بطريقة اوتوماتيكيه

بسم الله الرحمن الرحيم

سلايد شو (SlideShow) قمه في الابداع لمدونة بلوجر يعمل بطريقة اوتوماتيكيه

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

خطوه رقم 1 : وضع خصائص ال css

1. قم بتسجيل الدخول الى لوحة تحكم مدونتك تصميم> تحرير Html
2. قم باخذ نسخه احتياطيه من القالب ثم علم على توسيع عناصر واجهة المستخدم’
3. ثم ابحث عن

]]></b:skin>

ضع قبله الكود الموجود بالاسفل كاملا

/* START
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com

http://css-tricks.com/889-creating-a-slick-auto-playing-featured-content-slider/

--------------------------------------------------------------------
Featured Content Slider
*/
#slider-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;font-size: 10px; background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-bg.png) top center; }
.slider-wrap{ font-family: Arial, Helvetica, sans-serif; width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel    { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row    { margin: -46px 0 0 62px; }
#movers-row div    { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data{ background: url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-transpBlack.png); padding: 10px; height: 40px; margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link    { display: block; width: 62px; margin-top: -10px; position: relative; padding-top: 10px; z-index: 9999; }
.active-thumb { background: transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/featuredcontentslider-icon-uparrowsmallwhite.png) top center no-repeat; }
/* END
--------------------------------------------------------------------
Awesome Automatic Content Sliders for Blogger using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Featured Content Slider
*/

خطوه رقم 2 : وضع ملفات  Javascript

ابحث عن :

</body>

ضع قبله الكود التالى كاملا ايضا

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/FeaturedContentSlider.pack.js"></script>
 <script type="text/javascript">
 var theInt = null;
 var $crosslink, $navthumb;
 var curclicked = 0;
 theInterval = function(cur){
 clearInterval(theInt);
 if( typeof cur != 'undefined' )
 curclicked = cur;
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 theInt = setInterval(function(){
 $crosslink.removeClass("active-thumb");
 $navthumb.eq(curclicked).parent().addClass("active-thumb");
 $(".stripNav ul li a").eq(curclicked).trigger('click');
 curclicked++;
 if( 6 == curclicked )
 curclicked = 0;
 }, 3000);
 };
 $(function(){
 $("#main-photo-slider").codaSlider();
 $navthumb = $(".nav-thumb");
 $crosslink = $(".cross-link");
 $navthumb
 .click(function() {
 var $this = $(this);
 theInterval($this.parent().attr('href').slice(1) - 1);
 return false;
 });
 theInterval();
 });
 </script>

خطوه رقم 3 : وضع الاداه التى سيظهر من خلالها السلايدر

اذهب الي تصميم  ->اختر اداه جديده ” -> HTML/JavaScript من نوع جافا سكربت . وضع فيها الكود الموجود بالاسفل

<div id="slider-wrap">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-FeaturedContentSlider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6; //recommended
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://tqarob.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

ثم قم بحفظ الاداه وضعها فوق رسائل المدونه مباشرة..

الان ناتى لمرحلة تخصيص الكود الاخير كى تعمل الاضافه

قم بتغيير كلمة tqarob في الكود الاخير باسم مدونتك

تستطيع ايضا تغيير هذا الرقم 6 الى اى رقم اخر فهو خاص بعدد التدوينات المعروضه في السلايدر

هذا كل شئء ..

اى استفسار يرجا ترك تعليق بالاسفل..