إضافة سلايد شو إحترافي (الإصدار الثاني)

مـتــابـعـي ومــحـبـي مـدونـة تــقـنـي ويـب، عـشـاق مــنـصـة بــلـوجـر هـم كـثـر وفـي كـل مـرة يـبــحـثـون عـن أشـيـاء جـديـدة لـطــرحـهـا عـلـى مـواقــعـهـم ومـدونــاتـهـم وفـي درس الـيـوم ســأعـطــيـكـم إضـافـة يــبـحـث عــنـهـا تـقــريـبـا كـل عـشـاق بــلـوجـر، الا وهـي سـلايـد شـو تــلـقـائي وإحــتـرافـي يــمـكـن إضــافـتـه إلـى جــمـيـع مـدونـات بــلـوجـر، ولـكـن تـابـع الــمـوضـوع جـيـدا لــتـتــلـعـم كـيـف يـمــكـنـك تـركــيـبـه بــإحـتــرافـيـة.

وقـبـل الـولـوج إلـي الـشـرح يـمـكـنـك مـعـايـنـة الـسـلايـد عـلـي الـمـوقـع الـتـالـي :

المعــاينة

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر.
2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* ============= sliderteqniweb ============= */
#sliderteqniweb 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 }
}

5. قم بالبحث عن الوسم </body> ثــم قــم بــوضــع الأكــواد الـتــالــيــة فــوقــة مــبــاشــرة

<script type='text/javascript'> 
//<![CDATA[
$("#sliderteqniweb .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='teqniweb-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/AVvXsEjp-9XtG7yh1HQiGy7cIwQOhwU5Q6OyQDnkA4DkqlekBGKqCDMWUeOmfy3UrF7oKV-QQ-5RFB1UHGFchSABPZMqTFWTXokcflSILc6AlAVzPPtUdj02Iv6Lnh2s3aZCHbMf5yZPxSZKkjI/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='sliderteqniweb' id='sliderteqniweb' 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 لـعــرض مــوضـوعــات عــشـوائيــة.

المصدر : http://www.teqniweb.com/