انشاء خريطة مدونةبرامج مهمةتصميم شعارعام

اضافة مربع بحث لمدونة بلوجر خلال دقيقة واحدة

0
(0)
مربع البحث أشكال وانواع كثيرة هناك من يستخدم مربع بحث مخصص وهو يتم إنشاؤه من جوجل وهناك من يستخدم مربع بحث عادي خاص بمدونات بلوجر فهو يعمل على إدخال كلمة والبحث عنها داخل المواضيع.
اضافة مربع بحث لمدونة بلوجر خلال دقيقة واحدة

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

كيفية إضافتها إلى مدونتك من لوحة التحكم  —>> تخطيط ثم إضغط على إضافة أداة ثم أختر من بين الأداوت أداة 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 برابط مدونتك ثم أختر حفظ الأداة 


الموضوع منقول من مدونة http://www.madad2.com

هل كانت هذه المقالة مفيدة ؟

اضغط على عدد النجوم للتقييم

متوسط التقييم 0 / 5. عدد الاصوات : 0

لا يوجد مصوتين كن انت الاول

Sory Mohajer

ينشر EXE and APK محتوى محدث يومياً لجميع الزوار الكرام من جميع أنحاء العالم قمنا بالترويج للمحتوى المتميز المجاني لمستخدمي الكمبيوتر والهاتف ولجميع مشرفي المواقع الآخرين ... Sory Mohajer:نحن لا نقدم أي ضمان إذا كان أي موضوع / ملحق / برنامج / تطبيق يحتوي على فيروس يرجى التحقق قبل استخدامه على Xampp أو virustotal

مقالات ذات صلة

اترك ردك على هذا المقال

زر الذهاب إلى الأعلى