تغيير شكل مشاركات الى شكلين احترافيين وجميلان

/* 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}

كود مشاركة ثانية

/* 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-transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);transform: scale(1.2);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 rgba(202,220,85,0.8);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 rgba(243,93,92,0.8);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 rgba(10,151,181,0.8);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 rgba(15,203,205,0.8);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 rgba(16,170,206,0.8);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 rgba(202,220,85,0.8);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 rgba(243,93,92,0.8);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 rgba(10,151,181,0.8);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 rgba(15,203,205,0.8);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 rgba(16,170,206,0.8);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:#e1b364;} .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

الاشعار 2

الاشعار 3

الاشعار 4

الخميس، 23 مارس 2017

تغيير شكل مشاركات الى شكلين احترافيين وجميلان

كاريكاتير

مواضيع رائجة

الأقسام

اعلان وسط الموضوع

اعلان أسفل الموضوع

حمل تطبيقنا

الصفحات