Menu

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

چهارشنبه, ۸ ارديبهشت ۱۴۰۰، ۱۱:۰۰ ق.ظ
Afshin

 

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

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

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

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

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

 

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 که در بسیاری از سایت ها رایگان هست رو دنبال کنید تا از پس طراحی کامل قالب وبلاگتون بربیاید

نظر دادن تنها برای اعضای بیان ممکن است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.

نظرات (۴۴)

 احساس میکنم خیلی خفنم و دارم طرف رو هک میکنم😂:/

. احساس جالبی بود
  • crazy friends avatar
  • 𝕄𝕠𝕠𝕟 𝕊𝕙𝕒𝕕𝕠𝕨 🌙
  •   منم دقیقا با همین روش یاد گرفتم :0

    روش درستشم همینه از وسط شروع کنی که حس تونستن بهت دست بده بعدش کم کم قواعدو یاد بگیری

     گلابی نه من آناناس دوست دارم ! 😂 🤣 

     ( نمی دونم عصر یخبندانو دیدین یا نه ولی توی دوبله ی فارسیش یه حیوونه بود می گفت " یه روز از خواب پا شدم دیدم کلم گلابی شده من آناناس دوست داشتم " خلاصه که اون بالا نوشته بودین گلابی یاد عصر یخبندان افتادم 😆 😅 😐 😶 )

     

     

     + جدا از این حرفا پست خوبی بود 😇 تشکر 🙏 ...

     و اینکه به نظرِ من از این پستا بیشتر استقبال می شه تا پستایی که مربوط به جن هاست 😉 ... 

    باشه تو آناناس باش
    دیدم ولی این دیالوگش یادم نیست
    مطمئن نیستم ادامه بدم چون در این حد خیلیا بلدن خودشون. جن و ارواح جذاب ترن

    .

     گلابی گلابیییی. 

     من عالیم تو نابی 😂

     

     

     

     

    .

     پس من خداروشکر گلابی نیستم:/😐💪💔

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

    .
  • crazy friends avatar
  • 𝒀𝒖𝒎𝒊𝒌𝒐 ツ ! ×
  •  بله گلابی ها به شما نیاز دارند...

    اینجا همه حرفه ای هستن دیگه گلابی باقی نمونده

     این خوب شد نظرتو میخوام :/

     

     http://chert-pert.blog.ir/post/66

    آره حرکت خوبیه .

     سلام :)

     وای هنوز این صدای خیلی ممنون هست😍

     احساسم چه خفن😎  

     #نه به گلابی بودن!

    سلام .
    خیلی ممنون زهر مار خیلی ممنون

    #گلابی_پادشاه_میوه_ها
    #برگ_چغندر_برای_سلامتی_مفید_است

     ادامه بده چون من یه گلابی ام

    خداوند گلابی ها را دوست دارد .

     آخی یادش بخیر منم ی زمانی این کارو میکردم

     راستی این موزیک پلیرت چرا موزیکو پخش نمیکنه

    پس از گلابی بودن درومدی 
    قالبت مشکل داره اینو بذار ته css ت
    audio { height: 50px; }
  • crazy friends avatar
  • 𝐿𝑜𝑣𝑒 ‌ ‌‌
  •  عاا..توی گوشی فرق داره ریدن به قالب-_-

    با گوشی نمیشه متاسفانه 

     :))))) عنوان

    .خواهش میکنم

     یک عدد گلابی صحبت میکنه🍐

     

     عارههههههههههههه

     هل یس! زنیتزخلنیحشگجطشم نیاز دارم بهشششش🍐🍐🤣🤣👍

    دریافت شد گلابی جان 🍐
    با توجه به افزایش تعداد گلابیا احتمالا ادامشو میذارم .

     راستی افشین عزیز! اون کدی ک بهم دادی آخرشم کار نکرد :/ 

     برا کامپیوتر و گوشیش فرقی نداره؟ عاخه من با گوشیم!

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

     خب ی اموزش بزار چجوری قالبو تغییر بدن مثلا چجوری width ستون سمت چپی رو زیاد کنن یا اینکه چجوری background-color یا padding بدن

       (◕‿◕)   (◕‿◕)

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

      °✧◝(⁰▿⁰)◜°

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

     کیفیت فیلم پایینه یا مشکل از نت منه؟!

    درست میگی کیفیت پایین بود جالبه هیشکی نگفته بود یعنی کسی ویدیو رو اصلا ندیده بود .
  • crazy friends avatar
  • عرفان‌‌ ‌‌‌‌
  •  👌👌

    .

     جر جر جر افشین احساس میکنم کچلت کردم🤣🤣🤣🍐🍐

    نه حتما من خوب توضیح ندادم .
  • crazy friends avatar
  • ☉-☉لیلین خرسیِ خسته☉-☉ (سکینه خرسیِ ترانه و بقیه*-*)
  •  هق من می‌خوام قالبو دو رنگش کنم ولی نمیتونمممممممم یعنی نبلدم ⁦ಥ_ಥ⁩ هلپ‌ 0-0

    اگه منظورت اینه که پس زمینه دو رنگ بشه
    این سایت کدشو میسازه رنگی که خواستی رو درست کن خروجی یه کد بهت میده که کپی میکنی و توی وبلاگت همون مدلی که گفتم Inspect میزنی و کدی که کپی کرده بودی رو تست میکنی

    اگه منظورت رنگ بخشای مختلفه با روش همین پست میشه رنگشونو عوض کرد

     :(((

     

     افشین عزیز😭😭🤦‍♀️ جر جر جر برم ببینم کجای کار اشتب کردم :")

    بلرای عزیز لینک دانلود ویدیو رو گذاشتم زیر همشون شاید اگه دانلود کنی برات بیاد .

     حس این گلابیای بازی فروت کرفتو دارم که پاورآپ شدن (کلیک)

    (⌒_⌒;)

    تو که خودت بلدی گلابی نیستی .

     یههههه دان شدددد😎😎👍😋🧡🍬

    ..

     عرررررررر افشینننن عزیزززززززززز تونستمممممم😆😆😆😆💃💃💃💃💃💃💃💃

     

     فق ی چیزی! چیکار کنم اون خطایی ک افتاده زیر تایتل پست و منوهام از بین بره؟ :")

    کدوم خطا؟ میتونی اسکرین شات بدی؟ 

     کد زدم نشد

    کدوم قسمتش نشد؟ 

     سیو کردنش

    احتمالا کامل کپیش نکردی باید از علامت { باز تا بسته رو کپی کنی و خود علامت های کروشه های باز و بسته شاملش باشه اگه بسته نشه کدش کار نمیکنه
    یعنی به این فرم باشه
    body{
     ...کدها 
    }

     درست شد 

     نمیدونم ولی دفعه قبل کامل کد رو کپی کرده بودم 

    خب خدارو شکر .

     خط‌ها

     

     لنفخزنسن نگو خطا خوندیش😂😂🔫

     همه‌جای وبم خط افتاده، بجز متن پست و متن کامنت :"(

    آهان خط زیر لینکا رو میگی. باید آب هویج بخورم ..
    اینو بذار آخ css ت

    a{text-decoration:none;}

     آموزشایی که گذاشتی خیلی خوب بود 

     البته بلد بودم یه چیزایی 

     ولی با این اصطلاح • گلابی• باز باید شک کنم که داییم داره به صورت مخفیانه وبلاگ می‌نویسه 😄

     

     

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

     ممنون از آموزش خوبت :)) 

    خواهش میکنم امیدوارم بشه به یه جای خوبی روسندش
  • crazy friends avatar
  • 𝒞𝒽𝒶𝓇𝓁𝑜𝓉𝓉𝑒 𝔗𝔥𝔢 ℂ𝕒𝕟𝕟𝕪
  •  میشه تغییر فونت رو هم آموزش بدید.

     من هر چی کد ها رو جایگذاری می کنم اعمال نمیشه😥

     

    برای تغییر فونت کدایی که میذاری دقت کن آدرسشون اگه با http شروع میشه تبدیلشون کن به https شاید مشکلت حل بشه 
    اگه شد آموزش اونم میذارم

     البته میتونستی ب جای

     background-attchment:fixed;

     راحت بنویسی

     background:url() fixed;

     

    (◕‿◕)♡

    درسته همه کدای background رو میشه توی یه خط نوشت ولی میخوام ساده ترین حالت ممکن بگم
    در نهایت اگه کسی علاقه داره مجبوره اصولی بره html و css رو یاد بگیره

     میگم اون برگه رو تا اخر رفتم

     پیشولرو کشتم، با اس سی پی صد هفتاد سه هم دوست شدم

     بعد پروفایلم از اسمون سرازیر می شدXD

    شاید یه روز کاملش کنم الان یه چیز بی معنیه 

     مشمشمشمشمشمشمش دستت مرسییییی *^* 🍬🌙☀️🧡

    .

     گلابی ها هم میتوانند 😂

    بله آرین همه میتونن .
  • crazy friends avatar
  • °~ 𝐊𝐞𝐯𝐢𝐧
  •  عر خدا

     برای گلابی ها؟😂😂😂

    بله بله .

     هااااااااااای افشین

     بالاخره منم تو بیان ثبت نام کردم💪

     قبلا تو 11-11 کامنت گذاشتم با همین اسم (تقریبا دیروز)

     و بهت گفته بودم شاید هیچوقت عضو بیان نشم

     ولی شدم😂😂😂😂😂

     تو سایت جدیدم یه مشکلی دارم (یکی که نه، چن تا):

     1.هرکاری میکنم فونت سایتم مثل تو عوض نمیشه، کارای توی فیلمتم انجام دادم ولی باز نشد که نشد. هنوزم همون فونت عادی و مسخرس

     2.نمیتونم برای اول مقالم عکس بزارم (2_3 تا گزینه پیدا کردم ولی همش عکسو میارن تو مقاله، نه این که بره اول مقاله نشون داده بشه)

     3. عکس پس زمینه😭

     بازم کارای فیلمتو انجام دادم، نشد که نشد!

     4.به سایتم سر بزن و مشکلاتشو بهم بگو!

     مرسی💛

     befool.blog.ir

     سلااااااام ^^

     دلمم تنگگ شدهههه

     واقعا بیان اومدن سختمهه کلا -_-

     چ خبرا؟

     حالت خوبه؟

     امتحانای من حضوریه -_-

     

     

    سلام خورشید 
    برای من یا بیان؟
    هیچ ما هم میگذرونیم
    توی این وضعیت حضوری؟ خدا عقلشون بده 

     افشیییییییییییییییین

     مشکل نوع فونت حل شد

     سایزشو چی کار کنم🙄

     راستی این بکگراندو دوباره توضیح بده

     عشقی💛

    بکگراندو که کامل توضیح دادم ویدیو داره هرچی خواستی پلی کن
    سایز متنو باید font-size بهش بدی
    میتونی به body بدی ببینی کار میکنه یا نه اگه نشد به همون اجزایی که متن دارن باید بدی
    مثلا font-size:16px;

     من واقعا در برابر کد ها و اینا گلابی ام:)))

     +دمت گرم بابت پست آموزنده و پرمحتوا

    اشکال نداره اینجا میتونی کم کم یاد بگیری

    . دم خودت گرم که بازگردیدی
  • crazy friends avatar
  • ℛℴ𝒿𝒶𝓃 ılı.lıllılı.ıllı.
  •  گلابی 😂 

    سلام گلابی .
  • crazy friends avatar
  • 🌹⚘ROSE ARE ROSIE ..
  •  گلابی ها؟کیا هستن دقیقا؟😶

    افرادی که جویای حقیقت هستند .
    آن دسته از مبتدیان که قصد دارن یه چیزی یاد بگیرن

     قالب خیلی خفنه و خوشگلیه رنگ بندی اندازه و همه چیزشو دوس دارم😍😍

     

     خودت طراحیش کردی؟!

     

     چند تا زبان برنامه نویسی بلدی؟!!

    مچکرم .
    خیلیا با تاریک بودن تمش مخالفن ولی من روحیم دارکه اینطوری میپسندم
    همون چیزای معمولی که برای طراحی سایت استفاده میشه (html , css و js) کافیه برای همه این کارا

     سایتت با bootstrapعه یا cssخام؟

    اگه منظورتت ریسپانسیو بودنشه با @mediascreen نوشتم و از bootstrap استفاده نکردم
  • crazy friends avatar
  • ᴶᵃᵛᵃᵈ ᴴᵃᶳʰᵉᵐᶤ
  •  سلام وبلاگ تون عالیه 👍

     یه درخواس داشتم ،میخام برا آخرین نظرات قالب وبلاگم آواتارشون معلوم  بشه!

     رپلی پاسخ هام هم آواتارش باشه

     و میخام محبوب ترین مطالب وبم هم تصویر داشته باشه

     ممنون میشم بگید ☺🌷

    سلام ممنون
    اینا همش نیاز به کدنویسی و تغییر توی کدای قالب داره
    محبوب ترین مطالب اگه بخوای عکس دار باشه باید از قبل به هرکدوم از مطالبت عکس داده باشی
    crazy friends

    I'm just a mirror for you
    You are good, I am best ✌
    You are bad, I'm the worst

    I'm just a mirror for you
    You are good, I am best ✌
    You are bad, I'm the worst


    bad
    James Bay Bad

    shining
    Carpenters i can't smile without you

    James horner
    My Immortal Evanescence

    James horner
    James horner FOR THE LOVE

    James horner
    Within Temptation Forgiven
    آخرین نظرات
    پیوندها

    X