شرح طريقة تحويل المشاركات الشائعه الي سلايد شو slideshow التي لا تنتهي والتي
من يوم بدء طرح تلك الاداه من طرف منصة بلوجر ولم يتوانى المبدعين امثال
المدون الرائع ابو فرحان في تحويل تلك الاداه البسيطه الي لوحات فنيه تغني
الكثيرين عن ادوات اخرى يبحثون عنها وعلي سبيل المثال السلايد شو او سلايدر
الموضوعات المتحركه .. اليوم مع شكل جديد من اشكال تلك الاضافاه الرائعه
وهذا رابط الطريقه الاولي لمن يريد الرجوع اليها
لتطبيق
الدرس كل ماعليك هو الدخول الي لوحة تحكم بلوجر ثم عناصر تصميم الصفحه
وقم بانشاء اداه المشاركات الشائعه وضعها مباشرة فوق رسائل المدونه ثم قم
مجددا بفتح اداه من نوع جافا سكربت وضعها في القائمه الجانبيه واجعلها
بدون اسم وضع بداخلها الكود الموجود بالاسفل دون تعديل :
<blockquote class="tr_bq">
<blockquote class="">
@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(https://2img.net/h/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(https://2img.net/h/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(https://2img.net/h/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(https://2img.net/h/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(https://2img.net/h/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(https://2img.net/h/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}
$(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} );
});
</blockquote>
</blockquote>
قم بحفظ قالب المدونه واذهب الي الصفحه الرئيسية وقم بالمعاينه ... اي استفسار يرجا ترك تعليق بالاسفل.!