کد تبلیغات پست ثابت با قابلیت بسته شدن

سلام خدمت خانواده پر انرژی هایپرتمپ ، هوادارن و طرفداران عزیز.

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

کد تبلیغات پست ثابت با قابلیت بسته شدن و رسپانسیو :

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

سلام خدمت خانواده پر انرژی هایپرتمپ ، هوادارن و طرفداران عزیز.

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

کد تبلیغات پست ثابت با قابلیت بسته شدن و رسپانسیو :

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

در ابتدا لازم است کد زیر را در Head قالبتون قرار بدین که استایل این باکس تبلیغاتی هست :

<!--شروع استایل کد باکس تبلیغاتی هایپرتمپ به همراه بسته شدن--> <style> .hyper-ads-close{ background-color: #FFF; border-radius: 3px; background-clip: padding-box; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); padding: 10px; box-sizing: border-box; text-align: center; position: relative; overflow: hidden; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); clear: both; } .hyper-ads-close .hyper-ads-close-ico { position: absolute; z-index: 2; left: 9px; top: 9px; height: 24px; width: 24px; background: url('http://up.hypertemp.ir/view/1366437/hyper-ads-close-ico.png') no-repeat scroll 0% 0% transparent; cursor: pointer; transition: all 0.3s ease 0.1s; } .hyper-ads-close .hyper-ads-close-ico:hover { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); transform: rotate(45deg); } .hyper-ads-close .hyper-ads-close-continer{ position: relative; z-index: 1; } .hyper-ads-close .hyper-ads-close-continer img{ max-width:100% !important; } .hyper-ads-close-closed{ max-height: 0; padding: 0; } </style> <!--پایان استایل کد باکس تبلیغاتی هایپرتمپ به همراه بسته شدن-->

و کد زیر رو در جایی که میخواید کد تبلیغات نمایش داده بشه قرار بدین :

<!--شروع--> <div class="hyper-ads-close" id="hyper-ads-close-a"> <div class="hyper-ads-close-ico" onclick="document.getElementById('hyper-ads-close-a').classList.toggle('hyper-ads-close-closed');"></div> <div class="hyper-ads-close-continer"> محل قرار گیری محتوای دلخواه </div> </div> <!--پایان-->

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