سلايدر رائع لعرض مواضيعك المميزة هذا السلايد يعمل بشكل تلقائي بحيث انك لا تحتاج لإضافة صور او كتابة شئ كل ما عليك فعله هو ان تربطه بأحد الأقسام وهو سيقوم بجلب صور وعنوان وملخص الموضوعات ويظهرها تلقائيا هذه النسخة خاصة بنا ولن تجدها في مكان آخر وأخذت الكثير من الضبط والتعديل لتصبح سهلة التنسيق وذات شكل جذاب وأمر التنسيق سنتطرق اليه في الموضوع بحيث تتمكن من تنسيقها بشكل يتناسب مع مدونتك ويميز هذه النسخة السرعة والتوافق مع غالبية القوالب وبمكنك رؤية معاينة حية لها عبر الرابط التالي
طريقة التركيب
أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل
ثم ادخل الى تحرير القالب
ضع الكود التالي فوق الوسم </body>
<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>
وأضف الكود التالي تحت هذا الكود <div id='main-wrapper'>
<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>
<script>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXqHfRKbt1Poemg00I40nCC-XB2907n-b2BpcUeONr75JVS_7NjuxA5tiw2joYE66z7Tc2wTPMLDjFwgpUX0Q2dV30OFJA55rwBmRCsTEtYlPzjJjgL0SixanqtQDhf30sSBAJq5L1hI/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>
الرقم
200 هو عدد حروف الملخص
الرقم
18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة او النقصان بحسب عرض مدونتك
القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه
ملاحظة : " قد يرغب احد أن يصنع قسم او تسمية جديدة للسلايد بحيث يضع به مواضيع مختلفة من الأقسام ولا يريده ان يكون ظاهر للزائر بشكل كبير يمكن عمل التالي بإستبدال
القسم برمز مثلا وليكن النجمة
* ثم وضع المواضيع التي ترغب في تسمية جديدة وأيضا أعطها رمز النجمة ويمكن إخفائها من آداة التسميات بالطريقة التالية "
إتمام التركيب مع شرح التنسيق
الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر
قم بإضافته فوق الوسم </b:skin> بعد توسيعه
#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;}
لتعديل عرض السلايدر قم بتعديل الأكواد الحمراء بنفس النسبة إذا قمت بزيادة 10px يجب أن تزيدها جميعا بنفس النسبة ونفس الشئ إن أنقصت العرض
أما لتعديل الإرتفاع تعدل النسب الزرقاء بنفس الطريقة مع مراعاة أن الرقمين المتجاورين
220 و
180هما عرض وإرتفاع الصورة
هذا اللون
#7C7B7B هو لون الإطار الخارجي للسلايدر
وهذا التدرج اللوني هو خلفية السلايدر
background:
#fff;background: -moz-linear-gradient(top,
#fff,
#EAEAEA);background: -webkit-linear-gradient(top,
#fff,
#EAEAEA);
وهذا التدرج هو لون الأزرار
background:
#F0EFEF;background: -moz-linear-gradient(top,#fff,
#F0EFEF);background: -webkit-linear-gradient(top,#fff,
#F0EFEF);
وهذا لون
background:#000; الزر الخاص بالموضوع المختار في السلايدر
هذه هي أهم الأكواد التي ستتيح لك التحكم في السلايدر وجعله مناسب لمدونتك ويمكنك الإستعانة بخدمة
أكواد الألوان التابعة لنا وبالتوفيق بإذن الله
