كيفية اضافة اداة المشاركات الشائعة في بلوجر
كيفية اضافة اداة المشاركات الشائعة في بلوجر
السلام عليكم ورحمة الله وبركاته
معاينةلابد انك سألت نفسك كيف يمكنني جعل الزائر يبقى وقت اطول في المدونة
- فعندما يقرئ الزائر المزيد من مواضيع مدونتك ستحصل على
- seo-سيو
- تكسب المال من خلال مشاهدته لاعلاناتك
- احتمالية تعلق الزائر بمدونتك وبالتالي تحصل على زائر دائمي
- والمزيد
السؤال الان كيف سافعل ذلك
حسنا هذا هو درسنا لليوم
- طريقة التركيب
- ادخل الى لوحة التحكم الخاص بك من هنا
- اذهب للتخطيط
- اضافة اداة في السايد بار
- اضغط اضافة اداة
- ثم HTML/JAVA SCRIPT
- انسخ الكود التالي وضعها بالاداة واحفظ الاداة
نرجوا منكم الانتباه يجب عليك عدم نسخ الارقام الموجودة في اليمين بعد الخط الاخضر لانها ليست ضمن الكود وهذه الصورة توضح ذلك
[/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbVa4SiiOk__q5ucxqaehDO0Mw2nUWBKULzyVoyjCF5PZ5GUBbHT3dRrhOGdeeiUdbVlDf2B_39-3ElxEFw8Gx_cxLuc3pLIDjszWAt1Rpa0TPEwt6rFgv39bhW80U4nN0w0fIxCnJnM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDkOUOMcfekNHpiiDqlnnM38IDomnwQB4cKPvq4BPw5rNbsJCzcFo-UQB6wNJSZtknInC-aRontFcRqb1EdGGRy0UmJe9A45VPDtTjNFxfBuDoFySdYsXbclGMaKpvG7JPn9jGlOz0MaI/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