انقلاب جدید گوگل ، خودتان برای بلاگر پوسته طراحی کنید

مجموعه مقالات و مطالب مرتبط با بلاگر و وبلاگ نویسی و دنیای فناوری اطلاعات

دیدن مطالب وبلاگ

۱۳۸۸/۱۲/۲۰

انقلاب جدید گوگل ، خودتان برای بلاگر پوسته طراحی کنید



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

برای شروع با آدرس Http://draft.blogger.com وارد حساب کاربری خود در بلاگر شوید . سپس وارد بخش Layout شده و از انجا زبانه Template Designer را انتخاب کنید . سپس میتوانید از بین طراحهای از پیش تعیین شده یکی را انتخاب کنید . همه قالبهای موجود در این بخش بر پایه وب 2 و بصورت پویا طراحی شده اند.


خب برای شروع از  بخش Template و از بین نمونه ها گزینه Picture Window را انتخاب کنید . سپس از زیر مجموعه آن اولین گزینه از سمت چپ را برگزینید .( شما میتوانید گزینه های دیگری را امتحان کنید .این آموزش بر مبنای این گزینه نوشته شده است )

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

سپس از بخش Background image بر روی تصویر پیش فرض کلیک کنید :

سپس از بین دسته بندیهای موجود در ستون سمت چپ و تصاویر موجود در باکس تصاویر یکی را به دلخواه انتخاب کنید . و سپس بر روی گزینه Done کلیک کرده تا تغییرات را قالب اعمال شده و بتوانید تغییرات را ببینید. دوباره وارد زبانه Background شوید . حال از بخش Main Color theme بر روی باک رنگها کلیک کنید .

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

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

این بخش بهترین بخش طراحی قالب است . سپس از میان نوع چیدمان ( layout ) مختلف در سمت راست زبانه Body Layout ر اانتخاب کرده و از بین گزینه های موجود یکی را انتخاب کنید . جالب توجه است که با انتخاب یک نوع چیدمان دلخواه بدون کوچکترین تغییری بلا فاصله layout قالب شما تغییر خواهد کرد . همین کار را میتوانید برای بخش زیرین قالب ( Footer ) نیز انجام دهید . امابرای تغییر اندازه طول و عرض قالب بر روی زبانه سوم ( Adjust Width ) کلیک کنید .

سپس از بخشهای Entire blog و Left Sidebar مقدار عرض این بخشها را تعیین نمائید . حال رسیدیم به بخش ویژه طراحی قالب که بعبارتی میتوان نوع رنگ و فونت را به قالب خود نسبت دهید . برای این کار از زبانه اصلی بر روی Advanced کلیک کنید .

سپس از ستون سمت چپ  و از میان گزینه های موجود ( page Text و .... ) و متعاقب ان تنطیمات انها در سمت راست پنجره تغییرات را در قالب خود اعمال کرده و در نهایت بر روی گزینه Apply To Blog کلیک کنید .

چند نکته :
1- فرض کنید که شما از قبل یک قالب دارید و می خواهید آن را به این شیوه شخصی سازی کنید . برای این کار قالب شما باید برای این کار بهینه سازی شده باشد و همه این قابلیتها را پشتیبانی کند .
2- متاسفانه باز هم شاهد عدم پشتیبانی بلاگر از فونت تاهوما و قابلیت RTL هستیم . بنابراین برای اضافه کردن این گزینه ها به قالب طراحی شده خود و برای فارسی سازی قالبهای خود باید تغییراتی در کد های قالب طراحی شده بدهید که این کار میتوانید با رفتن به زبانه Advanced و سپس گزینه Add CSS انجام دهید و یا بعد از ثبت نهایی تغییرات  و به روش متداول فارسی سازی این تغییرات را در قالب اعمال کنید .



13 نظر:

Jan Valjan در ۱۳۸۸/۱۲/۲۱،‏ ۱:۱۱ گفت...

با سلام و تشکر از شما بابت این مطالب عالی- لطفا در مورد اضافه کردن CSS های لازم هم مطلب آموزشی منتشر کنید یا مرجعی رو برای فراگیری اون جهت فارسی سازی وبلاگ ارائه نمایید.

Hesam در ۱۳۸۸/۱۲/۲۱،‏ ۷:۳۸ گفت...

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

دو (به کامنت بالایی).من دارم یه سری اموزش css می نویسم و تو وبلاگم میزارم می تونی از اون جهت یادگیری استفاده کنی http://www.titles.ir/

باغ بان باشی در ۱۳۸۸/۱۲/۲۱،‏ ۹:۲۴ گفت...

Hesam @

اگر میتونی مطلب آموزشیت رو با نوشتن مطالبی درباره CSS3 تکمیل تر کن

پابرهنه در ۱۳۸۸/۱۲/۲۱،‏ ۱۸:۳۲ گفت...

aziz jan
tooye bloger man fa.al nist
aslan in gozine vojood nadarad
chi kar konam

باغ بان باشی در ۱۳۸۸/۱۲/۲۱،‏ ۲۰:۱۷ گفت...

برای شروع با آدرس Http://draft.blogger.com وارد حساب کاربری خود در بلاگر شوید

دریچه در ۱۳۸۸/۱۲/۲۲،‏ ۲۱:۵۶ گفت...

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

احمد در ۱۳۸۸/۱۲/۲۳،‏ ۱۵:۱۲ گفت...

استاد گرامی، بسار عالی و کار آمد بود
اما قالب وبلاگ سمیر احمد که با این روش تغییر دادم و ساختم در
IE
به هم می ریزد و درست نیست اما در
Filrefox
درست است
علت چه می تواند باشد
ممنون می شوم از راهنمائی تان

باغ بان باشی در ۱۳۸۸/۱۲/۲۳،‏ ۱۷:۰۶ گفت...

درسته . من 8-9 مدل مختلف قالب ها را در تیپهای مختلف بررسی کردم و در کمال تعجب دیدم که همگی با IE مشکل دارند . خدا کنه که عمدی نباشه .

فرناز در ۱۳۸۹/۱/۱۳،‏ ۱۶:۳۷ گفت...

منم همین مشکل رو دارم ، توی فایرفاکس عالیه اما توی IE نه ، باغبان باشی من چیکار کنم

باغ بان باشی در ۱۳۸۹/۱/۱۵،‏ ۲۲:۲۲ گفت...

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

شهسوار در ۱۳۸۹/۱/۱۶،‏ ۱۷:۵۸ گفت...

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

با مهر

شهسوار

شهسوار در ۱۳۹۰/۱/۱۰،‏ ۱۷:۰۵ گفت...

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

با مهر

شهسوار

باغ بان باشی در ۱۳۹۰/۱/۱۰،‏ ۱۷:۰۵ گفت...

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

لینکهای دوستان