illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

10447 ۲۳ تیر ۹۲

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاه ها 17 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۲۳ تیر ۱۳۹۲)

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

      • ‏‏

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

        • ‏‏

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

  • ‏‏
    وحید صالحی(۲۷ تیر ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۲۷ تیر ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۵ مرداد ۱۳۹۲)

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

  • ‏‏

    😉

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۵ مرداد ۱۳۹۲)

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۸ مرداد ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۱۸ مرداد ۱۳۹۲)

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

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram