آموزش ساخت قالب وبلاگ و تغییر ظاهر وبلاگ و هدر

خب مرحله اول...

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

من لینک چند تا سایت ارائه دهنده قالب رو براتون میذارم:

blogskin.ir

sibtheme.com

avazak.ir

pichak.net

مرحله بعد اینه که وارد نرم افزار دریم ویور بشید و از منو html رو انتخاب کنید و تمام نوشته هایی که در قسمت code به صورت پیش فرض نوشته رو پاک کنید و کد قالبی که از سایت قالب گرفتید رو اونجا paste کنید...

بقیه اش در ادامه مطلب...

من برای نمونه این قالب رو از سایت سیب تم گرفتم...

و کد اونرو به این صورت در دریم ویور وارد کردم:

(برای دیدن عکس ها در اندازه واقعی روی هر یک کلیک کنید)

...

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

<link href="http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

این عبارت مربوط به استایل شیت قالب نمونه ایه که من انتخاب کردم ...برای شما هم مشابه همینه...

برای من از بالا شانزدهمین خط بود...

خب توی این خطی که ما کشفش کردیم یه فایل وجود داره...نه؟

<link href="http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

این فایل رو دانلودش کنید با دانلود منیجر

و اون رو با همین برنامه دریم ویور بازش کنید...این فایل شامل کدهاییه که ظاهر گرافیکی وبلاگتون رو تشکیل میده...

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

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

body{margin:0;font-family: Tahoma;background:#efe5c0} .Back-RM{width:1000;background:#ffffff} A {TEXT-DECORATION: none; } #Header-RM{width:1000;background:url('m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;} #Header-RM a{color:#1c4063;margin:0 6} #Header-RM a:hover{color:#fcf5f9;} #BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;} #BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}  .TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;} .TopPost{width:540;height:68;background:url('post1.gif') no-repeat top right;direction:rtl;text-align:right; font-size:8pt;} .TopPost a{color:#38383c} .TopPost2{padding:29 75 0 20;} .CenterPost{width:540;background:url('post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden} .CenterPost2{padding:10 15 10 15} .LowPost3{width:540;background:url('post3.gif') no-repeat top right;height:68;text-align:right} .CPost3{padding:35 30 0 0} .CenterPost a{color:#755f16} .date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;} .date a{color:#2b3d20;} .date a:hover{color:#fff;} .Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;} .Comment a{color:#2b3d20;} .Comment a:hover{color:#755f16;} .Comment{padding:0 0 0 10} #rightmenu{width:210;float:left;} #leftmenu{width:210;float:right;} .TopSid{width:210;background:url('sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;} .TopSid2{padding:24 58 0 0;text-align:right} .CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('sid2.gif') repeat-y right;} .CenterSid a{color:#444444;} .CenterSid a:hover{color:#755f16}  .li-Sid{padding:2 25 0 5;background:url(li.gif) 190px 6px  no-repeat} .li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold} .li-Sid2{padding:0 10 5 10;} .LowSid{width:210;background:url('sid3.gif') no-repeat top right;height:27;float:right} #Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;} #Page-RM a{color:#4ecdea;font-size:9pt;} #footer-RM{text-align:center;background:url('footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50} #footer-RM a{color:#2e313f} #footer-RM a:hover{color:#755f16} #footer-RM{padding:16 20 5 10;}

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

body{margin:0;font-family: Tahoma;background:#efe5c0} .Back-RM{width:1000;background:#ffffff} A {TEXT-DECORATION: none; } #Header-RM{width:1000;background:url('m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;} #Header-RM a{color:#1c4063;margin:0 6} #Header-RM a:hover{color:#fcf5f9;} #BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;} #BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}  .TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;} .TopPost{width:540;height:68;background:url('post1.gif') no-repeat top right;direction:rtl;text-align:right; font-size:8pt;} .TopPost a{color:#38383c} .TopPost2{padding:29 75 0 20;} .CenterPost{width:540;background:url('post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden} .CenterPost2{padding:10 15 10 15} .LowPost3{width:540;background:url('post3.gif') no-repeat top right;height:68;text-align:right} .CPost3{padding:35 30 0 0} .CenterPost a{color:#755f16} .date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;} .date a{color:#2b3d20;} .date a:hover{color:#fff;} .Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;} .Comment a{color:#2b3d20;} .Comment a:hover{color:#755f16;} .Comment{padding:0 0 0 10} #rightmenu{width:210;float:left;} #leftmenu{width:210;float:right;} .TopSid{width:210;background:url('sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;} .TopSid2{padding:24 58 0 0;text-align:right} .CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('sid2.gif') repeat-y right;} .CenterSid a{color:#444444;} .CenterSid a:hover{color:#755f16}  .li-Sid{padding:2 25 0 5;background:url(li.gif) 190px 6px  no-repeat} .li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold} .li-Sid2{padding:0 10 5 10;} .LowSid{width:210;background:url('sid3.gif') no-repeat top right;height:27;float:right} #Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;} #Page-RM a{color:#4ecdea;font-size:9pt;} #footer-RM{text-align:center;background:url('footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50} #footer-RM a{color:#2e313f} #footer-RM a:hover{color:#755f16} #footer-RM{padding:16 20 5 10;}

خب نصف راهو اومدیم حالا باید این آدرس های ناقص رو کامل کنیم...

به این صورت:

اون فایل اولیه یادتونه؟...

<link href="http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

با اضافاتش که کاری نداریم...پس اون ها رواک میکنیم...

http://www.sibtheme.com/theme/99/m.css

حالا این قسمتی که آبی میکنم رو بذارید قبل اون آدرس های ناقصی که گفته بودم...http://www.sibtheme.com/theme/99/m.css

من اینکارو کردم اینم نتیجه اش:

body{margin:0;font-family: Tahoma;background:#efe5c0} .Back-RM{width:1000;background:#ffffff} A {TEXT-DECORATION: none; } #Header-RM{width:1000;background:url('http://www.sibtheme.com/theme/99/m.jpg') no-repeat top;height:350;vertical-align:top;direction:rtl;} #Header-RM a{color:#1c4063;margin:0 6} #Header-RM a:hover{color:#fcf5f9;} #BlogTitle{color:#38383c;text-align:right;font-size:20pt;font-weight: bold;padding:60 30 0 0;font-family:Times New Roman;} #BlogDescription{padding:0 30 0 0;direction:rtl;font-size:10pt;color:#38383c;text-align:right;}  .TopMenu{color:#daebf2;font-size:10pt;padding:144 70 0 0;text-align:right;} .TopPost{width:540;height:68;background:url('http://www.sibtheme.com/theme/99/post1.gif') no-repeat top right;direction:rtl;text-align:right; font-size:8pt;} .TopPost a{color:#38383c} .TopPost2{padding:29 75 0 20;} .CenterPost{width:540;background:url('http://www.sibtheme.com/theme/99/post2.gif') repeat-y right;direction:rtl;text-align:right;color:#333333;font-size:8pt;;overflow:hidden} .CenterPost2{padding:10 15 10 15} .LowPost3{width:540;background:url('http://www.sibtheme.com/theme/99/post3.gif') no-repeat top right;height:68;text-align:right} .CPost3{padding:35 30 0 0} .CenterPost a{color:#755f16} .date{width:350px;float:right;direction:rtl;font-size:8pt;color:#243d3c;} .date a{color:#2b3d20;} .date a:hover{color:#fff;} .Comment{width:120px;float:left;direction:rtl;font-size:8pt;color:#2b3d20;text-align:center;} .Comment a{color:#2b3d20;} .Comment a:hover{color:#755f16;} .Comment{padding:0 0 0 10} #rightmenu{width:210;float:left;} #leftmenu{width:210;float:right;} .TopSid{width:210;background:url('http://www.sibtheme.com/theme/99/sid1.gif') no-repeat top right;height:50;direction:rtl;color:#38383c;font-size:8pt;} .TopSid2{padding:24 58 0 0;text-align:right} .CenterSid{width:210;float:left;direction:rtl;color:#444444;font-size:8pt;background:url('http://www.sibtheme.com/theme/99/sid2.gif') repeat-y right;} .CenterSid a{color:#444444;} .CenterSid a:hover{color:#755f16}  .li-Sid{padding:2 25 0 5;background:url(http://www.sibtheme.com/theme/99/li.gif) 190px 6px  no-repeat} .li-Sid2 span{color:#1192b0;font-size:8pt;font-weight:bold} .li-Sid2{padding:0 10 5 10;} .LowSid{width:210;background:url('http://www.sibtheme.com/theme/99/sid3.gif') no-repeat top right;height:27;float:right} #Page-RM{width:100%;float:right;text-align:center;font-size:8pt;color:#dddddd;direction:rtl;} #Page-RM a{color:#4ecdea;font-size:9pt;} #footer-RM{text-align:center;background:url('http://www.sibtheme.com/theme/99/footer.gif') repeat-x top;font-size:8pt;color:#2e313f;direction:rtl;height:50} #footer-RM a{color:#2e313f} #footer-RM a:hover{color:#755f16} #footer-RM{padding:16 20 5 10;}

خب شما هم اینکارو بکنید و دقت کنید که تمامیه آدرس های ناقص رو پیدا کرده و تکمیلشون کنید...حالا آدرس های تکمیل شده رو با دانلود منیجر دانلود کنید...

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

همین سایت picofile.com به نظرم گزینه ی خوبیه...

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

picofile.com برای آپلود فایل css مناسب نیست چون ما لینک مستقیم لازم داریم...
به این سایت برین و فایل رو آپلود کنید:

http://irimg.net

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

اصلی:

<link href="http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">

جایگزین شده:

<link href="http://irimg.net/images/e27b77g9hy1z62lfyi2.css" type="text/css" rel="stylesheet">

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

ما رو هم دعا کنید...
موفق باشید.   MojtabaMax

یادتون نره به مکث آرتیکل(ز) سر بزنید: