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

عبدو تكنولوجي - Abdou Technologie

6 مارس 2018

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

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

ابحث على <body> وضع هذا الكود اسفله

<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>

و في الخطوة الثالثة ابحث على </body>
وضع هذا الكود فوقه رابط تحميل الكود من هنا

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

MosDos 12 يوليو 2018 في 1:28 ص

الله عليك يا كبير

Unknown 18 يوليو 2018 في 7:05 ص

أزال أحد مشرفي المدونة هذا التعليق.
- عبدو تكنولوجي - Abdou Technologie 18 يوليو 2018 في 11:23 ص
  
  تواصل معي

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع