17‏/02‏/2016

نواصل مع الإصدار الثاني من السلايدرات مع هذا السلايدر الجميل والبسيط سيجعل موقعك ينبض بالحياة 😁 يتميز بمرونته وتناسقه مع أي قالب وكذلك جلبه للمواضيع تلقائيا محدودة في 5 مشاركات، هناك من لم يعجبه سلايدر Nivo بسبب عرضه للمواضيع بحسب التسمية لذا هذا السلايدر سيفي بالغرض ويلبي المطلوب.
لا حاجة لأن أطول عليكم سأدع السلايدر يتكلم بدلا عني بالمعاينة
1. شرح طريقة التركيب 1. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الشكل المختار فوقه



.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; }
2. ابحث عن </head> وضع قبله الكود التالي
<script src='//cdn.rawgit.com/iHussam/ar1web/master/cool-slider.js'/>
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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>
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-ar1web'>
   <div class='ar1web_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-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>
نواصل مع الإصدار الثاني من السلايدرات مع هذا السلايدر الجميل والبسيط سيجعل موقعك ينبض بالحياة 😁 يتميز بمرونته وتناسقه مع أي قالب وكذلك جلبه للمواضيع تلقائيا محدودة في 5 مشاركات، هناك من لم يعجبه سلايدر Nivo بسبب عرضه للمواضيع بحسب التسمية لذا هذا السلايدر سيفي بالغرض ويلبي المطلوب.
لا حاجة لأن أطول عليكم سأدع السلايدر يتكلم بدلا عني بالمعاينة
1. شرح طريقة التركيب 1. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود الشكل المختار فوقه



.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; }
2. ابحث عن </head> وضع قبله الكود التالي
<script src='//cdn.rawgit.com/iHussam/ar1web/master/cool-slider.js'/>
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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>
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-ar1web'>
   <div class='ar1web_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-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>
18 Blogger تعليقات
Disqus
18 التعليقات
المشرف
avatar

رائع و مبدع من يومك .. اول تعليق

المشرف
avatar

سلام عليكم

كيف يمكنني عمل صفحة مستقلة لا توجد فيها اضافات مشاركات الصفخة

اريد ان تكون فارغة
ممكن المساعدة

المشرف
avatar

سلايدر شو رائع جدا لكن لماذا لا تضعه فقط html javascript

المشرف
avatar

@ Abdullah Hamy - يسعدنا مرورك دائما

@ سلبينا فيديو - صفحة بيضاء؟

@ abd essamad - لن يشتغل 100% إن وضعته بأداة

المشرف
avatar

مشكور اخوي

ياريت لو تضع لنا اضافة معلومات التدوينة في السيدبار
وعداد مشاهدات التدوينة

المشرف
avatar

نعم،، بلضبط اريد اضع مشاكة واحدة فقط
لا يظهر في صفحة غيرها

المشرف
avatar

جميل احسنت :-* بدنا قالب احترافي

المشرف
avatar

شكرا لك دائما متألق اخي حسام بالتوفيق لك

المشرف
avatar

اخي حسام ممنك سلايدر اخر تلقائي بدون وضع روابك الصور

المشرف
avatar

سئال اخي حسام قالب REVELIO موجود فقط على وردبرس او هو موجود على بلوجر لاني قمت بتحميله بحجم 50 مجا وهو للوردبرس فقط بحثت عنه كثير لكني لم اجد إلى نسخ وردبرس

المشرف
avatar

السلام عليكم اخي بارك الله بمجهودك عاشت ايدك بس ممكن تزغير عرض وارتفاع القالب اذا ممكن وهل التزغير يثر في سلايت شو

المشرف
avatar

لو سمحت انا محتاجة يعرض اخر 10 مواضيع و ليس اخر 5

المشرف
avatar

سلايد رائع يا اخي لكن عندي مشكلتين : لا توجد مسافة مع التدوينة اسفل السلايد ، كما ان الجزء بجانب السلايد يظل فارغ كما في الصورة
http://i.imgur.com/47aIeIB.png

المشرف
avatar

حاولت التجربة من قبل اخي لكن تتداخل الصور فيما بينها

المشرف
avatar

ممكن رابط مدونتك

المشرف
avatar

اخي انا عندي مشكلة في القالب حملتو من موقعك بس افتح الموضوع بعد ما عدلت القالب بيحولني من الموضوع بتاعي اللي في الموقع بينتظر حوالي 5 ثواني ويحولني لي موقعكوم ممكن تساعدني في حل المشكلة اخي
شكراً فريق عمل عرب ويب تحياتي

المشرف
avatar

يا اخي عملت كل شيء ومعا الاخر احت صورة الموضوعين ملتسقة شو الحل

المشرف
avatar

سلايد رائع يا اخي لكن عندي مشكلتين : لا توجد مسافة مع التدوينة اسفل السلايد ، كما ان الجزء بجانب السلايد يظل فارغ كما في الصور

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة