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

السلام عليكم ورحمه الله وبركاتة اللهم صلى على سيدنا محمد وعلى ال محمد 

اهلا بكم متابعي مدونة حمزه ويب وزوارة الكرام في هذه تدوينة جديدة وحصرية على

مدونة حمزه ويب 

راح نقدم لكم كيفية تغيير شكل مشاركات مدونة الى شكلين احترافيين

وجيلان من حمزه ويب 

للمعاينة شكل اول اضغط هنا

للمعاينة شكل ثاني اضغط هنا

طريقة تركيب .

1. لوحة تحكم 
2. قالب 
3. تحرير HTML 
4. ابحث عن هذا كود ]]></b:skin>
5. واضف كود مشاركة الذي تعجبك فوقة

كود مشاركة اولى

/* 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:&#39;ge_ss_threeregular&#39;;}      .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;}

واضغط حفظ نموذج واذهب الى 
تخطيط واختار اضافة اداة 
واختر مشاركات

وانتهى موضوعنا

 انتهى الموضوع ، اتمنى أن تكون الإضافة في متناول الجميع تحياتي