الخميس، 21 مارس 2019

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

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


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


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


  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 لإضافة اخرى بنفس وظيفة الاداة فيجب عليك حذف الاكواد تجنُباً للمشاكل مُستقبلاً اي سؤال او استفسار لا تترد بوضعه في تعليق


إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *