如何在文章中加入 hide/extend 以及 Peek-a-boo comment 功能(修正版)
在blogger hack 中提到的hide/extend 有一些缺點,用chublogga這篇的教學好的多了,和peek-a-boo完全不相衝(我不確定blogger那個版本會不會有問題 不過現在介紹這個效果比較讚)
其實兩個功能都牽涉到三個部分第一是css內的宣告 第二是<body>中間的java script ,第三就是修改網頁內容中的顯示
Css內的宣告 裡面結構大概是
<head>
<style>
#header{ }
…….
</style>
<head>
在style段落中間 放入
.fullpost {
<MainOrArchivePage>
display: none;
</MainOrArchivePage>
<ItemPage>
display: block;
</ItemPage>
}
/* hide/extend code1 */
.commenthidden {display:none}
.commentshown {display:inline}
/* peek-a-boo code1 */
接下來是java script的部分
在head段落 (不要放在style裡)
放入
<script type="text/javascript" language="JavaScript">
function showMore(postId, postLink)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var fullPostElement = null;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j <postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
fullPostElement = postElement.childNodes.item(j);
break;
}
}
if (fullPostElement)
{
// show
if (postLink != 0)
{
fullPostElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
// hide
else
{
fullPostElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
return false;
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
function initShowLink (postId)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var foundFullPostElement = 0;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j <postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
foundFullPostElement = 1;
break;
}
}
if (foundFullPostElement == 1)
{
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
else
{
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "none";
}
}
}
}
</script>
/* show hide code 2 */
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>
/* peek-a-boo code2 */
第三 修改網頁顯示內容
先找<blogger>段落
這一段寫的包括 文章的標題 文章的內容 到文章之後的comment
文章標題不用管 是寫在<blogitem title>段落中
接下來會看到<blogitembody>
原始的設定應該是類似這樣
<div class="post-body">
< $BlogItemBody$>
</div>
外面還有可能再加一層div class用來設定字形之類的
把這個段落改成
<div class="post-body" id="postbody<$BlogItemNumber$>">
<$BlogItemBody$>
</div>
再加上
<MainOrArchivePage>
<div style="{display:block;}" id="showlink<$BlogItemNumber$>"><a href="<$BlogItemPermalinkURL$>" onclick="showMore('<$BlogItemNumber$>', '<$BlogItemPermalinkURL$>');return false;">expand post</a></div>
<div style="{display:none;}" id="hidelink<$BlogItemNumber$>"><a href="#" onclick="showMore('<$BlogItemNumber$>','');return false;">collapse post</a></div>
<script type="text/javascript" language="JavaScript">initShowLink('<$BlogItemNumber$>');</script>
</MainOrArchivePage>
這樣就完成文章show/hide的功能了 還有最後一小步放在最後講
繼續看<blogitembody>之後 就是comment的部分
找出<BlogItemCommentsEnabled>的部分
外面會包一層<MainArchivePage>
把<MainArchivePage>和</MainArchivePage>兩行指令刪掉
把<BlogItemBody>段落改成如下面這樣
<BlogItemCommentsEnabled>
<a href="javascript:togglecomments('c<$BlogItemNumber$>')">
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
再往下 找到<ItemPage>段落 裡面包著一段 <BlogItemCommentsEnabled>
把<item>和</item>兩指令行刪去
在<BlogItemCommentsEnabled>前加入一段指令 讓他看起來像下面這樣
<MainOrArchivePage>
<span class="commenthidden" id="c<$BlogItemNumber$>">
</MainOrArchivePage>
<ItemPage>
<span class="commentshown" id="c<$BlogItemNumber$>">
</ItemPage>
<BlogItemCommentsEnabled>
[ ... 這中間有一段code, 別管它 ... ]
</BlogItemCommentsEnabled>
</span> /* 不要忘了這行 */
這樣就完成了 peek-a-boo的功能了
最後 第四步 去blog設定裡的Format 最下面的template
貼上
<div class="shortpost">
Short post here
</div>
<div class="fullpost">
Extended post here
</div>
之後在貼新文章的這一段code就會自動出現在編輯文章的格子裡
把你要顯示的部分文章放在shortpost段落中
其他的部分放在fullpost段落
這樣就全部完成了
其實兩個功能都牽涉到三個部分第一是css內的宣告 第二是<body>中間的java script ,第三就是修改網頁內容中的顯示
Css內的宣告 裡面結構大概是
<head>
<style>
#header{ }
…….
</style>
<head>
在style段落中間 放入
.fullpost {
<MainOrArchivePage>
display: none;
</MainOrArchivePage>
<ItemPage>
display: block;
</ItemPage>
}
/* hide/extend code1 */
.commenthidden {display:none}
.commentshown {display:inline}
/* peek-a-boo code1 */
接下來是java script的部分
在head段落 (不要放在style裡)
放入
<script type="text/javascript" language="JavaScript">
function showMore(postId, postLink)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var fullPostElement = null;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j <postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
fullPostElement = postElement.childNodes.item(j);
break;
}
}
if (fullPostElement)
{
// show
if (postLink != 0)
{
fullPostElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
// hide
else
{
fullPostElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
return false;
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
else
{
location.href = postLink;
return true;
}
}
function initShowLink (postId)
{
postBodyId = "postbody" + postId;
showExtLink = "showlink" + postId;
hideExtLink = "hidelink" + postId;
if (document.getElementById)
{
var postElement = document.getElementById(postBodyId);
var foundFullPostElement = 0;
var showExtLinkElement = document.getElementById(showExtLink);
var hideExtLinkElement = document.getElementById(hideExtLink);
// find fullpost div
if (postElement)
{
for (var j = 0; j <postElement.childNodes.length; j++)
{
if (postElement.childNodes.item(j).className == "fullpost")
{
foundFullPostElement = 1;
break;
}
}
if (foundFullPostElement == 1)
{
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
}
else
{
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "none";
}
}
}
}
</script>
/* show hide code 2 */
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>
/* peek-a-boo code2 */
第三 修改網頁顯示內容
先找<blogger>段落
這一段寫的包括 文章的標題 文章的內容 到文章之後的comment
文章標題不用管 是寫在<blogitem title>段落中
接下來會看到<blogitembody>
原始的設定應該是類似這樣
<div class="post-body">
< $BlogItemBody$>
</div>
外面還有可能再加一層div class用來設定字形之類的
把這個段落改成
<div class="post-body" id="postbody<$BlogItemNumber$>">
<$BlogItemBody$>
</div>
再加上
<MainOrArchivePage>
<div style="{display:block;}" id="showlink<$BlogItemNumber$>"><a href="<$BlogItemPermalinkURL$>" onclick="showMore('<$BlogItemNumber$>', '<$BlogItemPermalinkURL$>');return false;">expand post</a></div>
<div style="{display:none;}" id="hidelink<$BlogItemNumber$>"><a href="#" onclick="showMore('<$BlogItemNumber$>','');return false;">collapse post</a></div>
<script type="text/javascript" language="JavaScript">initShowLink('<$BlogItemNumber$>');</script>
</MainOrArchivePage>
這樣就完成文章show/hide的功能了 還有最後一小步放在最後講
繼續看<blogitembody>之後 就是comment的部分
找出<BlogItemCommentsEnabled>的部分
外面會包一層<MainArchivePage>
把<MainArchivePage>和</MainArchivePage>兩行指令刪掉
把<BlogItemBody>段落改成如下面這樣
<BlogItemCommentsEnabled>
<a href="javascript:togglecomments('c<$BlogItemNumber$>')">
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
再往下 找到<ItemPage>段落 裡面包著一段 <BlogItemCommentsEnabled>
把<item>和</item>兩指令行刪去
在<BlogItemCommentsEnabled>前加入一段指令 讓他看起來像下面這樣
<MainOrArchivePage>
<span class="commenthidden" id="c<$BlogItemNumber$>">
</MainOrArchivePage>
<ItemPage>
<span class="commentshown" id="c<$BlogItemNumber$>">
</ItemPage>
<BlogItemCommentsEnabled>
[ ... 這中間有一段code, 別管它 ... ]
</BlogItemCommentsEnabled>
</span> /* 不要忘了這行 */
這樣就完成了 peek-a-boo的功能了
最後 第四步 去blog設定裡的Format 最下面的template
貼上
<div class="shortpost">
Short post here
</div>
<div class="fullpost">
Extended post here
</div>
之後在貼新文章的這一段code就會自動出現在編輯文章的格子裡
把你要顯示的部分文章放在shortpost段落中
其他的部分放在fullpost段落
這樣就全部完成了







19 Comments:
��l�оǺ�X�۩�
peek a boo�о�show hide �о�
vio �ڷQ�ݤ@�U �ڰ��� hide/extend ���e�T�ӨB�J���� ��F�ĥ|�ӨB�J �b Settings �̪� Formatting --> Post Template-->��W�A���� div class="shortpost".. �i�O�ګ��x�s���ᥦ���M���"�z�� HTML ���Q����: Tag is not allowed: ��div class="shortpost"��" �o�s���Ӧp��ѨM��?
blogspot �̷s�㸦���A��:
(1)�峹�W�Y�٦���L�峹�s��
http://mentoliptus.blogspot.com/#110759311026526857
(2)blogspot ����٥i�H�o�˰�
http://help.blogger.com/bin/answer.py?answer=939&query=extended&topic=0&type=f
���~�L�Ӧ~�Ӥw blogspot �S�h�F����h���s�F���!! �u�O�h���Ǥ���!!
�A�� hide/extend ���{����m�ڬݧA����l�ɭ��M�A�令�@�˪���m��m �u�Ochublogga ���� step 4 - Add the show/hide links �A�S���[��峹�̭� �O�_�N��Χ�o�ӨB�J�O? �ڤW�@�q�d�������D�ڤ]�٨S�ѨM ??? ���D�Ӧh�F...
���Ө�� �n�令�b�γ�
�������
�t�~�A���ĥ|�ӨB�J
��� �ں|���F��
���°� ���ɶ��b�ﱼ��
�٦��� blog�\��ڬOı�o
��δN�i�H�F��
���M�˱o�ܽ���N���hblog����N�F
���@�I�ܭ��n�ѤF
�N�O�n���Y�^�峹���ɭ�
�^��峹���Y
�n�b
if (fullPostElement)
{
// show
if (postLink != 0)
{
fullPostElement.style.display = "block";
showExtLinkElement.style.display = "none";
hideExtLinkElement.style.display = "block";
}
// hide
else
{
fullPostElement.style.display = "none";
showExtLinkElement.style.display = "block";
hideExtLinkElement.style.display = "none";
location.href = '#'+postId; <----�[�o�@�� }
return false;
}
�ڷӧA���N��A�[�J�峹+/-���ĥ|�ӨB�J
�ӥB�]�b Settings �̪� Formatting --> Post Template-->�o�̭��]��W�b��(�o�@���S���D�F) �Ӥ峹�]���]�X�o�@�q�����X�� �i�O���O"�����������]�X�ӤF" �M��ڧ���ܪ����$峹��bshortpost�q���� ��L�����)�bfullpost�q���� �i�O�峹�èS���]�X hide/extend ���\�� �ӥB���s�P�W���������@�_�]�X�ӤF vio ���M�ڱH���A�ڪ������ �A0�ڬݤ@�U�n��??
�ڥ[�F�A�W���d�������q location.href = '#'+postId; ���G�٬O�@�� �S���ܤƭC!!
�ڨ쩳�O���̰���F��?? �W�o!!
3�ӬO�y�k���̿�F
�A�p�G�Ocopy���ӭ�Ӫ��оǺ����
�n�`�N�L< &...>�e�A���᭱���|���@�Ӫť� �����n�⨺�Ӫťծ��ܦ�<$...>
�٦� �N�O���n�ѰO�{���X�e�᪺��3
���O��/div��,,,��/span�� �٦�java�̪� �]�ڥΥ��βŸ��O���i���Χ�� ���^
�j�p�A�����n�n�n�`�N �٦�
��Ѫ��覡���ɭԤ]�|�X���D
���Ǧa���< !�[���>�|�����D
�άO��/* */���ɭԤ]�| �ܩǧڤ]�����D��ԣ
�t�~ �[�i�h���@��᭱���j�A����
�|���|�O�|�F�H�H
�ϥ��N�O�»y�kbug��a �[�o
���� �g�ӱоǤ���ժ�
�`�A���ުP��
�]���^�ڬO�����ƻs�A������
�]���^��Ѫ��a��/* */�ڤw�g�����������F�@�ӥB�ڤ]�ˬd�F���Υb��
�]���^location.href = '#'+postId;���@��᭱���j�A���ڤ]�[�F
�]���^�ڦb�Q���i��O�A������/div��,,,��/span�֩I3�����D�@���L�o�譱�ڤ]��4�@ vio �@�]���A�S���� E-mail �����A�褣��K�N�A���o�ӡ@hide/extend�@������{���ǵ��ڡ@��ڰѦҤ@�U�A�����k�@�ڪ��{�פӮt�@�ѬO�o�˳·ЧA�]�u�O�L�N���h�@��U�@��U�I�I
�ڪ��H�c serabande@seed.net.tw
�A�g�H���ڧa
�ڧ�"���"template�H���A
�٦��� ��M�ڹ�java�{���X���Ӽ�
��O����y�k�� �q���N�O��< XX>< /XX>�ӼХ� �̭��i�H���q_��
���O< A>< B> < /B>< /A>
�ҥH�� �A�g�@�Ӭq���y�@�w�z�n�ˬd
���S����< />��L�]��
�p�G�ѰO����
�ܮe��y�k�W����~
��p��
< A>....< B>....< /B> < /A>�ѰO�F
�o��compiler�d���n�N�|�X�{��~�ӵo��
���i�������G
�٦� �n�`�N���< A>< B>< /A>< /B>
�o�]�O�`�����Y����~
�W���A���d���ťճ��O��~
�Ф��n�ҥ�
�ϥ��`���@�y��
�N�ODebug���O�H�F��=.=!
�ڤw�g�H���A�F��!! ���N��U�A�F!!
���§A!!
�ڤw�g����F ���§A!!
����A����ϽX�M�� �ܩ_�� �٬O�X����
<div class="shortpost">
Short post here
</div>
<div class="fullpost">
Extended post here
</div>
�W������l�X�O�����b�s��峹�ɪ��T�|�]�X�� �i�O�g�L��ի� ��l�X�����Ұ�
�o�̤������S����L��Ѫ��a���!!
�Ѱ�!! �ڸը�ֵo�ƤF....���n�N�� �A�w�g���ڭ�l�X�F �ڳ��M�ٸդ��X�� �گu�����ɤF.......
�ڦb�Q�|���|.....
�A�u�O�⨺�@�p�q��b��Ӥ峹�e��
�A���D�n��峹���b���q�{���X������
�u�����-n�]�b�e�����q��
��l������峹�n�]�b�᭱���Ӭq��
�p�G�O�o�� �A�N�n�ЧڦY��
�~���F�A��ڪ��p�N�F �� XD
�N�峹�]�b�{���X�̭����N��ڪ��D
�u�O��ӵ{���t�峹���]�X�ӤF �o�u�������D�O���̥X�� �]�� peek a boo �O���\�� �i�O show hide �o�S�ĪG �ڵoı�ڪ�template �{�b�u�n�[�@�I�p�{���i�h �����|�]�ܤ[ �Ʀܻ��|�X�{�䤣��T������
���e��F�ܦh�F�� ���̫��� template ���I�ܧΤF......
��Ӧh�O�u���|�öê�
�ϥ��@�w�O���y�k��~
�J�J�ӲӪ��ˬd�a
���M�N�O�������s�Ӥ@��
�^��̭�l��blog
vio �ڲש�զ��\�F!! �u�O�~���~���� :
�ڤ��e���չL�@�إs��"�~��\Ū"���\�� ��h�W��o��hide/extend²��h�F ��z��o�Ӥ]�t���h ���ѧڥ��ӷQ����z�@�U�¤峹 ���M�o�{�ڤ��e�Ҩϥ�"�~��\Ū"���峹���M�]�X hide/extend ���\�� �ګܯǴe ��O�ڬd�ݤF�@�U�ڤ��e�ұa�i�峹����l�X �ڵoı�O�o��:
�e�廡��
<span class="fullpost">
�����ê��峹
</span>
�o�˴N OK �F �]�N�O���b�A���ĥ|�ӨB�J�� �b�ڪ��峹�̭����ܧ�F �u�O�ڪ�hide/extend �o�X�ӭ^��r�S��k��ڪ��峹�{� �A�O�������L�{�O?
�گu�O���� ��b�ӷP�§A�F �ڷd�F�o��[�u���t�I���F �S�Q��S���F�@�u�;�
�z!! �ڸܦn���������I�Ӻ��F ���չL�@�Ǥ峹 �ܩ_�� ���ǥi�H ���dz��M����
���b���].......
���߮��� �֦��\�F
����span���y�k�T��n�������i�H��������
�ڭ�諸�ɭ�
�]���ڥH�e���峹�����ٯd��span���q��
��ӧڴN�����j�ﴫ���{�b���F
���n�N��A�Q�бФ@�U�A�ڤ]��۱z���оǰ��F�ק�A��}�p�U�G
http://greenlost-mud.blogspot.com/
�峹�i�H���}���X�A��D������u�w�]�����A�v�o�O�u���}���v�A
�ٷнЫ��I��
�]�{���X���Ocopy�۱z���оǤ峹�^
Post a Comment
<< Home