"Welcome 喵子屋"

©2019/7月份

我是喵子屋的作者GY



“网站不再繁琐更新,
之前低调发布的帖子,请到目录搜寻。作者的分享是免费的,无收入效应。

×

『BLOGGER美化』隐藏/显示按钮 帖子里的内容


 按了按钮,内容就会显示出来。像喵酱从抽屉钻出来((感觉真好
 内容可以是一切东西,如图片、文字、影片和链接等等。
 例子:



-----------------------------------------------------------------------------------------
新帖子>转换"HTML",如下图


 HIGHLIGHT框内的代码,复制CTRL+C。
p.s 代码框可以按着右下角的//拉大,方便复制。


 粘贴CTRL+V在“HTML”帖子里面(你要放在的地方)。

 把代码中“点我”换成要在按钮BUTTON显示的字
和“内容会躲喵喵”换成你要它按了后显示的内容代码/文字

 预览,检查看。

 没问题の话,发布。



ri22.gif (20×20) 除了文字,可以把图片、链接、内容的代码替换“内容会躲喵喵”。
ri22.gif (20×20) 美化编辑
ri22.gif (20×20)【】= 意思/解释
ri22.gif (20×20) 颜色代码点这里arows7.gif (20×20)


 如有错误请告知。
<center>【帖子中间】<div id="spoiler">
<div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" style="-moz-border-radius: 8px【圆角弧度】; background: #ffffff【按钮背景的颜色】; border-radius: 8px【圆角弧度】; border: 2px【边框厚度】 dashed【边框的种类】 #F5A9A9【边框的颜色】; box-shadow: 2px 2px 2px【影子面积调整】 #F5A9A9【影子颜色】; color: #f6ced8【框内的文字颜色】; padding: 0px【高度】; width: 90px【宽度】;" type="button" value="点我【按钮内的文字】" /><br /><div id="show" style="background-color: transparent; background-repeat: repeat; border-width: 0px; display: none; margin: 0px; padding: 10px; width: 90%;"><div style="text-align: center;">内容会躲喵喵【要隐藏/显示的内容】</div></div></div></div></center>【帖子中间】
EXAMPLE(SAMPLES)



『BLOGGER美化』隐藏/显示按钮 帖子里的内容 『BLOGGER美化』隐藏/显示按钮 帖子里的内容 Reviewed by yun wuii on 3.11.14 Rating: 5

没有评论:

Thanks your comments(●′ω`●)

top navigation

Blogger 提供支持.