ایجاد باکس اسکرول دار با HTML و CSS

ایجاد باکس اسکرول دار با HTML و CSS

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

اگر که شما یک مدیر سایت هستید و می خواهید این کار را انجام دهید و یک باکس برای سایت خود نمایش دهید باید بتوانید کد نویسی انجام دهید و با زبان های برنامه نویسی آشنایی داشته باشید و اگر که با کد نویسی آشنایی ندارید می توانید در ادامه همین آموزش طبق گفته های ما این باکس اسکرول دار را با HTML و CSS برای سایت خود بسازید و نمایش دهید.

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

بریم که باکس اسکرول دار را با HTML و CSS بسازیم :

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

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

چطور محتوا اسکرول دار بسازیم :

حتما شما فکر می کنید که ساخت یک سری باکس های اسکرول دار نیازمند نوشتن کد های Jquery می باشد و اما این طور نیست در حقیقت ، شما این کار را با دانش کمی کد نویسی HTML و CSS اینکار را انجام دهید و برای انجام این کار نیز کافی است که مطابق با آموزش زیر عمل کنید.

در قدم اول شما باید یک تگ Div برای بخش مورد نظر خود مانند کد نویسی بنویسید تا به کد این تگ Div مورد نظر که نوشته اید شما به سایت خود مشخص کنید که من یک باکس ساخته ام مانند کد زیر :

<div class="mihanacademy-box"> ساخت باکس اسکرول دار در وردپرس با میهن آکادمی </div>

این کد بالا ، کد نویسی HTML می باشد که شما می توانید با قرار دادن این خط کد بالا در بین کد های قالب سایت خود مشخص کنید که شما این باکس مورد نظر خود را ساخته اید و بعد از ساخت این باکس نیز شما باید کد نویسی CSS انجام دهید و کد نویسی CSS هم مانند کد پایین می باشد و شما باید این خط کد نویسی را در فایل Style.css قرار دهید

.mihanacademy-box{
    width:200px;
    height:200px;
    background:#eee;
    overflow-y:scroll;
}

در کد بالا width و height ، حالت طول و عرض کادر یا همان باکس اسکرول شما را مشخص می کند و background هم در کد نویسی بالا ، رنگ پشت زمینه سایت کادر شما را مشخص می کند و overflow-y هم برای کادری که شما ساخته اید اسکرول شما را مشخص می کند.

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

موفق و سربلند باشید.