منتديات ماي تكنولوجي | MTF
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي


<<{ كل ما هو جديد في عالم تكنولوجيا تجده هنا }>>
 
الرئيسيةس .و .جبحـثقائمة الاعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
الإدارة
Admin
Admin


جـنـســيــﮯ : ذكر
دولتيـﮯ : اليمن
مزاجيـﮯ مزاجيـﮯ : سبحان الله
عمليـﮯ : مهندس
عمريـﮯ : 28
مساهماتيـﮯ : 305
نقاطيــﮯ : 900
الموقع : www.zakariya.8m.com
أوسمتيـﮯ :


مُساهمةموضوع: طريقة تحويل المشاركات الشائعه سلايد شو    السبت مارس 23, 2013 2:28 am






شرح طريقة تحويل المشاركات الشائعه الي سلايد شو 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(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}






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



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



المصدر: منتديات ماي تكنولوجي -

____________________________________





الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://my-tech1.7olm.org
 
طريقة تحويل المشاركات الشائعه سلايد شو
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات ماي تكنولوجي | MTF :: ★☀« تطوير المواقع وتصاميم »☀★ :: قســـم إضافات بلوجر-
انتقل الى:  
المواضيع الأخيرة
تبادل الاعلاني
مساحة اعلانية مدونة ماي تكنولوجي مساحة اعلانية مساحة اعلانية
مساحة اعلانية شبـكة ومنتديات ماي تكنولوجي مساحة اعلانية مساحة اعلانية

Alexa Certified Traffic Ranking for http://my-tech1.7olm.org
تابعونا على          Facebook       Twitter        Google     Youtube 
سحابة الكلمات الدلالية
وندوز Performer برامج عربي تحميل كيفية كراك الهاتف تفعيل للكمبيوتر Media Android اصدار برنامج اليمن Player Mediafire فوتوشوب للاندرويد دليل العاب الشامل البرنامج الجديد windows 2013