ایجاد متن تایپ شونده (TypeWriter) در بلاگ های بیان


شاید در وب گردی هاتون سایت هایی رو دیده باشید که دارای اخباری هستند که ماشین تایپشون میکنه و کاربر میتونه روی خبر مورد نظر کلیک کنه. در این مطلب میخوام ساخت این ابزار رو در وبلاگ های بیان آموزش بدم. اول از همه نیازه که کد jQuery رو داخل قالبتون قرار بدید:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

پس از قرار دادن کد jQuery باید کد TypeWriter رو در قالب قرار بدید:

<script> /*! * jquery.typer.js 0.0.4 - https://github.com/yckart/jquery.typer.js * The typewriter effect * * Copyright (c) 2013 Yannick Albert (http://yckart.com) * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). * 2013/03/24 */ (function($){ $.fn.typer = function(text, options){ options = $.extend({}, { char: '', delay: 2000, duration: 600, endless: true, onType: $.noop, afterAll: $.noop, afterPhrase: $.noop }, options || text); text = $.isPlainObject(text) ? options.text : text; text = $.isArray(text) ? text : text.split(" "); return this.each(function(){ var elem = $(this), isVal = {input:1, textarea:1}[this.tagName.toLowerCase()], isTag = false, timer, c = 0; (function typetext(i) { var e = ({string:1, number:1}[typeof text] ? text : text[i]) + '', char = e.substr(c++, 1); if( char === '<' ){ isTag = true; } if( char === '>' ){ isTag = false; } elem[isVal ? "val" : "html"](e.substr(0, c) + ($.isFunction(options.char) ? options.char() : options.char || ' ')); if(c <= e.length){ if( isTag ){ typetext(i); } else { timer = setTimeout(function() { typetext(i); }, options.duration/10); /* timer = setTimeout(typetext, options.duration/10, i); */ } options.onType(timer); } else { c = 0; i++; if (i === text.length && !options.endless) { return; } else if (i === text.length) { i = 0; } timer = setTimeout(function() { typetext(i); }, options.delay); /*timer = setTimeout(typetext, options.delay, i); */ if(i === text.length - 1) options.afterAll(timer); options.afterPhrase(timer); } })(0); }); }; }(jQuery)); </script>

حالاپس از قرار دادن اسکریپت های بالا کد زیر رو در یه قسمت دلخواه از بخش <body> کد های قالبتون قرار بدید:

<box:daily_links>
    <script>
     $(document).ready(function() {
     $('#typer').typer( [  
              <view:daily_links>
                     '<a alt="(*link_alt*)" href="(*link_url*)" target="_blank"><span>(*link_name*)</span></a>',
              </view:daily_links>                                                                                                                                        
]); });</script>
</box:daily_links>

و در آخر هم کد زیر رو در هر جای قالب قرار بدید تبدیل به متن تایپ شونده میشه:

<div id="typer"></div>

توجه کنید که این ابزار لیست "پیوند های روزانه" شما را به عنوان اخبار نشان میدهد

نرم افزار کد ساز وبلاگ نرم افزاری برای تولید ابزار و همچین تگ های اولیه هر قالب مثل لینک و تصویر و ... است. استفاده از این نرم افزار نیاز به  آشنایی با علومی چون HTML و CSS و ... ندارد و کد ها به طور خودکار مطابق میل شما تولید میشود

چه چیزی در این نسخه تغییر کرده است؟

  • رفع باگ اجرا کننده افزونه (نمایش داده نشدن دکمه کد بساز و اطلاعات افزونه)
  • اخطار به افزونه ساز در صورت وجود خطا در افزونه
  • ساخت کارگاه افزونه برای افزونه سازان
  • بهبود بخشیدن ابزار های ثابت نرم افزار
  • ساخت ابزارک ویرایش پیام
  • رفع مشکل Reffer در به روز رسانی
  • و یک تخم مرغ عید پاک (:
توجه: برای اجرای این نرم افزار ابتدا باید دات نت فرم ورک 4 روی سیستم شما نصب باشد. این نرم افزار به صورت پیشفرض روی اکثر سیستم های خانگی نصب است ؛ اما در صورتی که هنگام اجرا با خطا مواجه میشوید میتوانید از این لینک این فرم ورک را دانلود کنید: دانلود دات نت فرم ورک چهار

این نسخه قدیمی شده است - دریافت نسخه جدید



تصاویر محیط برنامه