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

السلام عليكم ورحمة الله وبركاته

لابد انك سألت نفسك كيف يمكنني جعل الزائر يبقى وقت اطول في المدونة

فعندما يقرئ الزائر المزيد من مواضيع مدونتك ستحصل على

seo-سيو
تكسب المال من خلال مشاهدته لاعلاناتك
احتمالية تعلق الزائر بمدونتك وبالتالي تحصل على زائر دائمي
والمزيد

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

حسنا هذا هو درسنا لليوم

طريقة التركيب

ادخل الى لوحة التحكم الخاص بك من هنا
اذهب للتخطيط
اضافة اداة في السايد بار
اضغط اضافة اداة
ثم HTML/JAVA SCRIPT
انسخ الكود التالي وضعها بالاداة واحفظ الاداة

[warning title="ملاحظة" icon="exclamation-triangle"]
نرجوا منكم الانتباه يجب عليك عدم نسخ الارقام الموجودة في اليمين بعد الخط الاخضر لانها ليست ضمن الكود وهذه الصورة توضح ذلك
[/warning]

الكود
[code type="HTML"]
<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:"http://protime-me.blogspot.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://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>

listURL:استبدل الرابط http://protime-me.blogspot.com/ برابط مدونتك
featuredNum:ضع هنا رقم المواضيع التي تريد اظهارها بالسلايدر
listbyLabel:اذا اردت ان تظهر اخر المواضيع او المشاركات الشائعة في السلايدر لاتقم بتعديله ام اذا اردت ان تظهر مواضيع قسم معين فقط قم بتغيير false باسم القسم التي تريد اظهار مواضيعه
feathumbSize: للتحكم بحجم وبُعد الصورة

interval: الوقت اللازم للتنقل بين المشاركات
autoplay: لجعل السلايدر يدوي فقط قم بتغيير كلمة true بكلمة false

انتهى وايضا اذا كنت تملك خبرة في ال css تستطيع تطويره وجعله افضل

الاضافة من طرف صديقي مدون محترف

التسميات

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

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

إرسال تعليق

Author Name

نموذج الاتصال