تغییر تصاویر در قالب های بلاگ اسکین
از آنجایی که در این مدت دوستان زیادی درخواست آموزش تغیر تصاویر قالب های سایت یا وبلاگ را مثل تصویر هدر قالب (عکس بالای قالب) داشتند ، نحوه تغیر تصاویر را خواهیم گفت.
قبل از تغیر تصاویر باید توجه کنید که اندازه تصویر جدیدی که می خواهید در قالب خود قرار دهید باید از نظر طول و عرض تقریبا با تصویر قبلی یکسان باشد تا زیبایی قالب پس از جایگزین کردن تصاویر از دست نرود. برای تغیر تصاویر کافی است در کدنویسی تنها آدرس جدید تصویر را در قالب اعمال کرد ، پس اول تصویر جدید را در یک فضا (مثل سایت های آپلود عکس) آپلود کنید بعد آدرس جدید تصویر را جایگزین آدرس قبلی کنید.
تصاویر در قالب های وبلاگ به چندین شکل مختلف در کد قالب قرار دارند که رایج ترین روش ها را بررسی می کنیم :
۱- تصاویر قالب در بین دو تگ <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)">
[وب قالباتون آسان طراحی کنید ا ما همراحت تر تغییر عکس بدیم
من نتونستم هیدر رو تغییر بدم
تو فایل css که دانلود میکنم جایی برای ادرسی که عیدر جدید رو اپلود کردم نیست که جایگزین کنم ؟ روش دوم هم جواب نداد
کمک کنید
——————-
پاسخ شما : در کدهای مربوط در فایل CSS عبارت URL رو پیدا کنید و در پرانتز آدرس تصویر رو قرار بدید
با توضیحاتی که در نظرات قبلی داده بودید، گفتید که برای قالب ۳۵ باید عکس تکه تکه شود. آدرس عکسی که من میخوام قرار بدم اینه :
http://www.tehranpic.net/images/za537jwis0ss3wy9k9e.jpg
اگر امکانش هست لطف کنید و این عکس رو برای قالب شماره ۳۵ قرار دهید، یا توضیح دهید که چگونه عکس رو تکه تکه کنم و هر تکه چگونه قرار بگیره. با تشکر
—————————–
پاسخ شما : برای قالب ۳۵ باید این دو عبارت رو پیدا کنید <div class=top1> و <div class=top2> سپس کدهای جانبی رو به این دو قسمت اضافه کنید که بشه آدرس تصاویر رو درج کرد. تصاویر هدر قالبرو ذخیره کنید تا سایز هر کدوم دستتون بیاد.
دستتون درد نکنه کار ما را راحت تر کردین اگه شما را نداشتیم باید چه کار می کردیم
راستی می توانید چند تا وبلاگ ورزشی در ست کنید و در اختیار عموم قرار دهید یعنی مخصوص هر ورزش مثلا هندبال متشکرم
سلام، ممنون از مطالب آموزشی تون. عالیه.
با عرض سلام و خسته نباشید خدمت مدیران محترم
قالب و آموزشاتون عالیه
لطفا اگه میشه آموزش بدین که چه طور میشه علاوه بر ستون سمت راست ، برای سمت چپ هم ستون قرار بدیم
با تشکر فراوان
واقعا نمیدونم چجوری ازتون تشکر کنم.
واقعا مطالب مفید و پر کاربردی دارید.
بازم ممنون…
واقعا از شما متشکرم مطالبتون عالی بود.
سلام
خسته نباشید
ببخشید من یک سوال داشتم
آیا امکان این هست که برای پشت زمینه قالب از ۲ عکس استفاده کرد که یکی روی درگیری دیده بشه ؟
بیشتر توضیح میدم که متوجه مجبورم بشید
اول قالب این ۲ لینک رو ببینید لطفاً :
http://persianblackrose.blogspot.com/
http://themetest7.blogspot.com/
همون طور که میبینید عکس پشت زمینه قالب اول دستور scroll داره و در قالب دوم دستور fixed
هدف من از این سوال اینه که اون قسمت سیاه هفت هشتی رو در بالای صفحه scroll کنم و عکس انار رو fixed کنم تا هر وقت به پایین صفحه هم میبیرم اون انار پشت صفحه باشه و وقتی بالای صفحه هستیم اون قسمت سیاه روی انار نمایش داده بشه
نمی دونم تونستم منظرم رو برسونم یا نه
اصلاً این کار ممکن هست یا نه ؟
ممنون میشم از کمکتون
بابا زیر دیپلم صحبت کن ماکه هیچی نفهمیدیم!
سلام
واقعاً نمی دونم باچه زبانی از شما تشکر کنم و لی اگه می شه مطالبتون رو زیاد کنید.
با سپاس فراوان
سلام
ببخشید می خواستم از تون دعوت کنم به وبلاگ من یه سری بزنید و منو از پیشنهادات محترمتون بهره مند کنید.
با تشکر فراوان
با تشکر از شما هنر مندان عزیز به خاطر سلیقه زیبای شما در خلق قالب وبلاگ و شگفت انگیز
لطفا سری به وبلاگ من بزنید و من را از لطف تجاربتان بهرمند سازید
ممنون میشوم
لطفا آموزش تان را با زبان ساده تر بگید
سلام ضمن تشکر می خواستم راهنماییم کنید . من فایل css یه قالب رو که کار خودتونم هست با NOTEPAD باز میکنم و برای تست بدونه اینکه تغییری در فایل بدم اپلود میکنم و ادرس اپلود رو وقتی در قالب قرار میدم جواب نمیگیرم لطفا راهنماییم کنید. ضمناً من پسوند txt رو به css تغییر میدهم.
———————————
پاسخ شما : وقتی که فایل css رو جایی آپلود می کنید باید برای تمام نام تصاویر بکار رفته در تنظیمات css ، آدرس درج کنید. مثلا اگر نوشته شده ali.jpg باید آدرس اون تصویر رو بصورت http://blogskin.ir/ali.jpg قرار بدید!
اقا با سلام
با تشکر از پاسخ به سوال قبلی من
می بخشید دوباره مزاحم میشوم
اقا بعد از تغییر و ایجاد فایل css جدید
کجا اونو اپلود کنم
که بعدش اونو به کد قالب وبلاگ اضافه کنم بکنم
————————————–
پاسخ شما : می تونید اینجا آپلود کنید : http://blogskin.gigfa.com
ممنون واقعا عالی بود
سلام بر شما خوبان
واقعاسایت مفید و کارران اندازی داری بسیار ممنون .
در ضمن قالب های پیشنهادی شما هم راحت تبدیل میشند و هم بسیار سبک و خوب بالا می آیند . دست مریزاد از سلیقه و مسئولیت شناسی شما . آفرین
سلام
خسته نباشید
دستتون درد نکنه قالبهاتون بی همتاست اینو به جرات بعد از امتحان اکثر قالبهایی که وجود داشت می گم . هم از نظر اینکه امکانات خیلی خوبی داره از جمله عوض کردن هدر و هم فونت ها تو این قالب به بهترین حالت نمایش داده می شن.
خسته نباشید خسته نباشید.
با تشکر فراوان از زحمات شما عزیزان
اقا من بوسیله آموزشی که دادید . . . موفق شدم عکس top وبلاگم را عوض کنم
مرسی
سلام
ببخشید می خواستم از تون دعوت کنم به وبلاگ من یه سری بزنید .امیرمهدوی
خیلی تشکر ار اینکه کد های را در اختیار ما گذاشته ای
خیلی جالب بود قالب من از نوع سومه که توضیح دادین و این قسمت سومی رو خیلی کم و نامفهوم بود توضیحاتتون ازتون درخواست دارم که این قسمت سوم رو جامع و کامل آموزش بدین
سلام ممنون خیلی زحمت کشیدید . واقعاً ممنونم از طرف همه.
سایت عالی دارید
من که با کدهای شما قاطی کردم الان میخوام عکس هدر رو عوض کنم موندم توش
(قبلا میدونشتم کجاست الان گمش کردم)
به وبم سر بزنینا
خیلی ممنون
mer30
خیلی خیلی ممنون
واقعا که گل کاشتید
به وبلاگ من یه سری بزنید www.anesthesia18.mihanblog.com
حتما نظر بدین
thanks so much
**YOU ROCK**