Tutorial Pasang Search Box Blog Responsive HTTPS Tutorial Pasang Search Box Blog Responsive HTTPS - The New Minded Tutorial Pasang Search Box Blog Responsive HTTPS Tutorial Pasang Search Box Blog Responsive HTTPS

Isnin, 28 November 2016

Tutorial Pasang Search Box Blog Responsive HTTPS

13 comments

Green Lock HTTPS
Assalamualaikum dan Salam Sejahtera, 

Post entry hari ini saya ingin membuat satu tutorial mengenai cara memasang search box yang responsive terhadap https.

Tutorial ini ada kait rapat dengan post entry lepas iaitu 
Kenapa dengan responsive https ?

Kerana, selepas penukaran daripada http kepada https dilakukan anda perlu membetulkan beberapa mixed content antaranya adalah berpunya daripada gambar dan juga link http yang digunapakai didalam https ni . Banyak la juga faktor yang terjadinya mixed content ni tapi yang selalu terjadi adalah disebabkan oleh gambar yang menggunakan url http..

Apa terjadi jika terdapat mixed content ni ?

Ia akan terjadi lock anda itu tidak green lock dan ia tidak fully secured. Macam dibawah ni.

Sama ada ia mempunyai amaran kuning.. merah.. mahupun hijau disertakan triangle ! gitu.. Ia bermakna anda mempunyai masalah mixed content.. Senang citer kalau la ia tak betul2 green lock means ia ada la tu mixed content.. 

Blog Search
Okay jadi salah satu yang menjadi punca mixed content adalah tempat search box yang berada di dalam blog ini. Sebelum penukaran search box yang baru, saya menggunakan blog search yang disediakan oleh blogger diruangan gadget. Mungkin jika anda menggunakan domain blogspot tidak mempunyai masalah ini, tapi saya yang guna domain sendiri ini mempunyai masalah mixed content dimana search box itu di load url http bukan https.. 

Jadi saya telah jumpa satu solusi dimana masalah mixed content tadi itu dapat diatasi dengan ikuti tutorial dibawah ni. 

Langkah 1

Html/Javascript
 Apa yang perlu anda lakukan adalah pergi ke layout > add gadget > pilih html/javascript > copy & paste code dibawah ini > save

Senang je kan? Tak susah mana pun.. Di bawah ini saya ada sediakan dua jenis search box.. 

Search box 1

<style type="text/css">
#searchbox{background:url(https://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>

Search box 2
<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>

Mudah kan untuk  meletakkan search box ni di blogspot anda.. Selamat mencuba..





If You Enjoyed This, Take 5 Seconds To Share It
SHARE

About Ahmad Hasif


Blogger


Berkongsi Mengenai : Teknik SEO | Info | Tutorial | Freebies |


Untuk sebarang pertanyaan mengenai review atau giveaway boleh emel di:-

[email protected]

13 ulasan :

  1. wah senangnya. terima kasih atas tutorial mudah ini.

    Saya ada satu soalan. memandangkan saya masih baru. hehe.

    bagaimana cara untuk meng - green lock dan ia fully secured? saya punya ada tanda macam huruf i . adakah kerana sebab2 yang telah dinyatakan seperti di atas dan termasuk kerana sy tidak menggunakan domain, dan hosting sendiri? tiada juga http atau https. ni kira masalah besar juga ke? hehhehe maaf banyak tanya

    BalasPadam
    Balasan
    1. jika guna domain blogspot senang je.. pergi setting > basic > https > on.. settle..
      Kalo lepas dh on baru ada mixed content baru la kena cari dkt mana yg problemnye.. ini biasa terjadi kalau guna template bukan dari blogger punya..

      Padam
  2. Ty hasif ilmunya.. Search box ni memang pentingkn ada dlm blog kita..

    BalasPadam
    Balasan
    1. Sama-sama.. Aah mmg penting la juga diblog..mudahkan utk org cari info yg ada diblog ni..

      Padam
  3. Mrs. A belum tukar pun dari HTTP ke HTTPS :-(

    BalasPadam
    Balasan
    1. Tak pe nnti boleh tukar tu.. Tak susah mana pun nk tukarnye..

      Padam
  4. alhamdulillah blogspot takda masalah hehhe

    BalasPadam
  5. kalau guna blogspot ni problem.. hehehe yg mana dh tuka domain kna tgk smula

    BalasPadam
  6. kalau guna blogspot ni problem.. hehehe yg mana dh tuka domain kna tgk smula

    BalasPadam
    Balasan
    1. Aah betul tu nina yg mana dh tukar domain tu kena tgk semula :)

      Padam
  7. Kat blog mai, iklan Jawatan kosong tu tak mesra https:// so lepas comment mana2 entry dia akan hilang sebab http tukar jadi https. Tak tahu lah nk bt cemana dah, maybe kena tukar domain jelah kot.

    BalasPadam
    Balasan
    1. ooo dia tak mesra https la tu iklan tu..
      biasanya iklan tak de https ni kalau blog ada https ia akan jadi hide gitu..

      Padam