أضافة مدهشة للصور بعدة تحولات لمدونات البلوجر

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

اليوم درسنا جميل بالأضافة التي ساعرضها لكم وهي كيفية أضافة عدة حركات للصور في مواضيع مدونة البلوجر 

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

فعند وضع مؤشر الماوس فوق الصورة  تظهر الصورة الأخرى بعدة طرق سوى بتجانب أو الأنزلاق أو التتابع

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


النموذج الاول 
ضع مؤشر الماوس فوق الصورة

 الكود html
<div id="cst" class="hover">
 <img class="bottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZs4yufZA8BlXvTrHuFkunXOQjXLFcNAXgajDRVTzIuz9tc4U9O_FYGU8Tb04ih29sWJtirB1nlk_uuCwpKEmiTpal0ZbMVVjvejnTF0MbRKA2MYjeFT4G8QkO_UXY7E4gI_yvm5UcQ/h120/a+gardener%27s+paradise%2C+washington.jpg">
 <img class="top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYw1mDEd7SbYRnv6aiW2-ZcIzSoEnqA6x-DQ98X5nV-floFz7HZEIHNzK_Hgq3GHIYX0yr-okxRFwNDxq6bwbDnvb6Jtdtdfnd9L0IZPKwMIOOSptmbYl0R2HR4olBUEBaHTEB8yaNA/h120/coastal+rainbow%252C+south+island%252C+new+zealand.jpg">
</div>
الكود css


#cst {
 position:relative;
 height:281px;
 width:450px;
}
#cst img {
 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}

#cst img.top:hover {
 opacity:0;
}



النموذج الثاني


الكود html
<div id="cst2" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZs4yufZA8BlXvTrHuFkunXOQjXLFcNAXgajDRVTzIuz9tc4U9O_FYGU8Tb04ih29sWJtirB1nlk_uuCwpKEmiTpal0ZbMVVjvejnTF0MbRKA2MYjeFT4G8QkO_UXY7E4gI_yvm5UcQ/h120/a+gardener%27s+paradise%2C+washington.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYw1mDEd7SbYRnv6aiW2-ZcIzSoEnqA6x-DQ98X5nV-floFz7HZEIHNzK_Hgq3GHIYX0yr-okxRFwNDxq6bwbDnvb6Jtdtdfnd9L0IZPKwMIOOSptmbYl0R2HR4olBUEBaHTEB8yaNA/h120/coastal+rainbow%252C+south
%2Bisland%252C%2Bnew%2Bzealand.jpg">
</div>

الكودcss

 #cst2 {
  position:relative;
  height:281px;
  width:450px;
 }
 #cst2 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }

 #cst2 img.top {
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  transform:scale(1,0);
  filter: alpha(opacity=0);
  opacity:0;

 }

 #cst2:hover img.top, #cst2.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -moz-transform:scale(1,1);
  -o-transform:scale(1,1);
  transform:scale(1,1);
 }

 #cst2:hover img.bottom, #cst2.hover_effect img.bottom {
  filter: alpha(opacity=0);
  -webkit-transform:rotate(360deg) scale(0,0);
  -moz-transform:rotate(360deg) scale(0,0);
  -o-transform:rotate(360deg) scale(0,0);
  transform:rotate(360deg) scale(0,0);
 }



النموذج الثالث


الكودhtml

<div id="cst3" class="hover">
 <img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZs4yufZA8BlXvTrHuFkunXOQjXLFcNAXgajDRVTzIuz9tc4U9O_FYGU8Tb04ih29sWJtirB1nlk_uuCwpKEmiTpal0ZbMVVjvejnTF0MbRKA2MYjeFT4G8QkO_UXY7E4gI_yvm5UcQ/h120/a+gardener%27s+paradise%2C+washington.jpg">
 <img class="top shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYw1mDEd7SbYRnv6aiW2-ZcIzSoEnqA6x-DQ98X5nV-floFz7HZEIHNzK_Hgq3GHIYX0yr-okxRFwNDxq6bwbDnvb6Jtdtdfnd9L0IZPKwMIOOSptmbYl0R2HR4olBUEBaHTEB8yaNA/h120/coastal+rainbow%252C+south+island%252C+new+zealand.jpg">
</div>

الكود css
#cst3 {
  position:relative;
  height:281px;
  width:450px;
 
 }
 #cst3 img {
  position:absolute;
  left:0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
 }

 #cst3 img.top {
  -webkit-transform:scale(0,0);
  -moz-transform:scale(0,0);
  -o-transform:scale(0,0);
  transform:scale(0,0);
  opacity:0;

 }

 #cst3:hover img.top, #cst3.hover_effect img.top {
  opacity:1;
  -webkit-transform:scale(1,1);
  -webkit-transform-origin: top right;
  -moz-transform:scale(1,1);
  -moz-transform-origin: top right;
  -o-transform:scale(1,1);
  -o-transform-origin: top right;
  transform:scale(1,1);
  transform-origin: top right;
 }

 #cst3:hover img.bottom, #cst3.hover_effect img.bottom {
  -webkit-transform:scale(0,0);
  -webkit-transform-origin: bottom left;
  -moz-transform:scale(0,0);
  -moz-transform-origin: bottom left;
  -o-transform:scale(0,0);
  -o-transform-origin: bottom left;
  transform:scale(0,0);
  transform-origin: bottom left;
 }
أستبدال روابط الصورة الموجودة في الأكواد html  المشار لها بلون الأحمر بروابط صورك

طريقة أستخدام الأضافة في مدونات البلوجر

أضف الكود css ألى قالب مدونتك من خلال تصميم >>تحرير html >> توسيع للقالب أبحث عن الكود التالي

]]></b:skin>

وأضف قبله الكود الذي تختاره

 أما الكود html أذا أردت أضفته في أحدى صور مواضيعك يمكنك ذلك من خلال
نشر رسالة جديدة وأختار بدلا من تأليف >>html

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

وأذا أردت وضعه في الصفحة الرئيسية لمدونتك بدلا من المواضيع

لوحة التحكم>>تصميم>>أضافة أداة >>أختار منها جافا هتمل>>وأضف كود هتمل داخل الصندوق

 وحفظ الأداة

وسلام عليكم ورحمة الله وبركاته
css
‹ التدوينة السابقة التدوينة التالية ›

تدوينات ذات صلة

هناك 3 تعليقات:

  1. مهندالأربعاء, يوليو 11, 2012 7:45:00 ص

    السلام عليكم ورحمة الله

    أضافة جميل جدا جدا

    بس ممكن تكون صالحة للمنتديات vb

    شكرا لك

    ردحذف
  2. Unknownالأربعاء, يوليو 11, 2012 8:37:00 م

    السلام عليكم ورحمة الله

    الفكرة حلو وجميل جدا

    كود سبيشل

    بارك الله فيك ونفع بك

    ردحذف
  3. fahadالسبت, يوليو 14, 2012 10:27:00 ص

    أهلا بكم

    أخي مهند أكيد بتركب للمنتديات vb لكن ليس لدي معلومة في طريقة التركيب

    أخي العالي سعدت بمرورك وتعليقك

    ردحذف

الاشتراك في: تعليقات الرسالة (Atom)