معاينة علي Codepen

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

التثبيت

انتقل إلى لوحة تحكم بلوجر الخاصة بك على بلوجر المظهر تعديل HTML. أبحث عن <b:section id='sidebar'>أو  أي وسم  <section> وأدناه قم بلصق الكود التالي:

<b:widget id='TextList55' title='صورة عشوائية' type='TextList'>
   <b:includable id='main'>
      <b:include expr:name='data:widgets ? "widget-title" : "title"'/>
      <b:include name='content'/>
      <b:include name='js'/>
   </b:includable>
   <b:includable id='title'>
      <b:tag name="h2" class='widget-title'>
         <span class='widget-name'><data:title/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div expr:id='"mintrandomImage-" + data:widget.instanceId'/>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
     <script>
     var mintrandomImage = function() {
     var container = document.getElementById('mintrandomImage-<data:widget.instanceId/>'),//<![CDATA[
         images = [];//]]><b:loop index='i' values='data:items' var='e'>
         <b:with expr:value='"{" + (data:e contains "src:" ? data:e : 0) + "}"' var='img'>
         <b:with value='data:img.src ?: data:e' var='imgSrc'>
           images[<data:i/>] = "<b:tag cond='data:img.url' name='a' expr:href='data:img.url'><img expr:src='data:imgSrc'/></b:tag>";
         </b:with></b:with></b:loop>//<![CDATA[
         container.innerHTML = images[Math.floor(Math.random() * images.length)];
     }();//]]></script>
   </b:includable>
</b:widget>


احفظ التغييرات . في الوقت الحالي، لن تكون الأداة مرئية لأننا نحتاج إلى إضافة صور.

التخصيص

الصور

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

الصور ذات روابط

في هذه الحالة، يجب أن تكون عناصر القائمة بتنسيق json، خذ الكود التالي كمثال:

url: "Link", src: "image.jpg"


من المهم جدًا أن تحترم الفاصلة والمساحة. استبدل الرابط و image.jpg بعنوان Link الخاص بالموقع وصورتك، يمكنك إضافة جميع العناصر التي تريدها إلى القائمة.

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