|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
04-18-2013, 11:33 PM | #1 |
مدون جديد
تاريخ التسجيل: Feb 2013
المشاركات: 40
|
سلايدر التلقائي بتنسيقك الخاص
سلايدر رائع لعرض مواضيعك المميزة.هذا السلايد يعمل بشكل تلقائي بحيث أنك لا تحتاج لإضافة صور أو كتابة شيء كل ما عليك فعله هو أن تربطه بأحد الأقسام وهو سيقوم بجلب صور وعنوان وملخص الموضوعات ويظهرها تلقائياً.
لرؤية السلايدر هنا: معــاينة طريقة التركيب: أول شيء خد نسخة إحتياطية مت قالبك لتجنب المشاكل ثم أدخل إلى تحرير القالب. ضع الكود التالي فوق الوسم </body> كود بلغة HTML:
<script src='https://cnmu.googlecode.com/svn/trunk/cnmuautos.js'></script> <script> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["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> كود بلغة HTML:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <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> ثم أضف الكود التالي فوق الوسم </head> كود بلغة HTML:
<script> imgr = new Array(); imgr[0] = "https://lh3.googleusercontent.com/-tetsDYYQsVE/UW7i2KaUvWI/AAAAAAAABLA/MQd4Nx4U5Mg/s200/noimage.png"; showRandomImg = true; aBold = true; summaryPost = 200; numposts1 =18; label1 = "القسم"; 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;} else if ("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="155" height="121" 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> الرقم 18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة أو النقصان بحسب عرض مدونتك القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه. إتمام التركيب مع شرح التنسيق: الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر قم بإضافته فوق الوسم </b:skin> بعد توسيعه كود بلغة HTML:
#featured{ margin-bottom:10px; } .sliderwrapper{ position: relative; border-bottom-width: 6px; height: 124px; } .sliderwrapper .contentdiv{ background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA); border:3px solid #7C7B7B; height:180px; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; margin-top: 10px; opacity: 1; padding: 15px 15px 15px 0; position: absolute; visibility: hidden; width: 623px; } .pagination{ text-align: left; margin-top: 110px; padding:5px; margin-left:5px; } .pagination a{ background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF); font:13px Arial; font-weight:bold; color:#a3a3a3; padding:4px 8px; border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px; box-shadow: 0 1px 2px #000;-moz-box-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 1px 2px #000; margin-right:4px; } .pagination a.selected{ color:#fff; background:#000; } .pagination .prev,.pagination .next { color:#EAEAEA; font-size:0px; background:none; padding:0px; } .featuredPost{ width:380px; padding:0px 10px 10px 10px !important; bottom:0; float:left !important; } .featuredPost a{ color:#000; font: 18px "Microsoft Sans Serif"; margin:0; padding:0; } .featuredPost h2{margin:0 0 8px 0;} .featuredPost span{font-size:11px; margin:0; color:#C94545;} .featuredPost p{font-size:13px; margin:4px 0 0 0; color:#797979;} .sliderPostPhoto a img{float: right !important;width:220px; height:180px;border:2px solid #000;} .sliderPostPhoto{float: right !important; width:100px !important;} المصدر:سلايدر التلقائي بتنسيقك الخاص
__________________
أهلا ومرحبا بكم في مدونة محترفي بلوجر www.b-profe.blogspot.com طريقك نحو الإحتراف =) التعديل الأخير تم بواسطة كن مدون ; 04-19-2013 الساعة 12:38 AM |
04-19-2013, 12:41 AM | #2 |
مدون مميز
تاريخ التسجيل: Jan 2013
الدولة: مصر
المشاركات: 580
|
رد: سلايدر التلقائي بتنسيقك الخاص
تم تعديل رابط المعاينة ويمنع وضع إختصار لروابط المعاينة فهذا مخالف لقوانين المنتدى ويا أخي إتق الله وإذكر مصدر الموضوع الأصلي في مدونتك ليس من الإحتراف أو الحق أن تنسخ موضوع ولا تذكر المصدر الأصلي
__________________
بسبب كثرة الرسائل لا اتمكن من الرد على كثير منها لذا اعتذر من الجميع سيقتصر الرد على الرسائل الخاصة بالشكاوى والإقتراحات التي تخص المنتدى او العضويات ولن يتم الرد على أى رسائل دعم فني ومن لديه طلب يضيفه في القسم المخصص لذلك وأعتذر منكم جميعاً مرة ثانية |
04-19-2013, 01:18 AM | #3 |
مدون جديد
تاريخ التسجيل: Feb 2013
المشاركات: 40
|
رد: سلايدر التلقائي بتنسيقك الخاص
لا حرام أخي لم أسرق جهدك لقد قمت بذكر المصدر ألم تراه ؟؟ في مدونتي ؟
__________________
أهلا ومرحبا بكم في مدونة محترفي بلوجر www.b-profe.blogspot.com طريقك نحو الإحتراف =) |
04-19-2013, 01:32 AM | #4 |
مدون مميز
تاريخ التسجيل: Jan 2013
الدولة: مصر
المشاركات: 580
|
رد: سلايدر التلقائي بتنسيقك الخاص
أخي الكريم انا راجعت الموضوع مرتين قبل ان أكتب ولم يكن المصدر ظاهراً لكن الآن ظهر أشكرك على ذلك وأسحب كلماتي السابقة ولعله سوء تفاهم والشيطان هيألي بالخطأ معذره
__________________
بسبب كثرة الرسائل لا اتمكن من الرد على كثير منها لذا اعتذر من الجميع سيقتصر الرد على الرسائل الخاصة بالشكاوى والإقتراحات التي تخص المنتدى او العضويات ولن يتم الرد على أى رسائل دعم فني ومن لديه طلب يضيفه في القسم المخصص لذلك وأعتذر منكم جميعاً مرة ثانية التعديل الأخير تم بواسطة كن مدون ; 04-19-2013 الساعة 01:56 AM |
04-19-2013, 01:57 AM | #5 |
مدون جديد
تاريخ التسجيل: Feb 2013
المشاركات: 40
|
رد: سلايدر التلقائي بتنسيقك الخاص
لامشكلة
أقسم لك بالله أن المصدر كان موجود من الأول فقط كان لدي مشكل في القالب و إستطعت بإذن تعديله
__________________
أهلا ومرحبا بكم في مدونة محترفي بلوجر www.b-profe.blogspot.com طريقك نحو الإحتراف =) |
04-19-2013, 02:03 AM | #6 |
مدون مميز
تاريخ التسجيل: Jan 2013
الدولة: مصر
المشاركات: 580
|
رد: سلايدر التلقائي بتنسيقك الخاص
خيراً أخي الكريم ولعل المشكلة التي كانت في القالب هي ما حجب ظهور المصدر بالتوفيق وإن أردت حذف التعليقات السابقة فقط ضع تعليق قادم يفيد ذلك وسيتم حذفها لخدمة الموضوع
__________________
بسبب كثرة الرسائل لا اتمكن من الرد على كثير منها لذا اعتذر من الجميع سيقتصر الرد على الرسائل الخاصة بالشكاوى والإقتراحات التي تخص المنتدى او العضويات ولن يتم الرد على أى رسائل دعم فني ومن لديه طلب يضيفه في القسم المخصص لذلك وأعتذر منكم جميعاً مرة ثانية |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
التلقائي, الخاص, بتنسيقك, سلايدر |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
سلايدر من مدونة بلوجر توب التلقائي وشكل مميز | مى محمد | إضافات وأدوات بلوجر | 8 | 05-02-2013 04:41 AM |
اريد تعديل على سلايدر شو المحترف | صهيب عوده | طلبات الدعم الفني | 9 | 02-01-2013 02:13 PM |
جعل سلايدر المحترف يناسب مدونتك | osama | دروس بلوجر | 0 | 01-16-2013 09:45 AM |
طلب سلايدر بسيط [تمت التلبية] | abdullahbb | طلبات تعديل القوالب | 4 | 09-02-2012 10:41 PM |
طلب سلايدر | echibi | طلبات الدعم الفني | 1 | 08-08-2012 05:29 PM |
الساعة الآن 07:57 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |