احتمالا توی وبگردی هاتون سایت هایی رو دیدید که وقتی با مرورگر فایرفاکس واردشون میشید، در بخش جستجویی بالای مرورگر علامت + میاد. به این معنی که میتونید این سایت رو به صورت جستجوی همیشگی به مرورگر اضافه کنید. منظورم همین تصویر زیره:

 

 

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

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

 

آموزش ساخت


در قدم اول برای ساخت ابزار، شما نیاز به یک فایل XML دارید که اطلاعات جستجوگر رو داخل خودش قرار بده. برای ساخت این فایل XML دو تا راه وجود داره.

راه حل اول:


۱- نرم افزار کد ساز وبلاگ رو دانلود کنید.

۲- ابزار ساخت جستجوگر فایرفاکس رو که سازگاری کامل با نرم افزار بالا داره رو دانلود کنید.

۳- در منو بالای نرم افزار، روی «مدیریت افزونه ها» و سپس «نصب افزونه از فایل...» کلیک کنید و فایل افزونه ای که دانلود کردید رو انتخاب کنید.

۴- نرم افزار از شما میخواد که دوباره اجرا بشه. پس از ریستارت نرم افزار از منو  بالا وارد «ابزار ها و افزونه ها» بشید و ابزار «جستجوگر فایرفاکس» رو انتخاب کنید.

۵-اطلاعات سایتتون رو داخل نرم افزار بنویسید.

۶- دکمه «ساخت XML جستجوگر» رو بزنید و کد ها رو تحویل بگیرید. توی ابزار گفته شده، همه بخش هایی که نیازه تغییر کنه رو آوردم و اگه حتی یه خط کدنویسی هم بلد نباشید باز میتونید جستجوگر مورد نیاز خودتون رو به راحتی تولید کنید. بلدید هم که چه بهتر (:

دانلود ابزار دانلود نرم افزار کد ساز

 

راه حل دوم:


اگه به هر دلیلی نمیخواید از نرم افزار کد ساز استفاده کنید میتونید فایل XML زیر رو به دلخواه خودتون تغییر بدید و با وبلاگ خودتون سازگار کنید

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <ShortName>آرین نرم افزار</ShortName> <Description>جستجو در آرین نرم افزار :: سلام</Description> <InputEncoding>UTF-8</InputEncoding> <Image width="16" height="16" type="image/x-icon">http://bayanbox.ir/view/6129694182783141553/blogfav.png </Image> <Url type="text/html" method="GET" template="http://blogs.salam.ir/blog.ir"> <Param name="site" value="aryan-pc.blog.ir" />
<Param name="q" value="{searchTerms}" /> </Url> <Url type="application/x-suggestions+json" template="http://salam.ir/onlineAutocomplete/autocomplete?action=complete&amp;format=opensearch&amp;q={searchTerms}" /> <moz:SearchForm>http://salam.ir/</moz:SearchForm> <Url type="application/opensearchdescription+xml" rel="self"
template="http://salam.ir/static/salam.xml" />
</OpenSearchDescription>

 

بعد از اینکه به یکی از دو روش بالا، فایل XML رو تولید کردید اون رو با فرمت xml ذخیره و در بیان باکس خودتون آپلود کنید.

بعد از آپلود، آدرس فایل آپلود شده رو کپی کنید و در آخر کد زیر رو به بخش <head> از قالب خودتون کپی کنید:

<link href="آدرس فایل آپلود شده اینجا وارد شود" title="آرین نرم افزار" type="application/opensearchdescription+xml" rel="search">

 

الان اگه با مرورگر فایرفاکس وارد وبلاگتون بشید میبیید که تغییرات جستجوگر اعمال شده.

شاد باشید (;

 ایجاد متن تایپ شونده (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 روی سیستم شما نصب باشد. این نرم افزار به صورت پیشفرض روی اکثر سیستم های خانگی نصب است ؛ اما در صورتی که هنگام اجرا با خطا مواجه میشوید میتوانید از این لینک این فرم ورک را دانلود کنید: دانلود دات نت فرم ورک چهار

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



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


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

<!-- Welcome Message by aryan-pc.blog.ir -->
<style>.cookie-notification-jc > div {background: none repeat scroll 0 0 #FFFFFF;border: 0 solid #FF0000;bottom: 10px;box-shadow: 0 0 15px #000000;float: right;padding: 30px 15px 15px;position: absolute;right: 10px;width: 260px !important;}.bottom {bottom: 0;left: 0;position: fixed;right: 0;}.cookie-notification-jc {color: #FFFFFF;display: block;height: 100%;left: 0;line-height: 1.4em;padding: 0;position: fixed;top: 0;z-index: 1000000;}.cookie-notification-jc-accept {background: url("http://www.bitc.ie/wp-content/themes/bitc2013/images/closebox.png") no-repeat scroll left top rgba(0, 0, 0, 0);float: left;font-size: 0;height: 30px;left: -33px;margin-right: -30px;overflow: hidden;padding: 0;position: relative;text-indent: -50em;top: -43px;width: 30px;}.cookie-notification-jc-details {color: #EC068D;font-size: 0.9em;padding: 0;transition-duration:1s;}.cookie-notification-jc-details a {color: #BBBBBB;text-decoration: none;color: #ED2025;}.cookie-notification-jc-details a:hover {color: #FFA900;}</style>
<script>function closeBox(toClose) {document.getElementById(toClose).style.display = "none";}</script>
<div id="cookie-notification-jc" class="cookie-notification-jc bottom" style="background-color: rgba(30, 30, 30, 0.2);">
    <div style="width:95%; margin: 0 auto;">
    <span style="cursor: pointer;" onclick="closeBox('cookie-notification-jc'); return false;" class="cookie-notification-jc-accept">Continue</span>
        <h2 style="margin: -5px 0px 0px ! important; font-weight: bold; color: black; float: right; direction: rtl;">آرین نرم افزار</h2><br>
           <p style="color: rgb(112, 112, 112); float: right; direction: rtl;">این بخش مربوط به توضیحات و اطلاعات اضافه است ؛ آن را مطابق میل خود ویرایش کنید<br><br>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir">ورود به وبلاگ</a></span>
        <span class="cookie-notification-jc-details"> - </span>
        <span class="cookie-notification-jc-details"><a href="http://aryan-pc.blog.ir/page/Friends">تبادل لینک</a></span>
        </p>
    </div>
</div>
<!-- end of Welcome Message by aryan-pc.blog.ir -->

توجه: این کد نیاز به امکانات جاوا اسکریپت برای دوستان بلاگ دات آی آر دارد

برای استفاده از این کد نیازی به امکانات جاوا اسکریپت نیست

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

و در بین دو تگ <body></body> در محل مناسب کپی کنید

متن پیشفرض منو عبارت "گزینــه های سایت" است. در صورتی که مایلید متن انتخابی مخصوص خودتان بر کنار منو نوشته شود از طریق بخش نظرات اعلام کنید تا منو ویژه شما را بسازیم - نمونه ای از این منو در کنار سایت ما قرار دارد

این ابزار قدیمی شده است ؛ پیشنهاد میکنیم این منو را با ویرایش های بهتر اعم از فیت کردن زیرمنو ها و همچنین بازگشت انیمیشنی با نرم افزار کد ساز وبلاگ بسازید
<style>#support{position:fixed;top:110px;right:0;width:200px; height:126px;}#supporting {background: url("http://bayanbox.ir/id/5496439216747475432?view") no-repeat scroll left center rgba(0, 0, 0, 0);float: right;height: 126px;width: 35px;transition-duration:1s;}#supp {float:right;margin-right:-165px; background:#eaeaea;border:1px solid #bfbfbf;border-left:none;width:165px; height:124px;}#supporting:hover #supp {display:block;margin-right:-166px;}#supporting:hover {padding-right:165px;transition-duration:1s;}#supp a{display:block; width:140px;direction:rtl;text-align:right;background:#e3e3e3;font:bold 11px tahoma;padding:4px 8px 8px 8px;text-shadow:1px 1px 0px rgba(256,256,256,0.3); margin:1px 5px 5px;color:#666;}#supp a:hover {background:#2ea1c0;text-shadow:1px 1px 0px rgba(0,0,0,0.2);color:#fff;}#supp a img {float:left;}</style>
<!-- Side Menu From aryan-pc.blog.ir -->
<div id="support">
 <div id="supporting">
  <div id="supp">
    <a href="http://" target="_blank">صفحه اصلی</a>
   <a href="http://">تبادل لینک با ما</a>
   <a href="http://" target="_blank">پروفایل مدیر</a>
   <a href="ymsgr:sendim?your_id">گفت و گو در یاهو</a>
  </div>
 </div>
</div>
<!-- end of Side Menu from aryan-pc.blog.ir -->