قالب شماره ۴۵ و ۴۶ و ۴۷ سایت بلاگ اسکین با موضوع تجاری ،تفریحی ،دانلود در سه رنگ طراحی شده است که با سبک جدید در طراحی، قابلیت های زیادی از جمله فرم تماس ، نمایشگر تاریخ ، نمایشگر تعداد بازدید هر مطلب ، ایجاد بلوک های جانبی جهت درج کدهای کاربری و تبلیغات را دارا می باشد.

برای اطلاع از نحوه ویرایش قالب و فعال کردن و نمایش بهتر امکانات مورد نیاز خود، به نکات ارائه شده دقت نمایید.

- فرم تماس :
برای اینکه پیغام کاربران از سایت از طریق فرم تماس طراحی شده در قالب برای شما ارسال شود ، کافیست در کد قالب عبارت

را پیدا کنید و به جای آدری ایمیل پیش فرض ، آدرس ایمیل خود را بطور صحیح قرار دهید.
فرم های تماس ارسال شده به ایمیل شما فرستاده خواهند شد ، در برخی موارد ممکن است ایمیل های ارسالی در پوشه SPAM قرار گیرد.

- بلوک اضافی در بالای مطالب :
با توجه به استفاده بسیاری از کاربران از بلوک اضافی در بالای مطالب وبلاگ جهت درج تبلیغات ، لینک باکس و یا متن دلخواه ، در قالب بطور پیش فرض بلوکی قرار گرفته است که کافی است کد زیر را در قالب یافته و به جای عبارت text متن یا کد دلخواه را قرار دهید.(بصورت پیش فرض به جای عبارت text ، لینک آموزش این مطلب قرار دارد. ابتدا لینک را حذف و مطابق کد ارائه شده ، متن دلخواه را جایگزین کنید)
برای ایجاد چندین بلوک مطابق بلوک پیش فرض در ستون وسط قالب،کافیست از این کد کپی گرفته و در محل صحیح قرار دهید.

جهت حذف این بلوک از بالای مطالب تنها کافیست تمام کد بالا را از قالب حذف کنید.

- بلوک اضافی در ستون راست و چپ :
برای درج کدهای جانبی، این امکان فراهم شده کاربران بتوانند در ستون های کناری قالب، بلوک اضافی ساخته و یا براحتی حذف و ویرایش کنند. در قالب بطور پیش فرض بلوکی در سمت چپ قالب قرار گرفته است که کافی است کد زیر را در قالب یافته و به جای عبارت blogskin متن یا کد دلخواه را (معمولا تبلیغات و کدهای جانبی مثل آمارگیر، ساعت ، تقویم و غیره قرار می گیرد) جایگزین کنید.
برای ایجاد چندین بلوک مطابق بلوک پیش فرض در ستون راست و یا چپ قالب،کافیست از این کد کپی گرفته و در محل صحیح قرار دهید.

جهت حذف این بلوک از ستون راست یا چپ تنها کافیست تمام کد بالا را از قالب حذف کنید.

- جابجاگر حرکتی صفحه :
در قالب ۴۶ و ۴۷ سایت چنانچه در پایین قالب روی دکمه علامت بالا ↑ و چند لینک در منوی مشکی بالای قالب کلیک کنید ، صفحه بطور متحرک توسط افکت جابجاگر صفحه به سمت بالا حرکت می کند.
این قابلیت اگرچه حجم کلی قالب رو کمی بالا می برد ، اما کاربر پسند خواهد بود.
برای سبک تر شدن قالب می توانید فایل اسکریپت مربوط به این جابجاگر را حذف نمایید. کافیست کد زیر را در چند سطر ابتدای قالب یافته و پاک کنید.
کاربرای که از قالب ۴۵ استفاده می کنند می توانند این کد را به قالب خود نیز اضافه کنند.

با توجه به سبک جدید طراحی بخش پیوندها در قالب ۴۵ و ۴۶ و ۴۷، امکان نمایش بیش از ۱۴ لینک در قسمت پایین قالب نمی باشد و کاربران جهت درج تعداد نامحدود لینک می توانند از قسمت پیوندهای روزانه که در ستون چپ قالب قرار گرفته استفاده کنند ( کاربران پرشین بلاگ ممکن است در این قسمت با محدودیت مواجه شوند)

آموزش های مرتبط :
- تغیر تصویر هدر بالای قالب
- درج لینک و متن دلخواه در بلوک ها : آموزش کدنویسی ۱       آموزش کدنویسی ۲

سایت بلاگ اسکین اخیرا قالب جدیدی را با تکنولوژی جدید و با ایده ای نو طراحی و برای استفاده رایگان کاربران منتشر کرده است که با توجه به استفاده بسیاری از کاربران ازین قالب توضیح مواردی لازم می باشد :

قالب ۴۳ بلاگ اسکین با سیستم نوین در کدنویسی برای منوهای پیوندها، موضوعات ، مطالب اخیر و آرشیو مطالب از برنامه نویسی جاوا اسکریپت استفاده کرده که ممکن است با برخی از کدهای جانبی که کاربران به قالب اضافه می کنند سازگار نباشد. این عدم ناسازگاری با برخی از کد ها ، به علت محدودیت در کدنویسی سیستم های وبلاگ بوده و بلاگ اسکین تنها از قالب ارائه شده پشتیبانی می کند و مسئولیت سازگاری با هر کد متفرقه یا نامعتبر را قبول نخواهد کرد.
مشکلاتی که به علت استفاده بیش از حد کاربران از کدهای جاوا اسکریپت در قالب و یا درج کد خبرنامه وبگذر و … ممکن است قسمت منوهای قالب را دچار مشکل کند به عهده ما نخواهد بود.
استفاده از قالب ۴۳ سایت برای وبلاگ هایی که کدهای متفرقه جاوا و نامعتبر در کد قالب خود قرار می دهند توصیه نمی شود !

با توجه به مطالبی که در قسمت قبل درباره کدنویسی گفتیم ، در اینجا به توضیح استفاده از چند کد دیگر شامل اضافه کردن لینک به تصاویر یا متن و چگونگی ایجاد بلوک های اصافی در قالب وبلاگ یا سایت می پردازیم.
چنانچه تمایل به ویرایش بهتر کد قالب در محیط حرفه ای تری دارید از برنامه های Microsoft FrontPage و یا Adobe Dreamweaver استفاده کنید چرا که اگر در محیط کدنویسی دچار مشکل یا خطا شوید به راحتی قابل رفع خواهد بود. این برنامه ها دارای ۲ محیط کدنویسی و گرافیکی می باشند که با اعمال تغیرات در محیط کدنویسی نتیجه کار در محیط گرافیکی و برعکس قابل مشاهده خواهد بود.

نحوه درج لینک بر روی یک متن :

<a href="http://www.blogskin.ir" target="_blank" >قالب رایگان وبلاگ</a>

در کد بالا مقدار عبارت href برابر با آدرس لینک مورد نظر قرار می گیرد که با کلیک روی آن به آدرس مورد نظر خواهید رفت . عبارت target="_blank" برای زمانی استفاده می شود که می خواهیم با کلیک روی لینک یک صفحه جدید باز شود و آدرس صفحه مورد نظر را نمایش دهد و در صورت عدم استفاده ازین عبارت با کلیک بر روی لینک در همان صفحه به آدرس لینک موردنظر خواهید رفت. در این کد ، تنها وجود قسمت href ضروری است و درج بقیه عبارات اختیاری است.
همانطور که می بینید پس از درج متن مورد نظر بین تگ لینک ، باید این تگ را ببندیم </a>
کد بالا بصورت روبرو در صفحه قابل نمایش است : قالب رایگان وبلاگ

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

<a href="http://www.blogskin.ir" target="_blank"> <font style="color:#000000;font-size:12pt"> قالب رایگان وبلاگ </font></a>

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

اکنون برای لینک دار کردن یک تصویر کافی است عبارت درج لینک را قبل از کد تصویر قرار دهیم :

<a href="http://www.blogskin.ir" target="_blank">
<img border="1" src="http://www.bloghelp.ir/wp-content/themes/ravoon/images/nz.jpg" width="62" height="71" alt="Blog Skin"></a>

که نتیجه کار در صفحه بدین صورت نمایش داده می شود :

این صفحه تا هفته آینده تکمیل خواهد شد. منتظر بمانید !

روی یک لینک کلیک می کنید . منتظرید تا صفحه وبلاگی باز شود . ۱۰ ثانیه ، ۲۰ ثانیه ، یک دقیقه ، دو دقیقه ….خلاصه بالاخره باز می شود ، اما در کمتر از زمانیکه صبر کردید باز شود آن را می بندید . چرا ؟ ببینیم چرا بعضی از وبلاگ ها یکبار مصرفند ؟

سرعت ، زیبایی ، خوانایی ، مطالب گیرا ، ارتباط ذهنی با خواننده و … همه و همه در خوب جلوه دادن وبلاگ شما دخیل هستند .

ایرادات معمول وبلاگ های فارسی بشرح زیرند :

۱- زیاد کردن تعداد پست (post) های هنگام بالا آمدن وبلاگ : بطور متوسط ۷ پست در صفحه مناسب هست و بیشتر از آن فقط حوصله بیننده را سر می برد .

۲- قرار دادن عکس به تعداد زیاد : این کار سرعت باز شدن وبلاگ را شدیدا کم می کند و بیینده را بسیار منتظر لود شدن کامل صفحه می گذارد!

۳- قرار دادن عکس با عرض بزرگتر از عرض قالب وبلاگ : اینکار باعث می شود نوار اسکرول افقی صفحات استفاده شود که قالب را از ظاهر انداخته و کاربران را خسته می کند . عرض تصویر بیش از ۴۰۰ پیکسل معمولا مشکل زا می شود .

۴- استفاده از بک گراند مشکی و بطور کلی تیره : باعث خسته شدن چشم بیننده می شود و اشتیاق او را به خواندن وبلاگ کم می کند .

۵- استفاده از فونت نوشته ها با سایز بزرگ و رنگارنگ : جلوه حرفه ایی وبلاگ را پایین می آورد و اصطلاحا کلاس سایت شما رو از بین می برد و سایت کودکانه و فانتزی به نظر می رسد.

۶- استفاده از عکس هایی که نمایش داده نمی شوند : بعضی از سایت هایی که فضای رایگان ارائه می دهند ، فایل ها را پس از مدتی میزبانی ، از روی سایت خود حذف می کنند. عدم نمایش تصاویر باعث زشت شدن ظاهر سایت می شود و جلوه مناسبی ندارد.

۷- لینک های باطله : لینک هایی که هنگام کلیک باز نمی شوند ناامید کننده هستند. در ضمن این لینک ها امتیاز شما را در pagerank گوگل پایین می آورند . بطور ماهانه از وجود لینک هایی که در مطالب و قسمت های مختلف سایتتان به درستی آدرس دهی می شوند و سایت مقصد را باز می کنند اطمینان حاصل کنید!

۸- چپ چین بودن متن : اگر قالب وبلاگ شما مخصوص وبلاگ های فارسی طراحی نشده باشد (مانند قالب های اصلی بلاگر) ، این ایراد رخ می دهد. پس از قالب هایی استفاده کنید که پشتیبانان فارسی خوبی داشته باشند!

۹- کد های جاوا اسکریپت : بعضی ازین کد ها واقعا خسته کننده است و وقت بیننده را تلف می کند . مثل کدی که از شما اسمتان را میخواهد تا بالای صفحه نمایش دهد یا باز شدن یک پنجره هنگام بستن وبلاگ و یا نمایش چندین پیغام پشت سرهم ….

۱۰- کپی برداری از وبلاگ ها و سایت ها : با اینکار بیننده اعتماد خود را نسبت به مطالب شما از دست می دهد.

علاوه بر رعایت نکات فوق ، چه چیزهایی وبلاگ شما را بهتر می سازد ؟

- معرفی و لینک دادن به سایت هایی که در زمینه وبلاگ شما مطلب دارند
- اهمیت دادن به نظرات خوانندگان درباره نوشته هایتان
- داشتن وبلاگی به روز . که حداقل هر ۳ روز یکبار به روز شود
- قرار دادن لینک آرشیو مقالات مهم خودتان در صفحه اول وبلاگ
- استفاده از قالب و رنگ های متناسب با مطالب وبلاگتان

از این به بعد قصد داریم طی چندین مطلب نکات اولیه و به مرور زمان نکات کلیدی در رابطه با آموزش کدنویسی قالب وب سایت که شامل کدنویسی قالب های وبلاگ هم می شود را آموزش دهیم. هدف ما آموزش تمامی مباحث کدنویسی نیست چرا که آموزش طراحی صفحات وب در مباحث کدنویسی ممکن است بسیار مفصل و شاید خسته کننده باشد یا در مقالات آموزشی نتوان تمام مطالب را گنجاند و آموزش داد ، بلکه ۸۰% نکات کاربردی و مطالبی که برای ویرایش قالب سایت و وبلاگ نیاز دارید بدانید ارائه خواهد شد.

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

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

<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
محتوای صفحه
</body>
</html>

همانطور که می بینید یک صفحه وب باید شامل کدهای بالا حتما باشد. به هریک از عبارت هایی که بین علامت کوچکتر رو بزرگتر قرار می گیرد تگ (tag) گفته می شوند . توجه کنید که این عبارت ها ابتدا باز شده و یک متن یا کد بین آنها قرار گرفته و بعد بسته می شوند. نکته دیگر اینکه این کدهای اولیه صفحات وب حتما باید یک بار در کد قالب شما قرار گرفته باشند. بسیاری از کاربران به علت بی اطلاعی کدهایی را در قالب درج می کنند که این تگ ها در آنها قرار دارد و باعث می شود این تگ ها در کد قالب چندین بار تکرار شوند. پس دقت کنید این تگ های اصلی قالب فقط یک بار در قالب موجود باشد!

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

اکنون با چند کد کاربردی آشنا شویم.

کد درج تصویر به همراه توضیح مشخصات آن :

<img border="0" src="http://www.blogskin.ir/desktop/12.jpg" width="450" height="300" alt="tozihat-ax">

با درج این کد در قالب ، عکسی با مشخصات بالا شامل طول ۴۵۰ پیکسل (width) و عرض ۳۰۰ پیکسل (height) و دارای ضخامت کادر دور عکس صفر پیکسل یا بدون کادر (border) و همراه با یک متن توضیحات عکس (alt) با آدرس تصویر نوشته شده (src) نمایش داده می شود.

کد درج متن به همراه توضیح مشخصات آن :

<font style="color:#000000;font-size:10pt"> salam </font>

برای درج متن همراه با تنظیمات دلخواه مانند اندازه فونت و رنگ آن ، باید از تگ font استفاده کرد.همانطور که در کد نمونه مشاهده می کنید تنظیمات هر تگ با عبارت style آغار می شود و تنظیمات در آن تعریف می شود. توجه کنید که متن مورد نظر شما باید در بین دو تگ font که باز و بسته شده است قرار گیرد!
تنظیمات رنگ متن با عبارت color و اندازه فونت با font-size تعیین می شود. برای رنگ یک کد ۶ رقمی باید درج شود و سایز فونت متن هم با معیار pt و px سنجیده می شود.ما بطور معمول از pt استفاده می کنیم.
توجه : بین تعریف هر یک از تنظیمات ، این عبارت (;) درج می شود.
البته بصورت حرفه ایی تنظیمات مربوط به متن ها در جداول با تنظیمات خاص خود تعریف می شوند و تگ font در اینجا تنها جنبه کاربردی دارد و معمولا در کدنویسی حرفه ای استفاده نمی شود.

برای قرار دادن متن در یک سمت از جدول موردنظر ، با این کد می توان این کار را انجام داد:

<div style="text-align:center"> متن شما </div>

در کد بالا محتویات و متن شما که بین عبارت div قرار گرفته است وسط چین خواهد شد.برای راست چین و یا چپ چین کردن محتویات و متن ها به جای کلمه center از کلمات right و left استفاده کنید.

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

از آنجایی که در این مدت دوستان زیادی درخواست آموزش تغیر تصاویر قالب های سایت یا وبلاگ را مثل تصویر هدر قالب (عکس بالای قالب) داشتند ، نحوه تغیر تصاویر را خواهیم گفت.
قبل از تغیر تصاویر باید توجه کنید که اندازه تصویر جدیدی که می خواهید در قالب خود قرار دهید باید از نظر طول و عرض تقریبا با تصویر قبلی یکسان باشد تا زیبایی قالب پس از جایگزین کردن تصاویر از دست نرود. برای تغیر تصاویر کافی است در کدنویسی تنها آدرس جدید تصویر را در قالب اعمال کرد ، پس اول تصویر جدید را در یک فضا (مثل سایت های آپلود عکس) آپلود کنید بعد آدرس جدید تصویر را جایگزین آدرس قبلی کنید.

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

۱- تصاویر قالب در بین دو تگ <style> در کد اصلی قالب قرار گرفته است.
در تگ <style> که تنظیمات قالب (اعم از تنظیمات جدول بندی، رنگ متن ها و …) وجود دارد برای تغیر تصاویر قالب مثل تصویر هدر ، منو ها و دیگر تصاویر قالب کافی است آدرس و در صورت نیاز سایز عکس را ویرایش کرد.

<style>
.top{background:url(http://topskin.ir/34/top.jpg) no-repeat top; width:900; height:200; float:right;}
</style>

2- تصاویر قالب بصورت کد عکسی در قالب قرار گرفته است.

<img border="0" src="http://topskin.ir/36/header.jpg" width="186" height="30">

3- تصاویر قالب خارج از کد قالب اصلی و در یک فایل جانبی به نام فایل CSS در قالب درج شده است .

در این روش که رایج ترین و حرفه ای ترین نوع کد نویسی قالب ها می باشد ، برای تغیر تنظیمات و تصاویر قالب دو روش ساده وجود دارد.
روش اول : باید ابتدا فایل CSS قالب را از آدرس مربوطه که در کد قالب وجود دارد دریافت کرده

<link href="http://topskin.ir/36/style.css" type="text/css" rel="stylesheet">

آنرا با برنامه هایی مثل NOTEPAD باز کرد و آدرس تصاویر جدید قالب یا تنظیمات دیگر که روی فایل CSS پیاده می شود را اعمال کرد و سپس فایل CSS جدید را روی یک فضا آپلود کرد. بعد از انجام این کار کافیست آدرس جدید فایل CSS که تغیرات جدید در آن قرار دارد را در کد قالب قرار داد.

روش دوم : چنانچه تغیر فایل CSS قالب و آپلود آن برای شما دشوار است ، پس از دریافت فایل CSS قالب آنرا باز کنید، شناسه مربوط به جدولی که تصویر مورد نظر در آن قرار گرفته را در فایل CSS پیدا کنید.عنوان شناسه ها در فایل CSS در ابتدای هر سطر با نقطه یا # مشخص شده اند. پس از یافتن شناسه ، آنرا در کد قالب پیدا کنید:

<div class=header>
<div id=header>

سپس کد زیر را مطابق مثال در جای خود اضافه کنید.

<div class=header style="background:url(http://yourskin.ir/34/mypic.jpg)">

غیر از مراحل گفته شده در بالا ، مراحل دیگری هم وجود دارد اما رایج نیستند.

برای نمونه و تفهیم بیشتر، جهت تغیر تصویر هدر قالب شماره ۳۶ سایت (برای اکثر قالب های بلاگ اسکین شناسه یا اصطلاحا کلاس top برای قسمت هدر قالب می باشد) کافی است عبارت زیر را در کد قالب پیدا کرده

<div class=top>

و کد قرمز رنگ را به کد مربوطه اضافه کنید و آدرس تصویر خود را جایگزین آدرس موجود نمایید.

<div class=top style="background:url(http://yourskin.ir/34new/mypic.jpg)">

در سیستم کدنویسی وبلاگ ، محلی برای نمایش امکانات جانبی وبلاگ مانند آمار ، ساعت ، تصویر تصادفی و … در نظر گرفته شده که کاربران باید کدهای مربوط به این امکانات را در قسمت مدیریت وبلاگ خود در بخش تنظیمات وبلاگ در محل مشخص شده با عنوان کدهای اختصاصی کاربر قرار دهند.

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

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

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

توجه : ابتدا تمام کد قبلی موجود در بخش ویرایش قالب باید پاک شود و بعد کد جدید جایگزین شود!

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