اضافة سلايد شو في السايد بار لاخر اخبار المدونة
اضافة جديده واضافة اجترافية وهى اضافة سلايد شو فى السيدبار لاخر الاخبار وقد قمنا من قبل بعرض سلايد شو فى السيد بار سوف تجده على المدونة اما اليوم نعرض لكم سلايد شو احترافى صغير فى السيدبار لاخر المواضيع يمكن لاى احد استخدمه فى مدونتك فى اى مجال لا يشرط ان يكون مجال بلوجر او اى مجال محدد فالسلايد خفيف سريع ولن يتسبب فى بطئ مدونتك بل سوف يعطى مدونتك المزيد من الجمال والاحترافية ويمكنك معاينة السلايد من الصورة اعلاه
تركيب السلايد شو:
1- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع فوقه الكود التالى
2- قم بالبحث عن الوسم <head> ثم قم بوضع الكود التالى اسف منه - تحته
3- قم بحفظ القالب ثم قم بالدخول على تخطيط مدونتك.
4- قم بإضافة اداة جديده فى السيدبار او حتى فى الفوتر اذا تريد وضع بها الكود التالى
5- قم بتغيير رابط مدونتى http://www.mustafa1.com/ برابط مدونتك واحفظ الأضافه ومبروك عليك .
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJk45JPQbYvhRnv8Hl7ozL6NlGPIfRvtnYT4gDoAY2JyZ4vx4G6RgQiEwl1uD50AiVrBFqDFQ41rUq7vKyjOxO8EYKcXFXfumroFAJfb5l0Sj-tx3daFG_u8-FQPzFhbSBTJL-0w70MM/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;font: 700 16px 'droid arabic kufi', sans-serif;overflow:hidden} ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'droid arabic kufi', sans-serif;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {font-family: GESSTwoLight;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%} .feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:9px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%} .feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
<link href='https://googledrive.com/host/0B-3cyo_HIYMIbGhrM09nZk5sVmc/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
4- قم بإضافة اداة جديده فى السيدبار او حتى فى الفوتر اذا تريد وضع بها الكود التالى
<div id="featuredbwidget"></div> <script type='text/javascript'> //<![CDATA[ featuredbwidget({ listURL:"http://www.mustafa1.com/", featuredNum:9, listbyLabel:false, feathumbSize:350, interval:3000, autoplay:true, featuredID:"#featuredbwidget" }); function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpufaa5u4mQFooRYzTZApy6tz3xv4-UvX5SH_9zAcQGSxVtenPCpe-v-Izbhei81UskzfYxvnefUSJM5SymhGsOWtpYB2RQhJW-bnIJEToDqprOK92SwLnLk-L2GLg5HctNvYh743hwzw/s500/no-image.png",byMonth:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)}; //]]> </script>
5- قم بتغيير رابط مدونتى http://www.mustafa1.com/ برابط مدونتك واحفظ الأضافه ومبروك عليك .
اضف تعليقاً عبر:
الابتسامات