سلايدر تلقائي لعرض المواضيع حسب التسميات مدونة بلوجر
سلايد شو slide show يقوم بعرض مواضيع المدونة حسب التسميات لمدونة بلوجر الاصدار الثاني. كنا قد قدمنا لكم مجموعة من اضافات السلايد شو من بينها سلايد شو يعرض المواضيع حسب التسميات، وفي هذه التدوينة سنقدم لكم سلايد شو أخر يقوم بعرض المواضيع حسب التسميات...
كيفية تركيب سلايد شو للمدونة:
- اليك رابط لمعاينة السلايد شو.
- قم بدخول الى مدونتك ثم المظهر بعدها تحرير html و ابحث عن.
</b:skin>
بعد عثورك عليه ضع فوقه الكود التالي.
.recent-slider{text-shadow:0 1px 0 rgba(0,0,0,0.15);padding-left:5px;padding-right:1px;margin:0 auto;width:auto;}
.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}
.nivo-box,.nivoSlider{overflow:hidden}
.nivoSlider{position:relative;height:300px}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}
.top-l-slider .nivoSlider{position:relative;height:400px}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}
.nivo-box,.nivo-slice{z-index:5;position:absolute}
.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}
.nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px tahoma,sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}
.nivo-caption p{text-align:Center;font:400 13px tahoma,sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:1px;background:rgba(34, 34, 34, 0.83);line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:1px;margin:0;line-height:37px!important;background:#47cf73 ;font:400 20px tahoma,sans-serif}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:1px;line-height:30px!important;background-color:rgba(255, 255, 255, 0.28);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}
.nivo-prevNav{left:10px}
.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}
.nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align: center; z-index: 9; position: relative; bottom: 290px; font-size: 0;}.nivo-controlNav a{cursor: pointer; display: block; width: 10px; height: 10px; background: #FFF; float: right; border-radius: 10px; margin-right: 5px;}.nivo-controlNav a.active{background:#47cf73}
- اعد البحث عن.
</body>
بعد ايجاده ضع فوقه الكود التالي.
<script src='//rawgit.com/mo3awin/slideshow5/master/slide5.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".recent-slider").each(function(){$(this).append('<div id="slider"></div>');var t="http://www.yoursite.com/feeds/posts/summary/-/"+$(this).attr("data-label")+"?max-results=6&alt=json-in-script",l=$(this);$.ajax({type:"GET",url:t,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){for(var e=0;e<t.feed.entry.length;e++){for(var a=t.feed.entry[e],r=0;r<a.link.length;r++)if("alternate"==a.link[r].rel){var i=a.link[r].href;break}try{var s=a.media$thumbnail.url.replace("s72-c","h300-w1200-no")}catch(t){s="https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"}var n='<a href="'+i+'"><img src="'+s+'" title="<a href=\''+i+"'><h3>"+a.title.$t+"</h3></a><p>"+a.summary.$t.substr(0,180)+'</p>"/></a>';l.find("#slider").append(n)}$("#slider").nivoSlider({effect:"random",pauseTime:5e3})}})})});
//]]></script></b:if>
قم بتغيير رابط الازرق http://www.yoursite.com برابط مدونتك.
- نأتي الان مع الكود المسؤول عن اظهار السلايدر، ويمكنك وضعه في تخطيط المدونة.
<div class="recent-slider" data-label="بلوجر"></div>
قم بتغيير الكلمة بلوجر الى التسمية التي تريدها، بعدها قم بحفظ وشاهد النتيجة.