如何在Blogger的編輯模板HTML選項中添加此代碼？

我正在使用Blogger提供的動態視圖模板作爲我的博客http://www.blogmytrips.com 最近我編寫了下面的代碼來爲我的博客創建一個很酷的「關注我們」選項。如何在Blogger的編輯模板HTML選項中添加此代碼？

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     #hide_show_container 
     { 
      background-color: #606c88; 
     } 

     #hide_show 
     { 
      width:100%; 
      height:15px;     
      font-size:12px;font-family:arial, helvetica, sans-serif; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; 
      background-color: #606c88; background-image: -webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b)); 
      background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b); 
      background-image: -moz-linear-gradient(top, #606c88, #3f4c6b); 
      background-image: -ms-linear-gradient(top, #606c88, #3f4c6b); 
      background-image: -o-linear-gradient(top, #606c88, #3f4c6b); 
      background-image: linear-gradient(to bottom, #606c88, #3f4c6b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b); 
     } 

     #hide_show:hover 
     {   
      color:#ffc92b; 
      cursor:pointer; 
     } 

     #bmt_icons 
     { 
      height:145px; 
      width:43px; 
      position:fixed; 
      right:0px; 
      bottom:0px; 
      padding-bottom:3px; 
      border-style:groove; 
      border-top-left-radius:5px;    
      border-top-width:3px; 
      border-left-width:3px; 
      border-right-width:0px; 
      border-bottom-width:0px; 
      border-color:#4863A0; 
      text-align:center; 
     } 

     .icon 
     { 
      padding:0px; 
      margin:0px; 
      -webkit-transition: all 0.5s ease; 
       -moz-transition: all 0.5s ease; 
       -o-transition: all 0.5s ease; 
       -ms-transition: all 0.5s ease; 
       transition: all 0.5s ease; 
      text-align:center; 
     } 

     .icon:hover 
     { 
      -webkit-transform: rotate(-10deg); 
       -moz-transform: rotate(-10deg); 
       -o-transform: rotate(-10deg); 
       -ms-transform: rotate(-10deg); 
       transform: rotate(-10deg); 
     } 
     .icon_href 
     { 
      border-style:none; 
      text-decoration:none; 
     } 
    </style> 
    </head> 

     <body> 
    <div id="bmt_icons"> 
     <div id="hide_show_container"> 
     <a id="hide_show" onclick="if(this.innerHTML=='Hide'){this.innerHTML='Show';document.getElementById('bmt_icons').style.height='14px';}else{{this.innerHTML='Hide';document.getElementById('bmt_icons').style.height='145px';}}">Hide</a> 
     </div>  
     <div class="icon" style="padding-top:3px;"><a class="icon_href" href="https://www.facebook.com/blogmytrips" target="_blank"><img src="https://lh3.googleusercontent.com/-4hBJ6DEE5sQ/UhpA9lC-8UI/AAAAAAAAGWs/f4i-axHAyF4/s800/facebook.png"></a></div> 
     <div class="icon"><a class="icon_href" href="https://twitter.com/blogmytrips" target="_blank"><img src="https://lh6.googleusercontent.com/-0TqQpCuEcDw/UhpA9vQ1FuI/AAAAAAAAGW0/ObSxdoN5FtA/s800/twitter.png"></a></div> 
     <div class="icon"><a class="icon_href" href=""><img src="https://lh5.googleusercontent.com/-Z5WwJgBzkvI/UhpA9iGQp5I/AAAAAAAAGWw/0iPABKy4UWk/s800/googlePlus.png"></a></div> 
    </div> 
     </body> 
    </html>

當我試圖將代碼添加到模板的HTML代碼中時，我添加的部分顯示出來。但是，一旦博客的模板加載我添加的部分不再被瀏覽器顯示。你能給我任何關於如何在我的博客模板的HTML中添加HTML代碼的想法嗎？

來源

2013-08-26 Abhay Joshi

檢查此article，我想它會幫助你。

如果您正在使用動態視圖，請檢查此article關於在動態視圖中編輯html。

來源

2013-08-26 11:53:21

感謝您分享此鏈接。我已經嘗試過您剛剛分享的鏈接中提到的解決方案。它不起作用，因爲我使用「動態視圖」作爲我的博客的默認模板。 :( –

我已經添加了另一篇文章，我希望它可以幫助你 –

不幸的是，第二篇文章並不是我現在需要解決的問題，我知道如何編輯Blogger模板的HTML。知道是如何在現有模板中添加我的HTML代碼 –

如何在Blogger的編輯模板HTML選項中添加此代碼？

回答

相關問題