لا حاجة لأن أطول عليكم سأدع السلايدر يتكلم بدلا عني بالمعاينة
.coolslider-ar1web-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; }
.coolslider-ar1web { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .ar1web_img { position: absolute; top: 0; left: 0; } .ar1web_img img { float: left; width: 20%; height: 350px; } .paging-ar1web { background: none; position: absolute; bottom: 15px; left: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-ar1web a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-ar1web a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-ar1web a:hover { } .cooltitlear1web { width:70%; display: none; position: absolute; bottom: 20px; right: 20px; z-index: 101; background: #383637; padding: 10px 15px; direction: rtl;} .cooltitlear1web a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitlear1web a:hover { color:#eee } .cooltitlear1web p { color: #fff; }
.coolslider-ar1web-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; }
.coolslider-ar1web { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .ar1web_img { position: absolute; top: 0; left: 0; } .ar1web_img img { float: left; width: 20%; height: 350px; } .paging-ar1web { background: none; position: absolute; top: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-ar1web a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-ar1web a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-ar1web a:hover { } .cooltitlear1web { width:100%; display: none; position: absolute; bottom: 0; z-index: 101; background: #383637; padding: 10px 15px; direction: rtl;} .cooltitlear1web a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitlear1web a:hover { color:#eee } .cooltitlear1web p { color: #fff; }
<script src='//cdn.rawgit.com/iHussam/ar1web/master/cool-slider.js'/>
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTPdilN5GjeG7HBbr06HrScBDonRQ_cRRJUC16KzgkwWxUTNCtcdqoDnaBLsAAmby-f6e791Ih7jsa757_a4Y2oNg_3HAFBuNKY_WtT_KH72NYcruVTpiP855kRsi_ON01S-5IFPMoeZY/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
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 = ""; var trtd = '<div class="cooltitlear1web"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
function showrecentposts2(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;}; 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 trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='coolslider-ar1web'>
<div class='ar1web_img'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
<div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='paging-ar1web'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>