اضافة جميلة و سهلة التركيب خفيفة على المدونة ,حيث ستضع هده الاضافة على أداة المشاركة الشعائعة ألوان زاهية وجميلة ومتعددة كل موضوع يضهر بلون مختلف زائد ترقيم المواضيع و كل هدا سيتير انتباه الزائر لا محالة,أما الهدية فيهي مجموعة من التأثيرات
يمكنك وضعها وزيادتها على الكود الخاص بالاضافة ودالك حسب دوقك .
لنمر الى طريقة التركيب
ثم ضع الكود التالي فوقه مباشرة
الكود :: الخاص بتلوين المشاركات الشائعة
ثم قم بالحفض
يمكنك الاكتفاء بهدا الكود الدي سيلون أداة المشاركات الشائعة وجعلها رائعة وجدابة , أو اضافة بعض التأثيرات على الصور لمزيد من الجادبية
كما قلت سأضع بين أديكم أكواد ستمكنك من تعديل وتزين الاضافة حسب دوقك(هدية من مدونة شامل كول)
شكل تأثيره
سيسمح لك هدا الكود بجعل الصور دائرية في الاداة
الكود الخاص به
لتركيبه ضعه مباشرة فوق ]]></b:skin> وقم بالحفض
شكل التأثير
سيسمح لك هدا الكود باضافة تأثير المواس هوفر على الصورة و دوارن بنسبة 380 درجة
الكود الخاص به
لتركيبه ضعه مباشرة فوق ]]></b:skin> وقم بالحفض
يمكنك وضعها وزيادتها على الكود الخاص بالاضافة ودالك حسب دوقك .
لنمر الى طريقة التركيب
أولا بالنسبة لمن لا يضع أداة المشاركات الشائعة
طريقة تركيبها
من لوحة التحكم اختر تخطيط ثم اختر اضافة أداة تم ستجد أداة بااسم المشاركات الشائعة اضغط عليها
ثم طبق ما يلي في الصورة

ثم الأن لنتوجه لوضع الكود طريقة سهلة
طريقة التركيب
ثم قم بالضغط على ctrl + f ثم قم بالبحث على الكود التالي
]]></b:skin>
ثم ضع الكود التالي فوقه مباشرة
الكود :: الخاص بتلوين المشاركات الشائعة
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
ثم قم بالحفض
يمكنك الاكتفاء بهدا الكود الدي سيلون أداة المشاركات الشائعة وجعلها رائعة وجدابة , أو اضافة بعض التأثيرات على الصور لمزيد من الجادبية
كما قلت سأضع بين أديكم أكواد ستمكنك من تعديل وتزين الاضافة حسب دوقك(هدية من مدونة شامل كول)
- اضافة التأثيرات
- جعل الصور دائرية
شكل تأثيره
سيسمح لك هدا الكود بجعل الصور دائرية في الاداة
الكود الخاص به
#PopularPosts1 img{
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
لتركيبه ضعه مباشرة فوق ]]></b:skin> وقم بالحفض
- تدوير الصور 380 درجة
شكل التأثير
سيسمح لك هدا الكود باضافة تأثير المواس هوفر على الصورة و دوارن بنسبة 380 درجة
الكود الخاص به
#PopularPosts1 {
max-width: 300px
}
#PopularPosts1 dd {
float: left;
border-bottom: none;
margin: 8px 8px 0 8px;
background: none;
display: block;
padding: 0
}
#PopularPosts1 img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
max-width: 300px
}
#PopularPosts1 dd {
float: left;
border-bottom: none;
margin: 8px 8px 0 8px;
background: none;
display: block;
padding: 0
}
#PopularPosts1 img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
لتركيبه ضعه مباشرة فوق ]]></b:skin> وقم بالحفض
0 التعليقات:
إرسال تعليق