淘宝店招怎么增加自定义搜索栏

 时间:2026-02-13 23:29:30

1、首先还是准备好图片,photo中设计好,店招图片(950*120或950*150),搜索图片,并将搜索图片切片分为搜索框和搜索按钮,搜索框大小根据设计可以自定。

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

2、将店招图片,搜索框图片,搜索按钮图片上传到店铺图片空间中,并复制粘贴保存好图片地址。

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

3、打开,Macromedia Dreamweaver 8,新建HTML文档,菜单栏点击插入—图像,在URL处粘贴店招图片,注意图片地址如果是https://的需要去掉s,改为http://,否则图片打不开。

淘宝店招怎么增加自定义搜索栏

4、<div class="most-footer footer-more-trigger" style="width:auto;border:none 0;padding:0;width:950px;height:150px;border:none;padding:0;top:auto;left:auto;background-color:transparent;">

                   <div class="most-footer footer-more-trigger" style="width:auto;border:none 0;padding:0;width:950px;height:150px;left:auto;top:auto;border:none;padding:0;overflow:hidden;background-color:transparent;">

                            <div class="most-footer footer-more-trigger" style="width:auto;border:none 0;padding:0;height:150px;width:950px;top:auto;left:auto;background-color:transparent;">

                                     <div style="background-color:transparent;background-image: url(此处插入店招链接在括号内);background-repeat:no-repeat;height:150px;width:950px;position: relative;">

                                        <div class="most-footer footer-more-trigger" style="border:0;padding:0;background-color:transparent;white-space:nowrap;color:#ffffff;left:202px;top:93px;height:23px(此处为搜索框位置,可根据实际需要调整,括号内为说明,连括号删除);width:auto;z-index:2;">

                                                        <form action="//shop14259648(此处改为自己店铺名称,即淘宝首页,括号内内容说明,连括号删除).taobao.com/search.htm" method="post" target="_blank" style="padding:0px;margin:0px;">

                                                                  <input name="keyword" value="" style="float:left;line-height:23px;font-size:12px;width:102px;height:23px;background:url(此处插入搜索框图片链接括号内) no-repeat left top;border:none;" /><input type="submit" value="搜索" style="float:left;background:url(此处插入搜索按钮图片链接在括号内) no-repeat left top;width:22px;height:23px;cursor:pointer;border:none;text-indent:999px;overflow:hidden;" />

                                                        </form>

                                        </div>

                                     </div>

                            </div>

                   </div>

         </div>

</div>

淘宝店招怎么增加自定义搜索栏

5、插入上述链接后,Macromedia Dreamweaver 8内生成格式为下图,跟实际的效果不是很一致,不过没关系,复制所有代码。

淘宝店招怎么增加自定义搜索栏

6、到淘宝店铺装修,店招编辑处选择自定义招牌,点击源码按钮,在输入框中粘贴代码,粘贴后再点击一下源码按钮,生成如下图片,点击保存。

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

淘宝店招怎么增加自定义搜索栏

7、保存后,发布,就可以看到店招内出现搜索框了。之后可根据需要编辑代码调整搜索框的位置。

淘宝店招怎么增加自定义搜索栏

  • ps怎么改变图层的大小?
  • 如何用PS抠山羊?
  • PS制作砖形效果背景图
  • 在PS中如何制作立体的图片
  • 如何用ps将人像制作成手绘效果?
  • 热门搜索
    如何减肥最快 我的读书生活作文 npc是什么意思 服装设计说明怎么写 电视剧假如生活欺骗了你 1992年属猴是什么命 佰草集新七白怎么样 如何清理手机垃圾 刺猬怎么杀 上海链家地产怎么样