28 أغسطس 2015

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

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

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


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

شرح تركيب الإضافة


  1. اولا ادخل إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. ثم اضغط على تحرير HTML
ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}


يمكنك حذف ما هو مُعلم باللون الاحمر إذا كنت تريد الإضافة من دون اي الوان

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

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


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

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

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

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

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

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

      حذف
    2. صحيح تعجبني أفكارك الجميله

      حذف
    3. شكراً لك يا غالي =e

      حذف
  3. القالب الذى انت وضعته للمعاينه اخى يشبه نفس قالب مدونتى وهذا دليل اكيد على ان الطريقه ستنجح 100% ولكن انا نفذت كل الخطواط ولم تنجح ما الحل
    ولكن هى إضافه رائعه بالتوفيق لك اخى

    ردحذف
    الردود
    1. جرب التالي
      عند إضافة الاداة داخل مدونتك
      ادخل للتخطيط و اجعل عدد المواضيع التي سوف تظهر 6 فقط
      إذا لم تعمل قد يكون بسبب القالب الذي انت تستخدمه يوجد به اكواد تعارض عمل الإضافة
      شكراً لتعليقك =r

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

    ردحذف
    الردود
    1. المميز بهذه الإضافة إذا كانت مدونتك ربحية فهي مفيدة لإنها تجذب الزائر على رؤية الصورة و عند ظهور العنوان إذا كان قوي
      فأحتمال 80% ان يضغط الزائر عليها

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

    ردحذف
    الردود
    1. يوجد ركن اسئلة يا غالي
      تجده في القائمة فوق يمكنك سؤالي اي شيء به
      بالنسبة لاسئلتك
      رقم الهاتف هذه صدقاً لا اعرف كيف تُضاف في بلوجر
      بالنسبة للسؤال الثاني قم بوضع رابط صفحة اتصل بنا الخاصة بمدونتك افضل لك

      حذف
  6. السلام عليكم ، من فضلك أريد التواصل معك بخصوص أحد الاضافات التي أرغب باضافتها لو سمحت

    ردحذف
    الردود
    1. وعليكم السلام
      تفضل صديقي

      حذف
    2. أولا شكرا على ردك، /(^__^)\ من فضلك أريد سكريب يجعلك تنتقل بين المواضيع التي بنفس التسمية فقط

      حذف
    3. اذ لم أستطع توضيح الفكرة لك(ي) يمكنني أن أشرح لك(ي) الأمر بشكل آخر ^____^

      حذف
    4. أهلًا صديقي
      يوجد مقال مشابه في مدونتنا
      قم بالبحث عنه ضمن الصفحات

      حذف
    5. شكرا على ردك السريع... وهل أرسلت لي الرابط

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

      حذف
  7. لو سمحت لو أمكنني التواصل معك على الفايسبوك يكون أفضل فهذه الخاصية أنا بحاجة لها وضرورية لي

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

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

      حذف

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