|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
06-29-2013, 12:34 PM | #1 |
مدون نشيط
تاريخ التسجيل: Apr 2013
المشاركات: 173
|
السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
السلام عليكم و رحمة اللته تعالى و بركاته اعضاء و زوار مدونة عالم الثقافة ! اليوم سوف اطرح بين ايديكم السلايدر الذي تستعمله جل مواقع تصميم القوالب ؛ الى انه خام اي غير معدل و يبقى لكم حرية التعديل عليه كما تريدون ! اولا : نضع الكود التالي قبل وسم " </head>" كود بلغة HTML:
<script> /* Script from:http://simplexdesign.blogspot.com/ */imgr = new Array();imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";showRandomImg = true;aBold = true;summaryPost = 140; numposts1 = 5; label1 = "Featured";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) {var postcontent = entry.content.$t;}elseif ("summary" in entry) {var postcontent = entry.summary.$t;}else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr = day+ ' ' + m + ' ' + y ;var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="590" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++;}}</script> هنا يمكنك تغيير عدد الحروف التي سوف يتم اختصارها و عرضها في السلايدر : summaryPost = 140; -> هنا عدد الرسائل التي سوف يتم طرحها : numposts1 = 5; -> و هنا عرض و طول الصورة : width="590" height="240" ثانييا نبحث عن وسم "</body> " و نضع قبله هذا الكود : كود بلغة HTML:
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script> <script> featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.enablefade: [true, 0.5], //[true/false, fadedegree]autorotate: [true, 6000], //[true/false, pausetime]onChange: function(previndex, curindex){ //event handler fired whenever script changes slide//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)}})</script> و الآن ابحث عن وسم <div id='main'> او <div id='main-wrapper'> او <div id='content'> او <div id='container'> و ضع قبله هذا الكود : كود بلغة HTML:
<b:if cond='data:blog.pageType == "index"'><div id='featured'><div class='sliderwrapper' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></div><div class='pagination' id='paginate-slider1'></div></div></b:if> و اخيرا ابحث عن " ]]></b:skin> " و ضع قبلها هذا الكود : كود بلغة HTML:
#featured{margin-bottom:35px}.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}.featuredPost a{color:#fff}.featuredPost a:hover{color:#dedde5}.featuredPost h2{margin:0;font-size:16px;line-height:1}.featuredPost span{font-size:10px}.featuredPost p{font-size:11px} و هكذا نكون انتهينا مع تغير "Featured" التسمية التي تريد ان تظهر اتمنى ان يوفقم الله في تركيب هذا السلايدر و من واجهته مشكلة يترك ردا للمساعدة نهاركم سعيد المصدر عالم الثقافة
__________________
السلام عليكم و رحمة الله تعالى و بركاته ، اتمنى ان تكونوا بخير اعضاء المعهد ! و كما الجميع هنا فلا يوجد احد بدون مدونة ، لذلك انا ايضا اعرض عليكم مدونتي المتواضعة ، عالم الثقافة الالكترونية ، لن اجبركم على زيارتها فانتم احرار رابط المدونة : http://etakafa.blogspot.com |
06-29-2013, 12:55 PM | #2 |
مدون جديد
تاريخ التسجيل: Aug 2012
المشاركات: 57
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
|
06-29-2013, 03:20 PM | #3 |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 12
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
|
06-29-2013, 08:53 PM | #4 |
مدون نشيط
تاريخ التسجيل: Apr 2013
المشاركات: 173
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
السلام عليكم و رحمة الله تعالى و بركاته ، اتمنى ان تكونوا بخير اعضاء المعهد ! و كما الجميع هنا فلا يوجد احد بدون مدونة ، لذلك انا ايضا اعرض عليكم مدونتي المتواضعة ، عالم الثقافة الالكترونية ، لن اجبركم على زيارتها فانتم احرار رابط المدونة : http://etakafa.blogspot.com |
06-30-2013, 02:03 AM | #5 |
مدون نشيط
تاريخ التسجيل: Jun 2013
المشاركات: 120
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
|
06-30-2013, 11:03 AM | #6 |
مدون نشيط
تاريخ التسجيل: Apr 2013
المشاركات: 173
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
السلام عليكم و رحمة الله تعالى و بركاته ، اتمنى ان تكونوا بخير اعضاء المعهد ! و كما الجميع هنا فلا يوجد احد بدون مدونة ، لذلك انا ايضا اعرض عليكم مدونتي المتواضعة ، عالم الثقافة الالكترونية ، لن اجبركم على زيارتها فانتم احرار رابط المدونة : http://etakafa.blogspot.com |
07-03-2013, 02:11 AM | #7 |
مدون جديد
تاريخ التسجيل: Apr 2013
المشاركات: 91
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
مرحبا بكم في http://degolas-pro.blogspot.com/ https://www.facebook.com/sfrif |
07-05-2013, 11:16 AM | #8 |
مدون نشيط
تاريخ التسجيل: Apr 2013
المشاركات: 173
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
السلام عليكم و رحمة الله تعالى و بركاته ، اتمنى ان تكونوا بخير اعضاء المعهد ! و كما الجميع هنا فلا يوجد احد بدون مدونة ، لذلك انا ايضا اعرض عليكم مدونتي المتواضعة ، عالم الثقافة الالكترونية ، لن اجبركم على زيارتها فانتم احرار رابط المدونة : http://etakafa.blogspot.com |
07-13-2013, 11:28 AM | #9 |
مدون جديد
تاريخ التسجيل: Jul 2013
المشاركات: 21
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
|
07-13-2013, 04:25 PM | #10 |
مدون نشيط
تاريخ التسجيل: Apr 2013
المشاركات: 173
|
رد: السلايدر التلقائي الذي تعمل به اغلب مواقع التصميم بين ايديكم !
__________________
السلام عليكم و رحمة الله تعالى و بركاته ، اتمنى ان تكونوا بخير اعضاء المعهد ! و كما الجميع هنا فلا يوجد احد بدون مدونة ، لذلك انا ايضا اعرض عليكم مدونتي المتواضعة ، عالم الثقافة الالكترونية ، لن اجبركم على زيارتها فانتم احرار رابط المدونة : http://etakafa.blogspot.com |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
الذي, التلقائي, السلايدر, تعملا |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
عرض القالب الذي لن تجده إلى هنا قالب مدمج مع واجهة خدمات التصميم والتكويد أدخل وشارك برأي | big barsa | قوالب بلوجر مدفوعة | 18 | 08-28-2014 10:31 PM |
سلايدر من مدونة بلوجر توب التلقائي وشكل مميز | مى محمد | إضافات وأدوات بلوجر | 8 | 05-02-2013 04:41 AM |
سلايدر التلقائي بتنسيقك الخاص | bboyhishem | إضافات وأدوات بلوجر | 5 | 04-19-2013 02:03 AM |
حصريا قالب مدونة المحترف بين ايديكم | SiiMo | قوالب بلوجر عربية ومعربة | 10 | 02-12-2013 02:16 PM |
الساعة الآن 12:23 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |