تغییر عکس سربرگ یا هدر وبلاگ | بلاگ

تغییر عکس سربرگ یا هدر وبلاگ

ساخت وبلاگ

امکانات وب

تغییر عکس سربرگ یا هدر وبلاگ

برای تغییر تصویر سربرگ قالب وبلاگ خود

ابتدا کد قالب وبلاگ مورد نظر را در بخش ویرایش قالب وبلاگ خود قرار دهید

دکمه ی کنترل را از روی کیبورد پایین نگه داشته و دکمه ی F را فشار دهید (Ctrl+F)

اکنون در بخش باز شده عبارت زیر را وارد نمایید

</head>

با استفاده از این روش ، شما در کد قالب عبارت فوق را جستوجو و پیدا کردید

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

<style>#Header-IS{background:url('HHHHHHHH') no-repeat};</style>

پس از درج کد فوق در جای مشخص شده ، بجای عبارت HHHHHHHH آدرس تصویر سربرگ مورد نظر را وارد نمایید

دقت کنید در هنگامی که آدرس تصویر جدید را وارد میکنید علامت های ' که در طرفین آدرس وجود دارد حذف نشود

چنانچه تصویر مورد نظر درون رایانه شما قرار دارد ابتدا باید آن تصویر را در فضایی آپلود کنید

 

سپس روی دکمه ی Browse کلیک کرده و تصویر مورد نظر خود را از روی کامپیوترتان پیدا و انتخاب کنید

گزینه ی شروع آپلود را زده و منتظر شوید تا تصویر شما آپلود شود

سپس آدرس لینک مستقیم تصویر را کپی کرده و بجای عبارت HHHHHHHH در کد فوق قرار دهید

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

می بایست بر روی تصویر هدر قالب مورد نظر خود راست کلیک کنید و گزینه ی Save background as را انتخاب کنید

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

 

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

 

اول حالت اولو یاد میدم:

 

1) عکس مستقیما در وبلاگ آمده    :

شما اول باید تشخیص بدید که کدوم یک از این دو حالت رو داره قالبتون.در متن قالب با زدن دکمه Ctrl+F5 صفحه سرچ رو باز کنید و عبارت jpg. رو سرچ کنید.اگه چیزی پیدا کرد که اسمش توش header یا top یا چنین چیزی داشت خودشه.یا اصلا میتونید اگه هر چیزیو پیدا کرد آدرس اون رو در مرورگرتون باز کنید ببینید آیا همون عکس وبلاگ هست یا نه؟

فرض میکنیم که اینطور بود.خوب توی مرورگر وقتی بازش کردید عکسو(با استفاده از آدرسی که پیدا کردید) سیوش کنید تو کامپیوتر و ببینید چه سایزیه.برای این کار روش راست کلیک کنید و Properties رو بزنید و در قسمت Details در زیر مجموعه Image جلوی Width و Height دو عدد نوشته اونا رو یادداشت کنید.حالا شما باید اول از همه عکسی که میخواید جایگزین کنیدو به همین سایز در بیارید(با استفاده از PhotoShop یا اصلا Paint) برای اینکارو توی Paint بازش کنید و Resize رو بزنید و برید قسمت Pixels و اون تیکو وردارید و اون دو عدد رو وارد کنید و سیو کنید عکس رو.حالا کافیه عکس رو آپلود کنید و جای آدرس عکس قبلی(که قبلا پیداش کردیم) توی قالبتون بذارید و قالب رو هم در وبلاگ بذارید.

حالا این قسمتو با یک مثال تموم میکنم:

قالب شمیم که پیش فرض بلاگفا هستش این حالتو داره.اگه بلاگفا نیستید ولی میخواید مثال رو ببینید براتون آپ کردم فایل حاوی کدش رو:

قالب شمیم

فایل دانلود شده رو باز کنید.اون اشاره گر موس رو ببرید بالای بالا و یه بار کلیک کنید(مثل وقتی که میخواید بالای متن چیزی بنویسید) حالا Ctrl+F5 رو بزنید و سرچ کنید jpg. .همون طور که میبینید یکی پیدا کرد!

این کلمه در خط زیر بود:

.logo {background: #CCC url('http://www.blogfa.com/layouts/Shamim/bg_header.jpg') no-repeat;font-size: 12px;height: 100px}

همون طور که میبینید یک آدرس در اینجا قرار داره!

http://www.blogfa.com/layouts/Shamim/bg_header.jpg

این آدرسو در مرورگرتون کپی کنید.همون طور که می بینید همون عکس هدر هست.عکسو سیو کنید و سایزشو همون طور که گفتم چک کنید.سایزش 800 در 100 هستش.عکس خودتونم با Paint به این سایز در بیارید.حالا آپلودش کنید.برای آپلود من سایت زیر رو پیشنهاد میکنم:

axgig

آپلودش که کردید آدرس عکس جدید رو دقیقا جای آدرس هدر قبلی یعنی http://www.blogfa.com/layouts/Shamim/bg_header.jpg بذارید.

و حالا قالب جدید که دارای آدرس عکس جدیده رو کدشو کپی کنید و توی قسمت ویرایش قالب(در بلاگفا) یا درج قالب(در میهن بلاگ) بذارید.

وبلاگ رو الآن باز کنید.میبینید که با موفقیت قالب عوض شد!

2) عکس در فایل css. آمده   :

این یکی صورت که اکثر وبلاگا هم اینطورن سخت تره.

برای اینکار اول روش اولو چک کنید.اگه عکس بصورت jpg. قرار نداشت این صورت هستش وبلاگ.توی کد وبلاگ عبارت css. رو چک کنید.یک فایل پیدا میکنه.آدرسش رو به طور کامل در مرورگرتون کپی کنید.یک فایل متنی رو مشاهده میکنید.کلشو(با کلید Ctrl+A) بگیرید و کپی کنید در نوت پد و با نام style.css سیوش کنید.حالا این فایلو باز کنید و توش همون jpg. رو سرچ کنید.کلی پیدا میکنه.یکیشون توش اسم top یا header یا چنین چیزیو داره.البته ممکنه این عکس به صورت آدرس کامل نباشه یعنی فقط نوشته باشه top.jpg و بقیه آدرس توش نباشه:

اگه بقیه آدرس توش بود و به صورت برای مثال http://asdasdas.com/adasd/adasd/addas.jpg بود (حالا این مثاله یعنی با http شروع میشد و با jpg تموم میشد) کافیه عکستونو(با هر سایزی که هست!) آپلود کنید و جای این بذارید و سیوش کنید.(ادامه کار رو میگم جلوتر)

فعلا حالت دوم رو بگم که آدرس به طور کامل نباشه و فقط برای مثال adsd.jpg باشه.

در اینجا هستش که شما باید نگاه کنی به آدرس فایل css. که قبلا پیدا کرده بودی.برای مثال اگه آدرس اون فایل اینطوری بود:

example.com/style.css

شما باید قبل top.jpg یا header.jpg یا کلا هدری که پیدا کردید یه http://example.com بذارید.

نکته بسیار مهم:اگه این حالتو داشت قالب بگردید و هر فایلی که در فایل css هستش رو این عبارتو اولش بذارید.هر فایلی با هر فرمتی و گرنه هدر عوض میشه ولی بقیه قالب(مثل عکس پس زمینه عنوان پستو و مطالبو منو ها و ...) از بین میره.

وقتی کاملا فایل css رو اصلاح کردید(اگه حالت اول بود که فقط یه آپلود عدر و جایگزینی توی فایل css بیشتر نداره) شما این فایل css. رو آپلوود کنید توی سایتی که لینک مستقیم میده مثل:

Persiangig

حالا آدرس این فایل css رو جای فایل css قبلی بذارید توی قالب و کل قالبو کپی کرده و توی وبلاگتون بذارید!و تمام!

یه مثال هم برای این یکی بگم:

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

Mihanskin

توش css. رو سرچ کنید.آدرس زیر رو بهتون میده:

https://template.pichak.net/pichak/02/style.css

این آدرسو باز کنید و در یک فایل دوت پد بریزید و با نام style.css ذخیره کنید.توش jpg. رو سرچ کنید.اولین چیزی که میده خطه زیره(که البته کامل خطو اینجا کپی نکردم):

.top{width:1003;background:url('top.jpg')

خوب اول عکستون رو آپلود کنید و آدرس کاملش رو جای top.jpg بذارید.

الآن خوب به بقیه فایل css نگاه کنید.به غیر از فایل top.jpg فایلای دیگه ای هم هستن که اسم کاملشون قرار نگرفته.من این فایل ها رو در عکس زیر مشخص کردم:(برای بزرگتر دیدنش روش کلیک کنید)

همون طور که میبینید همشون به طور ناقصه آدرسشون و فقط نوشتن asdad.jpg یا adad.gif یا هر چیز دیگه ای.

خوب شما الآن به فایل آدرس اون فایله css. یه نگاه دیگه بندازید:

https://template.pichak.net/pichak/02/style.css

قبل از style.css نوشته زیر اومده دیگه:

https://template.pichak.net/pichak/02/

خوب شما کافیه قبل همه اون فایلا عبارت بالا رو بیارید.مثلا p1.jpg میشه:

https://template.pichak.net/pichak/02/p1.jpg

و به همین ترتیب.وقتی کامل همه فایلا رو آدرسشونو کامل کردید این فایل css رو آپلود کنید و جای فایل css. قبلی بذارید توی کد اصلی قالب و این کد قالب رو بذارید تو وبلاگتون.

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

برچسب : نویسنده : مدير نيلوبلاگ بازدید : 3662 تاريخ : چهارشنبه 26 آذر 1393 ساعت: 4:10