آموزش طراحی قالب HTML5 و CSS3 طراحی جایگاه تبلیغات | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

با ســــــــلام , همراهان وب سایت پاسخ وردپرس 

در خدمت شما هستم با جلسه چهارم آموزش طراحی قالب HTML5 و CSS3 ما توی جلسات قبلی منوی 
اصلی قالب را به طور کامل پیاده سازی کردیم توی این جلسه از آموزش میخواهیم جایگاه بنر تبلیغات را پیاده سازی کنیم

آموزش طراحی قالب HTML5 و CSS3 طراحی جایگاه تبلیغات

برای شروع بعد از این که کد های header یک div با کلاس clear قرار میدیم کد زیر را بعد از کد های  end header قرار بدید .

دقت داشته باشید برای مرتب سازی کد های حتما از کامنت گذاری استفاده نمایید که داخل کد دقت کرده باشید از کامنت start banner استفاده کردم
من برای جایگاه تبلیغات از تصویر های زیر استفاده کردم

تصویر اول

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر اول 

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر دوم 

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر سوم

طراحی جایگاه تبلیغات شما پاسخ وردپرس

دانلود بنر چهارم

بعد از دانلود بنر های بالا یک پوشه داخل پوشه images برای مرتب سازی بنام banner ساخته و تمام بنر ها را داخلش قرار دهید
بعد از این کار کد های زیر را داخل فایل index.html قرار دهید.

اگه دقت کرده باشید من یک لینک به عنوان ( برای سفارش تبلیغات کلیک کنید   ) قرار دادم
برای آدرس تعرفه تبلیغات بعد از کلیک میتوانید ببنید بعد اجرا کد ها نتیجه کار مثل تصویر زیر خواهد بود

بیشتر بخوانید :
آموزش css3 آموزش box-shadow در css | پاسخ وردپرس |

طراحی جایگاه تبلیغات شما پاسخ وردپرس

همان طور که میبینید استایل مناسب ندارد برای استایل پس زمینه کد زیر را داخل فایل style.css قرار دهید .

الان اگه نتیجه کار را ببیند مثل تصویر زیرخواهیدبود

طراحی جایگاه تبلیغات شما پاسخ وردپرس

برای استایل دگمه سفارش تبلیغات کد زیر داخل فایل style.css قرار دهید .

اگه مرور گر یک بار رفرش کنید مثل تصویر زیر خواهید بود

طراحی جایگاه تبلیغات شما پاسخ وردپرس

برای بهتر دیده شدن بنر های بعد از این که کاربر موس را ببر روی بنر های یک hover هم تعریف کنیم برای این کار کد زیر را داخل فایل style.css قرار دهید .

خوب دوستان عزیز این جلسه از آموزش طراحی قالب HTML5 و CSS3 در وب سایت پاسخ وردپرس به پایان رسید.

بیشتر بخوانید :
آموزش طراحی قالب html و css طراحی فوتر بخش خدمات سایت | پاسخ وردپرس |

توی جلسات بعدی بخش های سایدبار و محتوای سایت را پیاده سازی خواهیم کردم منتظر جلسات بعدی باشید 

 

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *