محرك بحث لبلوجر يعمل بتقنية 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


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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/03/ajax.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/03/ajax.html">محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي كتبها: المدون التقني - الخبير عامر بشير</a>