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

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

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

آموزش طراحی باکس مطالب تصادفی

ما توی جلسات گذشته توی بخش سایدبار باکس جدیدترین مطالب و باکس تبلیغات و باکس برجسب
ها را به طور کامل خدمت شما آموزش دادیم فایل نهایی این جلسه از آموزش مثل تصویر زیر خواهید بود .

فایل نهایی که توی جلسه طراحی خواهیم کرد

آموزش طراحی باکس مطالب تصادفی

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

کد های html

بعد از این کد های بالا را داخل فایل index.html خود قرار دهید اگه فایل index.html خود را داخل مرورگر اجرا نمایید
یک چیزی مثل تصویر یر خواهیم داشت.

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش نمایش جدید ترین مطالب در سایدبار | پاسخ وردپرس |

نتیجه کار 

آموزش طراحی باکس مطالب تصادفی

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

آموزش استایل بخش محتوا مطالب تصادفی 

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

کد های css

دقت داشته باشید دوستان من برای این تصویر و محتوا را از هم جدا کنم و داخل یک خط قرار بدم از خاصیت
float استفاده نکردم به خاطر همین از خاصیت position: relative استفاده کردم اگه الان فایل داخل مرورگر تست کنید مثال تصویر زیر خواهید بود.

بیشتر بخوانید :
آموزش html و css جلسه 9 لیست ها در html | پاسخ وردپرس |

نتیجه کار 

آموزش طراحی باکس مطالب تصادفی

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

برای این که من بتوانم مطالب را کنترل کنم از خاصیت  position: absolute; استفاد کردم و در نهایت فایل نهایی ما مثال تصویر زیر خواهد بود .

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

نتیجه کار 

آموزش طراحی باکس مطالب تصادفی

خوب دوستان عزیز این جلسه از آموزش طراحی قالب html و  css همین جا به پایان رسید امید وارم که برای شما مفید بود باشه
تایکی دیگه از جلسه از آموزش های طراحی قالب html و css در وب سایت پاسخ وردپرس خدا نگهداز .

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

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

لینک کپی شد!

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

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