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

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

نسخ الكود الاول والكود الثانى 

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

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

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

الكود الثانى بصورتين 

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

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

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

كيفية اضافة الاكواد واستخدام الجيد 

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

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

<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>  

  

لتحميل ملف txt  الدي تم رفعه بواسطة موقع  google-drive اضغط على ايقونة التحميل 

تحميل اضغط هنا