تبلیغات

نسل باران

|

بانک شماره و موبایل popup window

قالب های حرفه ای وردپرس

|

پلاگین وردپرس popup window

وب سایت دانشجویان کارشناسی و ارشد کامپیوتر خرم آباد - آموزش قدم به قدم تغییر عکس بالای قالب وبلاگ هایی که از css استفاده می کنند .
نسل باران
وب سایت دانشجویان کارشناسی و ارشد کامپیوتر خرم آباد
امام علی (ع) می فرمایند: « زکات العلم نشرهُ» زکات علم نشر آن است.
به سایت ما خوش آمدید

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

 
شروع کار و توضیحات اولیه :
 
css چیست و چه کاری انجام میدهد ؟ تقریبا امروزه ۹۰% سایت ها و وبلاگ ها از این تکنولوژی کدنویسی صفحات وب بهره می برند . css یک سبک آبشاری کدنویسی در کنترل خصیصه های قسمت های مختلف قالب و خود سایت است و یک فایل بسیار مفید برای صرفه جویی در کدنویسی است . css خصوصیات قسمت های مختلف سایت مانند رنگ ها ، فونت ها ، کادر ها ، اندازه ها و بیساری از قسمت های سایت را از بیرون سایت کنترل می کند و به بیانی ساده تر یک کنترل کننده بیرونی است و اگر ما css داشته باشیم دیگر لازم نیست کدهای تکراری بنویسم .
 
****توجه و تاکید این آموزش را از اول و به دقت بخوانید .****
 
شروع آموزش :
 
اول برای شروع کار عوض کردن عکس بالای قالب وبلاگ ما از یک قالب زیبا که از سایت پیچک گرفته ایم و یک قالب سه ستون است استفاده می کنیم .
 
قالب را شما هم از لینک زیر دانلود کنید .
خوب دوستان این قالب را با برنامه notpad کامپیوترتان باز کنید دوستانی که از قالب خودشان می خواهند برای آموزش استفاده کنند وارد بخش مدیریت وبلاگشان شوند و از قسمت ویرایش قالب ها کدهای قالبشان را در یک صفحه خالی notepad پیست کنند .
 
۱- اول باید آدرس فایل css مان را پیدا کنیم تا بتوانیم آدرس عکس بالای وبلاگمان را در آن تغییر دهیم
 
دکمه های crtl + f را بزنید کادری در پایین صفحه سمت چپ ظاهر می شود در داخل کادر کلمه CSS را وارد کنید حالا می بینید در صفحه NOTEPAD همه کدهای CSS را پیدا میکند و با رنگ سبز نشان می دهد ولی ما فقط آدرس CSS را می خواهیم مانند عکس زیر آدرس CSS را کپی کنید .
 
 
خوب حالا آدرس را کپی و در مرورگرتان وارد کنید و اینتر را بزنید  که آدرس فایل CSS در عکس بالا و همان قالب مان http://template.pichak.net/pichak/71/style.css است .
 
حالا کدهای فایل CSS مان ظاهر میشود در صفحه مرورگر ، این کدها را کپی و در صفحه جدیدی از notepad وارد کنید .
 
حالا باید در این کدها دنبال آدرس عکس بالای وبلاگ بگردیم ( همان header.jpg ).
 
 
 
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(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;}
 
 
در کادر بالا قسمتی که با رنگ قرمز مشخص شده آدرس عکس بالای وبلاگ است اما این آدرس چرا این جوری ؟ و چه جوری بفهمیم این آدرس واقعی عکس بالای وبلاگ است .
 
توضیح : آدرس نسبی و آدرس مطلق چیست ؟
 
دوستان آدرس بالا نسبی است یعنی خلاصه شده و در 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 جایگزین کنید .
 
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://www.nokiadownload.ir/ax/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;}
 
 
دوستان الان عکس هدر شما تغییر کرد اما باید تمام آدرس های نصبی عکس های وبلاگتان را در کدهای 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 قبلی وارد کنید
<html>
<head>
<title><BlogSky:Weblog PageTitle /></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”author” content=”<BlogSky:Post AuthorName />”>
<meta name=”language” content=”Farsi”>
<meta name=”description” content=”<BlogSky:Weblog PageTitle /> – <BlogSky:Weblog Description /> – <BlogSky:Weblog Title />”>
<meta name=”keywords” content=”<BlogSky:Weblog PageTitle />,<BlogSky:Weblog URL />, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs”>
<link rel=”alternate” type=”application/rss+xml” title=”<BlogSky:Weblog Title />” href=”<BlogSky:Weblog RSSHRef />” />
<link href=”http://nokiadownload.ir/style.css” type=”text/css” rel=”stylesheet”>
</head>
 
 
الان تغییرات را قالب وبلاگتان را سیو کنید تبریک میگم شما موفق شدید در صورت داشتن مشکل در هر قسمتی از توضیح در بخش نظرات اعلام کنید کمکتان می کنم
 
توضیحات اضافه برای مبتدیان :
 
پسوند png ، jpg ، gif و… مربوط به فایل های عکس است
 
توجه:
 
۱-اگر جایی برای آپلود فایل CSS نداشتید به من خبر دهید براتون در سایتم آپلود می کنم و لینک مستقیم اش را در اختیارتان قرار می دهم .
 
 ۲- آدرس های جدید فایل های CSS و عکس ها باید مستقیم باشد .
 
۳- سایت آپلود رایگان در اینترنت زیاد است و کافی است یک سرچ در گوگل بزنید.
 




نوع مطلب : آموزشی، 
برچسب ها :
لینک های مرتبط :

1396/02/1 00:37
Hi there to every one, since I am genuinely keen of reading this website's post to be updated
daily. It includes fastidious data.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



درباره وبلاگ


امام صادق(ع) می فرمایند: «اِنُّ لِکلِّ شیءٍ زکاةً و زکاةُ العِلمِ اَنْ یُعَلِّمَهُ اَهلَهُ» برای هر چیزی زکاتی است،و زکات علم آن است که آن را به اشخاص شایسته بیاموزید. (منبع: تحف.ص 364)

امام علی (ع) می فرمایند: « زکات العلم نشرهُ» زکات علم نشر آن است.

مدیر وبلاگ : s1390
مطالب اخیر
نویسندگان
صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
فرم تماس
نام و نام خانوادگی
آدرس ایمیل
امکانات دیگر
دریافت كد ختم صلوات
کلیه حقوق این وبلاگ برای وب سایت دانشجویان کارشناسی و ارشد کامپیوتر خرم آباد محفوظ است