سلايد شو تلقائي رائع لمدونات بلوجر

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

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

صورة للسلايد



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

مدونة مافيا - 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>
ومبروك عليكم السلايدر

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

الصور المصغرة المرفقة








أكثر...