با سلام خدمت شما با آموزش درج برنگار در وبلاگ در خدمت شما هستیم ...
خب دوستان همانطور که میدونید توی وبلاگ آیتک آقای محمد صادق تقی زاده عزیزمون یک سری برنگار در این پستش
درج کرده که عکسشونو هم من در زیر قرار میدم ...
این برنگار ها بر اساس رویداد هایی در وبلاگ قرار داده میشوند که صحنه خوبی را به وبلاگ ایجاد میکنند که من تو چند
روز اخیر افراد زیادی رو دیدم که پرسیده بودند چطوری درجش کنیم ؟! جواب معلوم است با استفاده از KeyFrames ها که
من در زیر آموزش رو به صورت کامل توضیح میدهم و از شما عزیزان که علاقه دارید خواهش میکنم مطلب رو قدم به قدم
دنبال کنید تا به صورت صحیح برنگار در وبلاگ شما درج بشود ...
1 - ابتدا در قسمت مرکز مدیریت > ویرایش ساختار قالب فعلی بعد از تگ <body> یک تگ div با کلاس barnegar ایجاد کنید
که کدش رو در زیر قرار میدهم ...
<div class="barnegar"></div>
2 - بعد از اتمام مرحله یک به قسمت مرکز مدیریت > ویرایش Css قالب فعلی میرویم و کد Css زیر رو درج میکنیم ...
.barnegar {
right: 5px;
width: 200px;
height: 100px;
visibility: hidden;
position: fixed;
animation-name: jump;
animation-duration: 10s;
animation-delay: 2s;
background-size: contain;
background-repeat: no-repeat;
background-image: url(http://bayanbox.ir/view/1944315981571146492/Mabas.png);
}
خب برای درج برنگاری که دوست دارید لینک برنگار خود را در قسمت Background-image درج کنید ...
3 - و در نهایت کد Keyframes های زیر را نیز در فایل Css خود درج کنید ...
@keyframes jump {
0% {
top: -150px;
opacity: 0;
visibility: visible;
}
15% {
top: 10px;
opacity: 100;
}
85% {
top: 10px;
opacity: 100;
}
100% {
top: -150px;
opacity: 0;
}
}
تمام شد به همین سادگی حال میتوانید به وبلاگ خود مراجعه کرده و برنگار مورد نظر خود را مشاهده کنید راستی یک نکته که یاد رفت بهتون بگم این برنگار اگر مشاهده کنید در قسمت بالا قسمت راست مشاهده میشود اگر بخواهیم در پایین و سمت چپ دیده شود چه کنیم ؟ کافیست در کد های Css به جای استفاده از top و right از کد های bottom و left استفاده بکنیم, خب دوستان این مطلب هم به پایان رسید امیدوارم مفید واقع شده باشه اگر سوال, پیشنهاد و یا انتقادی داشتید حتما با فرم نظرات پست مربوطه باما در ارتباط باشید ...
به به چه آموزش خوشگلی 😍
دستت درد نکنه
بسیار عالی ، ممنون