قائمة جانبية لعرض الصور بشكل مثير للانتباه لمدونات بلوجر

عدد مشاهدات الموضوع:

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

المعاينة من هنا

أولا: عليك تسجيل الدخول ثم التوجه الى قالب ثم تحرير HTML . ثم نضع مؤشر الماوس في اي مكان داخل القالب ثم نضغط (Ctrl+F) ونبحث عن هذا الوسم ]]></b:skin>  ونلصق الكود التالي -بعد الفيديو- فوقه مباشرة. اذا لم تعرف كيفية البحث عن الكود أو الوسم السابق قم بمشاهدة هذا الفيديو

    كود الCSSالمستخدم

.

.mh-menu li:hover a{

    background-color: rgba(174,54,55,0.9);

}

.mh-menu li a span:nth-child(2){

    

    /*...*/

    display: block;

    transition: color 0.2s linear;

}

.mh-menu li img{

    position: absolute;

    z-index: 1;

    left: 0px;

    top: 0px;

    opacity: 0;

    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

}

.mh-menu li:hover img{

    height: 100%;

    left: 350px;

    opacity: 1;

}

.mh-menu li a {

    color: #333;

text-decoration: none;

    list-style: none;

display: block;

width: 280px;

padding: 0px 10px;

text-align: left;

position: relative;

z-index: 10;

height: 97px;

border-right: 1px solid #ddd;

background: rgba(255,255,255, 0.8);

}

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

<ul class="mh-menu">

    <li>

        <a href="#">

            <span>اسم الصورة</span> 

            <span>وصف الصورة</span>

        </a>

        <img src="رابط الصورة" alt="image01"/>

    </li>

</ul>

الان انتهينا من اضافة القائمة الجانبية لمدونتك يمكنك تغير روابط الصور بالروابط التي تريد كما يمكنك تغير اسم الصورة ووصفها وايضا يمكنك وضع رابط لكل قائمة فرعية بدلا من ال# كما يمكنك استنساخ العديد من القوائم بالعدد الذي تريد فقط قم بنسخ اي كود من بداية الوسم <li> الى نهاية ذاك الوسم </li> وقم بتكراره بالعدد الذي تريد من الصور.
الان سنقوم بشرح عمل الكود للمهتمين فقط
 قمنا بانشاء قائمة عادية ونريد من هذه القائمة ان تظهر الصور من اليسار الي اليمين عند مرور مؤشر الماوس عليها لذا قمنا باعطاء احداثيات الصورة ب0px على اليسار ولا تريد ان تظهر الصورة لذا اعطيناopacity(نسبة الظهور)0 ثم اصبح موضعه 350px ونسبة الظهور 1 حتى ينتج لنا صورة منزلقة من اليسار الى اليمين تظهر عند مررو مؤشر الماوس عليها كما في المعاينة
اتمنى ان ينال الموضوع اعجابكم