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

أولا إلصق هذا الكود فوق وسم </head> من قالب موقعك

<style> a.fas.fa-search {color: white;float: left; font-size: 26px;margin: 20px 0px 0px 20px;} #searchbar{background-image:linear-gradient(17deg,#a32fb7ab,#474778eb); position:fixed; bottom:0px; left:0px; top:0; right:0; z-index:7; display:none} #searchform{top:50%; left:0; position:absolute; right:0} .search-input{height:60px; width:50%; font-family:'El Messiri',sans-serif; font-size:x-large; border-radius:10px} #searchbar i.fa.fa-times{font-size:40px; right:17px; position:absolute; color:white} .search-icon{height:60px; width:60px; color:white; font-size:19px; background-image:linear-gradient(17deg,#a32fb7,#474778); border-radius:50%; border:3px solid white} @media screen and (max-width:480px){.search-input{ font-size:18px}} </style> <script type='text/javascript'> function myFunction() { var x = document.getElementById("searchbar"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script>

ثانيا إلصق هذا الكود فوق وسم </body> من قالب موقعك

<div id="searchbar"> <ul> <li><a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-times"></i></a></li> </ul> <form action="/search" id="searchform" method="get" role="search"> <input class="search-input" id="s" name="q" placeholder="إبحث في الموقع…" type="text" value=""> <button class="search-icon" id="searchsubmit" type="submit"><i class="fa fa-search"></i></button> </form> </div>

ثالثا هذا الكود هو كود علامة البحث بلون أبيض بحيث إذا نقرت عليه يظهر لك محرك البحث

إلصقه في المكان الذي تريد ظهوره

<a class="fas fa-search" href="javascript:void(0);" onclick="myFunction()"></a>

إذا لم تظهر لك علامة زر البحث فالصق الكود التالي فوق وسم </head> مباشرة

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' rel='stylesheet'/>