Blogger | 在帖子页左下角添加信息窗口的头像式按钮

这个标题真的好长啊，希望能从中理解到这是什么东西( ∩ˇωˇ∩)
#Blogger教程 #博客帖子页 #左下角 #添加头像式 #“作者有话要说” 窗口按钮

 注意：

• 开始前记得备份你现有的博客模板/代码HTML哦。
• 这个窗口你可以自定义的范围也很广，如大头像、小头像、头像的形状、边框粗细、边框颜色、大小、背景颜色、窗口颜色、鼠标提示、关闭按钮等等。
• 点击后，信息页整体会以翻牌( Flip )的动画呈现，而且还翻好多次。
• 小头像可能会晃动( Shake )。
• 精帖 
• 步骤：9
• 费时    8-20     分钟
• 帖子完成度：70%

  Blogger > 主题背景 > 修改HTML

  搜寻( Ctrl键+F键 )“//]]></b:skin>”字眼。

/ / ] ] > < / b : s k i n >

   Highlight 以下框框内的所有代码，并复制( Ctrl键+C键 )，粘贴( Ctrl键+V键 )到“//]]></b:skin>”↑上面。

/** --作者有话想说-- A代码开始 **/ /** --窗外背景-- **/ .idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0; background:rgba(0, 0, 0, 0.85);z-index:999999;display:none} /** --话框信息窗口-- **/ .idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:12%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .idul_message:before{left:50%;margin-left:-20px;} .idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent} /** --左下角小头像-- **/ .profile-idul{background:#FFF; border:0px solid transparent; border-radius:100%; position:fixed; bottom:30px;left:10px; cursor:pointer; width:50px;height:50px;z-index:99999} /** --窗外大头像-- **/ .profile-idul2{background:#fff;border:0px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px} .profile-idul,.profile-idul2{padding:4px} .profile-idul2{left:50%;margin-left:-105px;} /** --窗口关闭按钮-- **/ .close_idul{font-size:40px;color:#fff;position:absolute;top:-28px;right:-30px;cursor:pointer} .close_idul{color:#555;top:-15px;right:0;} } .tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal} @-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} } @keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)} 10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} } .animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} @-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} } @keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} 50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} 100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} } @media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;} <script type='text/javascript'> var protocol=window.location.protocol.replace(/\:/g,''); if(protocol=='https'){ var url=window.location.href.replace('https','http'); window.location.replace(url); } </script> /** --作者有话想说-- A代码结束 **/

- A 代码 -

  再搜寻( Ctrl键+F键 )“ </b:if>”字眼。

< / b : i f >

  Highlight 以下框框内的所有代码，并复制( Ctrl键+C键 )，粘贴( Ctrl键+V键 )到“  </b:if>”↑上面。

<!--作者有话想说 B代码开始--> <script> //<![CDATA[ function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"}; function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"}; //]]> </script> <script> //<![CDATA[ var imgDefer = document.getElementsByTagName("img"); for (var i = 0; i < imgDefer.length; i++) { if (imgDefer[i].getAttribute("data-src")) { imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src")); } } //]]> </script> <!-- 窗外大头像 --> <script style='text/javascript'> //<![CDATA[ function authorshow(data) { for (var i = 0; i < 1; i++) { var entry = data.feed.entry[i]; var avtr = entry.author[0].gd$image.src; document.write('<img width="100" height="100" src="' + avtr + '"/>'); } } //]]> </script> <!--作者有话想说 B代码结束-->
B 代码

  搜寻( Ctrl键+F键 )“<body>”字眼。

<body>

  Highlight 以下框框内的所有代码，并复制( Ctrl键+C键 )，粘贴( Ctrl键+V键 )到第一个的“<body>”↓下面。

<!-- 作者有话想说 C代码开始 --> <!-- 左下角小头像 --> <img alt='' class='profile-idul tada' height='50' onclick='openIdulfitri()' src='你的小头像图片的链接' title='鼠标触碰时出现的字' width='50'/> <div class='idul_layout animated flip' id='id_fitri'> <div class='idul_message'> <h2> 标题1</h2> <p> 标题2 <br/><br/>我是<b>博客名称</b>的作者<b>你的名字</b> : <br/> <b>“内容</b>” </p> <!-- 窗外大头像 --> <img alt='' class='profile-idul2' height='180' src='你的大头像图片的链接' width='200'/> <div class='close_idul' onclick='closeIdulfitri()'> ×</div> </div> </div> <script> <!-- 作者有话想说 C代码结束 -->

C 代码

  编辑方法和自定义就暂时没教学/说明了哦，不过遇见问题可以尝试在此帖下留言。

  保存主题背景，完成。

11月补充：
在“C代码”接上以下代码。

<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

- 说 明 [ 若 有 需 要 才 更 新  ] -

  A 代码 [ 若有需要才更新  ] 

  B 代码 [ 若有需要才更新  ] 

  C 代码 [ 若有需要才更新  ]