شرح إضافة محرك بحث جوجل إلى مدونة بلوجر بسهولة

معاينة الإضافة

فيديو الشرح

الاكواد

<style>
    :root{--mainColor : rgb(60 80 195) /* غييره اللون حسب ارادتك */}
    .gsc-control-cse,.gsc-results .gsc-cursor-box .gsc-cursor-current-page,.gsc-results .gsc-cursor-box .gsc-cursor-page,.gsc-input-box,.gsc-webResult.gsc-result,.gsc-results .gsc-imageResult,.gsc-input input{background-color:transparent!important}
    .gsc-search-button-v2,.gsc-search-button-v2:hover,.gsc-search-button-v2:focus{background-color:var(--mainColor)!important}
    .gs-result .gs-image,.gsc-search-button-v2,.gsc-control-cse,input.gsc-input,.gsc-input-box-hover,.gsc-input-box-focus,.gsc-webResult.gsc-result,.gsc-results .gsc-imageResult{border:0!important}
    .gsc-input-box{border-color:#cbd4eb!important}
    .gsst_a,.gs-webResult.gs-result a.gs-title:link,.gcsc-more-maybe-branding-root a,.gcsc-more-maybe-branding-box a,.gcsc-branding a{border-bottom:0!important}
    .gsc-above-wrapper-area{border-color:#cbd4eb!important}
    .gsc-input-box,.gs-result .gs-image{border-radius:5px!important}
    .gs-webResult.gs-result a.gs-title:hover,.gs-webResult.gs-result a.gs-title:link b,.gsc-results .gsc-cursor-box,.gcsc-find-more-on-google,.gsc-cursor-current-page{color:var(--mainColor)!important}
    .gs-webResult div.gs-visibleUrl{color:#5c7099!important}
    .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,.gs-fileFormatType{color:#3a4a68!important}
    .gsc-input{font-size:1rem!important}
    .gs-webResult.gs-result a.gs-title:link,.gs-webResult.gs-result a.gs-title:visited,.gs-webResult.gs-result a.gs-title:visited b,.gs-imageResult a.gs-title:visited,.gs-imageResult a.gs-title:visited b{color:#17294d!important;font-weight:500}
    table.gsc-search-box,table.gsc-input,.gsc-above-wrapper-area-container,form.gsc-search-box,.gsc-search-button-v2{margin:0!important}
    .gs-web-image-box{margin-right:1rem!important}
    table.gsc-search-box td.gsc-input,.gsc-control-cse,.gsc-result-info-container,.gsc-result-info,.gsc-orderby-container,.gsc-orderby-label,td.gsc-search-button,.gsib_b{padding:0!important}
    .gsc-search-button-v2{padding-bottom:9px!important;padding-top:9px!important}
    .gsc-control-cse .gsc-option-menu-container{white-space:nowrap}
    table.gsc-search-box td.gsc-input{width:100%!important}
    .gsc-search-button{display:block;margin-left:1rem!important}
    .gsc-above-wrapper-area{margin:1.5rem 0 1rem;padding:0 0 1rem!important}
    .gsc-search-button path,.gcsc-find-more-on-google path,.gsc-cursor-container-next path{stroke:none!important}
    .gsc-search-button path{fill:#fff!important}
    .gcsc-find-more-on-google path,.gsc-cursor-container-next path{fill:#3a4a68!important}
    .gsc-search-button svg{stroke-width:3px;width:1.5rem;height:1.5rem}
     .gcsc-branding-img-noclear {border: 0 !important}
    .gsc-control-cse table {table-layout: initial!important}
    </style>
    <script type="text/javascript">
        (function() {
          var cx = 'ضع هنا معرف الخاص بك';
          var gcse = document.createElement('script');
          gcse.type = 'text/javascript';
          gcse.async = true;
          gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(gcse, s);
        })();
      </script>
      <div class="gcse-search">جارٍ تحميل نتائج البحث...</div>

رابط تسجيل في الموقع