temlog

temlog

آموزش طراحی قالب برای تبیان

You can scroll the shelf using and keys

موزیک وبلاگ : معرفی وبلاگ

دوستان من دیگه رفتم خدمت سربازی شاید نتونم دیگه جواب نظراتتون را بدهم لطفا" واسم دعا کنید ممنونم خیلی دوستتون دارم

آموزش تغيير سي اس اس هاي وبلاگ


(1) نظرات شما

به نام خدا

سلام خدمت همه تبلاگنويسان عزيز

امروز هم با يكي از اموزش ها در خدمت شما هستم

سعي كنيد اين آموزش را بادقت بخوانيد

براي ديدن آموزش بر روي لينك ادامه مطلب كليك كنيد


فرض کنید ما یک وبلاگ در تبلاگ ساختیم و می خواهیم یک قالب برای اون درست کنیم

بهتره که از قالب هایی که از قبل ساخته شدند استفاده کنید مثلا سایت زیر بیش از 500 قالب در سلیقه های مختلف دارد

http://www.creattor.com

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

فقط باید در این سایت عضو بشوید

برای عضویت روی  Sign up در بالا کلیک کنید

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

  • Wordpress Themes
  • Joomla Templates
  • Website Templates

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

مثلا"

اگر این عکس را نمی بینید احتمالا" سایت مشکل دارد یا شایدم فیلتر شده

البته تا الان که من این آموزش را می نویسم بدون مشکل است

به نظر نمی آید این سایت در آینده مشکلی پیدا کند

اگر قالب رو پیدا نکردید روی لینک زیر کلیک کنید

http://www.creattor.com/website-templates/floral-beige-2473

روی دکمه Live demo کلیک کنید تا نمونه قالب رو ببینید

روی صفحه قالب راست کلیک کنید و گزینه veiw page source را بزنید

select all را بزنید و کدها را کپی copy کنید

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

وارد سایت زیر بشوید

http://htmledit.squarefree.com

و کدها را کپی کنید

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

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

<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />

این کد چون آدرس فایل سی اس اس درست وارد نشده عمل نمی کند آدرس های اینترنتی با http شروع می شوند

برای این که آدرس درست را بدست بیاورید و جایگزین کنید

باید این نکته را دقت کنید:

همیشه طراحان وب فایلهایشان را به صورت یک مجموعه و زیر مجموعه در اینترنت اپلود می کنن

مثلا" شما در کامپیوترتان چند درایو دارید درایو عکس ها درایو آهنگ ها

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

مثلا" فایل عکس ها در پوشه image

اهنگ ها در پوشه music

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

برای اینکه ادرس سی اس اس بالا را بیابید چون آدرس سرور نشان داده نشده باید ادرس سرور یا همون سایت را اولش وارد کنید ممکنه در بعضی جاها یافتنش به همین اسونی نباشه

<link href="http://www.templatemo.com/templates/templatemo_295_floral_beige/css/templatemo_style.css" rel="stylesheet" type="text/css" />

دیدید ما ادرس قالب رو به اول سی اس اس اضافه کردیم حالا قالب نمایش داده می شود

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

چون درون فایل سی اس اس نیز عکسهای دارای لینک های زیر مجموعه ای هستند و باید آدرس عکس ها رو هم نیز پیدا کنید و جایگزین آدرس قبلی کنید

برای باز کردن فایل سی اس اس مثلا مثال بالا آدرس سی اس اس رو در یک آدرس بار جدید کپی کنید

http://www.templatemo.com/templates/templatemo_295_floral_beige/css/templatemo_style.css

همانطور که می بینید فایل سی اس اس تمام متن هایش نمایش داده می شود

حالا برای تغییر در سی اس اس متن ها را باید بین دو تگ

<style>متن سی اس اس</style>

کپی کنید  وحتما" باید قبل از تگ </head> بسته کپی شده باشند برای اینکه موضوع را بفهمید من یک مثال ساده می زنم

فرض کنید من کدهای زیر را دارم

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

برای تغییر اول باید آدرس اصلی سی اس اس را که در اینترنت ذخیره شده را پیدا کنیم

مثلا" آدرس اصلی بوده 

http://tebyan/css/style.css

خوب این ادرس را در نوار آدرس مرورگرتان وارد کنید و اینتر را بزنید یکسری متن نمایش داده می شه

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

<style>متن سی اس اس</style>

قرار می دهید و جایگزین این متن

<link href="css/style.css" rel="stylesheet" type="text/css" />

می کنیم

مثال بالا می شه مثل شکل زیر

<html>
<head>
<style>

محل قرار گیری متن های سی اس اس

</style>
</head>
<body>
</body>
</html>

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

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

<script language=''javascript'' type=''text/javascript'' src=''http://mzb.ir/Statistics.js''></script>

فایل بالا که با فرمت js است مربوط می شه به برنامه نویسی جاوا اسکریپت این قسمت خیلی مفصله تو گوگل سرچ کنید کتاب های زیادی درباره اون هست در کل بدونید برنامه نویسی برای پویایی وبلاگتون هست

مثلا شما یک وبلاگ فروشگاه اینترنتی دارید با استفاده از برنامه نویسی می توانید کدی بنویسید که کاربر وقتی روی دکمه ای کلید کرد وارد پرداخت های بانک بشود

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

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

برای اینکار مثل سی اس اس باید آدرس فایل جی اس را در نوار ادرس کپی کنید و بعد یکسری متن نمایش داده می شود و باید انها را انتخاب و بین دو تگ

<script>محل قرار گیری متن های جی اس</script>

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

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

اینم لینک پرده خوش امدگویی ببینم شما می تونید تغییرش بدید

http://susawebtools.ir/?p=42


ممنونم یا علی

 


X