18 سبتمبر 2015

مدون محترف اضافات بلوجر اضافة المشاركات الشائعة بثلاثة اشكال مختلفة

اضافة المشاركات الشائعة بثلاثة اشكال مختلفة

اضافة المشاركات الشائعة بثلاثة اشكال مختلفة و احترافية

اضافة المشاركات الشائعة بثلاث اشكال مختلفة - الجميع يعرف وظيفة المشاركات الشائعة في كل موقع على الويب أو مدونة على بلوجر
 فهي تقوم بعرض أخر المواضيع و الأكثر مُشاهدة مِن قِبل الزوار على أساس الوقت ويُمكن أن يكون كل اسبوع أو كُل شهر أو كُل الوقت و هي لا غنى
 عنها لذلك قررنا اليوم في مدون محترف مشاركتكم هذه الإضافة بثلاثة أشكال مُختلِفة حتى تتناسب مع أذواق الجميع و أتمنى أن تُعجبكم.


ننصحك بقراءة : اضافة المشاركات الشائعة على شكل شبكة
و الإطلاع على : اضافة المشاركات الشائعة الملونة في بلوجر

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

  1. ادخل إلى لوحة تحكم بلوجر
  2. انتقل إلى تبويب قالب
  3. انقر على تحرير HTML

ستايلات الإضافة


ابحث عن الوسم ]]></b:skin> و اضف احد الاكواد التالية فوقه

 الشكل الاول

الشكل الاول من اضافة المشاركات الشائعة
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-family: droid arabic kufi;font-size:12px;line-height:1.3em;font-weight:700}
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:400;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{font-family: droid arabic kufi;position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(21, 6, 21, 0.35);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:12px;line-height:1.3em;font-weight:700}


الشكل الثاني

الشكل الثاني من اضافة المشاركات الشائعة
/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{margin: 3px;font-family:droid arabic kufi;text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-family:droid arabic kufi;font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{float:right;display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}


الشكل الثالث

الشكل الثالث من اضافة المشاركات الشائعة
/* Popular Post Style 3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:700;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba (23, 11, 23, 0.38);padding:10px;font-family: droid arabic kufi;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

أكواد الجافا سكريبت

الان بعد إضافة أحد اكواد الـ CSS من أجل أن تعمل الإضافات يجب علينا إضافة أحد أكواد الجافا سكريبت فوق الوسم </body>

الكود الخاص بالشكل الأول
<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

الكود الخاص بالشكل الثاني
<script type="text/javascript">
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

الكود الخاص بالشكل الثالث
<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

إعدادات الإضافة


الان الخطوة الأخيرة من أجل ان تعمل الإضافة بالشكل الصحيح
كل ستايل و له إعدادات خاصة من أجل ان يعمل بالطريقة الصحيحة و الصورة التالية توضح كلامي أضغط عليها.

هذه هي الإعدادات الخاصة بإضافة المشاركات الشائهة

يُمكن معاينة أحد الأشكال من خلال زر المعاينة التالي:


لا تنسى الضغط على ازرار المشاركة من أجل دعمنا
اي سؤال أو استفسار لا تترد بوضعه في تعليق دُمتم بوِد


مواضيع ذات صلة
اضافة المشاركات الشائعة بثلاثة اشكال مختلفة
4 / 5
بواسطة

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

  1. شكرا على الموضوع الرائع أخي منير لكن لو وضعة معاينة يكون أفضل

    ردحذف
    الردود
    1. لا شُكر على واجب اخي شفيق
      بس مش مستاهلة إني أعمل 3 مدونات مشان موضوع =a

      حذف
  2. جميل جميل جميل جميل جميل جميل
    رائع رائع رائع رائع رائع رائع رائع
    اعجبتنى اول اضافه شكرا لك اخى الغالى

    ردحذف
    الردود
    1. شُكراً لك صديقي
      مرورك الجميل و الرائع
      و من الجميل إن الإضافة أعجبتك =r

      حذف
  3. اخى منير انت قلت لى ستنلز موضوع حول سكربت عرض المواضيع حسب التمسيات ولم تنزله بعد

    ردحذف
    الردود
    1. اهلاً اخي احمد
      المشكلة الأخ عمرو و الأخ حُسام قاموا بتنزيل نفس الموضوع
      و هُناك 1000 مدون قامت بنقل هذه المواضيع
      و إذا انا نزلت موضوع نفسه لا يكون له قيمة في جوجل و يُعتبر مُحتوى مُكرر
      يمكنك رؤية مواضيعهم سوف تُفيدك

      حذف
    2. اعرف لقد رايته وكلن اذا السكربت عرض الماوضيع كا مختلف عنهم واجمل فبالتالى ستحصل على ارشفة جوجل =q

      حذف
    3. اتمنى ان لا تفهمني خطأ ولكن المُشكلة هُنا
      إن جوجل لن يأخذ على الشكل
      بل سوف يأخذ على المحتوى
      فخوارزميات جوجل مُعقدة أكثر مما تظُن

      حذف
    4. اوك شكرا لك لا مشكلة

      حذف
    5. لا شُكر على واجب اخي احمد
      و اعتذر منك
      ولكن اتمنى ان لا تفهمني خطاً
      احترامي و تقديري لشخصك الكريم

      حذف
    6. لا انت على حق جوجل ياخد بالمحتوى وتحياتى لك انسن مبدع ومحترف مثثلك

      حذف
    7. وكل سنة وانت طيب وعيد سعيد عليك اخى منير

      حذف
    8. و انت طيب اخي احمد
      وانا نُقطة في بحر إبداعك
      شكراً لك و لتفهمك
      احترامي و تقديري لشخصك الكريم =e

      حذف
  4. السلام عليكم ..
    ان شاء الله بتم الصحه وكل عام ونت بخير ..
    المعذره اذا بخرج م الموضوع بس من قله الحيله ..

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

    http://im70.gulfup.com/LjMKiq.png

    والمعذره

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

      حذف
  5. ادوات جميلة من ارلين وطرح أجمل واوضح منك =r

    ردحذف
  6. ممكن كود الرسائل القديم الحديثة الصفحة الرئللى فى القالب ده http://test-mudwnp.blogspot.com.eg/2014/09/blog-post.html

    ردحذف
    الردود
    1. اهلاً اخي احمد
      فقط ركب قالب البلوجر هذا فهو احد قوالب بلوجر القديمة
      و قم بالبحث عن .blog-pager { و هي اكواد الـ css
      بعدها ابحث عن اكواد الـ HTML
      <div class='blog-pager' id='blog-pager'>
      و استبدلها بالاكواد الخاصة بمدونتك

      حذف
    2. =q اسف على اسالتى الكثير ولكن ممكن تنشر موضع حول تاثيرات hover لصورة التدوينة كمثال عندما ياتى الماوس لها يظهر عنوان التدوينة

      حذف
    3. لا شكر على واجب يا غالي

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

      حذف
  7. السلام عليكم
    اخوي انا بدأت بمدونة خاصة للصور واغلب الزوار من الموبايل
    اقترح علي القالب المناسب برأيك (للموبايل) + ممكن رابط... اتمنى الاجابة

    وشكراا

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

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

    ردحذف
    الردود
    1. شكراً لك يا غالي
      مرورك الرائه
      ولكن اعتذر منك لا ننشر روابط إشهار

      حذف
  9. لا شُكر على واجب يا غالي

    ردحذف

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