الجمعة، 29 يونيو، 2012

طريقة تحويل المشاركات الشائعه سلايد شو

10 Jquery carousel slideshow plugin galerie photos
السلام عليكم ورحمة الله وبركاته .. استكمالا لمسلسل المشاركات الشائعه التي لا تنتهي والتي من يوم بدء طرح تلك الاداه من طرف منصة بلوجر ولم يتوانى المبدعين امثال المدون الرائع ابو فرحان في تحويل تلك الاداه البسيطه الي لوحات فنيه تغني الكثيرين عن ادوات اخرى يبحثون عنها وعلي سبيل المثال السلايد شو او سلايدر الموضوعات المتحركه .. اليوم مع شكل جديد من اشكال تلك الاضافاه الرائعه وهذا رابط الطريقه الاولي لمن يريد الرجوع اليها  لتطبيق الدرس كل ماعليك هو الدخول الي لوحة تحكم بلوجر ثم عناصر تصميم الصفحه وقم بانشاء اداه المشاركات الشائعه وضعها مباشرة فوق رسائل المدونه ثم قم مجددا بفتح اداه من نوع جافا سكربت وضعها في القائمه الجانبيه واجعلها بدون اسم وضع بداخلها الكود الموجود بالاسفل دون تعديل :



<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
 color:#FFF;
}
.lof-slidecontent a.readmore{
 color:#58B1EA;
 font-size:95%;

}
.lof-slidecontent{
 position:relative;
 overflow:hidden;
 border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
 height:100%;
 width:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:100000;
 text-align:center;
 background:#FFF
}
.lof-slidecontent .preload div{
 height:100%;
 width:100%;
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
 position:relative;
 height:100%;
 width:800px;
 z-index:3px;
 overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 bottom:50px;
 left:0px;
 width:350px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
 height:100px;
 /* filter:0.7(opacity:60) */
 padding:10px;
}
.lof-main-item-desc p{
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3{
 padding:0;
 margin:0
}
.lof-main-item-desc h2{
 padding:0;
 margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
 margin:0;
 background:#C01F25;
 font-size:75%;
 padding:2px 3px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
 text-transform:uppercase;
 text-decoration:none
}
.lof-main-item-desc h3 a:hover{

 text-decoration:underline;
}
.lof-main-item-desc h3 i {
 font-size:70%;
}

/* main flash */
ul.lof-main-wapper{
 /* margin-right:auto; */
 overflow:hidden;
 background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
 padding:0px;
 margin:0   !important;
 position:absolute;
 overflow:hidden;
}

ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px   !important;
 margin:0px;
 float:left;
 position:relative;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 left:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px  !important;
}

/* item navigator */
.lof-navigator-wapper {
 position:absolute;
 bottom:10px;
 right:10px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
 padding:5px 0px;
}
.lof-navigator-outer{
 position:relative;
 z-index:100;
 height:180px;
 width:310px;
 overflow:hidden;
 color:#FFF;
 float:left
}
ul.lof-navigator{
 top:0;
 padding:0;
 margin:0;
 position:absolute;
 width:100%;
 background:none !important;
 margin-top: 0 !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
ul.lof-navigator li{
 cursor:hand !important;
 cursor:pointer !important;
 list-style:none !important;
 padding:0 !important;
 margin-left:0px !important;
 overflow:hidden !important;
 float:left !important;
 display:block !important;

 text-align:center !important;

}
ul.lof-navigator li img{
 border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
 border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
 display:block;
 width:22px;
 height:30px;
 color:#FFF;
 cursor:pointer;

}
.lof-navigator-wapper .lof-next {
 float:left;
 text-indent:-999px;
 margin-right:5px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
 float:left;
 text-indent:-999px;
 margin-left:5px;
 background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}

.lof-main-wapper img {height:340px !important; width:880px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
  var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
      next:$('#lofslidecontent45 .lof-next') };

  $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
            direction  : 'opacitys',
             easing   : 'easeOutBounce',
            duration  : 1200,
            auto    : true,
            maxItemDisplay  : 4,
            navPosition     : 'horizontal', // horizontal
            navigatorHeight : 32,
            navigatorWidth  : 80,
            mainWidth:880,
            buttons   : buttons} );
 });
</script>
 
قم بحفظ قالب المدونه واذهب الي الصفحه الرئيسية وقم بالمعاينه ... اي استفسار يرجا ترك تعليق بالاسفل.!!

13 التعليقات:

http://alyomtop.blogspot.com/ يقول...

جميل جددددددددددددددددددددددا

http://alyomtop.blogspot.com/

basem khaled يقول...

ممتاز اخى العزيز
http://top-birds.blogspot.com/

TawfikPro يقول...

http://www.road2pro2.blogspot.com/
http://road2pro.com/

Bassem Tarek يقول...

شكرررررررررررررررررررررررررررررررررررا , بس ممكن كود لاحدت المنشورات سلايد شو ؟؟؟؟

غير معرف يقول...

www.ps-tt.blogspot.com

سهير يقول...

شكرا لك
اذا كنت فعلا مهتم للربح من الانترنت
اقدم لكم كتاب يوتيوب عاصفة الارباح تجربة شخصية مربحة 100%

http://khedamat.com/Business/63/%D9%83%D8%AA%D8%A7%D8%A8-%D9%8A%D9%88%D8%AA%D9%8A%D9%88%D8%A8-%D8%B9%D8%A7%D8%B5%D9%81%D8%A9-%D8%A7%D9%84%D8%A7%D8%B1%D8%A8%D8%A7%D8%AD-%D8%AA%D8%AC%D8%B1%D8%A8%D8%A9-%D8%B4%D8%AE%D8%B5%D9%8A%D8%A9-%D9%85%D8%B1%D8%A8%D8%AD%D8%A9-100

sameh hamdy يقول...

الله ينور عليك
http://www.facebook.com/Ect2AllDelta

Hamada Omran يقول...

تسلم
الق نظرة كي تستريح http://bolggerfans.blogspot.com/

تحميل ألعاب وبرامج 2014 يقول...

مشكور علي الموضوع المميز والشرح الوافي

مدونة ابن كايرو تحميل برامج والعاب 2014 : http://www.EbnCairo.blogspot.com

مدونة رؤية جديدة للمستقبل يقول...


مشكور علي الموضوع
http://newvisionf.blogspot.com

Ali Al-Jboury يقول...

ماتشتغل

Prokiller Games يقول...

جامد اوي بس للاسف مش شغال
http://gamersbeatsite.blogspot.com.eg/

Dhiban News‏ يقول...

مش شغال أخي

إرسال تعليق

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes تعريب : ق,ب,م