parsgreen.com
article

نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ

html-google-search

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

پرس و جو از سرور گوگل


قبل از اینکه به فرم جستجوی گوگل بپردازیم، بد نیست با نحوه ایجاد یک درخواست ساده و پارامترهای آن از سرور گوگل آشنا شویم، اگر دقت کرده باشید، هنگامی که عبارتی را در فیلد جستجوی این سایت وارد می کنید، پس از کلیک بر روی دکمه جستجو، در نوار آدرس، پارامترهایی قابل مشاهده است که با یک علامت & از هم جدا شده و قابل تشخیص هستند، در ساده ترین حالت، مثال زیر کلمه آموزش برنامه نویسی وب را جستجو می کند.
http://www.google.com/search?q=برنامه نویسی وب
حرف q در درخواست ما مخفف query یا پرس و جو است و عبارت بعد از آن، کلمه مورد نظر برای جستجو است، در این حالت، گوگل در تمام وب، عبارت درخواست شده را جستجو می کند و نتایج نمایش داده شده از تمام سایت ها و وبلاگ ها است، اما اگر بخواهیم جستجو را محدود به سایت یا وبلاگ خود کنیم، از یک پارامتر دیگر به نام sitesearch استفاده می کنیم، به طور مثال:
http://www.google.com/search?q=برنامه نویسی وب&sitesearch=http://webgoo.ir
به این صورت تنها نتایجی نشان داده می شوند که مربوط به آدرس پارامتر sitesearch باشند، همین کار را می توان با کدهای html و فرم های ساده وب انجام داد که در ادامه به آن می پردازیم.

تنظیم کد html برای ایجاد فرم جستجوی گوگل


قبل از هر چیز ما به یک کد html جهت ایجاد فرم جستجو احتیاج داریم، در زیر این فرم اولیه را کدنویسی کرده ایم.
<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="hidden" name="sitesearch" value="http://webgoo.ir" />
</form>
پیش نمایش کد را در انتهای صفحه می توانید ملاحظه کنید.
توضیح:
- تمامی موارد این کد، بنا بر نیاز و سلیقه شما قابل تغییر هستند، به طور مثال عرض باکس جستجو در قسمت width برابر 250 پیکسل است که می توانید متناسب با قالب سایت یا وبلاگ خود آن را تغییر دهید، یا به فرض برای تنظیم عناصر در یک خط جدید از تگ br در html استفاده کنید.
- در قسمت style می توانید از کدهای css برای سفارشی سازی ظاهر فرم ها استفاده کنید، یا به طور جداگانه کلاس (class) و آی دی (id) برای آنها تعریف کنید.
- دو فیلد با نام q و sitesearch بخش اصلی درخواست ما را شکل می دهند، مقادیر value برای فیلد q خالی است و توسط کاربر پر می شود، برای فیلد sitesearch باید آدرس کامل سایت یا وبلاگ خود را (به جای http://webgoo.ir) جایگزین کنید.
- برای باز شدن پنجره جستجو در صفحه جدید، به قسمت مربوط به تگ فرم، مقادیر target و blank را اضافه کنید، به فرض:
<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank">

افزودن قابلیت تعاملی با جاوا اسکریپت


با توجه به نیاز خود، می توانید امکانات دیگری به فرم جستجو اضافه کنید، در اینجا ما یکی از پرکاربردترین تکنیک ها را به فرم جستجوی گوگل اضافه می کنیم و آن قابلیت تعاملی است، منظور از این قابلیت، امکان درج یک عبارت به صورت پیش فرض در فیلد جستجو است که وقتی کاربر (جهت وارد کردن متن) در آن کلیک می کند، خود به خود محو شده و اگر (بدون ورود حرفی) در خارج از آن فیلد کلیک کند، به طور خودکار عبارت پیش فرض ظاهر می شود.
کد جاوا اسکریپت و توابع:
<script type="text/javascript">
function formclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}
function formrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}
</script>
فرم جستجوی ساده به همراه قابلیت تعاملی:
<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="hidden" name="sitesearch" value="http://webgoo.ir" />
</form>
توضیح:
- در اینجا از دو تابع ساده جاوا اسکریپت و رویداد های onclick (هنگامی که کاربر در فیلد کلیک می کند) و onblur (هنگامی که کاربر در خارج از فیلد کلیک می کند) استفاده کرده ایم.
- کد جاوا اسکریپت را ترجیحا در قسمت هدر قالب (بین تگ های head) قرار دهید و فرم جستجو را بعد از اعمال تنظیمات مورد نظر، در قسمت تگ body (محل قرار دادن آن سلیقه ای است و تفاوتی ندارد که در کجای صفحه اضافه شود).

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


برای زیبا تر شدن فرم جستجو و افزودن یک قابلیت دیگر به آن، می توانیم از دکمه های رادیویی یا منوهای کشویی استفاده کنیم، این کار را در کدهای زیر انجام داده ایم که ملاحظه می کنید.
فرم جستجوی گوگل با دکمه های رادیویی:
<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="radio" name="sitesearch" value="http://webgoo.ir" checked="checked" />جستجو در وبگو<br />
<input type="radio" name="sitesearch" value="" />جستجو در وب<br />
</form>
فرم جستجوی گوگل با دکمه های کشویی:
<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<select name="sitesearch">
<option value="http://webgoo.ir">جستجو در وبگو</option>
<option value="">جستجو در وب</option>
</select>
</form>
پیش نمایش
در پایان این نکته را نیز اضافه کنیم که سرور گوگل از پروتکل امن https استفاده می کند، لذا به جای http://google.com در کدهای بالا، می توانید از https://google.com نیز استفاده کنید.
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» نحوه متحرک ساختن متن با تگ marquee در HTML
» چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
» آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
» چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
» آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت
commentنظرات (۳۰ یادداشت برای این مطلب ارسال شده است)
نویسنده: فریبا
زمان: ۲۲:۵۰:۴۹ - تاریخ: ۱۳۹۱/۰۴/۲۹
سلام
عالی بود.
امکان دارد کد عضویت در خبرنامه را توضیح دهید.
ممنون.
پاسخ: 
سلام
امکان عضویت در خبرنامه با وجود ساده به نظر رسیدن نیازمند آشنایی با چند پارامتر متفاوت است، از جمله دریافت اطلاعات کاربران و ذخیره در دیتابیس، فراخوانی ایمیل ها به صورت آرایه و ارسال پیام از طریق برنامه های سمت سرور مثل کلاس ها و توابع smtp و mail در php که خود چندین مبحث جداگانه دارد.
نویسنده: farzam jinx
زمان: ۰۶:۳۶:۱۲ - تاریخ: ۱۳۹۱/۰۵/۰۸
با سلام،
می خواستم ببینم چطور میشه موقعیت سرچ باکس رو در صفحه تعیین کرد و چطور میشه برای مثال یه عکس ذره بین بزاریم و وقتی روی ذره بین کلیک میکنیم سرچ کنه؟با تشکر
پاسخ: 
سلام
واقعیت مطلب این است که شما باید تا حدودی با css آشنا باشید، همه این کارهایی که می خواهید انجام دهید، در وب تنها با css امکان پذیر است، به این صورت با تعریف کلاس و استایل مخصوص می توانید شکل دکمه ارسال را تغییر دهید و از عکس پس زمینه (ذره بین) استفاده کنید، یا موقعیت آن را هر طور که مایلید تنظیم کنید.
نویسنده: farzam jinx
زمان: ۱۳:۴۲:۳۵ - تاریخ: ۱۳۹۱/۰۵/۰۸
با سلام،
میشه در مورد سوال دوم کمی راهنمایی کنید؟لطفا
پاسخ: 
با اختصاص یک کلاس css می توانید این کار را انجام دهید، یا به فرض به قسمت style input مربوط به دکمه، به صورت زیر مقادیر را اضافه کنید:
<input class="search-button" type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; background-image:url(http://www.yoursite.com/image/search-button.jpg); background-position:left top; width:40px; height:40px; border:0px; cursor:pointer; float:left; background-color:transparent;" />
به جای آدرس پیش فرض، آدرس تصویر خود را با عرض و ارتفاع 40 پیکسل یا مقادیر دلخواه دیگر قرار دهید، در کل انجام این کار در صورت آشنایی با css آسان و در غیر اینصورت کمی سخت به نظر می رسد.
نویسنده: farzam jinx
زمان: ۱۲:۰۱:۵۰ - تاریخ: ۱۳۹۱/۰۵/۱۰
سلام
من سرچ باکس رو با دستور position:absolute در هدر قرار دادم و تنظیمش کردم که دقیقا همونجایی که می خوام قرار بگیره اما وقتی با یک کامپیوتری که رزولوشن مانیتورش با مال من فرق داره وارد وبلاگ می شی موقعیت با توجه به رزولوشن عوض میشه میخواستم ببینم راهی هست که سرچ باکس رو در موقعیتش ثابت کرد و جاش تغییر نکنه؟ مرسی که وقت گذاشتید.
پاسخ: 
سلام
برای انجام این کار معمولا position:absolute گزینه مناسبی نیست، چون مقادیر absolute در واقع همان کاری را می کند که در پیام خود اشاره کرده اید، بهترین روش این است که با استفاده از خاصیت های display padding margin float و... و با توجه به موقعیت سایر عناصر در قالب، لایه جدید را تنظیم کنید، در صورت تمایل می توانید آدرس وبلاگ خود را درج کنید تا بررسی گردد.
نویسنده: farzam jinx
زمان: ۱۳:۵۲:۴۶ - تاریخ: ۱۳۹۱/۰۵/۱۰
این آدرسش:
http://dastaki.ir
البته من قصدم از این سوال تعیین موقعیت متن توی هدر بود که من گفتم سرچ باکس تا مجبور به توضیح نباشم. واقعا دستتون درد نکنه که اینقدر به بازدیدکنندگان وبسایتتون اهمیت می دید.
پاسخ: 
سایت شما بررسی شد، باید سعی کنید در قسمت بلاک header کد خود را قرار دهید، نه در انتهای صفحه! بلاک foxmenu و عناصر ul li در هدر قالب شما به درستی تنظیم نشده اند و حجم زیادی اشغال کرده اند، به همین دلیل متن متحرک جایی برای قرار گرفتن ندارد، سعی کنید از قابلیت مرورگرهایی مثل فایرفاکس و کروم برای طراحان و توسعه دهنده گان وب استفاده کنید (معمولا تحت عنوان Developer و Inspect Element) تا موقعیت بلاک ها و عناصر صفحه خود را به خوبی درک کنید، همچنین استفاده از تکنیک هایی مثل اضافه کردن رنگ خاص برای پس زمینه لایه ها در هنگام ویرایش و طراحی هم می تواند به شما کمک کند، به طور مثال به بلاک ها به طور موقت استایل زیر را نسبت دهید تا موقعیت آنها در قالب مشخص شود:
background-color:#C00;
در مجموع تنظیم قسمت هدر قالب شما، نیاز به ویرایش مجدد آن دارد.
نویسنده: پیام
زمان: ۰۴:۳۱:۳۲ - تاریخ: ۱۳۹۱/۰۵/۳۰
یک ملیون تشکر
نویسنده: محسن
زمان: ۰۲:۱۴:۰۵ - تاریخ: ۱۳۹۱/۰۶/۳۰
سلام
جالب بود . استفاده کردم .
در چند لینک شما در محسن باکس معرفی خواهد شد .
موفق باشید
نویسنده: علی
زمان: ۲۰:۰۷:۴۴ - تاریخ: ۱۳۹۱/۱۰/۱۵
سلام خیلی متشکرم دست همتون درت نکنه
نویسنده: حسام
زمان: ۲۰:۱۷:۲۵ - تاریخ: ۱۳۹۱/۱۰/۱۷
عالی بود . مرسی
نویسنده: mousa
زمان: ۰۹:۰۸:۴۲ - تاریخ: ۱۳۹۱/۱۱/۰۷
با سلام
به خاطر مطلب خیلی عالیتون و همچنین از سایت بسیار خوبتون تشکر می کنم. خیلی خوب بود. مرسی.
پاسخ: 
سلام
خواهش می کنیم، نظر لطف شما است.
نویسنده: saeid
زمان: ۲۱:۴۲:۵۵ - تاریخ: ۱۳۹۲/۰۴/۱۳
می شه ازتون خواهش کنم برای وبلاگ من این کارا انجام بدین خیلی ازتون ممنون می شم
پاسخ: 
متاسفانه به دلیل کمبود فرصت این امکان مقدور نیست، آموزش را مطالعه کنید، همه چیز با جزئیات گفته شده.
نویسنده: دوستدار شما
زمان: ۰۰:۳۲:۵۷ - تاریخ: ۱۳۹۲/۰۴/۱۴
سلام، این خیلی عالیه اما اگه یکی بخواد که یه کد توی سایتش بذاره که توی همون سایت جستجو انجام بشه باید چیکار کنه؟ یعنی بدون وابستگی به بیرون از سایت. یعنی یه کد توی صفحه بذاره و تنظیم کنه استایلش رو. و اون کد رو توی کجای صفحه باید گذاشت؟
و اگه مثلا بخواهی موقع سرچ فقط کلماتی رو که از قبل توی صفحه با css و استایل مشخص کردی سرچ بشه. مثل تایتل هر صفحه سرچ بشه باید چیکار کرد.
پاسخ: 
سلام
برای این کار باید با یک زبان سمت سرور (مانند PHP یا ASP) امکان جستجو را متناسب با دیتابیس و ساختار اطلاعات خود تعریف کنید که خود مبحث جداگانه ای است و نیاز به داشتن اطلاعات برنامه نویسی و فراگیری آموزش های مقدماتی دارد.
نویسنده: آیدین پناهی
زمان: ۱۹:۴۷:۱۸ - تاریخ: ۱۳۹۲/۰۶/۲۳
بینهایت ممنون خیلی خیلی مفید واقع شد
نویسنده: مهران
زمان: ۱۶:۵۶:۳۲ - تاریخ: ۱۳۹۲/۰۷/۲۲
من وبلاگ ساخته ام اگه میشه برای معرفی به گوگل منو کمک کنید
0912154****
پاسخ: 
قرار گرفتن در لیست جستجو نیاز به ثبت در جای خاصی ندارد، کافی است چند وبلاگ یا سایت دیگر شما را لینک کنند، پس از مدتی وبلاگ شما در گوگل و سایر موتورهای جستجو به صورت خودکار ثبت خواهد شد، البته نمایش در صفحات ابتدایی به موارد زیادی بستگی دارد که فعال بودن وبلاگ و داشتن محتوا از مهمترین آنها است.
نویسنده: معلم
زمان: ۰۹:۳۲:۲۷ - تاریخ: ۱۳۹۲/۰۸/۲۲
سلام، من معلمم و می خواهم سوالات امتحانی بگذارم تا اپلود فایل ها را انجام می دهم لینک دانلود را هم به دست می اورم و در جای خودش کپی میکنم. اما لینک به همان صورت عدد و ارقام میاید .چگونه می توانم لینک دانلود را به صورت یک شکل نمایش بدهم . لطفا سریع پاسخ دهید . با سپاس
پاسخ: 
سلام
لطفا عبارت "دانلود" را در قسمت جستجو وارد کنید، مطلبی اختصاصی در این مورد در سایت منتشر شده.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...