اضافة افضل سلايد شو لمدوناتكم

<div>

بسم الله الرحمان الرحيم



السلام عليكم ورحمة الله تعالى وبركاته، كما عودناكم دائما على تقديم لكم اهم الادوات التي تحتاجونها لمدوناتكم، لكي تصبح بشكل انيق وجميل لتجدب الزائر وتعطي انطباعا جيدا عند زيارت مدوناتكم، اليوم و بادن الله ساقوم بشرح طريقة اضافة سلايد شو المدونتكم ،هذا يستعمله العديد من المدونين في مدوناتهم ، ومن بينهم المدون المعروف في العلم العربي وصاحب مدونة المحترف "رغيب امين" يمتاز هذا السلايد شو بعرضه عدد غير محدود،والخفة وايضا التنسيق الجميل،لكي لا اطيل عليكم ساذخل مباشرة في الشرح: اولا الذهاب الى لوحة التحكم ثم الى القالب واخد نسخة احتياطية لقالب مدونتكم ،نعم هذه العملية مهمة لكي تتفادى اي خطئ فيما بعد ، اعلم ان هاته العملية اصبح يعرفها العديد من الاشخاص ، لكن دائما ما احب تذكير المدونون الجدد المبتدئين ،ناتي الان الى الخطوة الاهم

من لوحة التحكم نضغط على " القالب " ثم " تحرير"

بعد ذلك نقوم بالضغط في الكيبورد على ctrl + f

ونبحث عن هذاالكود : ]]>

ونضيف قبله الكود التالي:




#featured{
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 124px;
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opa city=100);-moz-opacity: 1;opacity: 1;
padding:15px 15px 15px 0px;
background:#f1f1f1;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #ABABAB;
margin-top:10px;
}
.pagination{
text-align: right;
margin-top: 50px;
padding:5px;
}
.pagination a{
font:11px Arial;
color:#a3a3a3;
padding:4px 8px 4px 8px;
}
.pagination a.selected{
color:#4f4f4f;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:410px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
margin-right: 54px;
}
.featuredPost a{
color:#515151;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#797979;}



.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}
.sliderPostPhoto a img{float: right !important;}
.sliderPostPhoto{float: right !important; width:100px !important;}


الآن أضف الكود التالي قبل :


<script>
/* Script from:SimplexDesign - free blogger template */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TK...ges.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;
numposts1 =21;
label1 = &quot;إنترنت&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;<&quot;);for(var i=0;i<s.length;i++){if(s[i].indexOf(&quot;>&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;>&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,c hop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floo r((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(&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>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(&quot;<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)&&(b!=-1)&&(c!=-1)&&(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; ,&q uot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quo t;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<month.length;u2++){if(parseInt(m)==mont h[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class=&quot;contentdiv&quot;><div class=&quot;sliderPostPhoto&quot;><a href=&quot;'+posturl+'&quot;><img width=&quot;155&quot; height=&quot;121&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/></a><div class=&quot;sliderPostInfo&quot;></div></div><div class=&quot;featuredPost&quot;><h2><a href=&quot;'+posturl+'&quot;>'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summa ryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>

مع تغيير" إنترنت " باسم القسم الذي سيتم عرض مواضيعه عشوائيا
numposts1 =21 : عدد المواضيع المعروضة

وهذا الكود قبل :


<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script>
<script>
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)
}
})
</script>


ومن القالب أضف الكود التالي بعد :















وفي الخير نقوم بحفظ القالب ونقوم بعرض المدونة للمعاينة ، و مبروك عليكم سلايد شو جميل وانيق

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




للمزيد من الاضافات والبرامج والعديد من الاشياء الخرى تفضلوا بزيارتنا

:icon30::icon30::icon30::icon30:

أكثر...