تغيير شكل المشاركات الشائعة

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

زوار ومتابعي المدونة الكرام

تحية طيبة وبعد ...

اقدم لكم فى هذه التدوينة الحصرية طريقة تغيير شكل المشاركات الشائعة
الشكل الاول

1.ابحث عن ]]></b:skin> وضع الكود التالي فوقه :

/* CSS Popular Posts */ .PopularPosts .widget-content ul{list-style-type:none;overflow:hidden;} #PopularPosts1 ul li .item-thumbnail{overflow:hidden;float :left;margin-right:10px;} #PopularPosts1 img {overflow:hidden;width : 72px;height:72px;-ms-transform: scale(1.0);-webkit-transform: scale(1.0);-moz-transform: scale(1.0);transform: scale(1.0);transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;} #PopularPosts1 img:hover{-ms-;transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;} .PopularPosts .widget-content ul li{position :relative;padding:0;margin:10px auto;} .PopularPosts .widget-content ul li:first-child {margin-top:0;} .PopularPosts .widget-content ul li:last-child {margin-bottom:0;} .PopularPosts .widget-content ul li:nth-child(1){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(2){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(3){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(4){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(5){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(6){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(7){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(8){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(9){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li:nth-child(10){background:#f3f5f7;border:1px solid #e7e8ea;border-right:2px solid rgb(52,152,219);width : 100%;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a{color:#525f6a;transition:all 0.3s ease-out;} .PopularPosts .widget-content ul li a:hover{color:#2980B9;} .PopularPosts .widget-content ul li:hover:nth-child(1),.PopularPosts .widget-content ul li:hover:nth-child(2),.PopularPosts .widget-content ul li:hover:nth-child(3),.PopularPosts .widget-content ul li:hover:nth-child(4),.PopularPosts .widget-content ul li:hover:nth-child(5),.PopularPosts .widget-content ul li:hover:nth-child(6),.PopularPosts .widget-content ul li:hover:nth-child(7),.PopularPosts .widget-content ul li:hover:nth-child(8),.PopularPosts .widget-content ul li:hover:nth-child(9),.PopularPosts .widget-content ul li:hover:nth-child(10){background:#fff;} .PopularPosts .widget-content{background:#fff;} .PopularPosts .item-thumbnail{float :right;padding:0;margin:0;} .PopularPosts .item-title {color:#b2b5be;font-weight:400;font-size:12px;padding:5px;} .PopularPosts .item-snippet {display :none;font-size:12px;color:#b2b5be;overflow:hidden;text-align:justify;} .sidebar .label-size {position :relative;text-transform:none;text-decoration:none;font-size:12px;font-family:'ge_ss_threeregular';} .sidebar .label-size a {color:#525f6a;font-weight:400;padding:10px 12px; margin:0 0 2px 2px;float :right;display :block;border:4px solid #eceef0;transition: all 0.4s ease-in-out;} .sidebar .label-size-1 a {box-shadow:inset 2px 0 0 0 #1abc9c;opacity:0.8;} .sidebar .label-size-1 a:hover {box-shadow:inset 100px 0 0 0 #1abc9c;color:#fff!important;opacity:1;} .sidebar .label-size-2 a {box-shadow:inset 2px 0 0 0 #3498db;opacity:0.8;} .sidebar .label-size-2 a:hover {box-shadow:inset 100px 0 0 0 #2980b9;color:#fff!important;opacity:1;} .sidebar .label-size-3 a {box-shadow:inset 2px 0 0 0 #2ecc71;opacity:0.8;} .sidebar .label-size-3 a:hover {box-shadow:inset 100px 0 0 0 #27ae60;color:#fff!important;opacity:1;} .sidebar .label-size-4 a {box-shadow:inset 2px 0 0 0 #9b59b6;opacity:0.8;} .sidebar .label-size-4 a:hover {box-shadow:inset 100px 0 0 0 #8e44ad;color:#fff!important;opacity:1;} .sidebar .label-size-5 a {box-shadow:inset 2px 0 0 0 #e74c3c;opacity:0.8;} .sidebar .label-size-5 a:hover {box-shadow:inset 100px 0 0 0 #c0392b;color:#fff!important;opacity:1;} .sidebar .label-size:hover{background:none;} .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%;} .cloud-label-widget-content{text-align:right} .label-size{display :block;float :right;margin:0 0 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}

الشكل الثاني

1.ابحث عن </head> وضع الكود التالي فوقه:

<style type="text/css"> .popular-posts ul { list-style: none; padding: 0; } .popular-posts ul li { float:right; width: 148px; height: 150px; padding: 10px !important; overflow: hidden; box-sizing: border-box; position: relative; } .popular-posts .item-thumbnail { margin: 0; background-color: #000; } .popular-posts img { height: 100%; width: 100%; box-sizing: border-box; padding:0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .popular-posts .item-content:hover img, .popular-posts .item-thumbnail-only:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0.5; } .popular-posts .item-title a { color: #fff; font-family: droid arabic kufi; position: absolute; text-align: center; left: 12px; right: 12px; bottom: 40px; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .popular-posts .item-content:hover .item-title a, .popular-posts .item-thumbnail-only:hover .item-title a { opacity: 1; visibility: visible; } .popular-posts .item-snippet { display: none; } </style>

2.ابحث عن </body> وضع الكود التالى فوقه:

<script type='text/javascript'> $('.popular-posts .item-snippet').remove(); $('.popular-posts img').attr('src', function(e, t) { return t.replace('/s72-c/', '/s200-c/') }); </script>

الشكل الثالث

1.ابحث عن </head> وضع الكود التالي فوقه:

<style type="text/css"> .sidebar h2, .tably h2 { border: none; border-bottom: 1px solid #FFB630; font-family: droid arabic kufi; text-align: center; color: #FFB630; background: none; } .sidebar .widget { background: none; border: none; } .popular-posts ul { list-style: none; padding: 0; } .popular-posts ul li { width: 100%; height: 100%; padding: 10px !important; overflow: hidden; box-sizing: border-box; position: relative; background: #FAFAFA; border: 1px solid #F2F2F2; } .popular-posts .item-thumbnail { margin: 0; background-color: #000; overflow: hidden; } .popular-posts img { height: 100%; width: 100%; box-sizing: border-box; padding:0; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .popular-posts .item-content:hover img, .popular-posts .item-thumbnail-only:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0.5; } .popular-posts .item-title { padding: 10px 0px; display: inline-block; font-family: droid arabic kufi; } </style>

2.ابحث عن </body> وضع الكود التالي فوقه:

<script type='text/javascript'> $('.popular-posts img').attr('src', function(e, t) { return t.replace('/s72-c/', '/s350-c/') }); $('.popular-posts ul li .item-snippet').each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(' '); if(j>10) $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,' ...')); }); </script>

الشكل الرابع

1.ابحث عن ]]></b:skin> وضع الكود التالي فوقه :

/* CSS Popular Post */.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}.PopularPosts ul li img {display:none;margin:2px;margin-left:10px;padding:0;width:60px;height:60px;float:right;}.PopularPosts ul li {background-color:#fff;margin:0;padding:0;position:relative;box-shadow:inset 4px 0 0 rgba(255,255,255,0.0);transition:all 0.1s ease-out;}.PopularPosts ul li:hover {background:#cf8860;box-shadow:inset 4px 0 0 rgba(250, 250, 250, 1);}.PopularPosts ul li:last-child {border-bottom:none;}.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:400;color:#fff;text-decoration:none;transition:all 0.1s ease-in-out;}.PopularPosts ul li a:hover {color:#fff!important;}.PopularPosts ul li:before {display:none;list-style:none;}.PopularPosts .item-thumbnail {display:none;float:left;margin:0 0 0 0;}.PopularPosts .item-snippet {display:none;font-size:10px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.PopularPosts .item-title {padding-bottom:.2em;margin:3px 10px;}.profile-img{display:inline;opacity:1;margin:0 0 3px 6px;}.PopularPosts .widget-content ul li {padding:.5em 0 .5em 0;}.PopularPosts ul li:nth-child(even) {background:#E74C3C}.PopularPosts ul li:nth-child(odd) {background:#E74C3C}.PopularPosts ul li:hover:nth-child(even),.PopularPosts ul li:hover:nth-child(odd){background:#DA4A3B}