<style type='text/css'>
#cnmucarousel {
  display: block;
  height: 185px;
  margin: 10px auto;
  position: relative;
  width: 1000px;
}
#cnmucarousel .container {
  background-color: #ddd;
  height: 185px;
  overflow: hidden;
  position: absolute;
  right: 49px;
  width: 920px !important;
}
#cnmucarousel #previous_button {
  background: url(&quot;https://lh6.googleusercontent.com/-ex_ZMAgMdIM/VOnMsQA_fMI/AAAAAAAAFfw/nLzQfiUV4e4/s32/arrow-right.png&quot;) no-repeat scroll center center #0062C4;
  cursor: pointer;
  height: 185px;
  position: absolute;
  width: 49px;
  z-index: 100;
}
#cnmucarousel #previous_button:hover {background-color:#000;}
#cnmucarousel #next_button {
  background: url(&quot;https://lh4.googleusercontent.com/-KUDPY67ehdQ/VOnMsZ2J4cI/AAAAAAAAFfs/9lX3Ea9Ecv4/s32/arrow-left.png&quot;) no-repeat scroll center center #0062C4;
  cursor: pointer;
  height: 185px;
  left: 0;
  position: absolute;
  width: 49px;
  z-index: 100;
}
#cnmucarousel #next_button:hover {background-color:#000;}
#cnmucarousel ul {
width:100000px;
position:relative;
margin-top:10px;
}
#cnmucarousel ul li {
background:#fff url(https://lh6.googleusercontent.com/-OVbpaVVK9To/VPzitR3gZgI/AAAAAAAAFiA/kz405_wJiys/s100/main.png) repeat-x top;
display:inline;
float:right;
text-align:center;
font-weight:700;
font-size:.9em;
line-height:1.2em;
border:1px solid #ccc;
width:145px;
height:150px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin:0 4px 20px 7px;
padding:6px;
}
#cnmucarousel ul li:hover {
filter:alpha(opacity=75);
opacity:.75;
}
#cnmucarousel ul li a.slider_title {
  color:#555;
  display: block;
  font: 12px tahoma;
  margin-top: -5px;
}
#cnmucarousel ul li a.slider_title:hover {color:#000;}
#cnmucarousel a img {
display:block;
background:#fff;
margin-top:0;
}
</style>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZYpRPMgYEZF92FTzVIXuHKogCxLPGUTvV8ZMrXaZ89s_E5X24zEH6lS-OWw0CUteHJK-1syPEGKtcsRHmkJtMTGfaDKJMlxxqCHmjy2rJv0fbRKTrPQxlP56Ta6hFZJ1JWvx1SuOZO4/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>

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

تنسيقات

كود سلايد شو اخر المواضيع بتقنية css

• ادخل مدونتك.
• اذهب الى تخطيط.
• اضف اداة جديدة عبارة عن HTML/JavaScript.
• انسخ والصق الكود التالى:  

 <!-- Edit Byhttp://mobdea1.blogspot.com// -->

<style>.slider-rotator h4{text-align:right !important;}.slider-rotator p{text-align:right !important;}.slider-rotator-nav{background:#DDD !important;border:1px solid #CCC !important;border-radius:5px !important;margin:2px 12px !important;}.slider-rotator-nav a{background-color:#FFF !important;color:#777 !important;border:1px solid #CCC !important;border-radius:4px !important;}.slider-rotator-nav a:hover{background-color:#FFFDD8 !important;}.slider-rotator-nav a.current{background-color:#BDB6AA !important;border:1px solid #999 !important;color:#FFF !important;}.slider-rotator{border-radius:5px !important;}</style>

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>

<script type="text/javascript">

makeSlider({

    url: "http://mobdea1.blogspot.com/" // Add your blog URL

});

</script>

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

              استبدله برابط مدونتك

سنبدأ أولا مع النسخة العادية وهي مشتقة من هذا السلايدر

<style>
#mcis { display: none;}
#sliderFrame {
  background:#222;
  margin: 2px auto 20px;
  padding: 20px 20px 28px;
  position: relative;
  width: 620px;
}
#slider img {
 position: absolute;
 border: none;
display: none;
}
#slider {
 width: 620px;
 height: 350px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3k8oHwKiksYI6KeS11V9bh2ntOjnZyu7G_5tO9jHTk9eW7sCx6_cVXNpi7ioXXrXAXrzjyNQGhP8txkB5a6SA9cQClHK7RQcFgJSwhmjF3SBmb5EYlSBF9o1l9fabw4kGrQxEiTNQSY9n/s32/preview.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {background-color: black;}
div.mc-caption {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUJfwaABdCn1rP2oNYHrtAGCk3FP7QBlp28uEncK1fAXnXROsjuuDZBK7RqfegeWZ-SAr99_6tpXZ2xqyB0lLfS3jvbNeFmnFSI6AScvmFJUnjMTN_1BtSOhOLDi4z0d2r1jxS3hux9o/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #EEEEEE;
  font: bold 15px/30px tahoma;
  padding: 10px 0;
  text-align: center;
  z-index: 4;
}
div.mc-caption a { color: #FB0;}
div.mc-caption a:hover { color: #DA0;}
div.navBulletsWrapper {
 top:350px;
background: none;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div{
background:#ccc;
cursor: pointer;
float: right;
height: 9px;
margin-left: 1px;
overflow: hidden;
vertical-align: middle;
width: 87px;
}
div.navBulletsWrapper div.active { background:#1980E6;}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
</style>
<script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
<a href="#"><img src="i#" alt="عنوان الموضوع"/></a>
</div></div>

التنسيق

الإستخدام

body#layout #featured {display: none;}
#featured {
  background:#222;
  height: 350px;
  padding: 20px 20px 28px;
  width: 620px;
}
.sliderwrapper .contentdiv{position: absolute;visibility: hidden;}
.sliderPostPhoto img {
  float: right;
  height: 350px;
  margin: 0;
  width: 620px;
}
.featuredPost {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUJfwaABdCn1rP2oNYHrtAGCk3FP7QBlp28uEncK1fAXnXROsjuuDZBK7RqfegeWZ-SAr99_6tpXZ2xqyB0lLfS3jvbNeFmnFSI6AScvmFJUnjMTN_1BtSOhOLDi4z0d2r1jxS3hux9o/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: #e2e2e2;
  float: right;
  height: 130px;
  margin-top: 219px;
  overflow: hidden;
  padding: 0 10px;
  position: absolute;
  width: 600px;
}
.featuredPost h2 { margin: 0 0 5px;  padding: 0;}
.featuredPost a {
  color: #fff;
  font: bold 18px tahoma;
  text-decoration: none;
}
.featuredPost a:hover {color:#bbb;}
.featuredPost span { font: 15px serif;}
.prev, .next {display: none;}
.featuredPost p {
  font: 15px/1.4em tahoma;
  margin: 5px 0 0;
}
.pagination {
  margin-top: 350px;
  position: absolute;
  z-index: 99;
}
.pagination .toc {
  background:#ccc;
  display: block;
  float: right;
  font-size: 0;
  height: 9px;
  margin-left: 1px;
  width: 87px;
}
.pagination .toc.selected { background:#1980e6;}

التنسيق

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

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

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

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

وهذا التدرج هو لون الأزرار