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

اموزش به زبانی ساده و اسان ؛حتی با موبایل اندرویدی هم میتونید انجامش دهید!

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

اولا باید گفت که تغییر در هدر بسیار ساده هست و نیاز به هیچ نرم افزار خاصی ندارد:

اصولا برای اینکار از دو روش استفاده میکنند یکیhtmlودیگری cssهست که هم استاندارد بوده وهم مدرن تر هست --

---

اموزش به زبانی ساده و اسان ؛حتی با موبایل اندرویدی هم میتونید انجامش دهید!

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

اولا باید گفت که تغییر در هدر بسیار ساده هست و نیاز به هیچ نرم افزار خاصی ندارد:

اصولا برای اینکار از دو روش استفاده میکنند یکیhtmlودیگری cssهست که هم استاندارد بوده وهم مدرن تر هست --- پس ما هم از این روش استفاده میکنیم

واما cssچیست وچه کاربردی دارد؟cssیک زبان برنامه نویسی است که در قالب وبلاگ کاربردهایی مثل تغییر در هدر _تغییر در رنگ نوشته ها و بک گراند کلی وب- تغییر در فونت وبلاگ وبسیاری دیگر از کاربرد های cssاست.

حالا میریریم سر اصل مطلب یعنی تغییر هدر...

ابتدا قالب زیر را در نظر بگیریرید

">

- <-BlogDescription-> - <-BlogTitle->">

,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs">

" href="<-BlogXmlLink->" />

ابتدا یه برنامه نوت پد باز میکنید؛ تو قالبتون عبارت"=link href>راجستو جو میکنید وسپس عباراتی که بعد از اون امده را پیدا میکنید مثل عبارت زیر

https://template.pichak.net/pichak/170/style.css"

سپس روی ان کلیک میکنید(برای پیدا کردن css ) و وارد اینترنت میشید و جملاتی شبیه زیر را مشاهده میکنید

body{margin:0;font-family: Tahoma;background:#000000 }

.Pichak{width:100%;float:right;direction:rtl;}

#main-back{float:right;width:100%;background:#0000000}

a{TEXT-DECORATION: none;color:#99FFFF}

a:hover{color:#99FFFF}

#header{background:#000000 url( Header2.jpg ) no-repeat top right;height:365;width:105%;color:#33FF33;font-size:8pt;text-align:right}

#header a{color:#33FF33;margin:0 9;text-shadow: #33FF33 -1px 0px 4px;font-weight:bold;}

#header a:hover{color:#700816}

.Sid{padding:0 15 0 0;}

.main{padding:0 0 0 0;}

.top-BlogTitle{width:100%;height:40}

.top-menu{width:100%;height:300;}

.top-menu2{padding:0 50;}

.BlogTitle{color:#00FFFF;text-align:center;font-size:27pt;font-weight:bold;padding:0 350 0 0;font-family:Times New Roman;}

.Description{color:#151516;text-align:center;direction:rtl;font-size:9pt;padding:10 350 0 0;}

.post{float:right;direction:rtl;text-align:right;width:540;overflow:hidden}

.TopPost{width:540;height:80;background:url('post1.png') no-repeat top right;font-size:9pt;}

.TopPost a{color:#0000CC}

.TopPost2{padding:24 70 4 10;}

.CenterPost{padding:10 15 5 15;background:url(' post2.png') repeat-y right;margin:0 0}

.LowPost{width:540;height:80;background:url('post3.png') no-repeat top right;font-size:9pt;}

.date{text-align:right;color:#777777;float:right;width:435}

.date div{padding:25 35 0 0;}

.Comment{padding:43 45 0 0;text-align:right;font-size:8pt;width:100%;color:#9900FF}

.Comment a{color:#9900FF}

.Comment a:hover{color:#700816}

.Post-title{padding-bottom:19;font-weight:bold}

.t-date{font-size:9pt;color:#FF66FF;width:530;height:19;padding-right:73}

.C-post{font-size:8pt;color:#333333;width:530;overflow:hidden}

.C-post a{color:#700816}

#Sidebar{float:right;direction:rtl;text-align:right;width:220;overflow:hidden}

.TopSid{width:210;height:69;background:url('sid1.png') no-repeat top right;font-size:8pt;color:#151516;font-weight:bold;}

.TopSid2{padding:31 40 0 0;text-align:right}

.CenterSid{width:210;font-size:8pt;color:#444444;background:url('sid2.png') repeat-y top right;padding:2 0}

.CenterSid a{color:#444444;}

.CenterSid a:hover{color:#700816}

.li-Sid{padding:1 20 5 5;background:url('li.png') 194px 5px no-repeat;}

.About{padding:0 15 0 15;color:#555555;line-height:120%}

.LowSid{width:210;height:22;background:url('sid3.png') no-repeat top right;}

.footer{width:1000;float:right;background: url('footer.gif') no-repeat top right;height:100;direction:rtl;}

.footer a{color:#151516}

.footer a:hover{color:#700816}

.Fo1{font-size:8pt;text-align:center;padding:45 20 7 20;color:#151516}

یعنی این همون ادرس مد نظر ماست یعنی ادرسcss.

توجه داشته باشید که حجم عکس باید با هدر اولیه وب که میخواهید با اون عوضش کنید ؛ برابر باشد

حدودا حجمش360×1000باشد.

برای یافتن حجم عکس اولیه باید اول به ادرسی که قبل از CSSاومده مراجعه کنید یعنی

https://template.pichak.net/pichak/170/

سپس چند حالت نظیر Header.jpg-footer.pngنظیر اینا رو میبینید که با کلیک روی انها عکس هدر اولی را خواهید دید و کافیست با یه نرم افزار فتوشاپ ادرس عکس خودتون رو به اندازه عکس اولیه در اورید

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

#header{bg url(upiha.com/uploads/myphoto.jpg)

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

https://template.pichak.net/pichak/170/

و قبل از

footer.jpg-li.jpg-sid.png

ونظایر اینها قرار میدهید [تمامی عباراتی که داخل عبارت()urlهستند]

دقیقا به صورتی که من در مثال زیر نوشتم

body{margin:0;font-family: Tahoma;background:#000000 }

.Pichak{width:100%;float:right;direction:rtl;}

#main-back{float:right;width:100%;background:#000000}

a{TEXT-DECORATION: none;color:#99FFFF}

a:hover{color:#99FFFF}

#header{background:#000000 url( upiha.com/uploads/myphoto.jpg ) no-repeat top right;height:365;width:105%;color:#33FF33;font-size:8pt;text-align:right}

#header a{color:#33FF33;margin:0 9;text-shadow: #33FF33 -1px 0px 4px;font-weight:bold;}

#header a:hover{color:#700816}

.Sid{padding:0 15 0 0;}

.main{padding:0 0 0 0;}

.top-BlogTitle{width:100%;height:40}

.top-menu{width:100%;height:300;}

.top-menu2{padding:0 50;}

.BlogTitle{color:#00FFFF;text-align:center;font-size:27pt;font-weight:bold;padding:0 350 0 0;font-family:Times New Roman;}

.Description{color:#151516;text-align:center;direction:rtl;font-size:9pt;padding:10 350 0 0;}

.post{float:right;direction:rtl;text-align:right;width:540;overflow:hidden}

.TopPost{width:540;height:80;background:url(' https://template.pichak.net/pichak/170/ post1.png') no-repeat top right;font-size:9pt;}

.TopPost a{color:#0000CC}

.TopPost2{padding:24 70 4 10;}

.CenterPost{padding:10 15 5 15;background:url(' https://template.pichak.net/pichak/170/ post2.png') repeat-y right;margin:0 0}

.LowPost{width:540;height:80;background:url(' https://template.pichak.net/pichak/170/ post3.png') no-repeat top right;font-size:9pt;}

.date{text-align:right;color:#777777;float:right;width:435}

.date div{padding:25 35 0 0;}

.Comment{padding:43 45 0 0;text-align:right;font-size:8pt;width:100%;color:#9900FF}

.Comment a{color:#9900FF}

.Comment a:hover{color:#700816}

.Post-title{padding-bottom:19;font-weight:bold}

.t-date{font-size:9pt;color:#FF66FF;width:530;height:19;padding-right:73}

.C-post{font-size:8pt;color:#333333;width:530;overflow:hidden}

.C-post a{color:#700816}

#Sidebar{float:right;direction:rtl;text-align:right;width:220;overflow:hidden}

.TopSid{width:210;height:69;background:url(' https://template.pichak.net/pichak/170/ sid1.png') no-repeat top right;font-size:8pt;color:#151516;font-weight:bold;}

.TopSid2{padding:31 40 0 0;text-align:right}

.CenterSid{width:210;font-size:8pt;color:#444444;background:url(' https://template.pichak.net/pichak/170/ sid2.png') repeat-y top right;padding:2 0}

.CenterSid a{color:#444444;}

.CenterSid a:hover{color:#700816}

.li-Sid{padding:1 20 5 5;background:url(' https://template.pichak.net/pichak/170/ li.png') 194px 5px no-repeat;}

.About{padding:0 15 0 15;color:#555555;line-height:120%}

.LowSid{width:210;height:22;background:url(' https://template.pichak.net/pichak/170/ sid3.png') no-repeat top right;}

.footer{width:1000;float:right;background: url(' https://template.pichak.net/pichak/170/ footer.gif') no-repeat top right;height:100;direction:rtl;}

.footer a{color:#151516}

.footer a:hover{color:#700816}

.Fo1{font-size:8pt;text-align:center;padding:45 20 7 20;color:#151516}

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

Persiangig.ir/uploads/110/myfile.css

به جای ادرس اولی یعنی:

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

قرار میدهید..

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

مشکلات احتمالی:

1:امکان دارد بعضی از اپلود سنتر ها در وبلاگهایی مثل بلاگفا رد شوند و پیدا کردن یه اپلود سنتر براتون کار سختی باشد -پیشنهاد من به شما اپلود سنترrodfileکه سریع و ایمن و راحت است واز جانب بلاگفا هم رد نمیشودwww.rodfile.ir

2: سعی کنید فرمتشو مستقیما تو نوتپد cssقرار ندهید و از حالتtxtبهcssتغییر دهید یعنی فایلی که فرمتش txtهست با نرم افزاری نظیر افیس یا wordبه cssتغییر فرمت دهید.

3:حتی الامکان تو قرار دادن کاراکترها دقت کنید چون قرار ندادن درست و بجای علامت ها باعث بهم ریختگی وبلاگتون میشه!

راجستو جو میکنید وسپس عباراتی که بعد از اون امده را پیدا میکنید مثل عبارت زیر