ساخت بنر با فرمت html. بنرهای HTML5: برای چیست و چگونه می توان آنها را ساخت


تولید کننده کد بنر ایجاد کد بنر آنلاین یک روش ساده و ساده است. چرا حتی به یک بنر در وب سایت خود نیاز دارید؟
ما یک بنر به سایت اضافه می کنیم تا کالا، خدمات، تبلیغ برند و نمایش محصول شما را به نمایش بگذاریم.

برای تبلیغ کالا، خدمات، تبلیغ برند و ... بنری به سایت اضافه می کنیم.

با قرار دادن کد بنر در سایت، می خواهیم چیزی را برجسته کنیم و از این طریق توجه را به خود جلب کنیم.

چگونه می توان از بنرها به صورت عملی استفاده کرد؟
امکانات استفاده تبلیغات بنریمی تواند به تعداد دلخواه باشد بیایید یک مثال از زندگی واقعی در نظر بگیریم. به عنوان مثال، شما ثبت نام کرده اید برنامه های وابسته. به عنوان بخشی از این برنامه، شما دریافت می کنید لینک های وابسته، که با کمک آن می توانید یک محصول را تبلیغ کنید.

به عنوان یک قاعده، همراه با تبلیغ محصول، برای افزایش درآمد، یک لینک ارجاع برای جذب شرکای دیگر دریافت می کنید.

به عنوان مواد در برنامه وابسته، می توان بنرهای آماده را در اختیار شما قرار داد. بنابراین، با قرار دادن کد بنر در شبکه، به عنوان مثال در وب سایت خود، محصول را تبلیغ می کنید و شرکای خود را جذب می کنید.

سرویس آنلاین دریافت کد بنر

با این ژنراتور می توانید کد HTML آماده برای دکمه یا بنر خود ایجاد و دریافت کنید. اگر خودتان نمی توانید کد را بنویسید، با پر کردن فرم، HTML آماده را با یک کلیک دریافت خواهید کرد که می تواند در صفحات سایت درج شود.

آدرس وب سایت شما

مثال ورودی: https://site/ از https:// وارد کنید
URL تصویر برای بنر یا دکمه

مثال ورودی: https://site//moibaneri/1703.gif نکته ابزار هنگام نگه داشتن ماوس روی یک بنر یا دکمه (عنوان)

نمونه ای از توضیحات پاپ آپ: بنر وب سایت در مورد پاداش ها عرض بنر یا دکمه (عرض)

مثال ورودی (فقط عددی را وارد کنید

اتفاقاً من دوست دارم با کد CSS کار کنم، بنابراین جالب بود که دکمه ای در زیر ایجاد کنم که بتوان از آن به عنوان بنر استفاده کرد، یعنی یک وب سایت:


div.sb (text-indent: 0px; outline: 2px solid #f4e9ce; حاشیه: 2px solid #ddcca2; padding: 4px 3px 0px 3px; background-image: -moz-linear-gradient(#f4e9ce, #ddcca3)؛ -image: -webkit-gradient(خطی، مرکز بالا، پایین وسط، from(#f4e9ce)، به(#ddcca3) filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr=); #ddcca3); فونت-وزن: پررنگ; span.sb2 ( رنگ: #ddcca2؛ حاشیه: 11px 0؛ موقعیت: نسبی؛ متن-سایه: 1px 1px 1px #000؛ شناور: سمت چپ؛ ) Cheat Sheet

آموزش ساخت انیمیشن در فتوشاپ

اما از آنجایی که این کد بی ضرر می تواند کاربران را با حجم کاراکترهای خود بترساند و تصویر پویا نیست، با استفاده از این برنامه از بخشی از صفحه نمایش مانیتور با این دکمه عکس گرفتم و در نتیجه آن را به تصویر تبدیل کردم. شما ممکن است از این استفاده نکنید یک راه طولانیبا کشیدن تصویر در . اما ابتدا باید در مورد اندازه بنر آینده تصمیم بگیرید. آنها را می توان در یافت شبکه بنر، که قصد دارید با آن کار کنید. من با هیچ مرزی محدود نشدم.

هیچ راهی برای ایجاد لایه‌ها برای تصاویر در فرمت‌های BMP و PNG وجود ندارد، بنابراین باید (برای JPEG و GIF این مرحله را رد می‌کنیم):

شکل 1 انتقال تصویر در فتوشاپ.

با توجه به اینکه پاک کردن عناصر آسان تر از اتمام طراحی است، با انتخاب (شکل 2)، لایه مورد علاقه خود را کپی می کنیم.


سپس با انتخاب (نگاه کنید به پس زمینه آبی) یکی از لایه ها و نشان دادن تنها چشم روی آن، از قطره چشم (I) برای تعیین و تنظیم خودکار رنگ انتخاب شده و از مداد (B) برای حذف تکه های غیر ضروری با رنگ کردن آنها استفاده می کنیم. به پالت پس زمینه در طول این روش، من دوست دارم روی عکس‌ها زوم کنم: اگر به شکل 1 نگاه کنید، 100٪ است، اما من به 300٪ اشاره می‌کنم تا بر عناصر غیر ضروری تأثیر نگذارم. همچنین عملکرد مفیدشفافیت لایه است (شکل 2).

سپس برای هر فریم یک چشم (چشم) فقط روی آن لایه هایی قرار می دهیم که باید روی آن نمایش داده شوند.


و ما مدت زمانی را برای فریم تعیین می کنیم که در طی آن کاربر با کلیک بر روی ماوس در ثانیه آن را مشاهده می کند.

بنر HTML5 بنری است که محتوای HTML سفارشی یا یک تصویر را نمایش می دهد. کد HTML می تواند معمول باشد صفحه HTMLبا سبک ها و اسکریپت ها در iframe جا می شود و دارد دسترسی محدودبه محتویات سایت

با استفاده از قالب "Banner HTML5"، یک بنر را می توان به دو روش اضافه کرد:
1. فقط تصویر را آماده کرده باشید. وجود پیوندی برای رفتن به آن در پارامترهای بنر، قابلیت کلیک تصویر را تنظیم می کند.
2. آماده کردن خلاقیت HTML در ویرایشگر طبق دستورالعمل: یا.
اگر هم کد HTML و هم یک تصویر به بنر اضافه شود، کد HTML نشان داده می شود.

پارامترهای قابل تنظیم هنگام اضافه شدن به ADFOX:
- عرض، ارتفاع بنر.
- صاحب سبک های css برای ظرف بنر.

توسعه خلاق HTML

1. الزامات کد HTML را مرور کنید

  • حداکثر اندازه مجاز فایل HTML 65000 بایت است.
  • بهتر است جاوا اسکریپت و CSS را در کد HTML بنر قرار دهید. اگر کد HTML حاصل از حداکثر اندازه مجاز بیشتر شود، باید با انتقال جاوا اسکریپت و CSS به فایل‌های جداگانه، کد را کاهش دهید:
    - ذخیره js و کد cssبه فایل های جداگانه با پسوند .js یا css.
    - وزن فایل ها نباید بیشتر از 300 کیلوبایت باشد.
    - فایل ها را در تب "Files" کمپین تبلیغاتی آپلود کنید و پیوندهای حاصل را به فایل ها در کد HTML اضافه کنید.

    نمونه ای از اتصال فایل های js و css:

    کد HTML اجازه استفاده از مسیرهای فایل نسبی را نمی دهد.

  • یک پروژه فقط می تواند حاوی یک فایل با پسوند html باشد.
  • حداکثر تعداد مجاز فایل در یک پروژه 50 است.
  • انواع فایل های مجاز در پروژه: css، js، html، gif، png، jpg، jpeg، svg، json، flv، mp4، ogv، ogg، webm، avi، swf.
  • حداکثر اندازه هر فایل (برای فایل های داخل بایگانی نیز اعمال می شود):
    - 300 کیلوبایت؛
    - 1 مگابایت برای فایل های ویدئویی
  • نام فایل ها باید فقط شامل اعداد یا حروف الفبای انگلیسی و کاراکتر زیرخط باشد. استفاده از حروف روسی، فاصله، نقل قول و کاراکترهای خاص در نام فایل مجاز نیست.
  • شما نمی توانید از حروف روسی در نام متغیرها و اشیاء استفاده کنید.
    تنها استثنا متن روی بنر است.
  • فرمت پروژه تمام شده یک آرشیو فشرده است.
الزامات تصویر

از تصاویر با وضوح بالا استفاده کنید، این به طور چشمگیری کیفیت بنر را بهبود می بخشد دستگاه موبایل، اگرچه سرعت بارگذاری بنر را کاهش می دهد.

می توانید از تصاویر SVG استفاده کنید. آنها بردار هستند، به این معنی که در همه دستگاه ها - موبایل و دسکتاپ - بهتر به نظر می رسند. آنها همچنین حجم فایل کمی دارند و می توانند متحرک شوند.

فرمت های تصویر قابل قبول: png، gif، jpg، svg.
حداکثر وزن یک فایل: 300 کیلوبایت.

2. ویرایشگری را که در آن خلاقیت HTML خود را توسعه می دهید انتخاب کنید و روی پیوند مناسب کلیک کنید. بایگانی را با خلاقیت HTML مطابق دستورالعمل ها آماده کنید:

ویرایشگر Adobe Animate CC - بنر تک دکمه

Adobe Animate CC Editor - بنر با چند دکمه

1. یک قالب برای یک بنر با چندین دکمه دانلود کنید

2. یک پروژه HTML5 Canvas در Adobe Animate ایجاد کنید (یا یک موجود را باز کنید)

3. هنگام افزودن دکمه‌ها یا کلیپ‌های فیلم تعبیه‌شده در یک صحنه، مهم است که به آنها یک نام نمونه بدهید تا بتوانید یک کلیک به آن اضافه کنید. دکمه های سمت راست. توصیه می کنیم از نام ها استفاده کنید دکمه 1 - دکمه 9.

همچنین ببینید:

دستورالعمل برای افزودن یک دکمه و اختصاص یک نام نمونه

دکمه روی صحنه اصلی

1. برای مثال با استفاده از ابزار Rectangle، مقداری شی در صحنه ایجاد کنید.
سپس آن را انتخاب کنید و منوی زمینه"تبدیل به نماد..." را انتخاب کنید.

2. در کادر محاوره ای که ظاهر می شود، نوع: دکمه را انتخاب کنید، نام می تواند بدون تغییر باقی بماند، روی Ok کلیک کنید.

3. یک Instance Name به این دکمه اختصاص دهید تا کلیک کار کند.

4. کد این دکمه را در Actions بنویسید:

Window.buttons.push(//مسیرهای دکمه‌ها را که با کاما از هم جدا شده‌اند بنویسید، این را در ابتدای این.button1 //پایان فضای دکمه‌ها اضافه کنید);

دکمه تو در تو

1. فرض کنید که دکمه داخل نماد دیگری است، به عنوان مثال در داخل یک فیلم کلیپ.
که در در این مثالبه این کلیپ فیلم نام نمونه داده شده "name"

2. توسط دوبار کلیک کنیدداخل نام بروید، یک دکمه تو در تو وجود خواهد داشت.

3. هنگام تعیین مسیر چنین دکمه ای در Actions، باید نام نمونه شی را بعد از این که در آن قرار دارد اضافه کنید:

Window.buttons.push(//مسیرهای دکمه‌ها را که با کاما از هم جدا شده‌اند بنویسید، این را در ابتدا اضافه کنید this.name.button1 //پایان فضای دکمه‌ها).

دستورالعمل ایجاد دکمه های شفاف

1. عنصر مورد نظر را انتخاب کرده و به نماد تبدیل کنید

2. نامی را وارد کرده و Type: Button را انتخاب کنید

3. روی نماد دوبار کلیک کنید تا به آن بروید:

4. فریم کلیدی را در فریم ضربه وارد کنید

5. محتویات فریم های بالا، بالا، پایین را حذف کنید

6. دکمه شفاف آماده است:

4. یک لایه Actions به پروژه اضافه کنید (کد دکمه ها را به آن اضافه می کنیم)

5. یک پنجره برای نوشتن کد باز کنید

Window.buttons.push(//مسیرهای دکمه‌ها را که با کاما از هم جدا شده‌اند بنویسید، این را در ابتدا //پایان فضای دکمه‌ها اضافه کنید). setAdfox();

اگر دکمه در صحنه اصلی است، برای مثال، نام نمونه آن را بلافاصله بعد از آن بنویسید

این دکمه 1

اگر دکمه در داخل یک صحنه تو در تو قرار دارد، پس از این ابتدا نام نمونه صحنه و سپس نام نمونه دکمه را بنویسید:

this.scene_instance_name.button2

نمونه کد نهایی در لایه Actions:

Window.buttons.push(//مسیرهای دکمه‌ها را که با کاما از هم جدا شده‌اند بنویسید، این را اضافه کنید this.button1، this.scene_instance_name.button2 //پایان فضا برای دکمه‌ها در ابتدا). setAdfox();

7. اولین دکمه در خط کد اولین پیوند را از ADFOX، دوم - دوم و غیره را فراخوانی می کند.

همراه با خلاقیت HTML، به مدیری که بنر را به ADFOX اضافه می کند، اطلاعاتی در مورد مطابقت دکمه ها و شماره پیوندها ارائه دهید.

8. گزینه های انتشار را باز کرده و قالب را از نقطه اول وصل کرده و با انتخاب دایرکتوری مورد نظر پروژه را منتشر کنید.

9. پس از انتشار پروژه، آن را با فرمت zip بایگانی کنید. خلاقیت شما آماده است تا در بنر ADFOX آپلود شود.

ویرایشگر طراح وب گوگل

کد این بنر می تواند به عنوان پایه در هنگام ایجاد خلاقیت در ویرایشگر استفاده شود.

قالب حاوی اسکریپت است adfox_HTML5.jsو مجموعه ای از پارامترها برای عملکرد صحیحانتقال و شمارش رویداد:
%reference%, %user1%, %eventN% که N عدد رویداد از 1 تا 30 است.

2. روی پردازش کلیک کنید.

همه رویدادها از طریق تب رویدادها به عناصر انیمیشن خاصی اختصاص داده می شوند.


جزء Interactive Area برای فراخوانی کنش ها استفاده می شود.
آن را اضافه کنید و رویداد Touch Area → Touch/Click (یا "Tap Area > Touch/Click" در نسخه انگلیسی) را انتخاب کنید.


در تب "کد سفارشی"، یک تماس با عملکرد کلیک را مشخص کنید.

2.1 اگر از یک دکمه پرش استفاده می شود:

CallClick();

2.2 اگر چندین دکمه انتقال وجود دارد:

CallClick(n);

جایی که n

2.3 اگر می خواهید یک رویداد را از یک انیمیشن بدون انتقال راه اندازی کنید، از کد زیر استفاده کنید:

CallEvent(n);

که در آن n تعداد رویدادی است که باید فراخوانی شود.



ویژگی اجرای بنر کششی (لاستیکی).

به طوری که بنر در عرض ظرفی که در آن در سایت قرار دارد، روی پانل کشیده می شود خواصبرای موقعیت و ابعاد، به جای پیکسل، درصد را مشخص کنید.

از گزینه ها نیز استفاده کنید "تراز کردن با کانتینر"و "طرح لاستیکی"در نوار ابزار بالا
اگر قبل از استفاده از ابزارهای هم‌ترازی Fluid Layout را فعال کنید، وقتی اندازه ظرف والد را تغییر می‌دهید، همه عناصر با یکدیگر و با ابعاد ظرف تراز می‌شوند.
در این حالت می توانید همزمان از اندازه نسبی عناصر در درصد و اندازه مطلق در پیکسل استفاده کنید.

4. انتشار پروژه.

هنگام اضافه کردن یک بنر به ADFOX، مدیر باید مطابقت دکمه ها و شماره رویدادها را بداند. برای هر رویداد، مدیر پیوند خود را برای پیمایش می‌نویسد، که سپس با استفاده از یک متغیر به کد بنر منتقل می‌شود.

پس از انتشار پروژه، آن را با فرمت zip. خلاقیت شما آماده است تا در بنر ADFOX آپلود شود.

سایر ویراستاران

1. شمارش کلیک روی یک بنر

برای اینکه ADFOX آمار کلیک ها را برای یک بنر محاسبه کند، باید یک متغیر در کد HTML در تگ و برای ویژگی href بنویسید:

%banner.reference_user1%

همچنین برای پیوندها، از ویژگی target با متغیر %banner.target% در مقدار ویژگی استفاده کنید.
در صورت عدم وجود ویژگی، لینک در داخل iframe باز می شود، یعنی سایت تبلیغ شده در فضای بنر باز می شود.

نمونه کد HTML برای شمارش کلیک روی بنر:

وب سایت آگهی دهنده

در کد HTML بنرهایی که قرار می گیرند برنامه های موبایل، برای شمارش کلیک ها، از ماکرو استفاده کنید: %reference%@%banner.user1%

2. شمارش کلیک از چندین لینک در یک بنر

فرض کنید یک بنر دارای چندین لینک برای دنبال کردن است که به صفحات مختلف سایت تبلیغ شده منتهی می شود و برای هر یک از آنها باید تعداد کلیک ها را بدست آورید.

لینک اول لینک دوم

مقادیر ویژگی href را با متغیرهای %request.reference%@%banner.eventN% جایگزین کنید، جایی که N باید شماره رویداد از 1 تا 28 باشد.
مثلا:

لینک اول لینک دوم

مطابقت لینک ها و متغیرها باید به مدیری که بنر را به ADFOX اضافه می کند گزارش شود. از آنجایی که هنگام اضافه کردن بنر، باید اولین پیوند را برای رویداد 1 و پیوند دوم را برای رویداد 2 مشخص کنید.

اضافه کردن یک بنر در ADFOX

برای افزودن بنر در ADFOX، نوع بنر مورد نظر و قالب "Banner HTML5" را انتخاب کنید.

پارامترهای بنر را مشخص کنید:

بایگانی با خلاقیت HTML5 - بایگانی .zip را با پروژه آپلود کنید، قسمت "کد خلاق HTML5" باید خالی بماند (پس از افزودن بنر، با محتوای فایل .html پروژه شما پر می شود).

کد خلاق HTML5 - یک بایگانی فشرده را با یک پروژه آماده شده در ویرایشگرهای HTML آپلود کنید یا کد HTML را جایگذاری کنید.

اگر چندین لینک در بنر وجود دارد، آنها را در برگه رویدادهای بنر، در قسمت های URL انتقال اضافه کنید.
لطفاً با توسعه دهندگان خلاق HTML برای مطابقت شماره پیوندها و رویدادها تماس بگیرید.

پیوند به پیکسل اندازه گیری - به طور پیش فرض از پیکسل ADFOX استفاده می شود //banners.adfox.ru/transparent.gif، اگر نیاز به پیگیری برداشت ها در یک سیستم شخص ثالث دارید، پیکسل ADFOX را حذف کنید و پیوند دیگری را مشخص کنید.

عرض خلاق (px یا %) - عرض بنر را مشخص کنید.

ارتفاع خلاق (px یا %) - ارتفاع بنر را مشخص کنید.

تصویر - آپلود یک تصویر
شرایط نمایش خلاقیت ها:
- کد HTML و تصویر اضافه شده - کد HTML نشان داده خواهد شد.
- تصویر اضافه شد - تصویر نشان داده خواهد شد.
- کد HTML اضافه شد - کد HTML نشان داده خواهد شد.

نام ویژگی کلاس کانتینر بنر - یک نام (یا چندین نام که با یک فاصله از هم جدا شده اند) برای ویژگی کلاس ظرف بنر مشخص کنید.

از SafeFrame استفاده کنید (بله|نه) - safeFrame فناوری است که تبلیغات را در یک iframe ویژه که دارای یک API سختگیرانه است می‌پیچد. SafeFrame از جمع‌آوری داده‌ها و تعامل با بقیه صفحه خارج از safeFrame جلوگیری می‌کند.
بله - استفاده از safeFrame را فعال کنید و دسترسی به صفحه وب را ممنوع کنید.
خیر - safeFrame را فعال نکنید. کد بنر به صفحه وب دسترسی دارد.

سبک های بلوک بنر - سبک های سفارشی برای ظرف بنر در یک خط. علاوه بر سبک: نمایش. به عنوان مثال، "حاشیه: 1px قرمز جامد؛". مقادیر نامعتبر توسط مرورگر حذف خواهند شد.

یک بلوک شناور (یا همانطور که به آن متحرک، ثابت، چسبنده نیز گفته می شود) در سایت مورد نیاز است تا کاربر هنگام پیمایش صفحه، یک عنصر ثابت را ببیند که اغلب تبلیغات در آن قرار می گیرد (تیزرها، بنرها یا زمینه) .

متأسفانه قوانین Adsense ما را از انجام این کار منع می کند. با این حال، بسیاری از صاحبان وب سایت ها قوانین را نادیده می گیرند. شاید آنها حتی برای این کار مجازات نشوند، اما من توصیه نمی کنم که ریسک کنید.

من تیزرها / بنرهای خود را در چنین بلوک های YAN قرار می دهم و گاهی اوقات به جای تبلیغات پست های مشابه یا برخی اطلاعات مفید برای بازدید کننده را در آنجا نمایش می دهم.

بیایید به شما بگوییم که چگونه می توانید یک بلوک شناور در وب سایت خود ایجاد کنید.

وظیفه: آخرین بلوک در ستون کناری (نوار کناری) را شناور کنید. علاوه بر این، به طوری که فقط در لحظه ای که کاربر با اسکرول به آن می رسد، می چسبد و نه بلافاصله هنگام باز کردن صفحه. همچنین، هنگام رسیدن به پاورقی، بلوک باید "چسبیده" شود (یعنی روی آن همپوشانی نداشته باشد).

کارآمدترین راه

گزینه های زیادی برای اجرای یک بلوک چسبنده وجود دارد، اما همه آنها به درستی کار نمی کنند. من به شما می گویم از تجربه شخصی: همان روش نصب یک بلوک می تواند در یک سایت کار کند، اما در سایت دیگر جم ها ظاهر می شوند.

در زیر نمونه ای از بلوک شناور است که تقریباً در تمام سایت هایی که من آن را نصب کردم کار می کرد. هیچ مانعی وجود نداشت. موتور نیز مهم نیست (DLE، WordPress، LiveStreet، و غیره).

در محل مورد نظر در ستون کناری، کد HTML زیر را قرار دهید:

$(window).scroll(function() (
var sb_m = 20 ; /* بالشتک بالا و پایین */
var mb = 300 ; / * ارتفاع زیرزمین با حاشیه */
var st = $(window).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" );
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) );
}
دیگر(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

در این کد می توانید padding را در بالا، پایین و همچنین ارتفاع فوتر خود تنظیم کنید. ارتفاعی که بلوک باید در آن متوقف شود.

حالا بیایید JS را وصل کنیم. برای این کار در قسمت HEAD بنویسید:

ساده ترین راه (برای وردپرس)

همچنین یک روش بی خطر، اما با نصب یک افزونه. بدون پارازیت کار می کند.

مزایای:

  • نیازی به درک/فهم HTML نیست.
  • سهولت و سرعت نصب

ایرادات:

  • انعطاف پذیر نیست کل ویجت (از جمله نام و طراحی آن) شناور می شود. بیایید بگوییم ساختن این بلوک با رنگ یا اندازه متفاوت دشوار خواهد بود.
  • نحوه استفاده:

  • افزونه را دانلود کنید.
  • نصب می کنیم.
  • بیایید آن را فعال کنیم.
  • به پنل مدیریت بروید: Design -> Widgets. ویجتی را که می خواهیم اصلاح کنیم باز کنید.
  • کادر کنار «اصلاح ویجت» را علامت بزنید و روی دکمه «ذخیره» کلیک کنید.
  • روش های دیگر برای پیاده سازی بلوک های کشویی

    آنها به نظر من کمتر راحت و به اندازه دو روش بالا واضح نیستند. اما به هر حال در مورد آنها به شما خواهم گفت.

    گزینه شماره 1 (بدون جی کوئری)

    در نوار کناری وارد کنید:

    ما سبک ها را در HTML می نویسیم (بهتر است آنها را مستقیماً به CSS اضافه کنید):


    .چسبنده(
    موقعیت: ثابت؛
    z-index: 101 ;
    }
    .متوقف کردن(
    موقعیت: نسبی;
    z-index: 101 ;
    }

    اکنون خود اسکریپت را به صفحه اضافه می کنیم (بهتر است آن را در یک فایل جداگانه قرار دهید، مانند "بیشترین روش کار"):


    (تابع() (
    var a = document.querySelector("#aside1") , b = null, P = 0 ; // اگر صفر با یک عدد جایگزین شود، بلوک قبل از اینکه لبه بالای پنجره مرورگر به لبه بالایی عنصر برسد، می‌چسبد. می تواند یک عدد منفی باشد
    window.addEventListener("scroll" , Ascroll, false) ;
    document.body.addEventListener("scroll" , Ascroll, false) ;
    تابع Ascroll() (
    اگر (b == صفر) (
    var Sa = getComputedStyle(a, "" ), s = "" ;
    برای (var i = 0 ; i< Sa.length; i++) {
    if (Sa[ i].indexOf("box-sizing") == 0 || Sa[ i].indexOf("سرریز") == 0 || Sa[ i].indexOf("width") == 0 ||. Sa[ i].indexOf("padding") == 0 || Sa[ i].indexOf("box-shadow" ) == 0 ||.
    s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + ";"
    }
    }
    a.innerHTML = "" +a.innerHTML+"" ;
    b = a.children[ 0] ;
    a.style .height = b.getBoundingClientRect() .height + "px" ;
    a.style .padding = "0" ;
    a.style .border = "0" ;
    }
    var Ra = a.getBoundingClientRect()
    R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer") .getBoundingClientRect() .top + 0) ; // انتخابگر بلوک، هنگام رسیدن به لبه بالایی که باید عنصر چسبنده را باز کنید. Math.round() فقط برای اینترنت اکسپلورر است. اگر صفر با یک عدد جایگزین شود، بلوک قبل از اینکه لبه پایینی عنصر به پاورقی برسد می‌چسبد.
    اگر ((Ra.top - P)

    < / iframe >

    < / div >

    و CSS اینجاست:

    /* ارتفاع پیش‌فرض */ #ad ( ارتفاع: 60 پیکسل؛ ) صفحه فقط رسانه @ و (ارتفاع: 90 پیکسل) ( /* 90 پیکسل ارتفاع */ #تبلیغ ( ارتفاع: 90 پیکسل؛ ) ) صفحه فقط رسانه @ و (ارتفاع: 125 پیکسل) ) ( /* 125 پیکسل ارتفاع */ #ad ( ارتفاع: 125 پیکسل؛ ) )

    /* ارتفاع پیش فرض */

    #آگهی (

    ارتفاع: 60 پیکسل؛

    صفحه فقط رسانه @ و (ارتفاع: 90 پیکسل) (

    /* 90 پیکسل ارتفاع */

    #آگهی (

    ارتفاع: 90 پیکسل؛

    صفحه فقط رسانه @ و (ارتفاع: 125 پیکسل) (

    /* 125 پیکسل ارتفاع */

    #آگهی (

    ارتفاع: 125px;

    ردیابی برداشت ها و کلیک ها

    بهترین چیز در مورد تبلیغات HTML5 این است که می توان آنها را ردیابی کرد با استفاده از گوگلتجزیه و تحلیل، درست مانند وب سایت های معمولی.

    اشتراک گذاری