شروع آموزش :

۱- اول باید آدرس فایل css مان را پیدا کنیم تا بتوانیم آدرس عکس بالای وبلاگمان را در آن تغییر دهیم

دکمه های crtl + f را بزنید کادری در پایین صفحه سمت چپ ظاهر می شود در داخل کادر کلمه CSS را وارد کنید حالا می بینید در صفحه NOTEPAD همه کدهای CSS را پیدا میکند و با رنگ سبز نشان می دهد ولی ما فقط آدرس CSS را می خواهیم مانند عکس زیر آدرس CSS را کپی کنید .



خوب حالا آدرس را کپی و در مرورگرتان وارد کنید و اینتر را بزنید  که آدرس فایل CSS در عکس بالا و همان قالب مان http://template.pichak.net/pichak/71/style.css است .

حالا کدهای فایل CSS مان ظاهر میشود در صفحه مرورگر ، این کدها را کپی و در صفحه جدیدی از notepad وارد کنید .

حالا باید در این کدها دنبال آدرس عکس بالای وبلاگ بگردیم ( همان header.jpg ).



در کادر بالا قسمتی که با رنگ قرمز مشخص شده آدرس عکس بالای وبلاگ است اما این آدرس چرا این جوری ؟ و چه جوری بفهمیم این آدرس واقعی عکس بالای وبلاگ است .

توضیح : آدرس نسبی و آدرس مطلق چیست ؟

دوستان آدرس بالا نسبی است یعنی خلاصه شده و در css معمولا از آدرس نصبی استفاده می کنند .

نمونه :

آدرس نسبی : header.jpg 

آدرس مطلق : http://template.pichak.net/pichak/71/header.jpg

چگونه آدرس نسبی را به مطلق تبدیل کنیم ؟

آدرس css مان چی بود ؟؟

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

این آدرس مطلق است که اگر style.css از آخرش حذف کنیم و header.jpg
 به آن اضافه کنیم آدرس مطلق عکس بالای وبلاگمان ساخته میشه .

http://template.pichak.net/pichak/71/header.jpg

حالا همین آدرس را در مرورگرتان وارد کنید می بنید که حرفمان درست بود و این همان عکس بالای وبلاگ است .

الان شما باید آدرس مورد نظرتان را در کدهای css جایگزین کنید .

 

دوستان الان عکس هدر شما تغییر کرد اما باید تمام آدرس های نصبی عکس های وبلاگتان را در کدهای css به آدرس مطلق تبدیل کنید والا عکس های دیگر لود نمی شود

مانند زیر

body{margin:0;font-family: Tahoma;background:#464646 } .Pichak{width:100%;float:right;direction:rtl;} #main-back{float:right;width:100%;background:#000000} a{TEXT-DECORATION: none;color:#000000} a:hover{color:#000000} #header{background:#000000 url(http://template.pichak.net/pichak/71/header.jpg) no-repeat top right;height:385;width:100%;color:#838383;font-size:8pt;text-align:right} #header a{color:#c7c7c7;margin:0 12;text-shadow: #777777 -1px 0px 4px;font-weight:bold;} #header a:hover{color:#005f64} .Sid{padding:0 15 0 0;} .main{padding:0 0 0 0;} .top-BlogTitle{width:100%;height:100} .top-menu{width:100%;height:220;} .top-menu2{padding:0 500;} .BlogTitle{color:#c7c7c7;text-align:center;font-size:19pt;font-weight:bold;padding:0 250 0 0;font-family:Times New Roman;} .Description{direction:rtl;font-size:9pt;color:#c7c7c7;text-align:center;padding:10 250 0 0;} .post{float:right;direction:rtl;text-align:right;width:540;overflow:hidden} .TopPost{width:530;height:80;background:url(‘http://template.pichak.net/pichak/71/post1.gif‘) no-repeat top right;font-size:8pt;} .TopPost a{color:#181818} .TopPost2{padding:25 83 4 10;} .CenterPost{padding:10 15 5 15;background:url(‘http://template.pichak.net/pichak/71/post2.gif‘) repeat-y right;margin:0 0} .LowPost{width:530;height:80;background:url(‘http://template.pichak.net/pichak/71/post3.gif‘) no-repeat top right;font-size:8pt;} .date{text-align:right;color:#777777;float:right;width:435} .date div{padding:25 35 0 0;} .Comment{padding:40 410 0 0;text-align:right;font-size:8pt;width:100%;} .Comment a{color:#292929} .Comment a:hover{color:#005f64} .Post-title{padding-bottom:19;font-weight:bold} .t-date{font-size:8pt;color:#3c3c3c;width:520;height:19;padding-right:80} .C-post{font-size:8pt;color:#333333;width:530;overflow:hidden} .C-post a{color:#005f64} #Sidebar{float:right;direction:rtl;text-align:right;width:220;overflow:hidden} .TopSid{width:210;height:69;background:url(‘http://template.pichak.net/pichak/71/sid1.gif‘) no-repeat top right;font-size:8pt;color:#181818;font-weight:bold;} .TopSid2{padding:26 22 0 0;text-align:right} .CenterSid{width:210;font-size:8pt;color:#444444;background:url(‘http://template.pichak.net/pichak/71/sid2.gif‘) repeat-y top right;padding:2 0} .CenterSid a{color:#444444;} .CenterSid a:hover{color:#005f64} .li-Sid{padding:1 20 5 5;background:url(‘http://template.pichak.net/pichak/71/li.png‘) 194px 5px no-repeat;} .About{padding:0 15 0 15;color:#555555;line-height:120%} .LowSid{width:210;height:28;background:url(‘http://template.pichak.net/pichak/71/sid3.gif‘) no-repeat top right;} .footer{width:1000;float:right;background: url(‘http://template.pichak.net/pichak/71/footer.gif‘) no-repeat top right;height:150;direction:rtl;} .footer a{color:#7a7a7a} .footer a:hover{color:#005f64} .Fo1{font-size:8pt;text-align:center;padding:73 20 7 20;color:#7a7a7a} .Fo2{padding:8 0 0 140;color:#929da3;font-size:8pt;text-align:left} .Fo2 a{color:#7a7a7a} .Fo2 a:hover{color:#005f64}

الان باید css جدید خود را ذخیره کنید و در جایی آپلود کنید و آدرس جدید css را در قالب وبلاگتان وارد کنید

یادتان نرفته که آدرس css قبلی تون چی بود آدرس جدیدتان را در محل همان آدرس css قبلی وارد کنید

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

توضیحات اضافه برای مبتدیان :

پسوند png ، jpg ، gif و… مربوط به فایل های عکس است


۱-اگر جایی برای آپلود فایل CSS نداشتید به من خبر دهید براتون در سایتم آپلود می کنم و لینک مستقیم اش را در اختیارتان قرار می دهم .

 ۲- آدرس های جدید فایل های CSS و عکس ها باید مستقیم باشد .

۳- سایت آپلود رایگان در اینترنت زیاد است و کافی است یک سرچ در گوگل بزنید.