好久没有发布关于淘宝店铺代码方面的教程文章了，今天来教大家制作“淘宝店铺留言板”。已会的可选择略过，不会的整理好心态，打起精神，艺灵要开课啦！

无论是淘宝店铺留言板还是其它的什么特效代码，只有当你自己真正理解了，才会为你所有！否则，就算你借鉴上百遍，我让你写，你仍不知该从何写起！艺灵也再次啰嗦一次：资源都在那里放着，学与不学是你自己的事情~

在制作店铺留言板之前我们要明白几个问题。
1.为何要制作留言板?
2.需要准备哪些东西呢？
3.小白不会代码也可以学会吗？

问题一的答案自己回答去，艺灵只讲后面2个，因为后面的才是关键！
准备工作：淘宝或天猫店铺一个，(没有店铺测试？光看不练？那你永远都学不会！)
浏览器一个，(推荐使用chrome(谷歌),Ff（火狐）、Opera（欧朋）、360极速、360完全、搜狗、淘宝、ie内核等浏览器，如果用的是“360安全”或“360极速”或“搜狗”等双核浏览器，请切换至“极速模式”。下面以“360完全”为例：
)
留言板背景图片一张，(会做图的自己做图，不会做图的到网上下一个就是了)

好了，现在准备工作已经做完了，好像还差点什么。嗯，缺少代码啊~！是的，下面附上核心代码【精简版】，嫌复制不方便的可以下载压缩包。

<div class="www-yilingsj-com-code" style="width:600px;height:500px;background:url(你的背景图片链接) no-repeat 0 0;">
　<div class="sns-widget" data-comment='{"isAutoHeight":false, "param":{"target_key":"112837831","type_id":"1100035","rec_user_id":"759415648","view":"detail_list","title":"艺灵设计留言版块", "moreurl":"http://shop112837831.taobao.com/" },"paramList":{"view":"list_trunPage"}}' style="width:100%;height:70%;overflow-y:auto;" data-title="艺灵留言版块"></div>
</div>

点此下载→→【代码】淘宝店铺留言板代码.zip　　　

注意上面提供的代码中的颜色变化部位，红色为必改项，灰色为可选修改项。事实上，这只是一个公用模板，只需要修改红色部位即可实现不同店铺的留言板。怎么样，神奇吧！好了，先别神奇了，实现了功能再夸赞也不迟。下面开始教大家修改红色部位的代码，小伙伴们认真看仔细了。

首先，在浏览器中打开自己的店铺，我使用的是chrome。然后在页面空白地方：①右键单击并点击审查元素→→②Ctrl+F搜索单词“keywords”并找到位置→→③复制下一行→→④将代码粘贴进dw或其它可编辑的地方进行相关代码替换(红色必改，灰色可改，背景图片就自己替换链接吧)。请仔细看下图说明。

好了，下面我们来将代码安装到店铺中测试下效果吧。安装到店铺中操作流程：①登录自己的店铺帐号→→②后台新建一测试页面→→③新建一自定义模块，选择“源码”，粘贴代码并保存，发布后预览最终效果。具体操作如下图：

至于留言板的宽高度以及背景替换等小问题请自行解决，这个没有统一的标准。当在测试页面测试满意后，再将代码粘贴到亲需要安装留言板的页面吧！下面附一张艺灵的留言板图：

最后再说一下，上面的是淘宝店铺的留言板制作方法。

2014-12-12　更新

经测试发现上面代码暂不支持天猫店铺。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2014-10-28/216.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。