السلام عليكم ورحمة الله وبركاتة ، متابعي ومحبي مدونة نقطة ويب ، عشاق منصة بلوجر هم كثر و في كل مرة يبحثون عن أشياء جديدة لطرحها على مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنها تقريبا كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
 |
| إضافة سلايد شو إحترافي الإصدار الأول |
أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.
#recenpo .widget-content{font-family:inherit }
.recentsp-Webponto .Webponto-post{float:right;overflow:hidden;margin:0;padding:0}
.Webponto-post .recent-box{float:right;width:41%;position:relative;margin-bottom:11px}
.Webponto-post .recent-box:first-child{width:58%;margin-left:11px}
.Webponto-post .recent-box:first-child .magp-thumb img{background-size:cover;width:100%;height:499px}
.magp-thumb img{background-size:cover;width:100%;height:244px}
.recent-box .mag-content{position:absolute;bottom:2%;padding:0 17px;right:0}
.recent-box .mag-content .postwriter,.recent-box .mag-content .magp-date{display:inline-block}
.Webponto-post .post-title .magp-title{font-weight:700;text-shadow:1px 1.732px 0 rgba(0,0,0,0.086);color:#fff;font-size:18px;-webkit-transform:matrix(1.04943167426545,0,0,1,0,0);-moz-transform:matrix(1.04943167426545,0,0,1,0,0);-ms-transform:matrix(1.04943167426545,0,0,1,0,0);transform:matrix(1.04943167426545,0,0,1,0,0);margin:0 10px}
.Webponto-post .mag-bottom .psummary{color:#c4c4c4;font-family:inherit ;line-height:21px;margin-bottom:2px;font-size:15px}
.Webponto-post .recent-box .magp-thumb a:before{content:'';position:absolute;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:-webkit-linear-gradient(top,rgba(31,31,31,0.26) 0%,rgba(31,31,31,0.59) 100%);background:linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);background:-o-linear-gradient(to bottom,rgba(31,31,31,0.14) 0%,rgba(31,31,31,0.39) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#421f1f1f',endColorstr='#961f1f1f',GradientType=0)}
.Webponto-post .post-title .magp-title:before{content:'';background:#ff8400;display:inline-block;width:10px;height:10px;margin-left:10px}
.Webponto-post .magp-date .post-date{color:#dedede;font-size:14px}
.Webponto-post .magp-date .post-date:before,.Webponto-post .postwriter .writer-p:before{content:'\f073';display:inline-block;font-family:fontawesome;margin-left:5px;color:#ff8400}
.Webponto-post .postwriter .writer-p{color:#dedede;font-size:14px}
.Webponto-post .postwriter{margin-left:10px}
.Webponto-post .postwriter .writer-p:before{content:'\f007'}
@media screen and (max-width : 768px) {
.recentsp-Webponto{float:right;display:none}}
ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.
<script type='text/javascript'>
//<![CDATA[
$("#recenpo .widget").each(function(){var t=$(this).find(".widget-content").text(),e=t.split("/"),l=e[0],i=e[1],r=Math.floor(Math.random()*l+1);if(t.match("recentpost"))var n="/feeds/posts/default?alt=json-in-script&max-results="+l;else n=t.match("randompost")?"/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+r+"&max-results="+l:"/feeds/posts/default/-/"+i+"?alt=json-in-script&max-results="+l;$.ajax({type:"GET",url:n,dataType:"jsonp",success:function(t){for(var e="<ul class='Webponto-post'>",p="",o=0;o<t.feed.entry.length;o++){var f,h;for(l=(f=t.feed.entry[o]).title.$t,i=0;i<f.link.length;i++)if("replies"==f.link[i].rel&&"text/html"==f.link[i].type&&(r=f.link[i].title,n=f.link[i].href),"alternate"==f.link[i].rel){var m=f.link[i].href;break}try{h=0==o?f.media$thumbnail.url.replace("s72-c","w600-h400-c").replace("default","hqdefault"):f.media$thumbnail.url.replace("s72-c","w400-h200-c").replace("default","hqdefault")}catch(t){s=f.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),h=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-mItDhL5ylA1-F0PzZCyW3BKFqUUNKL9D1qwv1g3728JyoT_XuHqrizgDl43YzN_ZtrubKhArtcGoT7rKulcJ5ZWKtg4yuPgqvd6mC_bftb8Ul-8bsXiswNbM_DeswGw1aLDGf_HNy0/w600-c-h400/90.jpg"}p+='<li class="recent-box"><div class="recento">',p+='<div class="magp-thumb"><a href="'+m+'" target ="_top"><img class="magp-img" src="'+h+'" title="'+l+'" alt="'+l+'"/></a></div>';var u=f.author[0].name.$t,v=f.published.$t,g=f.content.$t;p+='<div class="mag-content">',p+='<div class="post-title"><a class="magp-title" href='+m+' target ="_blank">'+l+"</a></div>",p+='<div class="mag-bottom">',p+='<p class="psummary">'+$("<p>").html(g).text().substring(0,150)+"...</p>",p+='<div class="postwriter"><a href='+f.author[0].uri.$t+' class="writer-p">'+u+"</a></span></div>";for(var x=[1,2,3,4,5,6,7,8,9,10,11,12],k=["01","02","03","04","05","06","07","08","09","10","11","12"],A=v.split("-")[2].substring(0,2),w=v.split("-")[1],y=v.split("-")[0],j=0;j<x.length;j++)if(parseInt(w)==x[j]){w=k[j];break}p+='<div class="magp-date"><a href="'+m+'" class="post-date"> '+A+"/"+w+"/"+y+"</s></div>",p+="</div>",p+="</div></div></li>"}e+=p+="</ul>",$("#HTML784 .widget-content").html(e)}})});
//]]>
</script>
ثالثا ومع الكود الأخير وهو الكود المسؤل عن إظهار السلايد في المكان الذي تريدة ويمكنك وضعة في اي مكان تريد ان يظهر به السلايد .
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='recentsp-Webponto'>
<div class='container'>
<b:section class='no-items' id='recenpo' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML784' locked='true' title='سلايد شو' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>3/فنون</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>
وهناك ثلاث خيارات لعرض السلايدر.
- استبدال "فنون" بإحدى التسميات الموجوده في مدونتك لعرض التدوينات منها فقط .
- استبدال "فنون" ب "recentpost" لعرض آخر الموضوعات .
- استبدال "فنون" ب "randompost" لعرض موضوعات عشوائية .