إضافة المشاركات الشائعة بشكل جديد متحرك وإحترافي على مدونة بلوجر

من أكثر الإضافات شيوعا على المدونات هي إضافة المشاركات الشائعة حيث يعمد المدون جلب الزوار لقراءة عدد كبير من التدوينات هذا ما يعني البقاء أكثر متصل بالمدونة ويعد أمر جيد للسيو وذلك يؤدي إلى خفض ترتيب المدونة

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

طريقة تركيب الإضافة:

1- بعد تسجيل الدخول إلى مدونتك ، ندخل إلى لوحة التحكم في المدونة

2- نختار التخطيط

3- إضافة أداة على القائمة الجانبية السايدبار

4- ننسخ ونلصق الكود أسفله

<center>
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="تحديد الكل" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" dir="ltr" name="txt" rows="100" style="height: 30px; width: 620px;" wrap="VIRTUAL"> 
<style type="text/css">
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://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/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 {-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}
</style>
<div id="featuredbwidget">
</div>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://www.shorou7at-psd.com/",
featuredNum:5,
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://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/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- حفظ الأداة ثم حفظ الترتيب

طريقة التعديل على الإضافة:

إستبدال برابط مدونتك :listURL*

عدد المقالات المعروضة :featured NUM*

إستبدل كلمة false بإسم القسم المراد عرض مقالات :listby Label*

التحكم في أبعاد الصورة :feathumbSIZE*

التحكم بوقت العرض :interval*

إستبدال true-false لجعل عرض المقالات يدوي أو العكس :autoplay*

بهذا ينتهي شرح اليوم أرجوأن أكون قد أفدتكم

بقلمAbdel ben

مدون شغوف أعشق التدوين المعلوماتي ، والإطلاع على آخر مستجدات التقنية وعالم الأنترنت ..أقدم أخبارا تقنية أولا بأول في مجال الهواتف الذكية والشبكات الإجتماعية

إضافة المشاركات الشائعة بشكل جديد متحرك وإحترافي على مدونة بلوجر

بقلمAbdel ben

شارك الموضوع

مواضيع قد تهمك