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

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

<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>

قم بحفظ قالب المدونه واذهب الي الصفحه الرئيسية وقم بالمعاينه ... اي استفسار يرجا ترك تعليق بالاسفل.!!

تصنيف : اضافات بلوجر