القائمة الرئيسية

الصفحات

تعديل المشاركة

كيفية اضافة سلايد شو داخل مقال بلوجر لعرض الصور

(0)

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


كيفية اضافة سلايد شو داخل مقال بلوجر لعرض الصور


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


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

كيفية اضافة سلايد شو لعرض الصور داخل مقال بلوجر 2021 :

1.ما هو السلايد شو  داخل موضوع مقال بلوجر لعرض الصور :

"اضافة سلايد شو لعرض الصور داخل موضوع"   يستخدم jQuery تمامًا مثل منشوري ترقيم الصفحات (ترقيم الصفحات السهل ، ترقيم الصفحات المخصص) اللذان قمت بمشاركتهما من قبل. الشيء الجميل هو أنه يتم تضمينه جميعًا ضمن عنوان URL واحد مما يعني أنه يشبه المنشور العادي لأغراض تحسين محركات البحث (SEO) نظرًا لأن كل المحتوى موجود في صفحة واحدة.


بالنسبة لسلايد شو لعرض الصور داخل موضوع ر هذا ، لا يوجد رمز "لتحديث" الصفحة في كل مرة يتم فيها تحميل صورة جديدة. هذا يعني أنه سيتم تحميله بشكل أسرع ، ولن يستغرق وقتًا طويلاً أو يتسبب في اضطرار القراء إلى الجلوس خلال إعادة تحميل القالب بالكامل لكل .single.image. هذا يعني أيضًا أنك لن تمتص استخدام البيانات للقراء على الجوّال.شاهد ايضا كيفية منع اعلانات ادسنس منخفضة  سعر النقرة CPC - دليل ادسنس 2021 .

2.كيفية وطريقة اضافة كود سلايد شو داخل مقال بلوجر لعرض الصور 2021 :


2.كيفية وطريقة اضافة كود سلايد شو داخل مقال بلوجر لعرض الصور 2021 :

نظرًا لأن هذا هو jQuery ، فأنت بحاجة مرة أخرى إلى التحقق من تثبيت المكتبة في التعليمات البرمجية الخاصة بك. أول شيء عليك القيام به هو التأكد من تثبيت jQuery في القالب الخاص بك. أسهل طريقة للتحقق من ذلك هي الانتقال إلى نموذج HTML والبحث عن "jquery.min.js"


إذا لم تكن لديك دراية باستخدام html الخاص بك من قبل "سهلة" تابع الشرح :

  1.  من لوحة التحكم ، انتقل إلى TEMPLATE (وبالطبع احتفظ بنسخة احتياطية من نموذجك أولاً). 
  2.  ثم انقر فوق "تحرير HTML" ، استخدم الماوس للنقر داخل هذا المربع من التعليمات البرمجية (حاول تمييز بعض النصوص)
  3.  ثم اضغط على "Control-F" لإظهار مربع البحث. 
  4. يمكنك الآن البحث عن أي شيء تحتاجه في رمز القالب الخاص بك. إما "jquery.min.js" أو "</ head > "إلخ)


ملاحظة : جميع الكودات المضمنة في المقال سوف تجدها في ملف اسفل الموضوع للتحميل


3. اضافة مكتبة jquery :  سلايد شو لعرض الصور داخل مقال بلوجر 

إذا لم تجد مكتبة jquery ، فأنت بحاجة إلى لصق مباشرة قبل </head> في القالب الخاص بك. أنت لا تريد مكتبات متعددة .. لذا تأكد من التحقق قبل إضافتها مرة أخرى : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


(مرة أخرى ، ابحث فقط عن "</ head" كما أوضحت أعلاه ثم انقر فوق السطر أعلاه والصق الرمز)


4. تصميم و شكل سلايد شو لعرض الصور داخل مقال بلوجر  :

بعد ذلك ، نريد إضافة التصميم (للمربع والأزرار وما إلى ذلك) إلى الكود الخاص بك. تم تعيين ذلك مسبقًا . نقوم بذلك عن طريق لصق مباشرة قبل </head> في القالب الخاص بك : 

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />


بعد ذلك ، تريد إضافة نمط CSS الذي تتحكم فيه. للقيام بذلك ، الصق ما يلي قبل]]></b:skin> يمكنك تغيير عرض وارتفاع شريط التمرير في هذا الرمز إذا كنت بحاجة إلى ذلك. :

.bxslider img{
width:100%;
height:300px;
}
.bx-wrapper img {
display: inline !important;
} 

5. تفعيل اضافة سلايد شو لعرض الصور داخل مقال بلوجر :

لكي ينزلق شريط التمرير فعليًا عند النقر ، تحتاج إلى إضافة نص jQuery إلى قالبك. للقيام بذلك ، تحتاج إلى لصق قبل </head> مباشرة (ربما تكون جيدًا في هذا الآن!):

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<script>

    $(document).ready(function() {

        $('.bxslider').bxSlider({

            auto: true,

            autoControls: true,

            captions: true

        });

    });

</script>


 لديك القليل من التحكم في كيفية عمل شريط التمرير مع هذا الرمز:

  • "تلقائي: صحيح" يعني أن شريط التمرير ينزلق تلقائيًا. إذا جعلت هذا خطأً ، فيجب النقر فوق السهم للتدوير.
  • تعني "عناصر التحكم التلقائية: صحيح" أن سهمي الأمام والخلف ظاهران ، ويمكنك إزالتهما عن طريق تعيين ذلك على "خطأ"
  • "captions: true" قم بتشغيل وإيقاف مربع النص في الجزء السفلي (إذا كانت صورتك تتحدث عن نفسها ، فيمكنك ضبط ذلك على false)


6. إضافة الصور لسلايد شو داخل مقال بلوجر :

الآن لديك شريط التمرير جاهزًا للعمل ولكن عليك تحميله بالصور والتعليقات التوضيحية. (بمجرد تثبيت هذا الرمز الآخر ، يمكنك إضافة العديد من أشرطة التمرير كما تريد إلى موقعك!)

للقيام بذلك ، تحتاج إلى لصق HTML التالي في منشورك (أو حتى في عنصر واجهة مستخدم إذا كنت تريد استخدامه على صفحتك الرئيسية أو الشريط الجانبي)

<ul class="bxslider">
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>

ستحتاج إلى لصق عنوان url للصورة (لا تنس http: //) والتعليق على الصورة في المكان المشار إليه أعلاه.

إذا كنت تريد تضمين شريط التمرير داخل محتوى منشور ما ، فيمكنك إنشاء المنشور كالمعتاد فوق البداية "<ul class" ومتابعته أسفل علامة الإغلاق "</ul>" عندما ينقر شخص ما على الصور ، لن يتغير النص خارج شريط التمرير. شاهد ايضا : كيفية اصلاح و حل مشكلة "LCP : أطول من 4 ثوانٍ" 


7. اضافة رابط للصور | جعل الصور قابلة للنقر : 


إذا كنت تريد جعل الصورة قابلة للنقر ، فأنت بحاجة إلى إضافة رابط إلى رمز الصورة كما يلي:

<li><a href=“OUTGOING LINK"><img src=“IMAGE URL” title=“CAPTION GOES HERE" alt=“ALT TEXT GOES HERE" /></a></li>

التسمية التوضيحية للصورة هي تلقائيًا عنوان صورتك (لـ Pinterest) ، لكنك ستلاحظ أنني أضفت نصًا بديلًا إلى نهاية الكود أيضًا.


خاتمة : 

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

اذا واجهتك اي مشاكل او لديك اي تساؤل , فنحن رهن اشارتكم , شكرا على المتابعة , لا تنسى المشاركة لدعم موقعكم MAGHREBEST .



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

هل اعجبك الموضوع :

أخر المواضيع من قسم : الربح

تعليقات

إرسال تعليق

–>