Web Hosting

السبت، 9 يونيو 2012

أضف تأثير تحريك الصور والألوان في أداة المشاركات الشائعة لمدونة بلوجر

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

شكل الاضافة
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5Y1BhLylK9kkiMH2UbVK0JRi4hZ5d03va7eTXtu-wQuu-px02IZhGqUODR_yecVxpxlKw59i6yTizKeSnDW6NqHZLkouml9ISKaD4KhyphenhyphenFPPPkMgXkMC3Ps8m1IhH7b-Zh1LKcyWAFB8-/s1600/11.bmp


 لنمر الى طريقة التركيب

أولا بالنسبة  لمن لا يضع أداة المشاركات الشائعة 

طريقة تركيبها 

من لوحة التحكم  اختر تخطيط ثم  اختر اضافة أداة  تم ستجد أداة بااسم المشاركات الشائعة  اضغط عليها 

ثم طبق ما يلي في الصورة 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLryicGzZ574gKX2Q4VdONmr9TGJTQFm9ibUgwsiso5u18rd96ClIa3uaysM73GvMxfwEzI7C4iK0tqEPeik_BqgUOTd6GUun58A6Mvb6g_T2PPkRHOVUIyL6Iif3jq4S8nCvWyVM10mp/s1600/12.gif


 ثم الأن لنتوجه لوضع الكود طريقة سهلة 

طريقة التركيب 
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinvLKwB7w-GMvDZWI-R3FA6OHv4Bu2LbLjslFQ7RL9-Tzaoo2FxLiahFPgkOG_tzXZHNvxd_y6uL5xvh9r-I3i1gUhxQ5xOB6wA6E3ZDylsUSvmcCoz8f6Tf9Irz1DB3r_wVQITX0BIvkH/s1600/resized_ez.jpg

 ثم قم بالضغط على     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);
}


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


Social Sharing Widget bychamelcool


7 التعليقات:

انول شرف التعليق الاول
مصطفي جبر صاحب مدونة عربي ايجي
السلام عليكم اخي حسام
http://araby-egy.blogspot.com/

شكرا لك أخي مصطفى على التشجيع المتواصل
من طرفك

شرح رائع أخي (شامل كوول) لكن الكود لم يعمل معي في مدونتي. أرجو التوضيح لان الكود ضهر في أعلى الصفحة الرئيسية. مع أني إتبعت الطريقة بدقة. على كل أشكرك على المجهود التي تبذله في مدونتك و أنصحك بعدم الاستسلام حتى تحقق بيك رانغ الثالث أو الرابع و تنافس مدونات تقارب و ذويب و ابوياد على الصدارة :).

@zakaria boussaida
المشكل ليس في الكود انما في قالبك ,جرب هده الاضافة ستشتغل معك

http://chamelcool.blogspot.com/2012/06/blog-post_25.html

ونعم نحن في طريق التنافس

اخي شامل
كنت اود تغيير لون الحواف

اشكرك اخي الكىيم على هده المدونة الرائيعة

اخي حسام انا اضفت البنر الخاص بك عندي في مدونتي
بلوجر فيس|blogger face
ارجو انت ايضا انت تضيف مدونتي عندك

إرسال تعليق

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

Web Hosting
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Gadgets By chamelcool Blog