آموزش ساخت قالب وبلاگنیازی به مقدمه چینی و یادگیری جزئیات نیست...مطمئن باشید آخر این آموزش همتون میتونید قالب شخصی داشته باشید...پس با من پیش بیایید...
در ابتدا باید کمی فتوشاپ بلد باشید...هرچی حرفه ای تر باشد قالبتون خوشگل تر میشه...نرم افزار Macromedia Dreamweaver 8.0.1 و یا ورژن های بالاترش هم لازمه. {من با نرم افزار notepad کارم را افتاد فرقی نداره
}
مرحله اول...
ابتدا باید یک قالب مناسب رو از سایت هایی که قالب وبلاگ ارائه میدند انتخاب کنیم...(هر کس باید متناسب سرویس دهنده خودش قالب مربوطه رو انتخاب کنه،مثلا اونی که بلاگ اسکاییه باید از بین قالب هایی که مخصوص بلاگ اسکای هستش ،قالبی رو انتخاب کنه)مثلا از این سایت ها می تونید تهیه کنید
مرحله بعد اینه که وارد نرم افزار دریم ویور بشید و از منو html رو انتخاب کنید و تمام نوشته هایی که در قسمت code به صورت پیش فرض نوشته رو پاک کنید و کد قالبی که از سایت قالب گرفتید رو اونجا paste کنید...
من برای نمونه این قالب رو از سایت سیب تم گرفتم...
مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه
و کد اونرو به این صورت در دریم ویور وارد کردم:
مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه
خب حالا از سطر اول کد دنبال عبارت زیر یا مشابه اون یگردید...
این عبارت مربوط به استایل شیت قالب نمونه ایه که من انتخاب کردم ...برای شما هم مشابه همینه...
برای من از بالا شانزدهمین خط بود...
مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمه
خب توی این خطی که ما کشفش کردیم یه فایل وجود داره...نه؟
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 این آدرس ها ناقصه...در کد زیر این آدرس ها رو مشخص کردم...
[td]
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;}
[/td]
خب نصف راهو اومدیم حالا باید این آدرس های ناقص رو کامل کنیم...
به این صورت:
اون فایل اولیه یادتونه؟...
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
من اینکارو کردم اینم نتیجه اش:
[td]|
[td] 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;}
[/td]
[/td]
خب شما هم اینکارو بکنید و دقت کنید که تمامیه آدرس های ناقص رو پیدا کرده و تکمیلشون کنید...حالا آدرس های تکمیل شده رو با دانلود منیجر دانلود کنید...
اینهایی که دانلود کردید همون عکسهایی هستند که قالبتون رو تشکیل دادند...
خب حالا باید از استعداد فتوشاپی خودتون استفاده کنید و روی این عکسها کارکنید...و دوباره اونهارو در یک سرور آپلود، آپلود کنید...دقت کنید اسامی فایل ها رو به هیچ وجه من الوجوه تغییر ندید...
همین سایت
picofile.com به نظرم گزینه ی خوبیه...
خب حالا آدرس عکس هایی که آپلود کردید رو جایگزین اون آدرس های قبلی که تکمیلشون کرده بودیم، کنید و فایل css ویرایش شده رو ذخیره کرده و اون رو در یک سرور آپلود کنید...
picofile.com برای آپلود فایل css مناسب نیست چون ما لینک مستقیم لازم داریم...
به این سایت برین و فایل رو آپلود کنید:
حالا لینک به دست اومده رو جایگزین اون آدرس فایلی که در کد قالب وبلاگ بود،بکنید...
مانند نمونه :
اصلی:
http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">
جایگزین شده:
http://irimg.net/images/e27b77g9hy1z62lfyi2.css" type="text/css" rel="stylesheet">
حالا کد قالب جدیدتون رو در وبلاگتون پیاده کنید...
آموزش ساخت قالب وبلاگ به همین راحتی به همین خوش مزه گی...
{ البته اگه یه ذره تو اون فایل css فوضولی کنید می تونید اندازه قالب رنگ و چیزای دیگرم تغییر بدید
جوریی که خود سازنده اصلی قالب نفهمه این قالب خودشه}