طريقة التركيب

<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> 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
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=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

&lt;script&gt;
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhopE-Xn1ZrReLcnR8BB0jcytjHQyrcvm7I2vZ13SFXfLGS_4-sXuNqqkakCIbXWyIaFmubvtGAVSj4R08INTt_dULinDqV_ngjPCrxXkisph7FpUNOdHQt6pcAZJeyitebqTSoV9ubj3Y/s200/noimage.png&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 200;
numposts1 =18;
label1 = &quot;القسم&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);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&lt;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;155&quot; height=&quot;121&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
document.write(trtd);
j++;
}}
&lt;/script&gt;

الرقم 200 هو عدد حروف الملخص
الرقم 18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة او النقصان بحسب عرض مدونتك
القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه
ملاحظة :  " قد يرغب احد أن يصنع قسم او تسمية جديدة للسلايد بحيث يضع به مواضيع مختلفة من الأقسام ولا يريده ان يكون ظاهر للزائر بشكل كبير يمكن عمل التالي بإستبدال القسم برمز مثلا وليكن النجمة * ثم وضع المواضيع التي ترغب في تسمية جديدة وأيضا أعطها رمز النجمة ويمكن إخفائها من آداة التسميات بالطريقة التالية "

إتمام التركيب مع شرح التنسيق

****************************************
**************************************** 
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 150px;
}
.sliderwrapper .contentdiv{
background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);
border:3px solid #0FEF54;
height:230px;
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: 693px;
}

.pagination{
text-align: right;
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:15px Arial;
font-weight:bold;
color:#0B850E;
padding:6px 8px;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
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:#FB1503;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:460px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
}
.pagination .prev, .pagination .next{float:right;} 
.featuredPost a{
color:#1C1CB5;
font: 30px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:12px; margin:0; color:#C94545;}
.featuredPost p{font-size:15px; margin:4px 0 0 0; color:#7D053F;}
.sliderPostPhoto a img{float: right !important;width:220px; height:200px;border:2px solid #000;}
.sliderPostPhoto{float: right !important; width:100px !important;} 
********************************************************************************
#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: right;
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;
}
.pagination .prev, .pagination .next{float:right;} 
.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 هو لون الإطار الخارجي للسلايدر
height: 150px;  كود تباعد الازرار عن السليدر 

وهذا التدرج اللوني هو خلفية السلايدر

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; الزر الخاص بالموضوع المختار في السلايدر
هذه هي أهم الأكواد التي ستتيح لك التحكم في السلايدر وجعله مناسب لمدونتك ويمكنك الإستعانة بخدمة أكواد الألوان التابعة لنا 
وبالتوفيق بإذن الله