پارک انیمه
[AMV] چگونه برای وب خود قالب بسازیم ؟ - نسخه‌ی قابل چاپ

+- پارک انیمه (https://animpark.icu)
+-- انجمن: مباحث مفید (/forum-59.html)
+--- انجمن: فناوری اطلاعات (/forum-40.html)
+---- انجمن: اینترنت و شبکه (/forum-74.html)
+---- موضوع: [AMV] چگونه برای وب خود قالب بسازیم ؟ (/thread-17954.html)



چگونه برای وب خود قالب بسازیم ؟ - bita_r - 2015/03/21 05:58 PM

مطالب مخصوص انیمه، مانگا، کارتون و کمیک مخصوص پارک انیمهاین مطلب برای دوستانی هست که علاقه دارند برای وب خود قالب طراحی کنند
یکی از راه های ساخت قالب استفاده از سايت هایی مانند pichak.net است که در ان جا میتوان به صورت انلاین قالب طراحی کرد.
راه ديگر برای ساخت قالب :بعضی از قالب ها هستند که وقتی کد ان ها به شما داده میشود کد یک عکس در ان نوشته شده است شما میتوانید با اپلود یک عکس و کوپی کردن کد ان و گذاشتن ان به جای ان کد عکس پس زمینه یه قالب یا هر عکسی که در قالب هست را عوض کنید.


RE: چگونه برای وب خود قالب بسازیم ؟ - bita_r - 2015/03/22 11:01 AM

يكي ديگر از راه هاي ساخت قالب براي وب استفاده از نرم إفزار هايي است كه برأي وب قالب طراحي ميكنند اما مطمئن باشيد كه هيچ كدام از اين نرم إفزار ها نميتوانند برأي شما قالبي طراحي كنند بسياري از سايت ها هستند كه شما ميتوانيد در ان جا قالب طراحي كنيد ولي نه به صورت رايگان بلكه بأيد برأي ساخت ان مبلغي پرداخت كنيد من به شما پيشنهاد ميكنم از سايت فارسي avazak.ir اين كار را انجام بديد زيرا سايت معتبري است قبل از پرداخت مبلغ برأي ساخت قالب اول اطلاعاتي از ان سايت بدست أوريد دوم اينكه مطمئن باشيد سايتي كه به ان مبلغي پرداخت ميكنيد معتبر بأشد سومن اگر ديديد مبلغ زيادي بأيد بابت ساخت يك قالب پرداخت كنيد ان را قبول نكنيد زيرا ممكن است ان سايت مبلغ زيادي از شما بگيرد و قالبي بدون امكانات به شما بدهد و اين به سود شما نيست.


RE: چگونه برای وب خود قالب بسازیم ؟ - diablo - 2015/03/22 04:02 PM

ای بابا شرط می بندم از این هیچ کس هیچی نفهمه تصویر: richedit/smileys/yahoo_Big/24.gif چنتا اموزش درست حسابی دارم پیدا کردم میارمتصویر: richedit/smileys/yahoo_Big/3.gif


RE: چگونه برای وب خود قالب بسازیم ؟ - diablo - 2015/03/22 04:27 PM

این اموزش از یه وبلاگ کپی کردم حرف خودم تو ایناس { }
آموزش ساخت قالب وبلاگنیازی به مقدمه چینی و یادگیری جزئیات نیست...مطمئن باشید آخر این آموزش همتون میتونید قالب شخصی داشته باشید...پس با من پیش بیایید...
در ابتدا باید کمی فتوشاپ بلد باشید...هرچی حرفه ای تر باشد قالبتون خوشگل تر میشه...نرم افزار Macromedia Dreamweaver 8.0.1 و یا ورژن های بالاترش هم لازمه. {من با نرم افزار notepad کارم را افتاد فرقی نداره تصویر: richedit/smileys/yahoo_Big/3.gif}

مرحله اول...
 ابتدا باید یک قالب مناسب رو از سایت هایی که قالب وبلاگ ارائه میدند انتخاب کنیم...(هر کس باید متناسب سرویس دهنده خودش قالب مربوطه رو انتخاب کنه،مثلا اونی که بلاگ اسکاییه باید از بین قالب هایی که مخصوص بلاگ اسکای هستش ،قالبی رو انتخاب کنه)مثلا از این سایت ها می تونید تهیه کنید مرحله بعد اینه که وارد نرم افزار دریم ویور بشید و از منو 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 مناسب نیست چون ما لینک مستقیم لازم داریم...
به این سایت برین و فایل رو آپلود کنید:
 
www.pichak.net/blogcod/up/js
حالا لینک به دست اومده رو جایگزین اون آدرس فایلی که در کد قالب وبلاگ بود،بکنید...
مانند نمونه :

اصلی:
http://www.sibtheme.com/theme/99/m.css" type="text/css" rel="stylesheet">
جایگزین شده:
http://irimg.net/images/e27b77g9hy1z62lfyi2.css" type="text/css" rel="stylesheet">

حالا کد قالب جدیدتون رو در وبلاگتون پیاده کنید...
آموزش ساخت قالب وبلاگ به همین راحتی به همین خوش مزه گی...تصویر: richedit/smileys/yahoo_Big/5.gif

{ البته اگه یه ذره تو اون فایل css فوضولی کنید می تونید اندازه قالب رنگ و چیزای دیگرم تغییر بدیدتصویر: richedit/smileys/yahoo_Big/14.gif جوریی که خود سازنده اصلی قالب نفهمه این قالب خودشه}




RE: چگونه برای وب خود قالب بسازیم ؟ - Princess Kimia - 2015/04/19 10:21 PM

کاری نداره من خودم میسازم
این سایتا همش چرته


RE: چگونه برای وب خود قالب بسازیم ؟ - Shinoa - 2016/02/25 02:35 PM

(2015/04/19 10:21 PM)'Princess Kimia' نوشته شده توسط:  کاری نداره من خودم میسازم
این سایتا همش چرته

 
خب چجوری؟
این راهکارام خوب بودن اما شما چجوری درست می کنی؟