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

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

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

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


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

صورة للسلايد

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

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






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

اولاً

ضع الكود التالي داخل اعدادات ال 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
وضع قبله كود الجافا سكربت التالي :

اقتباس
&lt;script&gt;
/* 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;&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,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&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;يناير&quot;,&quot;فبراير&quot;,&quot;مارس&qu ot;,&quot;ابريل&quot;,&quot;مايو&quot;,&quot;يونيو &quot;,&quot;يوليو&quot;,&quot;أغسطس&quot;,&quot;س بتمبر&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&lt;month.length;u2++){if(parseInt(m)==mont h[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;alwansf&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;617&quot; height=&quot;385&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;alwanip&quot;&gt;&lt;h6&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h6&gt;&lt;div class=&quot;alwand&quot; &gt;'+daystr+'&lt;/div&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summar yPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
document.write(trtd);
j++;
}}
&lt;/script&gt;

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

اقتباس
<div id='alwansd'>
<div class='alwanw' id='slider1'>
&lt;script&gt;
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=publis hed&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt ;\/script&gt;&quot;);
&lt;/script&gt;
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
الخطوة الاخيرة هي البحث عن

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

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

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

معلومات حول الموضوع

سلايد شو تلقائي رائع لمدونات بلوجر العنوان : سلايد شو تلقائي رائع لمدونات بلوجر
الوصف :  سلايد شو تلقائي رائع لمدونات بلوجر سلايد شو تلقائي رائع لمدونات بلوجر السلام عليكم ورحمة الله وبركاته اخواني اليوم جايبلكم سلايد شو رائع بت...
تقييم الموضوع : 4.5
الكاتب : غير معرف

0 التعليقات:

إرسال تعليق

اضف ايميلك ليصلك جديدة المدونة:



Delivered by FeedBurner
اخبار بعدين