صبحت اضافة سلايد شو لعرض الصور وسط و داخل مقال في بلوجر كمعرض للصور داخل محتوى المنشور نفسه هي الموضة الجديدة على مدونات بلوجر مؤخرًا. تعرف في هذا المقال على طريقة و كيفية اضافة كود سلايد شو لعرض الصور داخل مقال بلوجر 2021
تحتوي العديد من المدونات عليها على الشريط الجانبي وفي الرأس وداخل محتوى المنشور نفسه..إنها طريقة رائعة لإضافة الكثير من الصور إلى منشور واحد دون السماح للقراء بالتمرير والتمرير إلى أسفل الصفحة.
يمكنهم أيضًا المساعدة في وقت التحميل نظرًا لأنهم يسحبون صورة واحدة فقط في كل مرة. إذا كانت الصور قابلة للنقر ، فيمكنك أيضًا استخدام أشرطة التمرير كطريقة لتقريب المحتوى القديم .. تقريبًا مثل أداة "التنقل" الرائعة.
كيفية اضافة سلايد شو لعرض الصور داخل مقال بلوجر 2021 :
1.ما هو السلايد شو داخل موضوع مقال بلوجر لعرض الصور :
"اضافة سلايد شو لعرض الصور داخل موضوع" يستخدم jQuery تمامًا مثل منشوري ترقيم الصفحات (ترقيم الصفحات السهل ، ترقيم الصفحات المخصص) اللذان قمت بمشاركتهما من قبل. الشيء الجميل هو أنه يتم تضمينه جميعًا ضمن عنوان URL واحد مما يعني أنه يشبه المنشور العادي لأغراض تحسين محركات البحث (SEO) نظرًا لأن كل المحتوى موجود في صفحة واحدة.
بالنسبة لسلايد شو لعرض الصور داخل موضوع ر هذا ، لا يوجد رمز "لتحديث" الصفحة في كل مرة يتم فيها تحميل صورة جديدة. هذا يعني أنه سيتم تحميله بشكل أسرع ، ولن يستغرق وقتًا طويلاً أو يتسبب في اضطرار القراء إلى الجلوس خلال إعادة تحميل القالب بالكامل لكل .single.image. هذا يعني أيضًا أنك لن تمتص استخدام البيانات للقراء على الجوّال.شاهد ايضا كيفية منع اعلانات ادسنس منخفضة سعر النقرة CPC - دليل ادسنس 2021 .
2.كيفية وطريقة اضافة كود سلايد شو داخل مقال بلوجر لعرض الصور 2021 :
نظرًا لأن هذا هو jQuery ، فأنت بحاجة مرة أخرى إلى التحقق من تثبيت المكتبة في التعليمات البرمجية الخاصة بك. أول شيء عليك القيام به هو التأكد من تثبيت jQuery في القالب الخاص بك. أسهل طريقة للتحقق من ذلك هي الانتقال إلى نموذج HTML والبحث عن "jquery.min.js"
إذا لم تكن لديك دراية باستخدام html الخاص بك من قبل "سهلة" تابع الشرح :
- من لوحة التحكم ، انتقل إلى TEMPLATE (وبالطبع احتفظ بنسخة احتياطية من نموذجك أولاً).
- ثم انقر فوق "تحرير HTML" ، استخدم الماوس للنقر داخل هذا المربع من التعليمات البرمجية (حاول تمييز بعض النصوص)
- ثم اضغط على "Control-F" لإظهار مربع البحث.
- يمكنك الآن البحث عن أي شيء تحتاجه في رمز القالب الخاص بك. إما "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" />
.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. إضافة الصور لسلايد شو داخل مقال بلوجر :
<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>
7. اضافة رابط للصور | جعل الصور قابلة للنقر :
<li><a href=“OUTGOING LINK"><img src=“IMAGE URL” title=“CAPTION GOES HERE" alt=“ALT TEXT GOES HERE" /></a></li>
خاتمة :
- رابط تحميل الكودات اعلاه من ميديافاير : تحميل كودات اضافة سلايد شو داخل مقال بلوجر
تعليقات
إرسال تعليق