Selamat ber ngeblog ria teman-teman blogger, kembali lagi dengan saya yang biasanya berbagi seputar dunia pendidikan, sesekali berbagi seputar dunia coding. Kita tahu bahwa hampir semua template menggunakan tombol media sosial untuk profil blog atau admin supaya mengunjung blog bisa dengan mudah berinteraksi dengan admin melalui media sosial. Namun kenyataannya, pengunjung dari search engine tidak begitu memperhatikan hal tersebut bahkan untuk sharing artikel dan mengklik iklan saja sangatlah jarang.
Waktu search box blog ini masih disimpan dihalaman static, jumlah tayang Search Result Google Custom di halaman static perhari berkisar 100-200. Maka saya berinisiatif untuk menggunakan Search Result Google Custom dengan efek melayang (tidak perlu ke static page) yang pernah di share oleh mas +Adhy Suryadi. Namun search box template kompi flexible menggunakan efek show hide karena ngumpul dengan tombol profil media social, akhirnya saya hapus saja tombol tersebut dan langsung menampilkan Search Result Google Custom tanpa show hide.
Nah bagi anda yang menggunakan template kompi flexible dan ingin mengganti tombol profil media social dengan Search Result Google Custom seperti blog NomIfrod ini, silahkan ikuti tour saya berikut ini:
1. Silahkan hapus kedua css dibawah ini;
#search-box{position:absolute;top:38px;right:0;width:300px;display:none;height:27px;border-right:none;padding:0;margin:0;}
#search-box form{background:#000;padding:10px;position:relative}
#search-box form,#search-form,.search-button{border:none;line-height:27px}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;font-family:Roboto,sans-serif;font-weight:300;margin:0;-moz-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:10px;left:10px;font-size:16px;color:#888;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
.tombol:after,.tombol:before{color:#000;text-shadow:0 1px 0 #999}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}.sos-profil{float:right;margin-top:13px;margin-right:10px}
.sos-profil li{float:left;display:inline-block;margin-right:10px}
.sos-profil a:hover{color:red!important}2. Kemudian ganti dengan kode dibawah ini:
#search-box{width:200px;height:27px;float:right;padding:0;margin:7px 0}
.gsc-results-wrapper-visible{background:#fff;padding:0 0 10px!important;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border:1px solid #ddd!important;width:400px;height:auto;max-height:500px;position:absolute!important;top:100%;right:0;z-index:10000;margin:10px 0 0;overflow:auto}
.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:500!important}
.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}
input.gsc-search-button{margin-top:3px!important;margin-left:0!important}
.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}
#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}a.gsst_a{line-height:1}
.gsc-result .gs-title{height:auto!important;word-wrap:break-word}
.gsc-results-wrapper-visible table.gsc-search-box{position:relative}
.gsc-results-wrapper-visible table{border-collapse:collapse;border-spacing:0}
.gsc-results-wrapper-visible table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
.gsc-results-wrapper-visible table.gsc-search-box td.gsc-input{padding-right:5px!important}
.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:80px!important}
.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}
.gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important;transition:all .4s ease-in-out}
.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}
.gs-result .gs-snippet{font-weight:400;word-wrap:break-word}
.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{color:#000!important;transition:all .4s ease-in-out}
.gsc-orderby-container{padding-right:10px!important}
.gsst_a .gscb_a{font-family:Roboto,Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;color:#555!important}
@media screen and (max-width:414px){
.gsc-results-wrapper-visible{width:100%!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
}3. Selanjutnya silahkan hapus kode untuk media sosial berikut ini;
<div class='sos-profil' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<ul>
<li><a href='https://www.facebook.com/your-username' itemprop='sameAs' target='_blank' title='Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
<li><a href='https://twitter.com/your-username' itemprop='sameAs' target='_blank' title='Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
<li><a href='https://www.google.com/your-username' itemprop='sameAs' target='_blank' title='Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
<li><a href='id.linkedin.com/in/your-username' itemprop='sameAs' target='_blank' title='LinkedIn'><i class='fa fa-linkedin fa-lg'/></a></li>
<li><a href='//www.youtube.com/c/your-username' itemprop='sameAs' target='_blank' title='Youtube'><i class='fa fa-youtube fa-lg'/></a></li>
</ul>
<div class='clear'/>
</div>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WebSite'><meta expr:content='data:blog.homepageUrl' itemprop='url'/><form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get'>
<meta content='/search?q={q}' itemprop='target'/>
<input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text'/>
<span class='search-button'><i class='fa fa-search'/></span>
</form></div>
<div class='clear'/>
</div>lalu ganti dengan kode dibawah ini
<div id='search-box'>
<div id='gcsengine'/>
<div id='gcsresults'/>
</div>4. Terakhir, silahkan simpan kode dibawah ini tepat diatas
</body>
<script type='text/javascript'>
//<![CDATA[
var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="xxxxxxxxxxxx",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}();
function myFunction() {
document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>";
}myFunction();
//]]>
</script>Silahkan ganti yang saya tandai dengan ID Search Result blog anda. Untuk mendapatkan ID Search Result supaya bisa tampil seperti blog ini, silahkan anda ikuti tutornya di
https://www.kompiajaib.com/2016/04/membuat-search-result-google-custom.html
Selesai dan selamat mencoba ...
