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

الصفحة الرئيسية› اضافات بلوجر› بلوجر› محرك بحث› CSS› html› java› محرك بحث لبلوجر يعمل بتقنية ajax يعرض المواضيع بشكل احترافي

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

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

3/06

محرك بحث لبلوجر يعمل بتقنية 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>
وضع هذا الكود فوقه رابط تحميل الكود من

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

Mostafa Saad

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

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

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

تواصل معي