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


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

بطبيعة الحال هناك إضافة رائعة يمكن ان تعطي إضافة مشاركات الشائعة شكل جذاب وفريد من نوعه لتظهر على مدونتك
معاينةhttp://www.templates.madad2.com

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

1. بعد ذلك توجه إلى القالب ثم أنقر على تحرير html ثم أبحث عن الرمز ]]></b:skin> لإضافة الكود التالي فوقه مباشرةً

.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);}

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>

ثم حفظ القالب

إذا ظهرت الإضافة بطريقة غير صحيحة كما هو منصوص عليه يجب البحث عن الأكواد الأخرى من خلال إدخال هذا الرمز .PopularPosts وحذفها حتى تظهر بطريقة صحيحة.


مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق