17 يوليو 2016

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

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

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

إضافة سلايدر المشاركات الشائعة في بلوجر تُعد من الإضافات المُهمة في بلوجر ولها العديد من الميزات مثل التحكم بحجم الصور عرض المقالات حسب التسمية التحكم بسرعة التنقل والمزيد

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

أولًا إذا كُنت لا تعرف من أين يأتي الزوار أو ما هو مصدر جلب الزوار إلى المدونة يُنصح باستخدام 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.
مواضيع ذات صلة
إضافة سلايدر المشاركات الشائعة في بلوجر
4 / 5
بواسطة

هناك 32 تعليقًا :

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك صديقي
      لا ننشر روابط إشهار =t

      حذف
  2. هل يمكن اخى ان تقوم هذه الاضافة بعرض احدث المواضيع ؟ بدل المشاركات الشائعة ؟
    شكرا لك

    ردحذف
    الردود
    1. نعم صديقي يُمكن ذلك
      فقط استبدل رابط مدونتي برابط مدونتك
      دون التعديل على شيء في كود الجافا
      وهكذا أي مقال جديد سوف يتم نشره في المدونة سوف يظهر
      بمعنى سوف تظهر فقط أحدث 9 مشاركات في المدونة

      حذف
    2. مشكور اخى وفى انتظار جديدك دائماً

      حذف
    3. لا شكر على واجب صديقي
      بالتوفيق =q

      حذف
  3. تدوينة جميله واضافة رائعه شكرا لك

    ردحذف
  4. إضافة جميلة جدا شكرا لك أخي منير

    ردحذف
    الردود
    1. شكرًا لك صديقي
      مرورك الجميل =e

      حذف
  5. غير معرف25 يوليو, 2016

    ينفع تعديل عرض الاضافة ام لا ؟

    ردحذف
    الردود
    1. ينفع
      بس هي حجمها مناسب للسايدبار فقط عدل على الطول

      حذف
  6. اضافة رائعه شكرا لك

    ردحذف
    الردود
    1. شكرًا لك صديقي
      مرورك الرائع

      حذف
  7. حملة_شاركنا_لندعمك_تم_النشر_في_مدونتي

    ردحذف
    الردود
    1. صديقي الهاشتاج لا يتم نشره هنا
      اتمنى التقيد بقوانين الحملة

      حذف
  8. السلام عليكم اربد ان اعرف كيف احذف موضيع ذات صلة في المدونة لانها لا تظهر الصور

    ردحذف
    الردود
    1. وعليكم السلام
      صديقي ابحث في قالبك عن كلمة مواضيع ذات صلة
      وقم بمسح الكود الخاص بها

      حذف
  9. كالعادة تبدع في طرح وتبدع في اختيار محتوى بل العاده اصبح الابداع من عناوينك
    اداة رائعة مثلك صديقي =r

    ردحذف
    الردود
    1. شكرًا لك صديقي
      وشكرًا لمرورك الرائع
      احترامي وتقديري لشخصك الكريم =e

      حذف
  10. السلام عليكم
    صديقي انت قلت لي من 2015 انك بتنزل قالب للمدونات الشخصية
    لليوم مانزلته =x
    هل راح ينزل ؟ شكرا

    ردحذف
    الردود
    1. وعليكم السلام
      أهلاً بك صديقي
      صدقًا لم أجد قالب أجنبي مُناسب لأقوم بتعريبه

      حذف
  11. السلام عليكم
    انا مبتدا فى المدونات وعندى سؤال
    انا لو عندى اكثر من موضوع فى المدونه وعايز انشر جزء من الموضوع والباقى رؤيه المزيد كيف يتم ذلك وهل يمكن تطبيقه فى اكثر من موضوع فى مدونه واحده ؟؟ ارجوا الافاده

    ردحذف
    الردود
    1. وعليكم السلام
      أكثر المدونات تكون هذه الخاصية به متوفرة
      فقط قم باستخدام قوالب بلوجر الحديثة

      حذف
  12. السلام عليكم ورحمة الله بارك الله فيكم موضوع رائع كالعادة
    اخي لو ممكن تعطيني حل لهذه المشكلة بارك الله فيك
    الصورة قم بمسح المسافة

    file:///C: /Users/hp/Desktop /aaa.PNG

    ردحذف
    الردود
    1. وعليكم السلام
      الصورة لا تعمل قم برفعها على مركز رفع للصور

      حذف
  13. السلام عليكم اخي العزيز بارك الله فيك على المجهود الكبير
    اريد فقط طلب منك اردت ان اخصصه لقسم محدد لكنني لم استطع
    رغم انني غير كلمة false باسم على هذا الشكل
    listbyLabel:بلوجر,

    ردحذف
    الردود
    1. وعليكم السلام
      أهلاً بك صديقي
      تقريبًا هو لا يدعم التسميات العربية
      أو جرب وضع كلمة false بدلاً من الرابط في listURL
      مع وضع تسمية القسم في listbyLabel

      حذف
  14. غير معرف18 أغسطس, 2016

    ممكن رابط هذا القالب بهذه الاضافات

    ردحذف
    الردود
    1. لا انصح باستخدامه اعتذر منك هو خاص بالإضافات
      ولكن القالب والإضافات موجودة في مدونتنا
      يُمكنك استخدامها

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r