السلام عليكم ورحمة الله وبركاته
اخواني اليوم جايبلكم سلايد شو رائع بتقنية السي اس اس css تلقائي يقوم بعرض التدوينات من قسم معين في مدونات بلوجر
صورة للسلايد
مثال حي للسلايد شو :
مدونة blog مافيا - Mafiant Blog
ِرح تركيب install السلايد شو سهل فقط اربع خطوات بشوي تركيز بس
اولاً
ضع الكود code التالي داخل اعدادات ال css وهيي التي ضمن رمز Code:
]]></b:skin>
او قبله مباشرة
اقتباس
#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
وضع قبله كود code الجافا سكربت التالي :
اقتباس
<script>
/* Script from:
SimplexDesign - free premium blogspot template */
imgr = new Array();
imgr[0] = "
http://lh3.ggpht.com/_kViOplhgIHI/TK...ges.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 10;
label1 = "برامج";
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,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(""
[0];break}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$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 month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["يناير","فبراير","مارس &qu ot;,"ابريل","مايو","يونيو ","يوليو","أغسطس",&quo t;س بتمبر","أكتوبر","نوفمبر", "ديسمبر"];var day=postdate.split("-"
[2].substring(0,2);var m=postdate.split("-"
[1];var y=postdate.split("-"
[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="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summar yPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>
ثم ابحث عن
رمز Code:
main-wrapper
واضف بعده التالي
اقتباس
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=publis hed&alt=json-in-script&callback=showrecentposts1\">< ;\/script>"
;
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
الخطوة الاخيرة هي البحث عن
رمز Code:
/body
واضف قبله كود code الجافا التالي
اقتباس
<script src='
http://dl.dropbox.com/u/12924430/con...lt;/script>
<script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" 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>
ومبروك عليكم السلايدر
اي مساعدة انا جاهز ولكم كل التحية
رد مع اقتباس
