2012年2月6日

BLOGGER 文中新增點選 隱藏/顯示 區域

這是被隱藏的範例圖片
[+/-] 顯示/隱藏區塊












使用方法如下圖︰












於範本設計工具>>進階>>新增CSS>>新增下列代碼


.posthidden {display:none}
.postshown {display:inline}


修改HTML>> 搜尋</head> >> 在</head>前貼上Javascript代碼

<script type="text/Javascript"> 
function expandcollapse (postid) { 
   whichpost = document.getElementById(postid); 
   if (whichpost.className=="postshown") { 
      whichpost.className="posthidden"; 
   } 
   else { 
      whichpost.className="postshown"; 
   } 
} 
</script>

之後在編寫文章時使用HTML加入下列代碼,即可隱藏/顯示文章或圖片,
底線黃字部份是可隨使用者修改的,注意id="71"的數字部份,必須相符合!


<blogitemtitle>哈囉妳好嗎</blogitemtitle>
<span class="posthidden" id="71">哈囉我不好</span>
<a href="javascript:expandcollapse('71')">[+/-] 顯示隱藏部份</a>






參考引用︰http://support.google.com/blogger/bin/answer.py?hl=zh-Hant&answer=42214

0 意見:

張貼留言