ایجاد تبلیغات متنی شبیه سایت سون لرن با HTML و CSS

- visibility ١٧ mode_comment

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

ایجاد مرحله به مرحله

برای شروع ساختار اولیه HTML رو ایجاد میکنیم :

حالا استایل مربوط به این قسمت رو براش می نویسیم :

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

خوب اینم استایل مورد نظر برای قسمت عنوان باکس ما :

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

حالا توی قسمت استایل این دستورات رو برای تگ a می نویسیم (البته من استایل حالت hover رو هم اینجا قرار میدم که فکر کنم بهتر باشه و البته از دستورات CSS3 هم برای ایجاد کمی افکت که مطمئنا کار ما رو زیباتر میکنه استفاده کردم):

خوب اگه دقت کنید زیر تگ a ما سه تا تگ div قرار دادیم که قراره این تگ های div اطلاعات لینک رو تو خودشون داشته باشن،اگه بازم خوب نگاه کنید می بینید که بین این سه تا تگ div یه کلاس مشترک وجود داره،بله درسته کلاس link،ما در واقع این کلاس رو نوشتیم تا یه سری ویژگی ها که ممکنه بین اطلاعات لینک ما مشترک باشه رو اونجا قرار بدیم،مثلا رنگ همه متن ها باید سفید باشه پس ما این ویژگی رو توی این کلاس قرار میدیم (دلیلش هم اینه که اگه این کارو نمی کردیم مجبور بودیم که  مثلا همین ویژگی رنگ سفید رو تو استایل هر سه تا div تکرار کنیم و این اصلا خوب نیست  چون حجم کارو یه جورایی میبره بالا،پس در واقع ما خلاصه نویسی کردیم )

خوب استایل کلاس link میشه این :

خوب دوستای گلم اگه به قسمت HTML نگاه کنید بازم یه دقت کوچولو کنید می بینید که توی اون سه تا  div ما علاوه بر کلاس link ما برای هر کدوم یه کلاس جدا هم قرار دادیم،حالا این دیگه واسه چی بود؟ خوب این برای اینه که ما استایل های خاصی رو که مایلیم فقط به یکی از اون div ها اختصاص بدیم توی همون کلاس خودش بنویسیم،مثلا توی کلاس لینک ما مشخص کردیم که طراز همه متن ها سمت راست باشه،خوب حالا من که میخوام آدرس سایت مورد نظر رو بنویسم نمیشه که آدرس انگلیسی سمت راست قرار بگیره،باید چپ چین باشه تا بهتر بشه،خوب من میبینم که div آدرس اسم کلاسش addr هست پس استایل زیر رو برای این قسمت به این صورت مشخص میکنم :

برای قسمت نهایی هم من چند تا تگ a دیگه اضافه میکنم که نتیجه کار بهتر در بیاد:

اینم از صفحه پیش نمایش و اینم لینک دانلود کامل این کد ها،امیدوارم که مفید بوده باشه.

comment دیدگاه کاربران
ehsan

سلام
داش کیوان دستت درد نکنه عالی بود
یه سوال
چجوری متونیم افکت های دیگه براش طراحی کنیم ؟

کیوان علی محمدی

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

rahim12

سلام منظورم از کد باکس اینه:من میخوام یه باکس درست کنم ومثلا توش کد یه ساعت فلش بذارم وبعد اونو تو وبلاگم بذارم تا دیگران از اون کد ساعت استفاده کنن. حالا اول چطور باید یه باکس خالی درست کنم؟

امید

rahim12 سلام.اگه اشتباه نگم منظور شما این است که یک جعبه متن درست کنی و در آن کد جاوا قرار دهی .برای ساختن یک جعبه متن ابتدا بر روی پست مطلب جدید کلیک کن و سپس حالت نوشتاری خود را به صورت html در آور و سپس این کد را کپی کن:
متن کدها و سپس به جای متن کدها کد جاوا را وارد کن

وحید صالحی

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

کیوان علی محمدی

ممنون وحید عزیز،چشم پیگیر هستم انشاالله.

محمد

با سلام. خدمت شما . بنده دو تا سوال دارم . از شما اول این که اگر بخواهم در سایتم که ورد پرس فارسی هست کد های برنامه نویسی را قرار دهم مثل این کد های که شما قرار دادید و در کادر جدا قرار می گیرد باید چکار کنم .؟
2- اگر بخواهم از مطالب نسخه ای پی دی اف در اختیار کار بران قرار دهم مثل مال شما یاید چکار کنم ؟
ممنون می شوم جواب را برام ایمیل کنید

کیوان علی محمدی

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

mgh

😉

rahim

ممنمون جناب کیوان بسیار عالی بود فقط اگه بفرمایید چطوری میتونم به متن افکت بیشتری بدیم؟ یعنی متنها مرتب خاموش و روشن بشن. بسیار ممنون میشم.

کیوان علی محمدی

سلام شما اگه با CSS 3 آشنایی داشته باشید می تونید افکت های لازم رو خودتون بهش اعمال کنید.
جلسات اخر سری آموزشی CSS سایت رو ببینید.

elham.e

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

rahim12

لطفا کد باکسهایی رو که در آن کد مینویسید رو بذارید.

کیوان علی محمدی

سلام دوست عزیز کد باکس ها که کاملا معلومه،هم HTML و هم CSS.

rahim12

با سلام چطوری میتونیم در باکسهای کد برخی کدهارا بصورت مخفی بنویسیم؟

کیوان علی محمدی

خوب باید اون قسمتی رو که میخوای مخفی کنی توی CSS یا visibility:hidden کنی یا اینکه display:none کنی فرقش هم اینه که visibility:hidden جای عنصر توی HTML حفظ میشه و انگار که اونجا فقط یه قسمت خالیه اما display:none باعث میشه اون فضا هم با عناصر اطرافش پر بشه و دیگه خالی نباشه.

aminheidari

واقعا دمتون گرم
😆 😆 😆 😆 😆 😆 😆 😆 😆 😆
😛 😛 😛 😛 😛 😛 😛 😛

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.