- بازدید : (1238)
بعد از اینکه قسمتهای سربرگ، ستون کناری (سایدبار) و بدنه مطالب را تکمیل کردیم، نوبت به پانوشت یا فوتر میرسد. در قسمت فوتر، سه ستون داریم و با توجه به اینکه تمام قسمتهای لازم را در بخش ستون کناری نمایش داده ایم در اینجا میتوانیم به دلخواه هر محتوایی را قرار دهیم. به همین منظور ما ستون سمت راست فوتر را که عنوانی معادل “مختصری درباره سایت” دارد را همانگونه رها میکنیم (فقط متن را ویرایش میکنیم) تا کاربر بتواند بنا به خواست و نیازش آن را تکمیل کند.
پانوشت یا فوتر
ستون میانی فوتر دارای کد زیر است:
<div class="latest-posts">
<p class="footer-title">جدیدترین مطالب </p>
<ul>
<li><a href="#">عنوان مطلب اول</a></li>
<li><a href="#">عنوان مطلب دوم</a></li>
<li><a href="#">عنوان مطلب سوم</a></li>
</ul>
</div>
اگر بخواهیم عناوین آخرین پستهای وبلاگ را نمایش دهیم باید از تگهای اختصاصی <BlogPreviousItemsBlock> و <BlogPreviousItems> استفاده کنیم:
<div class="latest-posts">
<p class="footer-title">جدیدترین مطالب </p>
<ul>
<BlogPreviousItemsBlock>
<BlogPreviousItems>
<li><a href="<-PostLink->" title="<-PostDate->"><-PostTitle-></a></li>
</BlogPreviousItems>
</BlogPreviousItemsBlock>
</ul>
</div>
توجه کنید که تنها تگ <li> باید درون تگهای اختصاصی مربوطه قرار بگیرد که یک لینک (<-PostTitle->) را نمایش میدهد و اگر کاربر بر روی این لینک کلیک کند به آدرس مطلب (<-PostLink->) هدایت میشود.
در قالب استاتیک، سمت چپ فوتر، فیلد عضویت در خبرنامه قرار داده شده است ولی ممکن است فردی نیاز به این کد نداشته باشد یا اینکه بخواهد کد موسیقی و … را در این بخش قرار دهد. از آنجا که در قسمت مدیریت وبلاگهای بلاگفا امکان اضافه کردن چنین کدهایی وجود دارد، در این قسمت فوتر، کدهای خاص را نمایش میدهیم (مثل کد موسیقی، نظرسنجی، آمارگیر و …). پس باید بجای کد اصلی قالب :
<div class="subscribe">
<p class="footer-title">اشتراک در مطالب </p>
<p>با اشتراک در خبرنامه سایت، به صورت رایگان مطالب ما را در ایمیل خود دریافت کنید :
</p><br />
<form>…</form>
</div>
کد زیر را قرار دهیم:
<div class="subscribe">
<p class="footer-title">سایر امکانات وبلاگ </p>
<-BlogCustomHtml->
</div>
تنها قسمت باقی مانده از فوتر، لینکها هستند که آنها را در قسمت سربرگ هم داشتیم، برای همین در اینجا نیز آنها را تکرار میکنیم:
<div class="footer-links">
<a href="<-BlogUrl->" >صفحه نخست</a> |
<a href="<-BlogArchiveLink->">آرشیو مطالب</a> |
<BlogProfileLinkBlock>
<a href="<-BlogProfileLink->">پروفایل</a> |
</BlogProfileLinkBlock>
<a href="mailto:<-BlogEmail->">تماس با ما</a>
</div>
حتما متوجه شده اید که کد بالا باید جایگزین محتوای قسمت footer-links شود.
حالا تنها یک بخش برای آماده سازی نهایی قالب باقی مانده است و آن تنظیمات بخش <head> قالب است که شامل متاتگ ها و اطلاعات مربوط به موتورهای جستجو، css و جاوااسکریپت است که در جلسه بعد (جلسه آخر) به آن خواهیم پرداخت.
پس به همین دلیل ازتون ممنون میشیم که سوالات غیرمرتبط با این مطلب را در انجمن های سایت مطرح کنید . در بخش نظرات فقط سوالات مرتبط با مطلب پاسخ داده خواهد شد .