الأربعاء, نوفمبر 09, 2011

عمل ألبوم صور فى التدوينه أو فى المدونه عموما بتأثير جميل جدا عند مرور الماوس عليه

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

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

ناتى لمرحلة التنفيذ والأكواد الآن :

المرحله الاولى بعمل كود HTML للصور :
لوضع الألبوم فى داخل التدوينه سوف نستخدم تعديل HTML الخاص بالتدوينه التى نقوم بتدوينها ونضع هذا الكود فى المكان الذى نود وضع الألبوم فيه
<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>
مع مراعاة استبدال الكلام باللون الأحمر بروابط الصور المراد وضعها فى الألبوم, ثم نقم بحفظ التدوينه.

ولو أردنا وضع الألبوم فى أى مكان آخر فى المدونه كل ما علينا فعله هو عمل إضافة أداة HTML/JAVASCRIPT ولصق الكود السابق بها ثم عمل حفظ.

المرحله الثانيه وهى إضافة تأثير CSS على الكود ونقوم بإتباع الآتى :
إذهب إلى تحرير HTML الخاص بقالب المدونه وقم بالبحث عن
</head>
 ثم قبله مباشرة ضع الكود التالى :
<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
@-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>
ثم قم بحفظ القالب.

والآن قد إنتهينا وتستطيع نشر تدوينتك وترى التأثير على مجموعة الصور.

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

15 تَعْلِيق:

  1. ما شاء الله جميلة جدا،

    بارك الله فيك تم إضافتها للمفضلة

    ردحذف
  2. بارك الله فيك ... إضافات رائعة

    ردحذف
  3. أسماء || أم نضال || : بيشرفنى كلامك وبيهمنى دائما رايك

    adjmaoui : شكرا لك ونورت المدونه

    ردحذف
  4. جبار جدا ,, لكن لو عملت معاينة مباشرة للاضافة , اخاف اسوي كل هذه الخطوات وفي النهاية تطلع ماتعجبني ,, فبالمعاينة تختصر علينا الطريق

    ردحذف
  5. الحقيقه هاحاول لأن عمل معاينه بيتطلب وقت ومجهود وانا بصراحه باسرق الوقت اللى بادون فيه فسامحنى لكن قريبا سأطور هذا الأمر

    ردحذف
  6. ياسر انا عايز فى القالب بتاعى صورة مصغرة تظهر فى كل مشاركة فى الصفحة الرئيسة ازاى .

    http://furniture7shopping.blogspot.com/

    ردحذف
  7. معلش ياياسر حاجة كمان عايز اضافة اظهر فيها عدد التعليقات فى الصفحة الرئيسة انا اسف لازعاج وشكرا .

    ردحذف
  8. محمد عزت : اسهل حاجه انك تغير القالب وتختار قالب فيه كل احتياجاتك

    ردحذف
  9. الصراحه صعب علي ماسوعبتها

    نفسي اضيفها بس اعتقد هي للمحترفين

    لاني اضفت كود الماوس مرتين

    واعتقد انو لم يفعل بخاف من كود الهوتميل

    هل في طريقه ابسط للاضافه

    وشكرا لك علي تعاونك الدائم

    ردحذف
  10. والله العظيم كرهت حيآتي أفكر ألغي مدونتي لآني مو فآهمممممممه فيهإ شي :(
    حآولت أعدل واضيف ، وبحثت بقوقل بس ماقدرت اوصل ولا لحل ..
    :(


    http://e7saasal-harbi.blogspot.com/

    عموماَ حيآكم هذا عنوآن مدونتي ..
    أتشرف بوجودكم ..

    ردحذف
  11. ما شاء الله جميلة جدا،

    بارك الله فيك تم إضافتها للمفضلة

    مدونة تحميل برامج مجانية

    http://www.latest-free-software.blogspot.com

    ردحذف
  12. please how to enlarge my pictures in blogger with this code
    http://seo-dz.blogspot.com

    ردحذف
  13. إضافة جميلة جداً :)

    ردحذف
  14. إضافة جميلة جداً :)

    ردحذف
  15. ممتاز جداااا
    تم التجربة على : http://stairs-designs.blogspot.com/

    ردحذف