با کمک جی‌کوئری، یک شمارنده برای افتتاح سایت‌تان طراحی کنید

از من می‌پرسید به نظرم به‌تر هست همیشه برای کارهای‌تان ارزش قائل شوید. چون اولین گام ِ موفقیت، اهمیت دادن به آن کار است. پس چه به‌تر که از همان آغاز، یک شروع ِ جالب داشته باشیم.

بگذریم. می‌خواهیم یک چیز ِ کوچولو درست کنیم که تا زمان ِ آغاز به‌کار ِ سایت یا وبلاگ و یا هرچیز ِ دیگری که هست، تعداد روزها و ساعات ِ باقی‌مانده را برای بازدیدکننده‌گان بشمارد. مثلا بگوید “به‌زودی تا ۵ روز و ۸ ساعت و ۲۷ دقیقه و ۴۰ ثانیه‌ی دیگر سایت افتتاح خواهد شد” یا یک همچین‌چیزی :)

coming-soon

کار ِ سختی نیست. اول، کتاب‌خانه‌ی جی‌کوئری را از اینجا بگیرید (اگر اجازه نداد، از اینجا بگیرید).

سپس این اسکریپت را دریافت کنید.

یک فایل با نام index.html بسازید و کدهای زیر را در آن بگذارید:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>به‌زودی...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>
</head>
<body>
<center><div id="count_down_container"></div></center>
<script type="text/javascript">
var currentyear=new Date().getFullYear()
var target_date=new cdtime("count_down_container", "december 31, "+currentyear+" 18:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>
</body>
</html>

در خط ِ ۱۲، تاریخ ِ مربوط به پایان ِ شمارنده را باید تعیین کنید. مثلا من آن را روی آخرین روز ِ سال گذاشته‌ام. یعنی ۳۱اُم دسامبر و همچنین هجده ساعت هم به آن اضافه کرده‌ام.

حالا دستورات ِ سی‌اس‌اس ِ زیر را هم اضافه کنید:

body {background-color: #ddeef6;}
#count_down_container {color: #e43c01; font: bold 150px Georgia; direction: rtl;}
sup {font: bold 13px Tahoma; color: #666; margin-left: 60px;}

در انتخاب‌گر ِ count_down_container، دستورات مربوط به فونت و ظاهر ِ اعداد ِ شمارنده را تعریف می‌کنیم.

خب، تمام شد دیگر. نمونه‌ی این شمارنده را اینجا ببینید و آن را کامل دریافت کنید:

download-zips

دیدگاه‌ها (۲۵)

  • سلام , خوبه و خیلی کار آمده :)

    قبلا یکی رو دیده بودم که روی روزی که تعیین می کردی گیر می کرد , ولی این بهتره.

    ممنون میشم به وبلاگ تازه نفس من هم سری بزنید !

    موفق باشید !

    پاسخ

  • جدیدا رو هرچی دست می زارم می بینم با جی کوئری انجام شده یا میشه انجامش داد . ضرورتا ایجاب می کند که برویم اصولی یاد بگیریم این قسم را ! شما منبعی سراغ داری عجالتا ؟ ( البته غیر از شخص شخیص جنابتان )

    پاسخ

  • @محسن

    با اجازه صاحب بلاگ :)

    شما به سایت خودش برید یا دنبایل jquery chm manual در گوگل باشید !

    با تشکر

    پاسخ

  • سلام ، فکر نکنم اینجا از جی کوئری اصلا استفاده کرده باشید ها! نه اون اسکریپت پلاگین جی کوئری هست نه تو صدا زدنش از جی کوئری استفاده شده

    پاسخ

  • @Ali
    بله درست می‌فرمایید. این مقاله دو قسمتی هست و استفاده‌ی جی‌کوئری‌مون هم در قسمت ِ بعدی هست که سعی می‌کنم به‌زودی منتشرش کنم :)

    پاسخ

  • جالب بود. ممنون.

    پاسخ

  • میشه گذاشت واسه تمام شدن سال تحصیلی جدید :))

    مرسی علیرضا :)

    پاسخ

  • سلام
    دوست عزیز من فکر می کنم وردپرس با آی پی های ایران مشکل داشته باشه!
    چرا که من تا به حال دو وبلاگ ساختم اما وارد نمی شود!
    ممنون میشم راهنمایی کنید.
    با تشکر

    پاسخ

  • @امید
    این به‌خاطر فـیــلـتریـنـگ مخابرات هست، یکی از دوستان مطلب کاملی در این مورد نوشته:
    http://web3b.wordpress.com/2008/07/02/fiilter-all-blog-publish-post-to-wordpress-and-blogger/

    پاسخ

  • بسیار عالیه ! دستت درد نکنه ! توی وبلاگ های فارسی که من سرمیزم وب لاگ شما بیش از همه در مورد جی کوری مینویسه !

    پاسخ

  • سلام
    بدون دانلود jQuery کد اجرا شد!! :)
    کلاً از آموزشهاتون تشکر زیاد.

    پاسخ

  • مرسی با تایمر حال کردم D:

    پاسخ

  • ممنون. تو سایتم از این کد استفاده کردم.

    پاسخ

  • مفید بود مرسی

    پاسخ

  • مشکل این اسکریپت اینه که تا آخر سال میلادی رو ساپورت می‌کنه گویا.
    یععنی مثلن من می‌خواستم تا بیست و یک مارس سال آینده‌ی میلادی که می‌شه اول عید خودمون رو شمارش معکوس بزارم که نتونستم کاریش بکنم.
    اگر شما می‌تونی کمک کنی برای این مورد ممنون می‌شم.

    پاسخ

  • @ممد
    احتمالا اگر تاریخ رو به‌صورت شمسی دربیاریم دیگه مشکلی نداشته باشه. تست نکردم البته خودم..

    پاسخ

  • چطوری باید این کار را کرد؟ می‌شه توضیح بدید؟ ممنون.

    پاسخ

  • سلام علی جان
    واقعا وبلاگ پروحتوا و آموزنده ای داری
    خیلی حال کردم
    فقط من یه اسکریپتی، چیزی میخوام که از یه تاریخ مشخص که بهش میدیم ثانیه ثانیه اضافه بشه
    زیاد شونده باشه
    مثلا از ۱/۱/۲۰۱۰ بشماره سال، ماه، روز، ساعت، دقیق، ثانیه و اگر شد صدم ثانیه
    با تشکر منتظر مطالب جدیدتریت هستم

    پاسخ

  • عالی بود :)

    پاسخ

  • خیلی عالی بود ولی ای کاش فایل pdf هر آموزش رو هم قرار بدید که ما بتونیم پیشمون نگه دایم

    پاسخ

  • دوست عزیز سلام من طبق چیزای که گفتید جلو میرم ولی هیچی دیده نمیشه ولی مال شمارو دانلود میکنم و اجرا میکنم دیده میشه؟!!!!!!!!

    پاسخ

  • MER100-80 KHEYLI KHOB BOD

    پاسخ

  • سلام یک طراح وب !
    از بابت این اموزش و کارهای Open Source ای تون ممنونم.
    از این شمارنده در وبلاگ خودم استفاده کردم.
    ____________________________________________
    در مورد استفاده از ای جکس در بلاگ های WordPress هم
    در صورت امکان اطلاعاتی رو قرار بدید.

    پاسخ

  • سلام . این افکت لودینگ برای تصاویر که در همین سایت هم استفاده میشه رو میتونین توضیح بدین.
    که تا قسمت مورد نظر لود نشه عکس با افکت fade in میاد

    پاسخ

دیدگاه خود را ارسال کنید


می‌توانید از برخی کدهای HTML استفاده نمایید:


<a> <b> <blockquote> <i> <em> <pre> <code> <strong>