الدرس 96: اضافة صور متحركة لموضوع مميز على شريط الجانبي او فوق مواضيع مدونة بلوجر

شرح كيفية اضافة سلايدر صور بتاثيرات متحركة للمواضيع مميزة تحتوي على عنوان و وصف مختصر على شريط الجانبي او فوق مواضيع المدونة الرئيسية لبلوجر Blogger Hover Effect Image Animated Description andCaption

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

 اضافة صور متحركة تحتوي على عنوان ووصف الموضوع على شريط الجانبي للمدونة

طبعا فى هذا الدرس ساقدم لكم اكواد اضافتين مختلفتين , الاولى تحتوي على صورة واحدة تتحرك عند وضع مؤشر الفارة عليها لتظهر اسم و وصف الموضوع مع زر ' المزيد ' عند الضغط عليه ياخدك الى الموضوع .
اما الاضافة الثانية تحتوي على صورتين مختلفتين يمكنك وضعها اما على الشريط الجانبي للمدونة او فوق مواضيع المدونة فى الصفحة الرئيسية و هي نفس الاضافة الاولى عند وضع مؤشر الفارة عليها تظهر لك وصف الموضوع وعند الضغط على اي من الصورتين تاخدك مباشرة الى المواضيع المرتبطة بها

اكواد الاضافة الاولى

<style>.image-box { width:280px;height:280px;overflow:hidden;background-color:white; border:1px solid #ccc;float:left;margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333; } .image-container, .image-details {height:280px;border:5px solid white;background-color:#ffc; transition:margin-top .4s ease-out .4s; } .image-container img { width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none; max-height:none; background-color:black; } .image-details h4, .image-details p { margin:0 0 .2em;padding:0 0;height:70px; } .image-details h4 { font-size:120%;height:auto; } .image-details .details { padding:10px 12px;overflow:hidden; } .image-details .more { color:white;text-decoration:none;display:block; text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0; } .image-box:hover {border-color:#bbb; width:280px; height:280px;} .image-box:hover .image-container {margin-top:-160px} .image-details .more:hover {background-color:black} </style> <div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box"> <div class="image-container"> <img width="280" height="280" src="رابط الصورة" alt="اسم الصورة"> </div><div class="image-details"> <div class="details"> <h4>العنوان</h4><p>النص...</p><p><a class="more" href=" # ">المزيد</a></p></div></div></div><div style="clear:both;"></div></div>

اكواد الاضافة الثانية

<style>#bt_imageeffect { margin: 20px auto; width: 100%;min-height: 300px; padding: 20px 0; text-align: center; } .galleryItem { display: inline-block;; position: relative; width: 250px; height: 250px; padding: 0;margin: 0 20px; border: solid 10px #fff; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); } .galleryItem img { width: 250px;height: 250px; } .caption { position: relative; display: inline-block; width: 250px; height: 250px; z-index: 10; } .caption::before { content: attr(data-title); position: absolute;top: 0; left: 0; width: 250px; height: 0; font-family: 'Croissant One', cursive; font-size: 1.8em;font-weight: 600; line-height: 1.4em;color: #086FA1; background: #fff; overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .caption::after { content: attr(data-description); position: absolute; bottom: -0;left: 0; width: 250px;height: 0; font-family: 'Poiret One', cursive; font-size: 1.1em; font-weight: 400; line-height: 1.4em;color: #fff; background: #222; overflow: hidden; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -ms-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; } .caption:hover::before { height: 125px; } .caption:hover::after { bottom: 0;height: 125px; } </style> <div id="bt_imageeffect"><li class="galleryItem"> <a class="caption" data-description="النص الاول." data-title="عنوان الموضوع الاول" href="رابط الموضوع الاول"> <img alt="اسم الصورة الاولى" src="رابط الصورة الاولى"/> </a></li><li class="galleryItem"> <a class="caption" data-description="النص الثاني. " data-title="عنوان الموضوع الثاني" href="رابط الموضوع الثاني"> <img alt="اسم الصورة الثانية" src=" رابط الصورة الثانية" /> </a></li></div>

ارجوا ان ينال الموضوع اعجابكم  , شاركونا تجاربكم فى تعليق اسفل الموضوع .

By glok

Similiar tagsبلوجر