Selamat ber ngeblog ria teman-teman blogger, kembali lagi dengan aku yang biasanya mengembangkan seputar dunia pendidikan, sesekali mengembangkan seputar dunia coding. Kita tahu bahwa hampir semua template memakai tombol media umum untuk profil blog atau admin biar mengunjung blog dapat dengan gampang 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 aku berinisiatif untuk memakai 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 memakai efek show hide alasannya ialah ngumpul dengan tombol profil media social, kesannya aku hapus saja tombol tersebut dan pribadi menampilkan Search Result Google Custom tanpa show hide.
Nah bagi anda yang memakai template kompi flexible dan ingin mengganti tombol profil media social dengan Search Result Google Custom menyerupai blog NomIfrod ini, silahkan ikuti tour aku 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 instruksi 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 instruksi untuk media umum 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>kemudian ganti dengan instruksi dibawah ini
<div id='search-box'>
<div id='gcsengine'/>
<div id='gcsresults'/>
</div>4. Terakhir, silahkan simpan instruksi dibawah ini sempurna 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 aku tandai dengan ID Search Result blog anda. Untuk mendapat ID Search Result biar dapat tampil menyerupai blog ini, silahkan anda ikuti tutornya di
/search?q=membuat-search-result-google-custom
Selesai dan selamat mencoba ...
No comments:
Post a Comment