Chakira
11-01-2013, بتوقيت غرينيتش 08:09 AM
السلام عليكم ورحمة الله وبركاته
اخواني بعد طول بحث دام ايام بصراحة تعقدت لقيت سلايد شو جميل وبسيط وتلقائي للبلوجر
حبيت اشارككم فيه للي يريده
السلايد شو سهل التركيب install بخطوتين ومو معقد ابداً
اولا شكل السلايد شو قبل التركيب install
http://www.dzbatna.com/attachments/695637d1370044580-untitled.png
ساشرح طريقة لكن خصائص السلايد شو
أولا مثل ما ترون حول السلايد شو اطار سماوي انا غيرت اللون ليتناسب مع الوان القالب template بامكانكم تغييره بالاضافة للخط ساشرح طريقةه ايضا
معاينة السلايد شو على الطبيعة
مدونة blog مافيا - Mafiant Blog (http://www.ar-mafiant.com/)
لتركيب install السلايد شو اتبع الآتي
أولا :
ادخل الى القالب template ومن ثم خصائص html وابحث عن الكود code التالي
رمز Code:
<b:section class='main' id='main' showaddelement='no'>
قم بتغيير كلمة "NO" الى "YES" الي ملونها بالاحمر
ثانياً :
ضع الكود code التالي في المكان الذي تريده ان يظهر طبعا عني أنا شخصيا وضعته بعد الكود code التالي
رمز Code:
<div id='main-wrapper'>
كود code السلايد شو
رمز Code:
<style scoped='' type='text/css'> .ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white} .ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;backgroun d-color:white;text-indent:-9999px;background-image:url(http://2.bp.blogspot.com/-aFHDAB82tQw/UCEoDlHaNOI/AAAAAAAAEUg/J5hyAZvUVxo/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat} .ei-slider-large{height:100%;position:relative;overflow:hidde n;margin:0 0 10px;padding:0;border:5px solid #bbbbbb;border-radius:2px} .ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden; height:100%;width:100%;list-style:none} .ei-slider-large li img{width:100%;border:0;padding:0} .ei-title{position:absolute;right:8%;left:8%;bottom:20 %;color:#bbbbbb;opacity:0.8} .ei-title p{text-align:left} .ei-title h2{font-family:'Droid Arabic Kufi',"Times New Roman";text-align:right;margin-left:auto;font-size:15px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px} .ei-title h2 a{color:white} .ei-title h2 a:hover{text-decoration:none;color:#9E0505} .ei-title p{font-family:'Droid Arabic Kufi',sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;p adding:5px 10px;position:relative;left:-5%} .ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative} .ei-slider-thumbs li{position:relative;float:left;height:100%;width: 20%;list-style:none} .ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100% ;z-index:10;text-indent:-9000px;background:#cccccc} .ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;curs or:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease} .ei-slider-thumbs li a:hover{background-color:#f0f0f0} .ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=0)"} .ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=100)"} @media only screen and (max-width:479px){ .ei-slider{height:200px} .ei-title{bottom:5%;} .ei-title h2{font-size:14px;line-height:17px;} </style> <div id='autoelastic'/> <script src='https://ivyth.googlecode.com/svn/js/autoelastic.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { AutoElasticSlideshow({ blogURL:"http://www.ar-mafiant.com/", MaxPost:5, idcontaint:"#autoelastic", ImageSize:400, Summary:100, animation:'center', speed:800, easing:'', titlesFactor:0.60, titlespeed:800, titleeasing:'', thumbMaxWidth:150, Interval:3000, autoplay:true, pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif', tagName:false }); }); //]]> </script>
الآن نأتي الى التعديل الذي اذا اردت كتعديل الاطار وما والخط وما الى ذلك
لتعديل لون الاطار المحيط بالسلايد انا لونت لك اللون بالاحمر
رمز Code:
#bbbbbb
قم يتغييره الى اللون الذي تريد طبعا بامكانك استخدام الفوتوشوب لمعرفة اكواد الالون او عبر الانترنت
2- لتغيير المؤشر الذي في الشريط الأسفل غير اللون الازرق
رمز Code:
cccccc
الى اللون الذي تريده
لتغيير الخط ابحث عن
رمز Code:
font-family:
اذا كنت تريد ابقاء الخط عليك اضافة الكود code التالي اسفل
رمز Code:
<head>
رمز Code:
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
قبل ما انسى
غير رابط الموقع برابط موقعك
بالنهاية اذا اعجبك الموضوع لا تنسانا من صالح الدعاء
الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/695637d1370044576t-untitled.png (http://www.traidnt.net/vb/attachments/695637d1370044576-untitled.png)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
اخواني بعد طول بحث دام ايام بصراحة تعقدت لقيت سلايد شو جميل وبسيط وتلقائي للبلوجر
حبيت اشارككم فيه للي يريده
السلايد شو سهل التركيب install بخطوتين ومو معقد ابداً
اولا شكل السلايد شو قبل التركيب install
http://www.dzbatna.com/attachments/695637d1370044580-untitled.png
ساشرح طريقة لكن خصائص السلايد شو
أولا مثل ما ترون حول السلايد شو اطار سماوي انا غيرت اللون ليتناسب مع الوان القالب template بامكانكم تغييره بالاضافة للخط ساشرح طريقةه ايضا
معاينة السلايد شو على الطبيعة
مدونة blog مافيا - Mafiant Blog (http://www.ar-mafiant.com/)
لتركيب install السلايد شو اتبع الآتي
أولا :
ادخل الى القالب template ومن ثم خصائص html وابحث عن الكود code التالي
رمز Code:
<b:section class='main' id='main' showaddelement='no'>
قم بتغيير كلمة "NO" الى "YES" الي ملونها بالاحمر
ثانياً :
ضع الكود code التالي في المكان الذي تريده ان يظهر طبعا عني أنا شخصيا وضعته بعد الكود code التالي
رمز Code:
<div id='main-wrapper'>
كود code السلايد شو
رمز Code:
<style scoped='' type='text/css'> .ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white} .ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;backgroun d-color:white;text-indent:-9999px;background-image:url(http://2.bp.blogspot.com/-aFHDAB82tQw/UCEoDlHaNOI/AAAAAAAAEUg/J5hyAZvUVxo/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat} .ei-slider-large{height:100%;position:relative;overflow:hidde n;margin:0 0 10px;padding:0;border:5px solid #bbbbbb;border-radius:2px} .ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden; height:100%;width:100%;list-style:none} .ei-slider-large li img{width:100%;border:0;padding:0} .ei-title{position:absolute;right:8%;left:8%;bottom:20 %;color:#bbbbbb;opacity:0.8} .ei-title p{text-align:left} .ei-title h2{font-family:'Droid Arabic Kufi',"Times New Roman";text-align:right;margin-left:auto;font-size:15px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px} .ei-title h2 a{color:white} .ei-title h2 a:hover{text-decoration:none;color:#9E0505} .ei-title p{font-family:'Droid Arabic Kufi',sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;p adding:5px 10px;position:relative;left:-5%} .ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative} .ei-slider-thumbs li{position:relative;float:left;height:100%;width: 20%;list-style:none} .ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100% ;z-index:10;text-indent:-9000px;background:#cccccc} .ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;curs or:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease} .ei-slider-thumbs li a:hover{background-color:#f0f0f0} .ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=0)"} .ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=100)"} @media only screen and (max-width:479px){ .ei-slider{height:200px} .ei-title{bottom:5%;} .ei-title h2{font-size:14px;line-height:17px;} </style> <div id='autoelastic'/> <script src='https://ivyth.googlecode.com/svn/js/autoelastic.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { AutoElasticSlideshow({ blogURL:"http://www.ar-mafiant.com/", MaxPost:5, idcontaint:"#autoelastic", ImageSize:400, Summary:100, animation:'center', speed:800, easing:'', titlesFactor:0.60, titlespeed:800, titleeasing:'', thumbMaxWidth:150, Interval:3000, autoplay:true, pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif', tagName:false }); }); //]]> </script>
الآن نأتي الى التعديل الذي اذا اردت كتعديل الاطار وما والخط وما الى ذلك
لتعديل لون الاطار المحيط بالسلايد انا لونت لك اللون بالاحمر
رمز Code:
#bbbbbb
قم يتغييره الى اللون الذي تريد طبعا بامكانك استخدام الفوتوشوب لمعرفة اكواد الالون او عبر الانترنت
2- لتغيير المؤشر الذي في الشريط الأسفل غير اللون الازرق
رمز Code:
cccccc
الى اللون الذي تريده
لتغيير الخط ابحث عن
رمز Code:
font-family:
اذا كنت تريد ابقاء الخط عليك اضافة الكود code التالي اسفل
رمز Code:
<head>
رمز Code:
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
قبل ما انسى
غير رابط الموقع برابط موقعك
بالنهاية اذا اعجبك الموضوع لا تنسانا من صالح الدعاء
الصور المصغرة المرفقة http://www.traidnt.net/vb/attachments/695637d1370044576t-untitled.png (http://www.traidnt.net/vb/attachments/695637d1370044576-untitled.png)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
