سلايدر التلقائي بتنسيقك الخاص

04-18-2013, 11:33 PM

bboyhishem

مدون جديد

تاريخ التسجيل: Feb 2013

المشاركات: 40

سلايدر التلقائي بتنسيقك الخاص

أنا : bboyhishem

سجل معنا لتتمتع بهذه الخاصية

سلايدر رائع لعرض مواضيعك المميزة.هذا السلايد يعمل بشكل تلقائي بحيث أنك لا تحتاج لإضافة صور أو كتابة شيء كل ما عليك فعله هو أن تربطه بأحد الأقسام وهو سيقوم بجلب صور وعنوان وملخص الموضوعات ويظهرها تلقائياً.
لرؤية السلايدر هنا:

معــاينة

طريقة التركيب:
أول شيء خد نسخة إحتياطية مت قالبك لتجنب المشاكل
ثم أدخل إلى تحرير القالب.

ضع الكود التالي فوق الوسم </body>

كود بلغة HTML:

&lt;script src='https://cnmu.googlecode.com/svn/trunk/cnmuautos.js'&gt;&lt;/script&gt;
&lt;script&gt;
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
&lt;/script&gt;

وأضف الكود التالي تحت هذا الكود <'div id='main-wrapper>

كود بلغة HTML:

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

السلايد معد ليظهر في الصفحة الرئيسية فقط بحيث لا يسبب ثقل في المتصفح للزائر.

ثم أضف الكود التالي فوق الوسم </head>

كود بلغة HTML:

&lt;script&gt;
imgr = new Array();
imgr[0] = &quot;https://lh3.googleusercontent.com/-tetsDYYQsVE/UW7i2KaUvWI/AAAAAAAABLA/MQd4Nx4U5Mg/s200/noimage.png&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 200;
numposts1 =18;
label1 = &quot;القسم&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);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&lt;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=\&quot;&quot;,a); c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;155&quot; height=&quot;121&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
document.write(trtd);
j++;
}}
&lt;/script&gt;

الرقم 200 هو عدد حروف الملخص
الرقم 18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة أو النقصان بحسب عرض مدونتك
القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه.

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

الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر

قم بإضافته فوق الوسم </b:skin> بعد توسيعه

كود بلغة HTML:

#featured{
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 124px;
}
.sliderwrapper .contentdiv{
background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);
border:3px solid #7C7B7B;
height:180px;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;
margin-top: 10px;
opacity: 1;
padding: 15px 15px 15px 0;
position: absolute;
visibility: hidden;
width: 623px;
}

.pagination{
text-align: left;
margin-top: 110px;
padding:5px;
margin-left:5px;
}
.pagination a{
background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF);
font:13px Arial;
font-weight:bold;
color:#a3a3a3;
padding:4px 8px;
border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;
box-shadow: 0 1px 2px #000;-moz-box-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 1px 2px #000;
margin-right:4px;
}
.pagination a.selected{
color:#fff;
background:#000;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:380px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
}
.featuredPost a{
color:#000;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#C94545;}
.featuredPost p{font-size:13px; margin:4px 0 0 0; color:#797979;}
.sliderPostPhoto a img{float: right !important;width:220px; height:180px;border:2px solid #000;}
.sliderPostPhoto{float: right !important; width:100px !important;}

إنتهى شرحنا اليوم ولا تبخلوا علينا بردودكم المشجعة.

المصدر:سلايدر التلقائي بتنسيقك الخاص

__________________
أهلا ومرحبا بكم في مدونة محترفي بلوجر www.b-profe.blogspot.com

طريقك نحو الإحتراف =)

من مواضيع bboyhishem

التعديل الأخير تم بواسطة كن مدون ; 04-19-2013 الساعة 12:38 AM

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

التلقائي, الخاص, بتنسيقك, سلايدر

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
سلايدر من مدونة بلوجر توب التلقائي وشكل مميز	مى محمد	إضافات وأدوات بلوجر	8	05-02-2013 04:41 AM
اريد تعديل على سلايدر شو المحترف	صهيب عوده	طلبات الدعم الفني	9	02-01-2013 02:13 PM
جعل سلايدر المحترف يناسب مدونتك	osama	دروس بلوجر	0	01-16-2013 09:45 AM
طلب سلايدر بسيط [تمت التلبية]	abdullahbb	طلبات تعديل القوالب	4	09-02-2012 10:41 PM
طلب سلايدر	echibi	طلبات الدعم الفني	1	08-08-2012 05:29 PM

سلايدر التلقائي بتنسيقك الخاص

إضافات وأدوات بلوجر