(*blog_title*)

(*blog_short_description*)

همیار بلاگ اسکای

طراحی و ترجمه قالب های بلاگ اسکای

جستجو
تقویم
مهر 1394
شیدسچپج
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
نویسندگان
پیوندها
آمار
تعداد بازدیدکنندگان :
313505
جدیدترین یادداشت‌ها
نظرسنجی
از نظر شما بهترین سیستم وبلاگدهی ایرانی کدام است؟
نمایش لیست کشویی آرشیو ماهانه
در نسخه جدید بلاگ اسکای امکانی برای کاربران در نظر گرفته شده تا خودشون بتونن نحوه نمایش چندتا از ابزارک های وبلاگشون رو تعیین کنند. بله، درست حدس زدید.نمایش لیستی و کشویی. امروز میخوایم باهم ببینیم که چطور میشه آرشیو ماهانه پست ها رو بصورت کشویی نمایش داد.پس با  ما همراه باشید و این آموزش رو مطالعه کنید. 
خوب دوستان، مراحل کار رو باهم انجام میدیم. 

روش 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 زیر رو به قالبتون اضافه کنید. توجه داشته باشید که اگر از این کدها استفاده میکنید دیگه از کدهای استایل روش قبلی (بالا) استفاده نکنید.

در مرحله بعد یک عنصر 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>

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

نظرات (7)

  • چهارشنبه 6 شهریور 1392 ساعت 01:48
  • peyman
  • یا قرآن محمد (ص). 7 خان رستم رو باید رد کنی تا اینو فعال کنی.
    امتیاز: 4 2
    پاسخ:
    نه پیمان جان،‌زیاد سخت نیست.
  • چهارشنبه 6 شهریور 1392 ساعت 02:31
  • علیرضا
  • اولا سلام و خسته نباشید خدمت شما دوست گلم
    واقعا خسته نباشی
    میشه قالب ها از این حالت کلاسیک به حرفه ای برسونی؟
    دوم اینکه قالب سفارشی هم میسازی برای بلاگ اسکای اعلام هزینه کنید در صورت ساخت
    سوم عکس هدر قالب کلاسیک مثلا اندازش زدی 139 پیکسل من چطور عوضش کنم به هدر دلخواهم؟
    اینم کدش
    body { background:#eee url(http://s4.picofile.com/file/7834197204/body_pic.png) repeat-x; height:139px;text-align: center;color:#777; margin: 0 auto; padding: 0; font-family:tahoma,arial; font-size:8pt; direction:rtl;line-height:1.8em;}
    امتیاز: 0 0
    پاسخ:
    1- سلام، ممنون.
    2- چشم اعلام هزینه هم میشه.
    3- عکستون رو در جایی آپلود کنید و لینکش روبا لینک تصویر در کد بالا جایگزین کنید. ارتفاعش رو هم با توجه به اندازه تصویر خودتون تغییر بدید.height:XXpx;
  • چهارشنبه 6 شهریور 1392 ساعت 10:24
  • پوریا
  • سلام آقا محمد گل یه ده روزی رفتیم شاهرود مسابقات کشوری والیبال
    امتیاز: 1 3
    پاسخ:
    موفق باشی پوریا جان.
  • چهارشنبه 6 شهریور 1392 ساعت 11:41
  • Pouya
  • سلام علیکم
    بلاگ اسکای جدیدا نظرسنجی رو نیز به امکاناتش اضافه کرده ولی هیچ کدوم از قالبهاش سازگاری با نظرسنجی ندارند.علتش چیست؟
    امتیاز: 1 1
    پاسخ:
    سلام دوست عزیز
    هنوز قالب های بلاگ اسکای به امکانات جدید مجهز نشده اند.
    ولی مدیران بلاگ اسکای در حال بروزرسانی این قالب ها و امکانات جدید هستند.
  • چهارشنبه 6 شهریور 1392 ساعت 14:59
  • م.آزاد
  • خیلی ممنون!
    کاش زودتر خود مدیران بلاگ اسکای هم فکری به حال قالب های پیش فرض بکنند و برای حمایت از شما هم چند قالب شما رو در پیش فرض قرار بدهند!
    امتیاز: 1 0
    پاسخ:
    ممنونم دوست عزیز.
    مدیران بلاگ اسکای هم در تلاش هستند که زودتر قالب ها رو بروزرسانی کنند و از این بابت باید از آنها تشکر کنیم.
  • چهارشنبه 6 شهریور 1392 ساعت 19:00
  • مهتاب سادات
  • با سلام
    خیلی خوب بود ممنون
    امتیاز: 0 0
  • چهارشنبه 6 شهریور 1392 ساعت 21:05
  • علیرضا
  • سلام

    دوست من هدر اندازش تغییر دادم عکس دلخواه آپلود کردم اما یه حالت مثل قرینه ایجاد میشه عکس زیر نشان دهنده این حرف من هست
    http://img.ir/Yrdc.jpg
    امتیاز: 0 0
    پاسخ:
    تصویری که شما قرار دادید عرض ثابتی داره و نمیشه که در عرض صفحه تگرار بشه. شما باید خاصیت repeat-x رو از همون کدی که تصویر رو قرار دادید حذف کنید و عبارت no-repeat رو جایگزینش کنید.
    برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)

    نام :
    ایمیل :
    وب/وبلاگ :
    ایمیل شما بعد از ثبت نمایش داده نخواهد شد