أعلان الهيدر

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

سلايدر مشاركات متتابع افقي تلقائي مطور

السلام عليكم ورحمة الله وبركاته 
اهلا بكم زوار مداونة المساعد الالكتروني كيف حالكم اليوم  مع تدوينة  جديدة .

لقد انتشر في عالم البلوجر العديد من السلايدشو  لكن هذا النوع قليل توافرة وبعض النسخ معقدة التركيب ولا تعمل بشكل مضبوط لذلك أخذ مني الامر وقت لتطوير تلك النسخة وضبطها وها هي الآن مطروحة بين يديكم مميزات هذا السلايدر انه خفيف سريع سهل التركيب تلقائي ويمكن تخصيصه من اى قسم تريد 


تركيب السلايدر سهل وصعب في نفس الوقت ^_^
سهل في انه لا يحتاج تشعب واضافته في اماكن متعددة يعني هو كود واحد ستضيفه في القالب
صعوبته هو تحديد المكان الذي ستضيفه به
بمعنى انت تريد اضافته تحت الهيدر عليك بتحديد كود نهاية الهيدر بنفسك لتضيفه فيه لأنه لا يوجد كود ثابت استطيع نصحك بالإضافة فوقه او بعده
لكن عموما غالبا ما تبدأ منطقة المواضيع بكود مثل هذا
 <div id='outer-wrapper'>
او 
 <div id='main-wrapper'>
ان وجدت كود مثل هذا جرب فوقه او تحته لحين يظهر مع السلايدر مضبوط
وممكن ان اردت اضافته في نهاية القالب ان تبحث عن كود مثل
<div id='fotter-wrapper'>
أو
<div id='fotter'>
أو حاول تحديد كود بنفسك احيانا قد يعمل السلايدر ان اضفته داخل آداة  HTML/JavaScript لكن ليس دائما يفلح الامر

كود السلايدر 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://cnmu.googlecode.com/svn/trunk/2015/cnmucarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-ZsfNyKwmqRw/VGNAlUqogpI/AAAAAAAAFEI/bUv8oUcafwI/s500/No_image.gif";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts1 = 15;
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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
<div id='cnmucarousel'>
<div id='previous_button'/>
<div class='container'>
<script type='text/javascript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#cnmucarousel .container&quot;).jcnmucarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>

أهم الإعدادات


استبدال كلمة القسم بإسم القسم الذي تريد جلب المواضيع منه

الرقم 15 هو عدد المواضيع
احذف الكود الوردي ان كانت لديك مكتبة جي كويري في قالبك

تنسيقات


استبدل هذا اللون #0062C4 لتغيير الون الأزرق الخاص بازرار التنقل

هذا #ddd هو لون خلفية المشاركات 
بالنسبة للرقمين 1000 و920 هما عرض السلايدر ان اردت تقليل العرض فقط غير الرقمين بنفس النسبة ان خفضت احدهما 50 تخفض الآخر 50 وهكذا
وبالتوفيق

ليست هناك تعليقات:

إرسال تعليق

يتم التشغيل بواسطة Blogger.