باسم الله الرحمان الرحيم,الكل يعرف أداة المشاركات الشائعة وضرورتها في اجبار الزائر على بقائه مدة أطول في مدونتك, واضهار لك شخصيا مواضيعك الاكثر طلبا والاكثر زيارة, لكن الكل يعرف شكلها الغير الجداب التي لا يضهر احترافية وجمالية لمدونتك, ادن انشاء الله ستتخلص من الشكل القديم للمشركات الشائعة وستضيف الشكل الجديد,هدا الكود يضيف تأثير تحريك الصور 360 درجة عند التأشير عليها يعني تدور الصورة بشكل جميل مع تأثيرات لونية جميل في ضلها
شكل الاضافة
شكل الاضافة
لنمر الى طريقة التركيب
أولا بالنسبة لمن لا يضع أداة المشاركات الشائعة
طريقة تركيبها
من لوحة التحكم اختر تخطيط ثم اختر اضافة أداة تم ستجد أداة بااسم المشاركات الشائعة اضغط عليها
ثم طبق ما يلي في الصورة
ثم الأن لنتوجه لوضع الكود طريقة سهلة
طريقة التركيب
ثم قم بالضغط على ctrl + f ثم قم بالبحث على الكود التالي
]]></b:skin>
ثم ضع فوقه مباشرة الكود التالي
#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);
}
ثم قم بحفض القالب ,ثم عاين الاضافة
مازال هنالك ثأثيرات أخرى واضافات أخرى خاصة بأذات المشاركات الشائعة سنتطرق لها ان شاء الله
وهدا كل ما في الأمر والسلام عليكم
7 التعليقات:
انول شرف التعليق الاول
مصطفي جبر صاحب مدونة عربي ايجي
السلام عليكم اخي حسام
http://araby-egy.blogspot.com/
شكرا لك أخي مصطفى على التشجيع المتواصل
من طرفك
شرح رائع أخي (شامل كوول) لكن الكود لم يعمل معي في مدونتي. أرجو التوضيح لان الكود ضهر في أعلى الصفحة الرئيسية. مع أني إتبعت الطريقة بدقة. على كل أشكرك على المجهود التي تبذله في مدونتك و أنصحك بعدم الاستسلام حتى تحقق بيك رانغ الثالث أو الرابع و تنافس مدونات تقارب و ذويب و ابوياد على الصدارة :).
@zakaria boussaida
المشكل ليس في الكود انما في قالبك ,جرب هده الاضافة ستشتغل معك
http://chamelcool.blogspot.com/2012/06/blog-post_25.html
ونعم نحن في طريق التنافس
اخي شامل
كنت اود تغيير لون الحواف
اشكرك اخي الكىيم على هده المدونة الرائيعة
اخي حسام انا اضفت البنر الخاص بك عندي في مدونتي
بلوجر فيس|blogger face
ارجو انت ايضا انت تضيف مدونتي عندك
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.