نمایش آرشیو ماهانه پست ها بصورت لیست کشویی

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

خوب دوستان، مراحل کار رو باهم انجام میدیم. 

روش 1 :

1- در ابتدای کار درون کد قالبتون بلاک مربوط به نمایش بایگانی(آرشیو ماهانه) رو پیدا کنید. معمولا کدی شبیه به کد زیر :

<archive>

<list>

<div class="menu">

<h3 class="title">آرشیو</h3>

<ul>

<many><li><a href="@href">@date (@count)</a></li></many>

</ul>

</div>

</list>

</archive>

2- حالا نوبت میرسه به اضافه کردن کدهای خودمون. برای این کار کدهای زیر رو بعد از تگ </list> و درون بلاک <archive></archive> قرار میدیم. بصورت زیر :

<dropdown>

<div class="menu">

<h3 class="title">@caption</h3>

<select onchange="if(this.options[this.selectedIndex].value != -1){ javascript:location.href=this.options[this.selectedIndex].value; }">

                        <option value="-1">انتخاب ماه</option>

<many><option value="@href">@date (<postCount>@count</postCount>)</option></many>

</select>

</div>

</dropdown>

در اینجا باید چند نکته رو مد نظر داشته باشید.

    اول : هر کلاسی که برای نمایش لیستی تعریف شده، برای نمایش لیست کشویی هم باید تعریف بشه. مثلا کلاس menu در بالا مشاهده میکنید که بعد از تگ <list> آمده، در لیست کشویی هم باید به همین شکل تعریف بشه. البته لزوما همه کدها به شکل بالا نیستند و ممکنه در قالب های مختلف نام کلاس ها و آیدی ها فرق داشته باشه.

    دوم : نام بلاک رو باید با تگ نمایش دهنده عنوان بلاک جایگزین کنید. یعنی کلمه آرشیو رو حذف و تگ @caption رو قرار بدید.

3- برای نمایش بهتر و زیباتر این عنصر چند خط کد css هم به قالبمون اضافه میکنیم. کدهای زیر رو بین تگ <style></style> قالبتون قرار بدید.

select {width:150px;padding:3px;margin: 15px 15px;border:1px solid #ddd;cursor:pointer;font:12px tahoma;}

4- برای نمایش لیست کشویی آرشیو، باید از مسیر "نمای وبلاگ" -> "ابزارک ها"-> "بایگانی" اقدام به فعال کردن این قابلیت نمائید.

خوب کار تمام شد. تا اینجای کار، لیست ما به شکل زیر در آمده است.

روش 2 :

ولی حالا میخوایم کمی به این عنصر زیبایی بیشتری بدیم. مثلا از تصویر زیر به عنوان تصویر زمینه استفاده کنیم.

برای اینکار باید کدهای css زیر رو به قالبتون اضافه کنید. توجه داشته باشید که اگر از این کدها استفاده میکنید دیگه از کدهای استایل روش قبلی (بالا) استفاده نکنید.

.styled-select { width:200px; height: 34px; overflow: hidden; background: url(http://s4.picofile.com/file/7909679137/down_arrow_select.jpg) no-repeat left #ddd; border: 1px solid #ccc; margin:15px 5px; } .styled-select select { background: transparent; width:200px; padding: 5px; line-height: 1; border: 0; border-radius: 0; height: 34px; -webkit-appearance: none; font-family:tahoma; }

در مرحله بعد یک عنصر div با کلاس تعریف شده در استایل، بصورت زیر به کد بلاک نمایش بایگانی اضافه میکنیم.

<dropdown>

<div class="menu">

<h3 class="title">آرشیو</h3>

<div class="styled-select">

<select onchange="if(this.options[this.selectedIndex].value != -1){ javascript:location.href=this.options[this.selectedIndex].value; }">

                        <option value="-1">انتخاب ماه</option>

<many><option value="@href">@date (<postCount>@count</postCount>)</option></many>

</select>

</div>

</div>

</dropdown>

تبریک میگم. شما این ابزار رو با موفقیت به وبلاگتون اضافه کردید.

منبع : همیار بلاگ اسکای