في مدون محترف يوجد اكثر من إضافة للمشاركات الشائعة ولكن إضافة اليوم شكلها غريب قليلاً و مختلف عن الإضافات
الاخرى و تُعتبر هذه الإضافة من اهم إضافات بلوجر و التي سوف تجدها في كل مدونة فهي لا غنى عنها و تكون باشكال مختلفة
إما تكون عبارة عن عناوين فقط او على شكل شبكة او عبارة عن صورة بحجم كبير ولكن هذه مميزة بحيث تجمع بين الاناقة و
الجمال و الإختلاف في وقت واحد والجميع يعرف وظيفة الإضافة فهي تقوم بعرض المواضيع الاكثر مشاهدة من قِبل الزوار على
أساس الوقت و يمكن أن يكون كل أسبوع أو شهر أو كل الوقت يمكنك معاينتها عبر الزر التالي
ننصحك بقرائة: اضافة المشاركات الشائعة على شكل شبكة
و الإطلاع على: اضافة المشاركات الشائعة مع خيارات التنقل
شرح تركيب الإضافة
- اولا ادخل إلى لوحة تحكم بلوجر
- انقر على تبويب قالب
- ثم اضغط على تحرير 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() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//<![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
بواسطة
مدون محترف
شكرا لك أخي
ردحذفلا شكر على واجب صديقي
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفلا شكر على واجب يا غالي
حذفولكن اعتذر منك لا ننشر روابط إشهار
شكرا على الموضوع لكن لم تعجبني مثل هذا الإضافات
ردحذفلا شكر على واجب يا غالي
حذفصراحةً ايضاً انا لا احب هذه الإضافات
ولكنها قد تكون مفيدة في القوالب التي تستخدم طرق الربح من الإنترنت و الصور التي تجذب الزائر مثل قالب wagazine
صحيح تعجبني أفكارك الجميله
حذفشكراً لك يا غالي =e
حذفالقالب الذى انت وضعته للمعاينه اخى يشبه نفس قالب مدونتى وهذا دليل اكيد على ان الطريقه ستنجح 100% ولكن انا نفذت كل الخطواط ولم تنجح ما الحل
ردحذفولكن هى إضافه رائعه بالتوفيق لك اخى
جرب التالي
حذفعند إضافة الاداة داخل مدونتك
ادخل للتخطيط و اجعل عدد المواضيع التي سوف تظهر 6 فقط
إذا لم تعمل قد يكون بسبب القالب الذي انت تستخدمه يوجد به اكواد تعارض عمل الإضافة
شكراً لتعليقك =r
ههها رائعة جدا الاضافة لكنها ليست من ذوقي
ردحذفالمميز بهذه الإضافة إذا كانت مدونتك ربحية فهي مفيدة لإنها تجذب الزائر على رؤية الصورة و عند ظهور العنوان إذا كان قوي
حذففأحتمال 80% ان يضغط الزائر عليها
السلام عليكم
ردحذفمرحبا اخي
عندي سؤال قد يكون خارج اطار هذه التدوينة
وهو
عندي اضافة اعلن معنا والتي تحتوي على اربعة بنرات كل بنر بقياس 125X125
اريد ان استخدها في وضيفة اخرى وهي
اضع بدل كل بنر فقرة
واحدة اتصل بنا هاتفيا واضع فيها رقم هاتف بحيث بمجرد ان يضغط عليها الزائر اذا كان يتصفح من الجوال يتصل مباشرة على الرقم
و واحدة اضع فيها ايميل المدونة وبمجرد يضغط عليها الزائر ينتقل الى برنامج البريد الالكتروني ايا كان ايميل او اوتلوك او غيره
وهكذا
فكيف اعمل هذا لطفا
وشكرا لك
يوجد ركن اسئلة يا غالي
حذفتجده في القائمة فوق يمكنك سؤالي اي شيء به
بالنسبة لاسئلتك
رقم الهاتف هذه صدقاً لا اعرف كيف تُضاف في بلوجر
بالنسبة للسؤال الثاني قم بوضع رابط صفحة اتصل بنا الخاصة بمدونتك افضل لك
السلام عليكم ، من فضلك أريد التواصل معك بخصوص أحد الاضافات التي أرغب باضافتها لو سمحت
ردحذفوعليكم السلام
حذفتفضل صديقي
أولا شكرا على ردك، /(^__^)\ من فضلك أريد سكريب يجعلك تنتقل بين المواضيع التي بنفس التسمية فقط
حذفاذ لم أستطع توضيح الفكرة لك(ي) يمكنني أن أشرح لك(ي) الأمر بشكل آخر ^____^
حذفأهلًا صديقي
حذفيوجد مقال مشابه في مدونتنا
قم بالبحث عنه ضمن الصفحات
شكرا على ردك السريع... وهل أرسلت لي الرابط
حذفلم أرسل لك الرابط ولكن سوف تجده ضمن صفحات الموقع
حذفواسم المقال تقريبًا تقسيم المقال ..إلخ
لو سمحت لو أمكنني التواصل معك على الفايسبوك يكون أفضل فهذه الخاصية أنا بحاجة لها وضرورية لي
ردحذفيُمكنك التواصل معي عبر صفحتنا على فيسبوك اسمها مدون محترف
حذفشكرا لك
حذفلا شكر على واجب صديقي
حذفبالتوفيق
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r