چگونه می توانیم تصویر هدر وبلاگ خود را تغییر دهیم ؟

آموزش تغییر هدر قالب و اختصاصی کردن قالب
دسته بازدید: 2500 دسته: طراحی سایت

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

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

امروزه هدر سایتها اکثرا از عکسهایی استفاده می شود که این عکسها به دو صورت در کد HTML قالب فراخوانی می شوند :

۱- به صورت کد نمایشی عکس HTML در تگ همان table : در این روش عکس هدر را توسط کدی شبیه به کد زیر در قالب و در قسمتهایه اول قالب فراخوانی می کنند ( در TABLE هدر )

در این کد width=”1005″ به معنی این است که طول این عکس ۱۰۰۵ پیکسل است و height=”344″ به این معنی است که عرض آن ۳۴۴ پیکسل است .

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

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

2- فراخوانی از طریق فایل CSS ( جانبی / داخلی ) : اکثرا در قالبها از این روش استفاده می شود ، به دلیل اینکه سرعت بیشتری نسبت به روش قبل دارد و امروزه می توان گفت بیش از ۹۵% طراحی ها از این طریق انجام میشود . در این روش کار یکم سخت تر می شود ، برای شروع شما باید ابتدا فایل CSS را که در قالب فراخوانی شده است پیدا کنید . برای اینکار بین دو تگ و به دنبال کدی شبیه کد زیر بگردید :

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

ممکن است که در قالب بیش از یک فایل CSS باشد که در این صورت ابتدا به دنبال فایلی بنام style بگردید و اگر پیدا نکردید بقیه فایلهای CSS را باز کنید و دنبال تگ هدر بگردید .

بعد از پیدا کردن فایل CSS ، لینک آنرا در مرورگر خود باز کنید . یک صفحه کد برای شما نمایش داده می شود ، آنرا SAVE کنید و در کامپیوتر خود با ویرایشگر مناسبی باز کنید ( مثلا notepad ) ، حال یکسری کد دارید که به توضیح آنها می پردازیم .

در اینجا نیز با توجه به طرحهای مختلف ممکن است مختلف باشد اما در کل شما برای تغییر هدر کافیست به دنبال کدی شبیه زیر بگردید :

.header {
background: url(‘images/header.jpg’) transparent no-repeat scroll center top;
height: 344px;
width: 1005px;
position: relative;
font-size: 18px;
}

در بیشتر قالبها به اسم header ، header Image ، …. می باشد . شما از اسم آن می توانید آنرا در بیشتر قالبها شناسایی کنید . ممکن است کدهای درون آن نیز کمی بیشتر یا کمتر باشد یا تفاوتی دیگر داشته باشد اما در کل یک لینک عکس دارد با آندازه طولی و عرضی آن . حال مانند قبل عمل می کنیم و عکسی را که طراحی کردیم با سایز هدر اصلی قالب را آپلود می کنیم و در کد بالا در قسمت images/header.jpg قرار می دهیم و SAVE می کنیم . حال باید فایل CSS خود را آپلود کنیم و جایگزین فایل زیر درون قالب خود کنیم :

فایل جدید را جایگزین style.css می کنیم و قالب خود را save می کنیم . هدر جدید ما آماده است و می توانیم از آن استفاده کنیم .

نکاتی که باید دقت شود :

۱- حتما سایز عکسی که طراحی می کنیم با سایز هدر اصلی قالب مطابقت داشته باشد وگرنه ممکن است قالب به هم ریخته شود .

۲- ممکن است در فایل CSS ب جای header. از مقادیری دیگری استفاده شود . ( اما در کل اسمی از header نیز در آن به کار می رود ، البته بستگی به طراح دارد )

۳- ممکن است فایل CSS بخش header. دارای تعداد بشتری دستور باشد که شما فقط لیمک عکس را تغییر می دهید و به دیگر کدها دست نمی زنید .

۴- در اکثر قالبهای امروزی به خصوص قالبهای ارایه شده رایگان از روش دوم (فراخوانی از طریق فایل CSS ) استفاد می شود .

۵- برای آپلود نیز می توانید از سایتهای فضای رایگان استفاده کنید .

۶- به قسمتهای مختلف آموزش دقت کنید و مو به مو انجام دهید تا موفق باشید .

تغییر عکس بالای قالب های سه ستونه پیچک در فایل های css

دوستان شاید خیلی از شما دوست داشته باشید تصاویر بالای وبلاگ خود را عوض کنید عوض کردن عکس بالای سایت در خیلی از قالب های وبلاگ راحت باشه ولی وقتی آدرس عکس هدر در فایل های css خارجی قرار می گیرد عوض کردن آن بسیار دردسر داره مخصوصا اگر مثل من دقیقا به کدنویسی html5 و css3 آشنا نباشید بسیار سخت است دوستان من در خیلی از سایت ها گشتم و به نتیجه ی خاصی نرسیدم

بلکه فکر کردم تنها راهم اینه که از دیدن resource kode سایت های اینترنت استفاده کنم و خودم در نهایت تونستم با تلاش فراوان عکس بالای وبم را عوض کنم

دوستان شاید خیلی از شماها دنبال آن باشید من روش اختراعی خودمو براتون مینویسم ولی نظر دادن یادتون نره

روش ابداعی در ادامه مطلب

1-دوستان اول برید و در سایت پرشین گیگ ثبت نام کنید

نکات ضروری

a- فایل های css و عکساتون را در سایت www.persiangig.com حتما آپلود کنید

b-برای دانلود حتما از برنامه اینترنت دانلود منجر یا همان IDM استفاده کنید زیرا در قسمت بالای نرم افزار هنگام دانلود لینک مستقیم فایل مشخص است

c- منظور از آدرس مطلق و نسبی این است

مثال

url('top2.gif

نمونه ای از آدرس نسبی است

url:(http://www.pichak.net)

نمونه ای از آدرس مطلق است

2- برنامه top style را برای ویرایش فایل های css است دانلود کنید

3- بروی وب سایت خود کلیک راست کنید و گرینه view source را زده و می بینید کدهای سایت شما ظاهر میشود

4-حالا دکمه ctrl +f کامپیوتر خود را فشار داده و عبارت css را تایپ کنید حالا آدرس css را که مثلا " http://template.phichak.net/pichak/07/style.css " است

example :

مثال

http://template.pichak.net/pichak/07/style.css

را کپی ودر یک صفحه ی مرورگر ترجیحا internet explorer باز کنید و اینتر را بزنید می بینید فایل css سایت شما را دانلود می شود

5-حالا با بزنامه top style فایل css را باز کنید

6-حالا دوباره ctrl+f را بزنید و بنویسید url می بینید چندین آدرس نسبی عکس مثل "url(01.jpg)

در فایل css میبینید

فایل ضمیمه
.menu{float:right;direction:rtl;text-align:right;width:216;overflow:hidden}
.tmenu{width:209;padding:17 70 25 0;background:url('m-1.jpg') no-repeat top right;font-size:10pt;color:#fff;font-weight:bold;}
.xmenu{width:209;font-size:9pt;color:#444444;background:url('m2.gif') repeat-y top right;padding:10 0}
.xmenu a{color:#444444;}
.xmenu a:hover{color:#1185a6}
.xmenu1{padding:0 35 5 15;background:url('dot.gif') 180px 2px no-repeat;}
.xmenu2{padding:0 15 0 15;color:#555555;line-height:120%}
.bmenu{width:209;height:30;background:url('m3.jpg') no-repeat top right;}

.b2{background:url('m-2.jpg') no-repeat top right}
.b3{background:url('m-3.jpg') no-repeat top right}
.b4{background:url('m-4.jpg') no-repeat top right}
.b5{background:url('m-5.jpg') no-repeat top right}
.b6{background:url('m-6.jpg') no-repeat top right}
.b7{background:url('m-7.jpg') no-repeat top right}
.b8{background:url('m-8.jpg') no-repeat top right}
.b9{background:url('m-9.jpg') no-repeat top right}

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

خوب سوال ؟؟؟؟؟؟ کدوم یک از آدرس ها ی نسبی آدرس عکس بالای وبلاگ است؟؟؟!!!!!

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

مثال: آدرس قبلی که در مرور گر وارد کردیم برای دانلود css این باشد

http://template.phichak.net/pichak/07/style.css -

برای اینکه بدونید 01.jpg

کدوم عکسه آدرس آنرا اینجوری در آدرس صفحه مرورگر بنویسید

http://template.phichak.net/pichak/07/01.jpg

7- اینتر را که زدید عکس ظاهر میشه

8-اما چه جوری آدرس عکسو عوض کنیم ما که تنها آدرس نسبی عکسارو داریم

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

غیر از هدر وبلاگ بقیه آدرس ها رو طبق مثال وارد کنید

مثال

bmenu{width:209;height:30;background:url('m3.jpg') no-repeat top right;}

این قسمت ها تغییراتشان شبیه مثال زیر میشه

مثال : 01.jpg تبدیل به http://template.phichak.net/pichak/07/01.jpg میشه

9- اما آدرس اصلی عکس بلای وبلاگ را این طوری عوض کنید اول عکس مورد نظر خودتون را در سایت www.persiangig.com آپلود کنید سپس این سایت لینک مستقیم دانلود به شما میده

آنرا جایگزین آدرس نسبی هدر وبلاگ کنید

10-فایل css را ذخیره و آپلود کنید و آدرس لینک مستقیم آنرا در قالب وبتون جایگرین آدرس css قبلی کنید حالا تغییرات را ثبت کنید میبینید وبلاگ شما تغییر کرد

مثال :آدرس قبلی

http://template.pichak.net/template/07/style.css

مثلا میشه:

http://pouridownload.persiangig.com/weblog/style.css

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

در ضمن برنامه ویرایش css را براتون آپلود کردم

نویسنده محمد پوراحمدی

or emam reza

فایل ضمیمه

top style (590.3 کیلو بایت, 108 نمایش)

عزیزان برای توضیحات کامل تر به وب سایت من به آدرس

http://www.nokiadownload.ir/?p=6175 مراجعه کنید

این آموزشم به پایان رسید امیدوارم مفید واقع بشه .

کیوان ا K1

چگونه می توانیم تصویر هدر وبلاگ خود را تغییر دهیم ؟

مطالب مشابه :

ساخت هدر فلش به صورت آنلاین

ساخت هدر فلش به صورت آنلاین

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

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

طراحی بنر انلاین و رایگان

ساخت بنر و هدر های فلش توسط Anim-FX 3.3

طراحی آنلاین لوگو

آموزش گذاشتن تصویر ( اسلاید متحرک ) در بالای قالب وبلاگ

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

چگونه می توانیم تصویر هدر وبلاگ خود را تغییر دهیم ؟