سلايد شو يعمل بطريقه اوتوماتيكيه لمواضيع مدونة بلوجر سهل التطبيق,, سلام الله عليكم ورحمته وبركاته احبتي زوار مدونة تقارب
موعدنا اليوم مع درس في غايه الاحترافيه والجمال والاناقه انه موضوع يتحدث عن اضافه لطالما بحث عنها المدونين وبنفس الوقت عزفو عنها لصعوبه ادراج روابط المواضيع وروابط الصور والملل من تكرار تلك الطريقه كلما ارادو تغيير الموضوعات المعروضه في السلايد..ولكن مع موضوع اليوم سوف نرتاح من كل هذا العناء وستكون اضافة السلايد شو تعمل بطريقه ذاتيه اوتوماتيكيه وكل ماعلينا هو اختيار قسم واحد فقط من اقسام المدونه ليعرض السلايد شو الموضوعات الموجود في القسم هذا بطريقه اوتوماتيكيه..
واقتراحي هو ان تقوم بانشاء تسميه خاصه بالسلايد شو تقوم بوضع الموضوعات التي ترغب في عرض السلايد فيها ولعرض مثال حى على تلك الاضافه كل ماعليك هو الذهاب الي الصفحة الرئيسيه لمدونة تقارب ومشاهدة اضافة السلايد الشو الموجود اسفل اللوجو وفوق مواضيع المدونه مباشرة .وان اعجبتك وتريد تركيبها في مدونتك عليك بتطبيق الخطوات الموجوده في الاسفل بدقه :خطوه رقم 1: قم بالذهاب الى لوحة تحكم مدونتك ثم الي تصميم ثم الي تحرير HTML
ثم اضغط على خانة توسيع قوالب المستخدم وابحث عن الكود التالي
</head>
وضع الكود الموجود بالاسفل قبلة مباشرة
</head>
<script>
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
numposts1 = 5;
label1 = "tqarob";
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,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="590" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>
summaryPost = 140; ->هذا الرقم خاص بعدد حروف الموضوع المعروضه في السلايد
numposts1 = 5;-> هذا الرقم خاص بعدد المواضيع المعروضه في السلايد و
الكود التالي خاص بعرض وارتفاع الصوره وانصح بعدم اللعب فيه
width="590" height="240"
2,خطوه رقم 2
ابحث عن هذا الكود
</body>
&lt;script src='http://dl.dropbox.com/u/12924430/contentslider.js'&gt;&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;
ابحث عن هذا الكود
<div id='main-wrapper'>
<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
]]></b:skin>
#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
خطوه رقم 5
قم بتغيير تلك الكلمه tqarob في الكود باسم التسميه او القسم الذي تريد عرض موضوعاته في السلايد شو
ثم قم بحفظ قالب مدونتك ومبروك عليك الاضافه
تم الموضوع بحمد الله تعالي
ليست هناك تعليقات:
إرسال تعليق