السلام عليكم ورحمة الله وبركاته

اخواني اليوم جايبلكم سلايد شو رائع بتقنية السي اس اس css تلقائي يقوم بعرض التدوينات من قسم معين في مدونات بلوجر

صورة للسلايد

http://www.traidnt.net/vb/attachment...69-capture.png

مثال حي للسلايد شو :

مدونة مافيا - Mafiant Blog

ِرح تركيب السلايد شو سهل فقط اربع خطوات بشوي تركيز بس

اولاً

ضع الكود التالي داخل اعدادات ال css وهيي التي ضمن رمز Code:
]]>
او قبله مباشرة

اقتباس:
#alwansd{
height: 248px;
margin: 0 0 20px 20px;
width: 660px;
background: #fff;
}
.alwanw{
position: relative;
height:248px;
width: 660px;
}
.alwanw .contentdiv{
visibility: hidden;
position: absolute;
opacity: 1;
}
.alwan-ps{
text-align: right;
width: 618px;
height: 11px;
margin-left: -1px;
display: none;
}
.alwan-ps .toc{
font-size: 0px;
width: 60.8px;
height: 11px;
float: right;
background: #5b5b5b;
margin-left: 1px;
}
.alwan-ps a.selected{
background:#dfdfdf;
}
.alwan-ps .prev, .alwan-ps .next { }
.alwanip{
width: 330px;
height: 248px;
bottom: 0;
float: left !important;
position: absolute;
background: #222;
}
.alwanip a{
background: url(http://1.bp.blogspot.com/-4a_-1hRDqK...s1600/line.png) no-repeat 50% bottom;
font: 12px droidkufi-bold;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 10px;
display: inline-block;
top: 32px;
background-color: #222;
color: #fff;
}
.alwanip h6{margin: 0; height: 112px;}
.alwanip h6 a:hover {color: #888;}
.alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; display: none;}
.alwanip p{color:#888;
text-shadow: 1px 1px #000;
background:#222;
padding: 10px;
height: 104px;
}
.alwansf a img{float: right !important; width: 330px; height: 248px; box-shadow: none;
border-radius: 0; margin-right: 330px;}
.alwansf {float: right !important; width:100px !important;}
.column-center-outer {
width: 100%;
}
.item-thumbnail a img {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 0px;
width: 54px;
height: 54px;
}
.alwantt .item-thumbnail a img {
border: 1px solid rgb(105, 105, 105);
background: rgb(60, 60, 60);
}
.alwantt .PopularPosts .widget-content ul li {
border-top: none;
padding: 4px 0;
}

بعدها ابحث عن
رمز Code:
/head
وضع قبله كود الجافا سكربت التالي :

اقتباس:
<script>
/* Script from:SimplexDesign - free premium blogspot template */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TK...ges.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 150;

numposts1 = 10;
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;يناير&quot;,&quot;فبراير&quot;,&quot;مارس &qu ot;,&quot;ابريل&quot;,&quot;مايو&quot;,&quot;يونيو &quot;,&quot;يوليو&quot;,&quot;أغسطس&quot;,&quo t;س بتمبر&quot;,&quot;أكتوبر&quot;,&quot;نوفمبر&quot;, &quot;ديسمبر&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;alwansf&quot;><a href=&quot;'+posturl+'&quot;><img width=&quot;617&quot; height=&quot;385&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/></a><div class=&quot;sliderPostInfo&quot;></div></div><div class=&quot;alwanip&quot;><h6><a href=&quot;'+posturl+'&quot;>'+posttitle+'</a></h6><div class=&quot;alwand&quot; >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summar yPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}



</script>



ثم ابحث عن
رمز Code:
main-wrapper
واضف بعده التالي

اقتباس:


<script>
document.write(&quot;<script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&orderby=publis hed&alt=json-in-script&callback=showrecentposts1\&quot;>&lt ;\/script>&quot;);
</script>








الخطوة الاخيرة هي البحث عن

رمز Code:
/body
واضف قبله كود الجافا التالي

اقتباس:
<script src='http://dl.dropbox.com/u/12924430/con...lt;/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>
ومبروك عليكم السلايدر

اي مساعدة انا جاهز ولكم كل التحية