17Blogger网页架构设计-如何给网站创建一个联系我们页面

arsncao 七月 06, 2023

联系我们页面是一个网站的必要元素，他方便读者联系网站博主，我的这个网站也用上了这个功能，非常的方便有效的，今天就把他分享给大家。




本文索引


第 1 步 - 谈谈我的程序由来


我们现在要一个读者方便联系我们的表单，其实是非常的简单，BLOGGER已经为我们建好了小部件，加入进来就可以了，既可靠又稳定，我们大可不必去再开发一个出来，真要从头开发一个出来，还并不是一件轻松的事。今天，我要利用Blogger的现成的代码，稍作一点改动，来制成自己的联系表单页面。我们自己不用写一行代码，下面跟着我实操。



第 2 步 - 在布局页面的侧边栏加入小部件


在Blogger里创建小部件：先来到布局页面，点击任意一个加号创建小部件，然后在出来的提示栏里，选择联系表单即可。如下图所示：



第 3 步 - 隐藏小部件（这步很重要）


上一步我们添加的联系小部件会在我们添加的位置显示出来，但是，我们要做一个联系我们的页面，所以这里显示的联系我们表单就显得有些多余，重复的界面和功能总显得有些空洞无物，所以，这一步，我们就用几句代码将这里的联系我们表单隐藏起来，就是复制下面的代码。

<style>
#ContactForm1{display:none;}
</style>

以上的代码必须放在<head>和</head>之间，这一点很重要，网上有很多将这个知识点的，但就是没有讲清楚这一点，大家特别留意一下。





第 4 步 - 开启联系我们的空页面


这一步我们就去创建一个新页面，标题就是“联系我们：”，具体步骤是
1、 来到Blogger 管理面板并向下滚动点击选中“页面”。
2、 再点击上面的“新建页面”就进入到新页面的编辑界面了



第 5 步 - 复制我的 CSS 文本到联系我们页面


这一步我们就去创建一个新页面，标题就是“联系我们：”，具体步骤是
1、在上一步的新页面的编辑界面继续操作
2、单击编辑（铅笔符号）以切换到 HTML 模式。
3、在标题栏输入“联系我们：”
4、把下面的代码粘贴上并发布。

<div class="contact-form-widget">
<form name="contact-form">
<div class="fm_name">
您的称呼(可以是昵称):
<input class="contact-form-name" id="ContactForm2_contact-form-name" name="name" size="30" type="text" value=""/>
</div>
<div class="fm_email">
您的电子邮箱地址 *:
<input class="contact-form-email" id="ContactForm2_contact-form-email" name="email" size="30" type="text" value=""/>
</div>
<div style="clear:both"></div>
<div class="fm_message">
留言信息 *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm2_contact-form-email-message" name="email-message" rows="5" ></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="发送"/>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>
</div>
</div>
</form>
</div>



油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论