سلايد شو مدونة المحترف
السلام عليكم ورحمة الله تعالى وبركاته اخواني اعضاء وزوار مدونة
ابداع بلوق ها نحن نعود اليكم من جديد باضافة رائعة ومطلوبة من الجميع وهي سلايد شو مدونة المحترف حاليا (محترفي الحماية) سابقا
وللامانة هذا الموضوع منقول من معهد خبراء بلوجر
صورة الاضافة:
الان شرح طريقة التركيب
اذهب الى لوحة التحكم الخاصة بمدونتك ثم اذهب قالب تحرير HTML (ولا تنسى اخذ نسخى احتياطية للقالب)
ابحث عن
]]></b:skin>
وضع قبله مباشرة الكود التالي
#featured{margin-bottom:10px;}.sliderwrapper{position: relative;border-bottom-width: 6px;height: 124px;}.sliderwrapper .contentdiv{visibility: hidden;position: absolute;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;padding:15px 15px 15px 0px;background:#f1f1f1;border-radius: 5px 5px 5px 5px;box-shadow: 0 0 3px #ABABAB;margin-top:10px;}.pagination{text-align: right;margin-top: 50px;padding:5px;}.pagination a{font:11px Arial;color:#a3a3a3;padding:4px 8px 4px 8px;}.pagination a.selected{color:#4f4f4f;}.pagination .prev,.pagination .next { color:#EAEAEA;font-size:0px; background:none; padding:0px; }.featuredPost{width:410px;padding:0px 10px 10px 10px !important;bottom:0;float:left !important;margin-right: 54px;}.featuredPost a{color:#515151;font: 18px "Microsoft Sans Serif";margin:0;padding:0;}.featuredPost h2{margin:0 0 8px 0;}.featuredPost span{font-size:11px; margin:0; color:#797979;}.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}.sliderPostPhoto a img{float: right !important;}.sliderPostPhoto{float: right !important; width:100px !important;}
والان ابحث عن هذا الكود
</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 =21;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,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;}elseif ("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="155" height="121" 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>
مع تغيير اسم القسم اضافات بلوجر الموجود باللون الاحمر الى القسم الذي تريده
numposts1 =21 عدد المواضيع المراد عرضها في السلايدر
ابحث عن هذا الكود
</body>
واضف قبله الكود التالي
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script><script>featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["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>
واخيرا ابحث عن الكود التالي
<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>
الرجاء عند نقل الموضوع ذكر المصدر
الى هنا يكون قد انتهى الدرس الى اللقاء في درس اخر
مشكور اخي
ردحذفهدا رابط مدونتي اتمنى ات تعجبك
http://th3-leader.blogspot.com/