السلام عليكم ورحمة الله وبركاتة ، متابعي ومحبي مدونة العربي للتقنية ، عشاق منصة بلوجر هم كثر و في كل مرة يبحثون عن أشياء جديدة لطرحها على مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنها تقريبا كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم كيف يمكنك تركيبه بإحترافية .
إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.
 |
| اضافة سلايد شو تلقائي و احترافي لمدونات بلوجر - slideshow blogger widget |
- وقبل الولوج إلي الشرح يمكنك معاينة السلايد علي الموقع التالي .
- أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.
/* ============= sliderwebponto ============= */
#sliderwebponto h2.title{display:none}
.recent-slider{position:relative;float:right;width:25%;margin-left:10px;margin-bottom:10px;box-shadow:0 0 5px 0 rgba(0,0,0,0.294);background:#fff;border:3px solid #fff}
.recent-slider:first-child{float:right;width:48%;margin-left:10px;margin-bottom:0}
.recent-slider:nth-child(3),.recent-slider:nth-child(5){margin-left:0}
.recent-slider:first-child .slidep-img{height:435px}
.recent-slider .slidep-img{display:block;background-size:cover;width:100%;height:210px}
.recent-slider .slider-bottom{position:absolute;bottom:5%;padding:0 15px}
.recent-slider .slider-bottom .slider-title a{color:#fff;tex-decoration:none;line-height:29px;font-size:20px}
.recent-slider .slider-bottom .slider-title{display:block;margin-bottom:5px}
.recent-slider .slider-bottom .ssummary{font-size:13px;color:#c7c7c7}
.recent-slider .slider-bottom .tagslider{border-radius:20px;background:#fff;padding:0 10px;text-decoration:none;font-size:12px;margin-bottom:5px;color:#0b0b0a;display:inline-block}
.recent-slider:first-child .slider-bottom{bottom:3%}
.recent-slider:first-child .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:rgba(19,106,138,0.67);background:-webkit-linear-gradient(to right,#267871,#136a8a);background:linear-gradient(to right,#267871,#136a8a)}
.recent-slider:nth-child(2) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#4776E6;background:-webkit-linear-gradient(to right,#8E54E9,#4776E6);background:linear-gradient(to right,#8E54E9,#4776E6)}
.recent-slider:nth-child(3) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#FF8008;background:-webkit-linear-gradient(to right,#FFC837,#FF8008);background:linear-gradient(to right,#FFC837,#FF8008)}
.recent-slider:nth-child(4) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#1D976C;background:-webkit-linear-gradient(to right,#93F9B9,#1D976C);background:linear-gradient(to right,#93F9B9,#1D976C)}
.recent-slider:nth-child(5) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#ee0979;background:-webkit-linear-gradient(to right,#ff6a00,#ee0979);background:linear-gradient(to right,#ff6a00,#ee0979)}
.recent-slider .slider-thumb a:before{opacity:.77}
@media screen and (max-width : 1024px) {
/* CSS CODE HERE FOR TABLETS ---*/
.recent-slider:first-child{width:45%}
.recent-slider{width:26.4%}
@media (min-width: 992px) and (max-width: 1199px){
.recent-slider{width:24.9%}
}
}
@media screen and (max-width : 768px) {
/* CSS CODE HERE FOR SMALL TABLETS ---*/
.recent-slider{width:49%}
.recent-slider:first-child .slidep-img{height:400px}
.recent-slider .slidep-img{height:220px}
.recent-slider .slider-bottom .tagslider,.list-post .recent-list:first-child .list-content .psummary{font-size:11px}
.recent-slider .slider-bottom .slider-title a{font-size:15px}
.recent-slider .slider-bottom .ssummary{font-size:12px}
.recent-slider:first-child{width:100%;margin-bottom:10px}
}
@media screen and (max-width : 640px) {
/* CSS CODE HERE FOR IPHONE ---*/
.recent-slider{width:49%}
}
@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
.recent-slider{width:100%}
}
@media screen and (max-width : 320px) {
/* CSS CODE HERE FOR SMALL MOBILES ---*/
.recent-slider:first-child .slidep-img{height:280px}
}
- ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.
<script type='text/javascript'>
//<![CDATA[
$("#sliderwebponto .widget").each(function(){var e=$(this),t=e.find(".widget-content").text(),l=t.split("/"),i=l[0],r=l[1],n=Math.floor(Math.random()*i+1);if(t.match("recentpost"))var o="/feeds/posts/default?alt=json-in-script&max-results="+i;else if(t.match("randompost"))var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;$.ajax({type:"GET",url:o,dataType:"jsonp",success:function(e){for(var t="<ul class='webponto-post'>",l="",i=0;i<e.feed.entry.length;i++){for(var r=e.feed.entry[i],n=r.title.$t,o=0;o<r.link.length;o++){if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){var f=r.link[o].href;break}}var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,170)+"...",v=r.category[0].term;try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w280-h220-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigK-7PSC0852oQe8Vvm-TrCbfgrBU1_rgJTJIoppP9INF1QmLqsQiyh72M2WNP9x_GO3gJ4jVjrRXQI20ktZkwcFH81_bng2d3rpBKalAk-jR-RFVI6xKF1nZKSGL2JSmUfZ1ymfy1RSY/s1600/90.jpg"}l+='<li class="recent-slider"><div class="slideto">',l+='<div class="slider-content">',l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',l+='<div class="slider-bottom">',l+='<a class="tagslider" href="/search/label/'+v+'">'+v+"</a>",l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",0==i&&(l+='<p class="ssummary">'+m+"</p>"),l+="</div>",l+="</div></div></li>"}l+="</ul>",t+=l,$("#HTML418 .widget-content").html(t)}})});
//]]>
</script>
- ثالثا ومع الكود الأخير وهو الكود المسؤل عن إظهار السلايد في المكان الذي تريدة ويمكنك وضعة في اي مكان تريد ان يظهر به السلايد .
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container'>
<div class='fw-widget'>
<b:section class='sliderwebponto' id='sliderwebponto' maxwidgets='1'>
<b:widget id='HTML418' locked='true' title='سلايدر' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>5/فنون</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" لعرض موضوعات عشوائية .
إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.
إرسال تعليق
يمكنك التعليق برابط صورة او فيديو :)