كيف يمكن انشاء محرك بحث مخصص من غوغل

السلام عليكم
واحدة من اهم الخدمات التي تقدمها شركة غوغل او كوكل او جوجل بصورة مجانية هي امكانية انشاء محرك بحث خاص بموقعك او اي موقع تريدة والخطوات التالية تسهل هذا الغرض
* اذا لم يكن ليك حساب في غوغل انشئ حساب فيها اذهب الى>>>هنا
* او اذهب الى هنالانشاء حساب مجانياملا الحقول كاملة ثم انقر على التالي
*بعد انشاء الحساب مجانا اذهب الى هناثم انقر على انشاء محرك بحث مخصص موجودة بالمربع
* بعدها املا الحقول والتفاصيل وهي
-الاسم: اكتب اسم لمحرك البحث
- الوصف :اكتب وصف
-اختر لغة مثل العربية
-اكتب المواقع التي ترغب ان يبحثها محرك البحث مثل
http://mywebsite.com/*
-كما يمكن اضافة اكثر من موقع واحد على ان يكون كل موقع في سطر واحد
* اختار اصدار قياسي اذا تريده مجاني
واختر بحث المواقع وهو غير مجاني
* اشر على موافق
*ثم التالي
*في الصفحة التالية نختار الشكل واللون المناسب او نتركه على الافتراضي وحسب الرغبة
اسفل الشكل المصغر تظهر تخصسص للتحكم بنوع الخط ولونه وحجمه وكذالك لونه بالنسبة للنتائج اتصور الالوان الافتراضية جيدة بعد الانهاء انقر التالي
*هنا ستظهر الكود انسخها وضها في موقعك حسب الرغبة
وهذا مثال على كود جاهز
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ar', style : google.loader.themes.GREENSKY});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl(
'008190002000030000001:k___l6--__o');

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<style type="text/css">
.gsc-control-cse {
font-family: "Trebuchet MS", sans-serif;
border-color: #E1F3DA;
background-color: #E1F3DA;
}
input.gsc-input {
border-color: #94CC7A;
}
input.gsc-search-button {
border-color: #94CC7A;
background-color: #AADA92;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #A9DA92;
background-color: #A9DA92;
}
.gsc-tabsArea {
border-color: #A9DA92;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #A9DA92;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #0066CC;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #0066CC;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #0066CC;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #0066CC;
}
.gsc-cursor-page {
color: #0066CC;
}
a.gsc-trailing-more-results:link {
color: #0066CC;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #454545;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #815FA7;
}
.gs-webResult div.gs-visibleUrl-short {
color: #815FA7;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gsc-cursor-box {
border-color: #A9DA92;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #A9DA92;
background-color: #FFFFFF;
color: #0066CC;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: #A9DA92;
background-color: #A9DA92;
color: #0066CC;
}
.gs-promotion {
border-color: #94CC7A;
background-color: #CBE8B4;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #0066CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #0066CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #0066CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #0066CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #454545;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #815FA7;
}
</style>