تبلیغات
بهار آرزو - آموزش گام به گام تغییر کلیه ی عکس های وبلاگ
 
نظرات ()
نوشته شده توسط بهار آرزو در تاریخ یکشنبه 3 مرداد 1395

برای مشاهده ی این پست، به ادامه مطلب برین

هر قالب وبلاگ از کدهای HTML و Css تشکیل شده است. کد های HTML کدهایی هستند که مکان هر تصویر و متنی را در قالب وبلاگ مشخص می کند. مثلا میگوید که ابتدا عکس " الف " در بالا ی وبلاگ بیاید، بعد از آن عکس " ب " که عکسی برای هدر پست ها است در سمت راست بیاید و متن در زیر آن نوشته شود و . . . 
اما Css ،
در Css موارد گرافیکی وبلاگ تعریف می شود. مثلا در همین مثالی که بالا گفته شد، میگوید که عکس " الف " عبارت است از عکسی که در آدرس " baharearezu.mihanblog.com/Picture/a " می باشد و ابعاد آن 1000*300 میباشد.
معمولا کدهایی که در Css قرار می گیرند، در یک قسمت جدا آپلود می شوند و در HTML  لینک می شوند. برای تغییر هر عکسی که در وبلاگ مشاهد می کنید باید تغییراتی در Css به وجود آورید. 
هدر اصلی وبلاگ، گاهی اوقات در HTML و گاهی اوقات در Css تعریف می شود اما بقیه ی تصاویر مثل هدر بالای هر پست که عنوان پست روی آن نوشته می شود و یا هدر منو ها در Css تعریف می شوند.
دلیل این که از Css  استفاده می شود این است که قالب وبلاگ یا همان کدهای HTML زیاد شلوغ نشوند و حجم کمتری بگیرند.
ابتدا باید تعریف بعضی کلمات ساده رو بدونین. 


تصویر یک

هدر ( Header یا Head ) : عکسی که در بالای هر محدوده قرار میگیرد.
فوتر ( Footer یا Foot ) : عکسی که در پایین هر محدوده قرار دارد.
پست : محدوده ای که متن هر سایت یا وبلاگ در آن نوشته می شود.
منو : محدوده ای که سمت چپ یا راست یا هر دو طرف یک وبلاگ قرار دارد وموارد جانبی وبلاگ در آن قرار میگیرند اعم از تعدا نویسندگان، لینک ها و ... 
برای تغییر عکس هایی مثل هدر و فوتر منو ها یا پست ها و یا حتی هدر اصلی وبلاگ ، ابتدا باید وارد قسمت Css وبلاگتان شوید. برای این کار وارد قالب وبلاگتان شوید و در خطوط اول وبلاگ دنبال کلمه ی type="text/css بگردید. در قالب وبلاگ من چنین عبارتی وجود دارد :

<link href="http://slidethemes.ir/theme/167/style.css" type="text/css" rel="stylesheet">

متن داخل گیومه و بعد از عبارت link rel را در یک صفحه از مرور گر باز میکنم و کل مطالب در صفحه را کپی میکنم. برای گرفتن کل مطالب در صفحه میتوانید از موس استفاده کنید و یا کلید "alt" و "a" را با هم فشار دهید و سپس کپی کنید.
در یک notepad آن را پیست ( past )  کنید. notepad را میتوانید از منوی Start، قسمت All programs و بعد پوشه ی Accessories پیدا کنید.


تصویر دو

آدرس هر تصویری که در Css بیان شده، خلاصه نوشته شده است و برای تغییر یک قسمت آن ، باید آدرس تمام تصاویر آن را به طور کامل وارد کرد. به یاد داشته باشید که برای تعریف هر تصویر از عبارت  url استفاده شده است. شما برای پیدا کردن هر تصویر میتوانید با فشردن کلید " ctrl " و " f " وارد قسمت سرچ شوید و عبارت url را وارد کرده و جست و جو کنید.


تصویر سه

گفتیم که آدرس هر تصویر خلاصه نوشته شده است، یعنی به جای اینکه آدرس تصویر را بنویسند:
(url(http://slidethemes.ir/theme/167/style.css
نوشته اند : (url(header.jpg
حالا ما باید عبارت کامل شده ی آن را وارد کنیم.
برای این کار ، آدرس css را در نظر میگیریم.
http://slidethemes.ir/theme/167/style.css
قسمت آخر این آدرس یعنی style.css را حذف میکنیم و بقیه ی آن را کپی میکنیم:
http://slidethemes.ir/theme/167/
حالا این عبارت را قبل از همه ی آدرس ها اضافه میکنیم. برای این کار ابتدا عبارت url را سرچ کرده، و بعد داخل پرانتز و قبل از عبارت داخل پرانتز، این عبارت زرد رنگ را پیست می کنیم. یعنی:
اگر داریم : (url(header.jpg این کار را میکنیم:
(url(http://slidethemes.ir/theme/167/header.jpg

این کار را برای کل Css یعنی برای تمامی عکس ها انجام می دهیم.
حالا قسمتی را که میخواهیم تغییر بدهیم را انتخاب میکنیم. مثلا برای تغییر هدر اصلی وبلاگ، باید قسمتی را که عکس هدر اصلی وبلاگ دارد را مشخص میکنیم.
حالا یک سوال : از کجا بدونیم بین این همه عکس ، کدام مربوط به هدر اصلی و کدام به قسمت های دیگر مربوط میشود؟
پاسخ : میتوانیم همه ی عکس ها را یکی یکی در مرورگر باز کنیم تا ببینیم که کدام عکس مربوط به کدام قسمت وبلاگ است.
در این قالبی که من انتخاب کرده ام، هدر وبلاگ تحت عنوان زیر وجود دارد:
http://slidethemes.ir/theme/167/slide1.jpg
این عبارت را باز کرده و مطمئن میشویم که واقعا هدر اصلی وبلاگ را نمایش میدهد. الآن آن عکس را ذخیره کرده و تغییر میدهیم. عکس تغییر داده شده را آپلود میکنیم ( سایت picofile.com را پیشنهاد میکنم اما شما میتوانید از هر سایت دیگری نیز استفاده کنید. ) و پس از آپلود عکس، آدرس آن را به جای عبارت بالا قرار میدهیم.
الآن باید فایل css را که تغییراتی در آن ایجاد کرده ایم ذخیره کنیم. پس از ذخیره سازی باید آن را آپلود کنیم. برای آپلود چنین فایلی از هیچ سایت آپلودی نمیتوان استفاده کرد و تنها از قسمت شخصی آپلود میهن بلاگ استفاده کنید. برای این کار وارد میهن بلاگ شده، رمز و نام کاربری را وارد کرده و وارد صفحه شخصیتان شده، سمت راست گزینه ای وجود دارد تحت عنوان " مدیریت فایل ها " ، آنجا رفته و این فایل متنی ( Css ) را آپلود میکنیم.
پس از آپلود باید آدرس جدید Css را جایگزین آدرس Css قبلی بکنیم. یعنی قبلا بوده :
<link href="http://slidethemes.ir/theme/167/style.css" type="text/css" rel="stylesheet">
و ما به جای عبارت زرد رنگ، آدرس جدید Css را وارد میکنیم:
<link href="http://file.mihanblog.com//public/user_data/user_files/596/1787745/1.txt" type="text/css" rel="stylesheet">

پایان



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





یکشنبه 10 مرداد 1395 11:13 ق.ظ
نه نمیدونم الان میگردم ببینم چیزی پیدا میکنم همراه با پست جدید برای همه میذارم
بهار آرزو :
یکشنبه 10 مرداد 1395 09:00 ق.ظ
سلام...

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


چشم . . . حتما میام . . .


چه آرزوی جالبی
شنبه 9 مرداد 1395 05:52 ب.ظ
...♥#####سلامـــ####♥
...♥####اپمـــــــ#######♥
..♥#################♥..................♥###♥
..♥##################♥..........♥#########♥
....♥#################♥......♥#############♥
.......♥################♥..♥###############♥
.........♥################♥################♥
...........♥###############################♥
..............♥############################♥
................♥##########اپمــ#############♥
..................♥######################♥
....................♥###################♥
......................♥#################♥
........................♥##############♥
...........................♥###########♥
.............................♥#########♥
...............................♥#######♥
.................................♥#####♥
...................................♥###♥
.....................................♥#♥
.......................................♥
.......................................♥
.....................................♥
...................................♥
.................................♥
..............................♥
............................♥
.........................♥
......................♥
..................♥
.............♥
.........♥
......♥
....♥
......♥......................♥...♥
..........♥.............♥............♥
..............♥.....♥...................♥
...................♥.....................♥
................♥......♥..............♥
..............♥.............♥....♥
.............♥
...........♥
..........♥
.........♥
.........♥
..........♥
..............♥
...................♥
..........................♥
...............................♥
.................................♥
.................................♥
بهار آرزو:
شنبه 9 مرداد 1395 03:51 ب.ظ
Naaaaaa oon pak shod:'(
Dobare join bedid
بهار آرزو:
شنبه 9 مرداد 1395 12:14 ب.ظ
سلااااااااااام
وبلاگ جالبی دارید تو مایه وبلاگ خودمه . نوشتن خاطرات.
البته من تازه شروع کردم
خوشحال میشم به من سر بزنید
در ضمن با افتخار لینک شدید
بهار آرزو :
جمعه 8 مرداد 1395 10:33 ق.ظ
باید یکی باشد ...
یکی که دزدانه نگاهش کنی
دزدانه راه رفتنش را بپایی
و دزدانه ببوسی اش و محکم بغلش کنی
و در حضورش طعمِ تلخیِ قهوه ات را نفهمی
باید یکی باشد ...
که وقتی دلت برای مداد رنگی های کودکی ات تنگ شد ، به ناخن هایش خیره شوی و سوار بر رنگین کمانی به کودکی ات سفر کنی
باید یکی باشد ...
یکی که حصارِ تنهایی ات را بر هم زند و به تو بگوید که دوستَت دارم
آدم است دیگر
و آدمی به همین دوستَت دارم هاست که زنده است
بهار آرزو:
جمعه 8 مرداد 1395 10:33 ق.ظ
آره خب فتوشاپ برنامس و پیش زمینه هایی که واسه ساخت یه کاره رو واست آماده کرده اما کدنویسی یه چیزیه که از اول تا آخرشو باید خودت بنویسی...!!
امیدوارم اون رو هم زود یاد بگیری...!!
بهار آرزو : مرسی احد
جمعه 8 مرداد 1395 10:32 ق.ظ
خواهش میکنم این چه حرفیه...!!!
آره خیلی خوبه که آدم توی هر کاری توانایی داشته باشه...!!
البته واسه طراحی باید زیاد وقت بزاری و کارای زیادی رو انجام بدی تا بالاخره حرفه ای بشی...!!
کلا واسه اینکه هر چیزی رو یاد بگیری باید زیاد کار کنی..!!
مثلا خود من که اون اوایل چندین وب رو ساختم و پاک کردم...!!
تو هم کارت خیلی خوبه...!!
همین که انیمیشن سازی در فتوشاپ رو یادگرفتی خودش کلیه چون واقعا کاره سختیه و باید چندیدن بار انجام داد...!!
بهار آرزو:
جمعه 8 مرداد 1395 10:29 ق.ظ
سلام محمد جان...!!
خوبی...؟؟؟
آموزش کامل و مفیدی بود ممنون از مطلب خوبت...!!
بهار آرزو: من خوبم ...


مرسی
پنجشنبه 7 مرداد 1395 06:17 ب.ظ
سلوووم میسی سرزدی لاستی چنل تلگرامم جوین بدی خوشحال میچم:-) ...
royaeiye@
بهار آرزو : سلام . . .


ممنون که هستین


خیلی وقته که عضو هستم، فقط حیف که مدتیه تلگرام آن نیستم
پنجشنبه 7 مرداد 1395 01:20 ق.ظ
سلاااام
من عالیم
جدیدا دارم رو خوابم کار میکنم زودتر بخوابم شبا
هر چی از صفحات مجازی دورتر باشی بهتره
کتابایی که گفتی رو میخونم مرسی
اره کتاب نخوندن بده
سعی کن بیشتر کتاب بخونی
بهار آرزو :
چهارشنبه 6 مرداد 1395 04:21 ب.ظ
ب چ چیزایی فک میکنی هاااااا خنده داره واقعا خخخخخخ
بهار آرزو :
چهارشنبه 6 مرداد 1395 06:08 ق.ظ
سلام و احترام////

همگان به جست‌ و جوی خانه می‌ گردند
من کوچه‌ ی خلوتی را می‌ خواهم
بی‌ انتها برای رفتن
بی‌ واژه برای سرودن
و آسمانی برای پرواز کردن
عاشقانه اوج گرفتن
رها شدن

بهار آرزو:
دوشنبه 4 مرداد 1395 06:48 ب.ظ
خودمم منتظر کشورهای دیگم خخخخخخخ
چشم میذارم ب زودی ....
بهار آرزو: چشمتون بی بلا
دوشنبه 4 مرداد 1395 04:38 ب.ظ
برمیگردم میخونم.
بهار آرزو: حضور تون باعث دلگرمیه . . .


مرسی
دوشنبه 4 مرداد 1395 02:41 ب.ظ
سلام
واقعا ممنوننننننننننننننن
خداکنه دیگه بدون هیچ مشکلی انجامش بدم
بااااااااای
بهار آرزوسلام . . .


خواهش میکنم . . .


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


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