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

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

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

السؤال الآن هو: كيف يُمكننا أنّ نُشجع الزائر على قراءة عدد قليل من المقالات أو أكثر من مقال في المدونة؟

أولًا إذا كُنت لا تعرف من أين يأتي الزوار أو ما هو مصدر جلب الزوار إلى المدونة يُنصح باستخدام Google Analytics مع أنّ هذا الأمر خارج موضوعنا ولكنّ استخدام خدمة جوجل هذه سوف تعود بالفائدة الكبيرة حيثُ يُمكننا تتبع مصدر الزيارات ومعرفة كل شيء عن زوار المدونة.

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

ولكنّ كيف يُمكن فعل ذلك؟

تكتيكات من أجل إقناع الزوار في البقاء فترة أطول

الكثير من المدونين يستخدمون عدة طرق وعدة تقنيات تقوم بجعل القراء يبقون فترة اطول. ومن أهل الطرق هي إضافة المشاركات الشائعة في السايد بار (الشريط الجانبي)، ولكنّ أكثر هذه الإضافات تكون ثابتة ولا تلفت الانتباه أو تجذب القارئ وتكون عبارةً عن صور صغيرة وثابتة، ولكنّ الآن إذا أردت جذب انتباه الزوار وتسليط الضوء على المشاركات الشائعة بشكلها الجديد والتي تعمل بتقنية السلايدر ويُمكن التحكم بحجمها مثل تغيير عرض أو طول الصور، التحكم بسرعة التنقل بين المواضيع، عرض عدد معين المشاركات والكثير من المميزات الرائعة الأخرى، والميزة التي يبحث عنها الكثير هي عرض المقالات حسب تسمية مُعينة حيثُ أنّه يُمكن عرض مقالات قِسم مُعين، ويُمكن معاينة الإضافة من خلال الزر التالي.

معاينة

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

1- الدخول إلى لوحة تحكم بلوجر> التخطيط> إضافة آداة في السايدبار> الضغط HTML/JavaScript.
2- نسخ الكود التالي ولصقه داخل الآداة التي قُمنا بإضافتها.

<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/AVvXsEimRF0XbXX7-_NPipfhYllfBqX6e1n_vZdj0p46GnlyJkr9tO8rQcR9CrhgxsETFTB734k0LhZzS93sH6g0teZgR3mdg18fhXvjoLeJ7NZGXa9OaLYr7jOr_mrBQn5Cdaaz7dVLXXsrdkM/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://mudwnp.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/AVvXsEiLV6a0jbaxvp5autT8rI91cB9bgg29FaXN5y82yb30oJFF4w0KiIsvRwZMH1dLufJmNqUqboR_4jPDuf1irfFWu4ZdU2-oT9W8Ru8E977G59HCO3XWkaOror7_oBEUpItoiQRrDHVDytE/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: استبدل رابط مدونتي https://mudwnp.blogspot.com/ برابط مدونتك.
featuredNum: تغيير عدد 9 للعدد الذي تُريده، حيثُ أنّه المسؤول عن عدد عرض المقالات.
listbyLabel: من أجل عرض مقالات قسم مُعين استبدل كلمة false بأسم القسم المراد عرض مقالاته.
feathumbSize: للتحكم بحجم أو بُعد الصورة.
interval: للتحكم بالوقت اللازم الخاص بالتنقل بين المقالات.
autoplay: للتحكم بحركة التنقل الخاصة بالمقالات ومن أجل وقف عمل السلايدر وجعله يدوي استبدل true بكلمة false.

3- بمجرد الانتهاء من إعدادات الكود يجب الضغط على حفظ.
أتمنى أنّ تكون أعجبتكم الإضافة، ويُمكن تطويرها للأفضل إذا كُنت تملك خبرة في CSS.

7/17/2016

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 7/17/2016 32 تعليقات