آموزش طراحی باکس مطالب تصادفی در سایدبار
آموزش طراحی باکس مطالب تصادفی در سایدبار
با سلام خدمت تمام کاربران وب سایت پاسخ وردپرس در خدمت شما هستم با یکی دیگه از جلسات آموزشی
توی این جلسه از آموزش طراحی قالب html و css جلسه ۱۶ طراحی قالب نهایی
میخواهیم یک با کس برای مطالب تصادفی در سایدبار را
خدمت شما به طور کامل آموزش بدیم پس تا آخر با من همراه باشید .
آموزش طراحی باکس مطالب تصادفی
ما توی جلسات گذشته توی بخش سایدبار باکس جدیدترین مطالب و باکس تبلیغات و باکس برجسب
ها را به طور کامل خدمت شما آموزش دادیم فایل نهایی این جلسه از آموزش مثل تصویر زیر خواهید بود .
فایل نهایی که توی جلسه طراحی خواهیم کرد
برای شروع کد های html زیر را بعد از کد های باکس جدیدترین مطالب داخل فایل index.html خود قرار دهید .
کد های html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<aside class="new-post random-post"> <header class="new-post-title"> <h3><i class="fa fa-refresh"></i>مطالب تصادفی</h3> </header> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/1.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/2.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/3.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/4.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/5.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> <!--start widget-post--> <div class="widget-post"> <a href="#"> <div class="widget-post-inner"> <div class="widget-post-img"> <img width="68" height="68" src="images/software/6.png" class="widget-post-tum" alt=""> </div> <div class="widget-post-details"> <span class="widget-post-title">قالب مجله ای فروشگاهی تیوا به نسخه 5 بروزرسانی شد</span> <span class="widget-post-date"> <i class="fa fa-calendar" aria-hidden="true" style="margin-left: 3px"> </i>۱۳۹۷-۰۴-۰۷</span><span class="widget-post-aut"> <i class="fa fa-user" aria-hidden="true" style="margin-left: 3px"></i>پاسخ وردپرس </span> </div> </div> </a> </div> <!--end widget-post--> </aside> |
بعد از این کد های بالا را داخل فایل index.html خود قرار دهید اگه فایل index.html خود را داخل مرورگر اجرا نمایید
یک چیزی مثل تصویر یر خواهیم داشت.
نتیجه کار
دقت داشته باشید دوستان عزیز این باکس به صورت پیش فرص یک استایل دارد مثل پس زمینه اگه دقت کرده باشید ما
از باکس جدید ترین مطالب یک کپی گرفتیم به خاطر همین بخش عنوان مطالب تصادفی و پس زمینه یک استایل مناسب دارد.
آموزش استایل بخش محتوا مطالب تصادفی
برای این که بخش محتوا مطالب تصادفی یک استایل مناسب داشته باشه کد های css زیر را بعد از کد های css جدید ترین مطالب
داخل فایل style.css خود قرار دهید .
کد های css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*start rand post*/ .widget-post { position: relative; padding: 5px; border-bottom: 1px solid #ededed; } .widget-post:hover { background-color: #f7f9fa; } .widget-post a { color: #000; } .widget-post-inner { margin: 5px; } img.widget-post-tum.wp-post-image { border-radius: 2px; height: 68px; width: 68px; } |
دقت داشته باشید دوستان من برای این تصویر و محتوا را از هم جدا کنم و داخل یک خط قرار بدم از خاصیت
float استفاده نکردم به خاطر همین از خاصیت position: relative استفاده کردم اگه الان فایل داخل مرورگر تست کنید مثال تصویر زیر خواهید بود.
نتیجه کار
برای جدا سازی عنوان و نویسنده و تاریخ انتشار از کد های زیر استفاده کردم کد های css زیر را بعد از کد های بالا داخل
فایل style.css خود قرار دهید .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
span.widget-post-title { position: absolute; right: 85px; top: 10px; left: 10px; font-size: 13px; font-weight: 600; line-height: 18px; } span.widget-post-date { position: absolute; top: 58px; right: 85px; color: rgba(0, 0, 0, 0.6); font-size: 11px; font-weight: 600; } span.widget-post-aut { position: absolute; top: 58px; color: rgba(0, 0, 0, 0.6); right: 165px; font-size: 11px; font-weight: 600; } |
برای این که من بتوانم مطالب را کنترل کنم از خاصیت position: absolute; استفاد کردم و در نهایت فایل نهایی ما مثال تصویر زیر خواهد بود .
نتیجه کار
خوب دوستان عزیز این جلسه از آموزش طراحی قالب html و css همین جا به پایان رسید امید وارم که برای شما مفید بود باشه
تایکی دیگه از جلسه از آموزش های طراحی قالب html و css در وب سایت پاسخ وردپرس خدا نگهداز .
هیچ دیدگاهی برای این محصول نوشته نشده است.