تغيير شكل اداة المشاركاة الشائعة بلوجر

السلام عليكم ورحمة الله تعالى وبركاته مرة اخرى احضرنا لكم هاته المرة شكل رائع ومطور واجمل شكل لاداة المشاركاة الشائعة من مدونة تقني الانترنت فهو شكل رائع وعصري وبالوان فلايتة حيث كل مشاركة شائعة سيعرض في اخره لون فلاتي مختلف عن الاخر هو شكل رائع انصح بوضعه على مدونتك لتزيد جمالا وليجد الزائر راحته عند النضر اليها ولا انس ايضا انها تتوفر على تاثير هوفر عند مرور المواس عليها .

لمعاينة الشكل توجه الى هنا

شرح طريقة تركيب الشكل

ما عليك هو التوجه

1. لوحة تحكم

2. قالب

3. تحرير HTML 

ثم ابحث عن هذا كود ]]></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-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;}

اضغط حفض وتهانينا بالاضافة الجديدة