محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر محرك بحث CSS html java مارس 06, 2018

محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

مارس 06, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير شرح اليوم على محرك بحث يعمل ب تقنية ال ajax حيث هذا المحرك يمتاز بسرعة ضهور المواضيع عندا البحث و يعرض كل صغيرة و كبيرة و فيه ايضا زر عرض المزيد لكي يتم تحميل المزيد من المواضيع و تركيب الاضافة سهل ايضا نبدا بشرح على بركة الله

1. ابحث على  وضع هذا الكود اسفله

<div class='seacgoom'><div class='inputpoint'><form class='machine' id='search'><div class='input'><input class='search' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='search' value='إبحث...'/><button class='submit fa fa-search' type='submit' value=''/></div><button class='fa fa-times' id='close' type='reset' value=''/></form></div><div class='search-content'><div class='search-result' id='scroll-hide'><div class='inner'><span/></div></div><div class='query-result'>تحميل المزيد</div></div></div>

1. الان ابحث على  وضع هذا الكود فوقه مباشرة

<style>/* Search ajax */ #search .input,#search .input .search{height:40px;transition:all .3s ease-out} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none} .seacgoom{position:fixed;overflow:auto;top:15%;right:20%;left:20%;bottom:10%;max-width:879px;margin:auto;background:rgba(0, 0, 0, 0.92);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s} .seacgoom.active{opacity:1;visibility:visible;margin:auto;transform:scale(1)} .seacgoom .inputpoint{background:rgb(1, 64, 152);margin:0 auto 15px;padding:10px 0} .seacgoom .machine{width:90%;margin:auto;padding:10px 0;outline:0;display:block} #search .input{background:rgba(255,255,255,1);width:100%;margin:30px auto;padding:0 20px 0 0;max-width:1000px} #search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9} #search #close,#search .input .search,#search .input .submit{padding:0;margin:0;border:0;outline:0} #search #close,.query-result{border-radius:5px;text-align:center;cursor:pointer} #search .input .search{float:right;width:calc(100% - 140px);background:0;font-size:16px;color:rgba(0,0,0,.4);line-height:40px} #search .input .submit{display:inline-block;float:left;cursor:pointer;width:14%;height:40.7px;background:#0045a6;font-size:14px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;transition:all .3s ease-out} #search .input .search:active,#search .input .search:hover,font-awesome.min.css:4 #search .input .search:focus{color:rgba(0,0,0,.8)} #search .input .submit:focus,#search .input .submit:hover{background:#0b408a;color:rgba(255,255,255,1)} #search #close{position:absolute;top:10px;left:10px;width:32px;font-size:30px;height:32px;font-weight:200;font-family:fontawesome;background:0;color:rgba(0,0,0,.3);line-height:32px;transition:all .3s} .queryword,.sidebar h2{font-weight:700} #search #close:hover{color:rgba(0,0,0,.6)} .search-content{z-index:6;display:none;position:relative} .seacgoom .search:focus{outline:0} .search-result{padding:0 20px;margin:0 auto 15px} .search-result .search-item{overflow:auto;padding:10px 0;border-bottom:1px solid #eee} .search-result .search-item:last-child{border-bottom:0} .search-item img{width:120px;height:85px;float:right;background:#fdfdfd} .search-item a{width:calc(100% - 150px);float:left;display:block;color:#014098;text-decoration:none;padding:10px 0;font-size:24px;line-height:30px} .search-item a:hover,.search-item:hover a{color:#014098} .query-result{display:none;background:#014098;color:#fff;padding:12px;margin:20px auto 40px;font-weight:500;text-transform:uppercase;line-height:normal;font-size:80%;max-width:90px;transition:all .3s ease-out} .query-result:hover{background:#bb4d23;color:#fff;border-color:transparent} .query-result a{text-decoration:none;color:#3bbb8e} .query-result a:hover,.query-result:hover a{color:#fff} .searchbutton{margin-top: 0.4%;text-align:center;float:left;padding-right:10px;padding-left:10px;font-size:20px;cursor:pointer} .searchbutton i.fa{color:#fff} </style>

1. و في الخطوة الثالثة ابحث على 
2. وضع هذا الكود فوقه  رابط تحميل الكود من هنا

• الان في الخطوة الاخيرة التي تضهر زر الذي ينقلك الى المرحك المنبثق ما عليك سوى وضع هذا الكود في المكان الذي تريد ان يضهر فيه الزر

<div class="searchbutton" title="بحث"><i aria-hidden="true" class="fa fa-search"></i></div>


ملاحظة: لتحكم بشكل زر المحرك فكود الستايل المسوول عنه هوا .searchbutton  و لتحكم ب الايقونة فبهذا .searchbutton i.fa


الان احقظ القالب و مبروك عليك الاضافة اذا اعجبتك تدوينة اليوم لا تنسى الاشتراك في المدونة لكي تدعمني على تقديم المزيد من هنا

اضافة افضل محرك بحث في بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر محرك بحث سبتمبر 30, 2017

اضافة افضل محرك بحث في بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

سبتمبر 30, 2017

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

 السلام عليكم مرحبا بكم في مدونة الخبير عامر بشير اليوم اقدم لكم محرك بحث احترافي استعمله في قالب متريال اكسبيرت النسخة الثانية هوا سيرش خرافي عندا الضغط على الزر ينقلك لواجهة تضهر لك القالب كأنه 3D المهم المعاينة من هنا 

و تحميل الاكواد مع الشرح من هنا او من هنا

ملاحظة :

لا تنسى الاشتراك في المدونة لكي تتوصل بجميع الاضافات و طلب شروحات التي تريدها و لم تجدها في الويب العربي

كل الحقوق محفوظة لالخبير عامر بشير ممنوع نسخ الموضوع جزاك الله خيرا

يمكنك مشاهدة هذه المواضيع التي في المدونة يمنكنك الاستفادة منها

1. إضافة زرالمشاهدة أثناء التصفح لبلوجر على فيديوهات التي ترفع على المدونة
2. سلايد يعرض أخر التعليقات في المدونة بشكل خرافي
3. سلايد شو تلقائي احترافى يعرض اخر المواضيع بشكل عشوائى #1
4. سكربت لتحويل فيديوهات يوتويب للـ MP3
5. طريقه تحميل وتركيب قالب المحترف الخبير عامر بشير النسخة الثالث عشر 2017 والتعديل عليه بالكامل
6. تحميل قالب اكسبيرت الثماني النسخة المدفوعة مجانا
7. كيفية وضع اعلان ادسنس فوق واسفل و وسط مواضيع بلوجر و وضع اعلانين بجنب بعض و التحكم 
8. الطريقة الصحيحة لجعل قالب بلوجر متجاوب و متوافق مع شاشات الهواتف و الاجهزة اللوحية