看到人氣店鋪店招都有搜索框,今天我來分享下具體實(shí)現(xiàn)方法。

1、找到一張自己喜歡的店招圖片,然后打開淘寶頁面,登陸自己的賬戶,點(diǎn)擊“賣家中心”--“圖片空間”--“上傳圖片”就可以將自己的店招上傳到自己的圖片空間了,過程見圖。




2、好,店招圖片已經(jīng)上傳到空間了。打開DW軟件,選擇文件→新建,在彈出的對(duì)話中選擇空白頁→頁面類型:HTML→頁面布局:無→創(chuàng)建,具體看圖。


3、點(diǎn)擊代碼,進(jìn)入代碼編輯狀態(tài),見圖。

4、按crtl+A,按鍵盤上的Delete鍵,將自帶的代碼刪除,然后將下面的代碼復(fù)制粘貼進(jìn)去,見圖。
代碼:
復(fù)制內(nèi)容到剪貼板 - <table background="店招素材鏈接"
-
- width="950" height="120" border="0" cellpadding="0" cellspacing="0">
-
- <tr>
-
- <td> </td>
-
- <td> </td>
-
- <td> </td>
-
- </tr>
-
- </table>



5、其中店招素材鏈接就是第一步上傳到空間的店招圖片鏈接,打開淘寶的圖片空間,雙擊第一步上傳的店招圖片,進(jìn)入大圖狀態(tài),點(diǎn)擊左上角的復(fù)制鏈接,這時(shí)店招的鏈接就復(fù)制下來了。我們回到DW中,將代碼中的 店招素材鏈接 刪除,然后粘貼剛剛復(fù)制的店招鏈接。

6、在DW中,將代碼編輯試圖 切換到 設(shè)計(jì)編輯試圖,用鼠標(biāo)滑動(dòng)表格里的兩個(gè)虛框,將表格中間的一列調(diào)整至空白處。


7、然后在DW中,從 設(shè)計(jì)編輯試圖 切換到 代碼編輯試圖,將全部代碼選中,復(fù)制。打開淘寶店鋪裝修頁面,點(diǎn)擊店招右上角的編輯,在彈出的對(duì)話框中選擇自定義招牌,然后點(diǎn)擊圖中的第二部,切換到源碼編輯,將剛DW中復(fù)制的代碼粘貼進(jìn)來。



8、這時(shí),我們發(fā)現(xiàn)店鋪店招是沒有搜索框字的,別著急,我們接著點(diǎn)擊店招右上角的編輯,不用切換到源碼編輯狀態(tài)了,我們直接在剛剛DW中調(diào)整的虛框中輸入文字,當(dāng)然,需要提前設(shè)計(jì)好字號(hào),字體,顏色等。


9、輸入需要的文字后,按一下ENTER(回車)鍵,然后再次轉(zhuǎn)到源碼編輯下,找到剛輸入的文字代碼,詳細(xì)見圖。在這個(gè)代碼后面復(fù)制下面的搜索源碼,將下面代碼中 您的店鋪鏈接 替換為自己淘寶店鋪鏈接,店鋪鏈接以http://*****.taobao.com為準(zhǔn),點(diǎn)擊保存就可以了:
復(fù)制內(nèi)容到剪貼板 - <form action="您的店鋪鏈接/search.htm?&&&scene=taobao_shop" method="post" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"> <input name="baobei_type" type="hidden" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#000;font-weight:bold;padding-top:0px;"> 店內(nèi)搜索:</span><input name="keyword" style="line-height:16px;width:100px;font-size:12px;" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#000;padding-top:0px;">價(jià)格: </span><input name="lowPrice" style="line-height:16px;width:50px;font-size:12px;" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">-</span> <input name="highPrice" style="line-height:16px;width:50px;font-size:12px;" /> <input style="border-bottom:medium none;border-left:medium none;padding-bottom:1px;background-color:#FF0000;margin:0px; padding-left:10px;padding-right:5px;color:#FFF;font-size:12px;border-top:medium none;border-right:medium none; padding-top:3px;" type="submit" value="搜索" /> </form>

10、不要點(diǎn)擊保存,點(diǎn)擊源碼按鈕,發(fā)現(xiàn)字體是黑色,我們選中黑色字,改為白色。點(diǎn)擊后面紅色框的搜索后面,按回車,調(diào)整位置。就大功告成了。



相關(guān)推薦:
淘寶店鋪公告總是滾動(dòng)怎么設(shè)置成不滾動(dòng)?
手機(jī)淘寶店鋪裝修:添加寶貝焦點(diǎn)圖模塊的技巧
淘寶全屏店招怎么安裝? 淘寶店鋪招牌全屏的設(shè)置方法