My sidebar links were running out of control, so I decided to hook up a collapsible menu solution. A hunt around the internet turned up a nice javascript solution, but as usual I had endless trouble trying to get it to play nice with Blogger. For some reason Blogger's security model blocks some javascript from running in the site. Usually it's something as simple as changing &'s in a GET/POST string to &amp's; instead, but this time it was a lot more difficult. Here's how I got it working, so you don't have to waste as much time on it as I did.
I created an HTML/Javascript part on the sidebar and inserted the following block of code:
<ul id="containerul">
<li>
Art
<ul>
<li>
<a href="http://alantew.blogspot.com">Alan Tew</a>
</li>
<li>
<a href="http://www.maleev.com">Alex Maleev</a>
</li>
<li>
<a href="http://absoluteart.blogspot.com">Tim Kane</a>
</li>
</ul>
</li>
<li>
Wargaming
<ul>
<li cteopen="http://<your site address>/cte_specialminus.png" cteclosed="http://<your site address>/cte_specialplus.png">
<span style="font-weight:bold;">Lord of the Rings</span>
<ul>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.lotr-collector.com/">LOTR Collector</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://thelastalliance.com/">The Last Alliance</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<span style="font-weight:bold;"><a href="http://www.thepalantir.org/">The Palantir</a></span>
</li>
</ul></li>
<li cteopen="http://<your site address>/cte_specialminus.png" cteclosed="http://<your site address>/cte_specialplus.png">
<span style="font-weight:bold;">Warhammer 40k</span>
<ul>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.advancedtautactica.com/">Advanced Tau Tactica</a>
</li>
<li cteitem="http://<your site address>/cte_specialpage.png">
<a href="http://www.tauonline.org/">Tau Online</a>
</li>
</ul></li></ul></li></ul>
<h2>Blogs</h2>
<ul id="anothercontainerul">
<li>
Personal
<ul>
<li>
<a href="http://olivepug.blogspot.com/">Olive Pug</a>
</li>
<li>
<a href="http://metrobuild.blogspot.com/">Under Construction</a>
</li>
</ul>
</li>
</ul>
<h2>Resources</h2>
<ul id="resourcecontainerul">
<li>
Web Design
<ul>
<li>
<a href="http://http://www.sxc.hu//">Stock.Xchng</a>
</li>
<li>
<a href="http://www.templatemonster.com/">Template Monster</a>
</li>
</ul>
</li>
</ul>
<script type="text/javascript"><!--
initiate(Array("containerul","anothercontainerul","resourcecontainerul")); // This must be placed after the menus in order to format them properly.
//--></script>
Then in the <HEAD> block of your site's template insert this code:
<script src='http://<your site address>/javascripts/cte_scripts.js' type='text/javascript'/>
<style type='text/css'><!--
@import "http://<your site address>/cte_styles.css";
--></style>
This all seems to work properly. If you want to add another container grouping, copy the grouping, paste it and change the block name. Then put the block name in as an input to the initiate() code block.
Hey, great code!
ReplyDeleteI've been trying to post the part within the < head > section, but it keeps giving me this error message:
"We were unable to save your template
Please correct the error below, and submit your template again.
A skin cannot contain the element: script. Only text and CDATA sections are accepted."
I posted it immediately under: < head >
< b:include data='blog' name='all-head-content'/ >
< title >< data:blog.pageTitle/ >< /title >
Can you please help? Thanks!
Here's my entire head block if that helps:
ReplyDelete< start of header block>
<link href='http://<hostname>/lightbox/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://<hostname>/lightbox/js/prototype.js' type='text/javascript'/>
<script src='http://<hostname>/lightbox/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://<hostname>/lightbox/js/lightbox.js' type='text/javascript'/>
<script src='http://<hostname>/javascripts/cte_scripts.js' type='text/javascript'/>
<style type='text/css'><!--
@import "http://<hostname>/cte_styles.css";
--></style>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Lefty Stretch
Designer: Douglas Bowman / Darren Delaye
URL: www.stopdesign.com
Date: 14 Jul 2006
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#333333">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#cccccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#cccccc">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
margin:0;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
margin-$endSide: 2%;
width: 67%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$startSide: 2%;
width: 25%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
]]></b:skin>
< end of header block> -->
You'll probably also want to put up the script library and CSS file. I just upload those files to another site and then reference them from my Blogger site.
The script library and CSS file.
Ahhh, that's the location. ^_^ Thanks for your help! =D
ReplyDelete