كن مهووس: سلايدر شو تلقائى يشبه السلايدر الخاص بمدونتى 2016

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
سلايدر شو تلقائى يشبه السلايدر الخاص بمدونتى 2016
كتب بواسطة
عدد التعليقات
0 التعليقات



نواصل مع الإصدار الثاني من السلايدرات مع هذا السلايدر الجميل والبسيط سيجعل موقعك ينبض بالحياة 😁يتميز بمرونته وتناسقه مع أي قالب وكذلك جلبه للمواضيع تلقائيا محدودة في 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: #1D1C1C; padding: 10px 15px; opacity: .45;} .cooltitlear1web a { color: #fff; text-transform: uppercase; font-weight: bold; font-size: 14px;font-family:Droid Arabic Naskh; } .cooltitlear1web a:hover { color:#fff} .cooltitlear1web p { color: #fff; } .cooltitlear1web p:hover { 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;opacity: .45;} .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'> فضع الكود فوقه المهم ضعه فى المكان الذى تريده ولكن لا تضعه من خلال اداة html/javascript لانه لن يكون مستقر
<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>

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


محول الاكواد الابتسامات





أفضل الفيديوهات
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    عبدالله محمد

    مدون ومحترف بلوجر

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير