Weebly网站的推荐滑块小部件
推荐可提高您的 Weebly建站网站的可靠性，并增加用户购买您网站上提供的产品的信心。 尽管推荐可以是您网站上的单独页面，但小部件将帮助您将推荐插入任何您想要的位置，并带有指向单独页面的链接。 在本文中，我们将解释如何为 Weebly 网站创建推荐滑块小部件。
Weebly建站下面是 CSS 推荐滑块的外观，我们将详细讨论如何创建此滑块。 示例中显示了三张幻灯片，用户可以单击底部导航栏查看每张幻灯片的内容。
推荐：Weebly定价计划和功能比较
推荐滑块的特点
- 滑块由三张幻灯片组成，单击选项卡时会旋转。
- 突出显示的选项卡显示当前滑块。
- 您可以根据需要自定义颜色并链接到任何页面
您需要三个图像（将在 HTML 代码中调整为特定大小）和推荐内容来创建此滑块。
该小部件包含两部分——CSS 和 HTML 代码。 如果您想将推荐小部件添加到单个页面，请在“页面 > 选择页面 > SEO 设置 > 标题代码“ 部分。 如果要在多个页面上添加，请在“main.less“ 在下面 ”主题 > 编辑 HTML / CSS > 样式“ 部分。
<style type="text/css">
*{
box-sizing:border-box;
}
.container_testimonial{
width:500px;
min-height:375px;
margin:0 auto;
position:relative;
padding-bottom:30px;
overflow:hidden;
background-color: #F0DCDC;
}
input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
label{
display:block;
width:32%;
border: 4px solid white;
position:absolute;
bottom:5px;
cursor: pointer;
transition: border-color 0.3s linear;
}
label.second{
left:34%;
}
label.third{
left:68%;
}
blockquote{
margin:0;
padding:30px;
width:500px;
background-color: #DB532B;
color:white;
box-shadow: 0 5px 2px rgba(0,0,0,0.1);
position:relative;
transition: background-color 0.6s linear;
border-left: 0px solid #ddd !important;
}
blockquote::before {
content: none !important;
}
blockquote:after {
content: " ";
height: 0;
width: 0;
position: absolute;
top: 100%;
border: solid transparent;
border-top-color: #DA532B;
border-left-color:#DA532B;
border-width: 10px;
left: 10%;
}
#second:checked ~ .two blockquote {
background-color:purple;
}
.two blockquote:after{
border: solid transparent;
border-top-color: purple;
border-left-color:purple;
border-width: 10px;
}
#third:checked ~ .three blockquote{
background-color:#54885F;
}
.three blockquote:after{
border: solid transparent;
border-top-color: #54885F;
border-left-color: #54885F;
border-width: 10px;
}
.quotes{
position:absolute;
color:rgba(255,255,255,0.5);
font-size:5em;
}
.leftq{
left:-5px;
}
.rightq{
right:5px;
}
img{
float:left;
margin-right: 20px;
}
.slide{
position:absolute;
left:-100%;
opacity:0;
transition: all 0.6s ease-in;
}
#first:checked ~ label.first {
border-width:6px;
border-color:#DB532B;
}
#second:checked ~ label.second {
border-width:6px; border-color:purple;
}
#third:checked ~ label.third {
border:6px solid #54885F;
}
#first:checked ~ div.one {
left:0;
opacity:1;
}
#second:checked ~ div.two {
left:0;
opacity:1;
}
#third:checked ~ div.three {
left:0;
opacity:1;
}
#content h2 {
margin: 10px !important;
}
</style>小部件的 HTML 代码
Weebly建站拖放一个“嵌入代码” 元素并将下面的代码粘贴到里面。 Weebly建站使用您自己的修改虚拟文本和图像 URL。 图片可以上传到“主题 > 编辑 HTML / CSS > 资产 > 上传文件…” 部分和上传图片的 URL 应该是这样的：“http://yoursitename.com/files/theme/image-name.png“
<div class="container_testimonial"> <input type="radio" name="nav" id="first" checked/> <input type="radio" name="nav" id="second" /> <input type="radio" name="nav" id="third" /> <label for="first" class="first"></label> <label for="second" class="second"></label> <label for="third" class="third"></label> <div class="one slide"> <blockquote> <span class="leftq quotes">“</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi... <span class="rightq quotes">„ </span> </blockquote> <img src="https://img.webnots.com/2015/08/Testimonial1.jpg" width="170" height="130" /> <h2>Christina Kruger</h2> <h3>Executive Director</h3> <h4>Web Design Studio</h4> </div> <div class="two slide"> <blockquote> <span class="leftq quotes">“</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation... <a href="#"> read more</a><span class="rightq quotes">„ </span> </blockquote> <img src="https://img.webnots.com/2015/08/Testimonial2.jpg" width="170" height="130" /> <h2>Jenny Anderson</h2> <h4>Marketing Manager</h4> <h6>Web Design Studio</h6> </div> <div class="three slide"> <blockquote> <span class="quotes leftq"> “</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi... <span class="rightq quotes">„ </span> </blockquote> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width="170" height="130" /> <h2>Robert Bruce</h2> <h4>Founder & CEO</h4> <h6>Web Design Studio</h6> </div> </div>
要点
在添加推荐之前，请考虑以下几点：
- 仅在需要时添加推荐。
- 如演示中所示，使用真实凭据并避免使用虚拟内容。
- 请勿使用未知图片。
