• معاينة

1. شرح طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الشكل المختار فوقه

.coolslider-dabourphone-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; }
.coolslider-dabourphone { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .dabourphone_img { position: absolute; top: 0; left: 0; } .dabourphone_img img { float: left; width: 20%; height: 350px; } .paging-dabourphone { background: none; position: absolute; bottom: 15px; left: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-dabourphone a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-dabourphone a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-dabourphone a:hover { } .cooltitledabourphone { width:70%; display: none; position: absolute; bottom: 20px; right: 20px; z-index: 101; background: #383637; padding: 10px 15px;     direction: rtl;} .cooltitledabourphone a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitledabourphone a:hover { color:#eee } .cooltitledabourphone p { color: #fff; }

.coolslider-dabourphone-wrapper { width: auto; float:right; position: relative; padding-right: 2%; padding-top: 10px; }
.coolslider-dabourphone { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .dabourphone_img { position: absolute; top: 0; left: 0; } .dabourphone_img img { float: left; width: 20%; height: 350px; } .paging-dabourphone { background: none; position: absolute; top: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging-dabourphone a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging-dabourphone a.active { background: #0099CC; border: 1px solid #0099CC; } .paging-dabourphone a:hover { } .cooltitledabourphone { width:100%; display: none; position: absolute; bottom: 0; z-index: 101; background: #383637; padding: 10px 15px; direction: rtl;} .cooltitledabourphone a { color: #0099CC; text-transform: uppercase; font-weight: bold; font-size: 15px; } .cooltitledabourphone a:hover { color:#eee } .cooltitledabourphone p { color: #fff; }

 2. ابحث عن </head> وضع قبله الكود التالي

<script src='https://mohamedabodia.github.io/dabourphone/cool-slider.js'/>
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzTh2uN4TsREPYN7Nsni0MgVaTXHLccAcy4CyJI1k2al-egnQ0wKCDwqgymQhKmH-cZdvuOdB3TkQ2W7PACVq_aDvc6kz2g2TXc4bUtlOrfot5EuumLfnV07bu8We7CDMrIrpaCnO-KI/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="cooltitledabourphone"><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>

 3. يتمثل الكود التالي في وضعه بالمكان المناسب لك وأفضل مكانه له هو فوق المواضيع كما بالمعاينة لذا إن أردت وضعه هناك فابحث عن <b:section class='main' id='main' showaddelement='no'> بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه.

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='coolslider-dabourphone'><div class='dabourphone_img'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);</script></div><div class='descriptionslider'><script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?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='paging-dabourphone'><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>