أخر المقالات
تحميل...

أضف لمدونتك مربع بحث سريع

السلام عليكم ورحمة الله وبركاته

مربع البحث أشكال وانواع كثيرة هناك من يستخدم مربع بحث مخصص وهو يتم إنشاؤه من جوجل وهناك من يستخدم مربع بحث عادي خاص بمدونات بلوجر فهو يعمل على إدخال كلمة والبحث عنها داخل المواضيع لكن اليوم سوف نقدم لكم مربع بحث سريع يعمل على البحث عن المواضيع داخل مدونتك دون الانتقال من الصفحة يعمل على فتح نافذة صغيرة داخل مدونتك والبحث بشكل سلس وجميل! ويمكن لمربع البحث عرض نتائج لا محدودة في الوقت نفسه

لا تتوفر معاينة حالياً لكن إضافة سهلة ولن تستغرق نصف دقيقة لتجربها بنفسك


كيفية إضافتها إلى مدونتك


من لوحة التحكم  --->> تخطيط ثم إضغط على إضافة أداة ثم أختر من بين الأداوت أداة HTML/JavaScript
ثم أضف الكود التالي داخل الأداة:

<style>
#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px;
  font:normal bold 13px/normal Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {color:#052748}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px/normal "Trebuchet MS",Trebuchet,Tahoma,Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px/normal Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}
</style>

<div id="search-form-feed">
  <form action="/search" onsubmit="return updateScript();">
    <input name="q" type="text" placeholder="أدخل كلمة بحث..." id="feed-q-input" onkeyup="resetField();"/>
  </form>
  <div id="search-result-container"></div>
  <div id="search-result-loader">جاري البحث...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
    url: "http://madad2.com", // رابط المدونة
    numPost: 9999, // الحد الآقصى لعدد النتائج
    summaryPost: true,
    summaryLength: 400, // عدد احرف البحث
    resultTitle: "نتائج البحث", // 
    noResult: "لا يوجد نتائج", 
    resultThumbnail: true, 
    thumbSize: 40, 
    fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js"></script>
غير الرابط http://madad2.com برابط مدونتك ثم أختر حفظ الأداة

4 تعليق على " أضف لمدونتك مربع بحث سريع "

مجهود جدا رائع اخى وشرح مميز
الله يجازيك خير

شكرا لمرورك صديقي دمت بخير



إلهي قد تحاببنا
وفيك الحب والعهد.
فنرجو فوقنا ظلا
حين الحر يشتد.
لنا ولإخواننا عفوا
ومنك العفو يمتد.
ومغفرة ومنزلة
جنان مالها حد .


أخواتي ..: ما أجمل أن تحبي أختك في الله.....

وما أنبله من حب
فالسلام على من اهتدى وسار على نهج المصطفى

السلام عليكم ورحمه الله وبركاته

سلام معطر برائحه المسك وعبير الاخوه الصادقه والحب فى الله
سلام من قلوب تحب فى الله الى اطيب واطهر قلوب عرفت معنى الاخوه فى الله
حبيباتى اخوتنا هى العهد والميثاق وهى التى تعدنا بميعاد على حوض النبى الكريم
هي التى تواسينا وتصبرنا على مانراه فى دنيانا
لنترقب وننتظر يوم نلقى الله عز وجل ويظلنا تحت عرشه العظيم
نعم لانرى وجوه اخواتنا هنا ولكن نشعر بصدق اخوتنا وكاننا نشبك كفوفنا ونتآزر فى الفرح والحزن
وهنا سطرت أحبتي كلمات وخواطر عن الاخوه فى الله يملاها الحب والحنان
ولتكن هذهالكلمات امثله لنشعر بروح الاخوه ونكمل عليهاخاطره "موقف " كلمه عن الاخوه فلنرى حروفهن وما ارسلن لنا .........

أزال أحد مشرفي المدونة هذا التعليق.

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×