How To Create Expandable Titles In Blogger Label/Archive Pages
If you have read and liked this post: How To Create Expandable Read More In Blogger, you may also be interested on doing the same kind of hack for your own LABEL or ARCHIVE Pages.
LABEL Page. The Landing Page upon clicking your label or category links. The format being: http://yourblog.blogspot.com/search/label/labelname.
ARCHIVE Page. The Landing Page upon clicking your weekly or monthly or yearly archives. Sample format for a monthly archive:
http://yourblog.blogspot.com/yyyy_mm_01_archive.html.
Click the below samples of Expandable Titles in my Label and Archive Pages.
Label Page: Blogger Tweaks
Archive Page: October 2008
How is this done? Thanks to Dynamic Drive's Accordion Content Script, this can be implemented in Blogger.
Before you start editing your template, make sure to
(1) DOWNLOAD
ddaccordion.js
jquery-1.2.6.pack.js
(2) Right click and choose "Save As"
(3) Upload to your site (e.g. Google Pages if you have one).
Moving on.
NOTE: BACKUP YOUR TEMPLATE!
(1) Go to Layout. Edit HTML.
(2) Before the closing tag of
]]></b:skin>
insert this CSS code:
.technology{
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{
color: #99cc00;
}
.closedlanguage{
color: #99cc00;
}
(3) Before the closing tag of
</head>
insert these javascript codes:
<script type="text/javascript" src="http://yourblog.googlepages.com/
jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src=
"http://yourblog.googlepages.com/ddaccordion.js">
/*********************************************
* Accordion Content script- (c) Dynamic Drive DHTML
code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of
DHTML scripts
* This notice must stay intact for legal use
*********************************************/
</script>
NOTE: Please note the bold-faced texts above and make sure that
each was uploaded to your personal servers (i.e. googlepages).
http://yourblog.googlepages.com/jquery-1.2.6.pack.js
http://yourblog.googlepages.com/ddaccordion.js
(4) Right after the last line of code in item/step number 3,
add this lines:
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of
headers group
contentclass: "thepet", //Shared CSS class name of
contents group
revealtype: "mouseover", //Reveal content when user
clicks or onmouseover the header? Valid value: "click"
or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover",
set delay in milliseconds before header expands
onMouseover
collapseprev: true, //Collapse previous content (so
only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by
default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one
header should be open always (so never all headers
closed)
animatedefault: false, //Should contents open by
default be animated into view?
persiststate: true, //persist state of opened contents
within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be
applied to the header when it's collapsed and
expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added
to the header when it's collapsed and expanded,
respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer
in milliseconds (ie: 200), or keywords "fast",
"normal", or "slow"
oninit:function(expandedindices){ //custom code to
run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state,
isuseractivated){ //custom code to run whenever a
header is opened or closed
//do nothing
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or
onmouseover the header? Valid value: "click" or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover",
set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so
only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by
default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header
should be open always (so never all headers closed)
animatedefault: false, //Should contents open by
default be animated into view?
persiststate: false, //persist state of opened
contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"],
//Two CSS classes to be applied to the header when
it's collapsed and expanded, respectively ["class1",
"class2"]
togglehtml: ["prefix", "<img
src='http://i13.tinypic.com/80mxwlz.gif' /> ",
"<img src='http://i18.tinypic.com/6tpc4td.gif'
/> "], //Additional HTML added to the header
when it's collapsed and expanded, respectively
["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer
in milliseconds (ie: 200), or keywords "fast",
"normal", or "slow"
oninit:function(expandedindices){ //custom code to
run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state,
isuseractivated){ //custom code to run whenever a
header is opened or closed
//do nothing
}
})
</script>
(5) After adding the javascript, search for this one.
<b:include data='post' name='post'/>
Depending on your template, there may be two or three
occurences in the code. To avoid confusion, look for the one
that is IMMEDIATELY AFTER the below code:
<data:post.dateHeader/>
(6) Upon finding the correct one, replace this line
<b:include data='post' name='post'/>
with this one:
<!-- start expandable titles -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div class='technology'>
<a expr:href='data:post.url'><data:post.title/></a></div> <p style='padding-left:20px; font-size:9px;'> <a expr:href='data:post.url'>» Click here to go to the entry/page</a> </p>
<div class='thelanguage'><data:post.body/></div>
<b:else/>
<p style='padding-left:23px; color:#7AA200; font-size:12px; font-weight:bold;'/>
<b:include data='post' name='post'/>
</b:if> <b:else/>
<p style='padding-left:23px; color:#7AA200; font-size:12px; font-weight:bold;/>
<b:include data='post' name='post'/>
</b:if>
<!-- end expandable titles -->
Bold faced texts are the parts which may be customized according to your preference and template.
(6) To edit the textbox found at the Label
Page, look for this code (There were two occurences of
these. Just add to both):
<data:navMessage/>
replace them with your own. Example of mine is:
<p style='color:#000000;
font-variant:small-caps;font-weight:bold;font-size:14
px;padding-left:20px;
text-align:left;'>Note:</p><p
style='color:#000000;
font-weight:bold;padding-left:20px;text-align:left;pad
ding-right:10px'> Click on either <a href='#'
style='text-decoration:none; font-variant:small-caps;
color:#99cc00'>[show]</a> or "post
title" to see ENTRY PREVIEWS of a chosen
category. Click on the text : <a href='#'
style='text-decoration:none; font-size:9px;
color:#1566a7'> » Click here to go to the
entry/page </a> to see each in full page.
Thanks!</p>
(7) Save Template.
(8) View Blog.
If you feel like needing to style your titles, landing pages, even the textbox and borders, feel free to leave a note/message here.
Happy tweaking!
Resources:
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
http://htmlescape.compender.com/
Digg this! | Save to del.ico.us | Save to technorati | Stumble it! | Print
