-->

تغيير شكل المشاركات الشائعة إلى شكل أكثر جمالا وإحترافية 2016


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

  1. لوحة التحكم>>القالب>>إبحث عن ]]></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:160%;text-shadow:0 0 5px rgba(0,0,0,0);font-family: &#39;Adobe Arabic&#39;,&#39;serif&#39;;}.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:5px 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>

جديد قسم : إضافات