آموزش تغییرات در قالب برای گلابی ها (قسمت دوم)

 

میخوام یه کمی یادتون بدم چیز میزای قالبو چطور تغییر بدید

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

آموزش های اضافه شده:

• تغییرات موقتی در ظاهر قالب
• تغییر پس زمینه و ذخیره تغییرات

قسمت اول: گلابی ها هم میتوانند.

 

1. برید توی صفحه وبلاگتون یا هرصفحه ی دیگه ای مثلا همین وبلاگ، فرقی نداره.

2. روی پس زمینه وبلاگ راست کلیک کنید و Inspect رو بزنید.

3.در پنجره ای که باز شد سمت راست یه سری چیز نوشته که مشخصاتش رو به دلخواه تغییر بدید اگه رنگه عوضش کنید اگه عدده کم و زیادش کنید اگه لینک عکسه، لینک جدید بذارید.

بیشتر کرم بریزید: روی اجزای مختلف وبلاگتون مثلا متن و تصاویر هم راست کلیک کنید و Inspect بزنید و مشخصاتشون رو تغییر بدید.

[ممکنه بعضی اجزا با تغییر در مشخصاتشون تغییر نکنن که طبیعیه برید سراغ چیزای دیگه].

4. احساسی که دارید رو برام کامنت کنید.

 

آموزش تصویری

مدت زمان: 3 دقیقه 19 ثانیه

دانلود ویدیو

---

 

 

قسمت دوم: تغییر پس زمینه وبلاگ و ذخیره کردن تغییرات

برای شروع این بخش باید قسمت اول رو خونده باشید و محیط Inspect رو دیده باشید.

چند تا کد اصلی css برای تغییر پس زمینه وجود داره که پس زمینه ی همه چیزو میشه باهاش تغییر داد

ای شیطونا دارین همه چیزو یاد میگیرینا 😎

 

background که رنگ یا تصویر زمینه وبلاگتون رو مشخص میکنه

background-size که اندازه تصویر رو مشخص میکنه

background-attachment برای ثابت کردن تصویر که موقع اسکرول کردن پس زمینه حرکت نکنه

 

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

اولیش background ئه که میتونه رنگ و یا تصویر پس زمینه وبلاگتون رو مشخص کنه

اگه خواستید رنگشو عوض کنید ابتدا در زیر بقیه کدها، تایپ کنید background و یک رنگ مثلا red رو بهش بدید به این صورت

background-color:red;  بعدش با جعبه رنگی که میده رنگ دلخواهتون رو بسازید

 

اگر خواستید پس زمینتون یه عکس باشه اینجوری از background استفاده کنید

background-image:url('آدرس عکس');

 

کد بعدی background-size هست که میتونید بسته به نیازتون که دوس دارید تصویر چه اندازه ای باشه، مقدارهای مختلفی بهش بدید

برای تمام صفحه شدن میتونید این شکلی بنویسیدشbackground-size:cover;تا کل صفحه شما رو پوشش بده

و یا اندازه ای به درصد بهش بدید مثلا background-size:20%;

 

کد background-attachment هم اگر خواستید تصویر ثابت بمونه و با پایین آوردن صفحه حرکت نکنه این کد رو هم اضافه کنید

background-attachment:fixed;

 

آموزش تصویری

 

مدت زمان: 2 دقیقه 26 ثانیه

دانلود ویدیو

 

با این روش میشه بکگراند بقیه اجزای صفحه رو هم تغییر داد کافیه روی هرچیزی Inspect بزنید و بهش background بدید

خب حالا مثلا بکگراند صفحه رو هم یاد گرفتیم عوض کنیم چطوری توی قالبمون ذخیرشون کنیم

اینجوری:

 

 

مدت زمان: 1 دقیقه 20 ثانیه

دانلود ویدیو

 

توضیحات ویدیو: برید به آخر css هاتون و یه متن دقیقا به این شکل ایجاد کنید تا کدهای جدید رو زیرش بذارید تا اگه خرابکاری کردید راحت کدای پایینشو حذف کنید تا به حالت اول برگرده

/************** کدهای جدید ***************/

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

 

 

این آموزش اصولی و کامل نیست ولی کار گلابی ها رو راه میندازه

پیشنهاد میکنم آموزش html و css که در بسیاری از سایت ها رایگان هست رو دنبال کنید تا از پس طراحی کامل قالب وبلاگتون بربیاید