can someone please help me with my blog?, adding a sidebar to tumblr |
can someone please help me with my blog?, adding a sidebar to tumblr |
kellyyy |
Apr 6 2012, 10:41 PM
Post
#1
|
Group: Members Posts: 1 Joined: 6-April 12 Member No.: 16,866 |
I'm kind of new at coding/html and as hard as I try I'm having a lot of trouble. What I'm trying to do is add a sidebar to my blog on tumblr but I'm not sure how to code that. I don't want to remove my header I just want a box on the left side of my blog where i can put a picture and write stuff. I also want the box to stay in the same place when you scroll. If someone could please give me a code and show me where to put it I would greatly appreciate it. Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{Title}</title> <!-- "Maple & Oak 1.8" by The Theme Shop http://www.thelayoutshop.net --> <meta name="font:Body" content="Arial, Helvetica, sans-serif"/> <meta name="font:Title" content="Georgia, Times New Roman, serif"/> <meta name="color:Text" content="#222222"> <meta name="color:Links" content="#ec6d71"> <meta name="color:Hover" content="#f2c9ac"> <meta name="color:Title" content="#252525"> <meta name="color:Background" content="#FFFFFF"> <meta name="color:PostsBackground" content="#FFFFFF"> <meta name="if:Two columns" content="0"/> <meta name="if:Magnify" content="0"/> <meta name="if:Use Loading Box" content="1"/> <meta name="image:Background" content=""/> <meta name="image:Header" content=""/> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description} <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> {block:IndexPage} <script src='http://dl.dropbox.com/u/10308294/js/jquery.masonry2-0.min.js' type='text/javascript'></script> <script type="text/javascript" src="http://dl.dropbox.com/u/10308294/un/jquery.infinitescroll.min.js"></script> {/block:IndexPage} <script type="text/javascript" src="http://static.tumblr.com/1s4z8hu/1kflriygl/jscriptf-min.js"></script> <script type="text/javascript"> // Smooth Scroll to Top $(document).ready(function() { $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 700); return false; } } }); }); </script> <style type="text/css"> body{ overflow-x:hidden; background:{color:Background} url('{image:background}') fixed; font-family:{font:Body}; font-size:10px; letter-spacing:0px; color:{color:text}; } a:link, a:visited{ color:{color:links}; text-decoration:none; } a:hover{ color:{color:hover}; text-decoration:none; } img a{ border:0px !important; } #container{ {block:IndexPage} {block:IfTwoColumns}width:900px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:900px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage} {block:PostNotes}{PostNotes}{/block:PostNotes}.width:500px;{/block:PermalinkPage} margin:0 auto; background:{color:PostsBackground}; } #infscr-loading { z-index: 5000; position: fixed; left: 41%; bottom: 40px; width: 200px; padding: 10px; background: #000; opacity: 0.8; color: #FFF; text-align:center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; {block:IfNotUseLoadingBox}display:none !important;{/block:IfNotUseLoadingBox} } #description{ padding:10px; width:880px; {block:PermalinkPage}width:480px;{/block:PermalinkPage} } .nav{ font-size9px; font-weight:bold; padding:20px; } .description{ padding-top:15px; font-size:10px; } .description h1{ font-family:{font:Title}; color:{color:title}; font-weight:400; font-size:65px; text-align:center; } #footer{ clear:both; } #posts{ margin:0 auto; {block:IndexPage} {block:IfTwoColumns}width:900px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:900px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage} width:500px;{/block:PermalinkPage} background:{color:PostsBackground}; } .post{ {block:IndexPage} {block:IfTwoColumns}width:450px /**/{/block:IfTwoColumns} {block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns} float:left; {/block:IndexPage} {block:PermalinkPage} {block:IfTwoColumns}width:480px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:480px;{/block:IfNotTwoColumns} {/block:PermalinkPage} margin-right:0px; margin-top:0px; background:{color:PostsBackground}; } .post h3{ font-weight:bold; font-size:11px; text-transform:uppercase; padding:5px; text-align:center; {block:IndexPage} {block:IfTwoColumns}width:410px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:260px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage} {block:IfTwoColumns}width:460px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:460px;{/block:IfNotTwoColumns} {/block:PermalinkPage} } .caption, .notestags{ padding:10px; {block:PermalinkPage} {block:IfTwoColumns}width:480px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:PermalinkPage} } .text{ padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:justify; } .text img a{ border:0px !important; } .text img{ {block:IndexPage} {block:IfTwoColumns}max-width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}max-width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage}max-width:500px;{block:PermalinkPage} height:auto; border:0px !important; } .dunno{ background:{color:PostsBackground}; padding:10px; position:absolute; top:0; z-index:3; opacity:0; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; text-align:center; text-transform:uppercase; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage}display:none;{block:PermalinkPage} } .d_con{ } {block:IfMagnify} .photo:hover .dunno{ width:480px; opacity:0.85; overflow:hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; } {/block:IfMagnify} .photo{ padding-bottom:-3px; width:auto; } {block:IndexPage}{block:IfMagnify}.photo:hover img{ position:relative; overflow: visible; width:500px; height:auto; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; z-index:2;} {/block:IfMagnify}{/block:IndexPage} .photo img{ {block:IndexPage} {block:IfTwoColumns}width:450px; /**/{/block:IfTwoColumns} {block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns} {/block:IndexPage} {block:PermalinkPage}width:500px;{/block:PermalinkPage} height:auto; overflow: hidden; transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; z-index:1; } .photoset_w{ padding:20px 0 10px 0 !important; {block:IfNotTwoColumns}width:300px;{/block:IfNotTwoColumns} {block:IfTwoColumns}width:450px;{/block:IfTwoColumns} } .photoset_w .html_photoset iframe{ margin-left:auto; margin-right:auto; display:block; } .link{ padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:justify; } .chat{ padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:justify; } .chat ul, .chat ul li{ list-style:none; margin:0px; padding:0px; } .chat .label{ font-weight:bold; font-style:italic; text-transform:lowercase; } .quote{ font-size:15px; padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:left; } .qsource{ text-align:right; } .video embed, .video object, .video iframe{ {block:IndexPage} {block:IfTwoColumns}width:450px !important;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:300px !important;{/block:IfNotTwoColumns} {/block:IndexPage} height:auto !important; } .player{ padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:justify; } .audio_player{ background:#fff; } .audio { height:30px; overflow-y: hidden; } .audio span { color:#ffffff; font-size:1px; } .audio span a{ color:#ffffff; font-size:1px; } .artist{ text-transform:lowercase; padding:10px; text-align:center; {block:IndexPage} {block:IfTwoColumns}width:410px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:260px;{/block:IfNotTwoColumns} {/block:IndexPage} } .ask{ padding:10px; {block:IndexPage} {block:IfTwoColumns}width:430px;{/block:IfTwoColumns} {block:IfNotTwoColumns}width:280px;{/block:IfNotTwoColumns} {/block:IndexPage} text-align:justify; text-transform:lowercase; } .ask p{ margin-top:0px; } #footer{ } .source{ display:none; height:0px !important; } .p_separator{ border-top:1px solid {color:text}; padding-top:10px; margin:0 120px; } .p_meta{ text-align:center; text-transform:uppercase; font-size:10px !important; } .perma_pagi{ padding:10px 0; } .backtop{ position:fixed; bottom:10px; right:10px; background:{color:links}; width: 40px; height: 40px; font-size:18px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -moz-transition-duration:0.5s; -o-transition-duration:0.5s; -webkit-transition-duration:0.5s; transition-duration:0.5s; } .backtop a{ color:{color:PostsBackground} } .backtop p{ text-align: center; margin-top: 7px; } {CustomCSS} </style> <script type='text/javascript'> //<![CDATA[ var rate = 50; if (document.getElementById) window.onerror=new Function("return true") var objActive; // The object which event occured in var act = 0; // Flag during the action var elmH = 0; // Hue var elmS = 128; // Saturation var elmV = 255; // Value var clrOrg; // A color before the change var TimerID; // Timer ID if (document.all) { document.onmouseover = doRainbowAnchor; document.onmouseout = stopRainbowAnchor; } else if (document.getElementById) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); document.onmouseover = Mozilla_doRainbowAnchor; document.onmouseout = Mozilla_stopRainbowAnchor; } function doRainbow(obj) { if (act == 0) { act = 1; if (obj) objActive = obj; else objActive = event.srcElement; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } function stopRainbow() { if (act) { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } function doRainbowAnchor() { if (act == 0) { var obj = event.srcElement; while (obj.tagName != 'A' && obj.tagName != 'BODY') { obj = obj.parentElement; if (obj.tagName == 'A' || obj.tagName == 'BODY') break; } if (obj.tagName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = objActive.style.color; TimerID = setInterval("ChangeColor()",100); } } } function stopRainbowAnchor() { if (act) { if (objActive.tagName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function Mozilla_doRainbowAnchor(e) { if (act == 0) { obj = e.target; while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { obj = obj.parentNode; if (obj.nodeName == 'A' || obj.nodeName == 'BODY') break; } if (obj.nodeName == 'A' && obj.href != '') { objActive = obj; act = 1; clrOrg = obj.style.color; TimerID = setInterval("ChangeColor()",100); } } } function Mozilla_stopRainbowAnchor(e) { if (act) { if (objActive.nodeName == 'A') { objActive.style.color = clrOrg; clearInterval(TimerID); act = 0; } } } function ChangeColor() { objActive.style.color = makeColor(); } function makeColor() { // Don't you think Color Gamut to look like Rainbow? // HSVtoRGB if (elmS == 0) { elmR = elmV; elmG = elmV; elmB = elmV; } else { t1 = elmV; t2 = (255 - elmS) * elmV / 255; t3 = elmH % 60; t3 = (t1 - t2) * t3 / 60; if (elmH < 60) { elmR = t1; elmB = t2; elmG = t2 + t3; } else if (elmH < 120) { elmG = t1; elmB = t2; elmR = t1 - t3; } else if (elmH < 180) { elmG = t1; elmR = t2; elmB = t2 + t3; } else if (elmH < 240) { elmB = t1; elmR = t2; elmG = t1 - t3; } else if (elmH < 300) { elmB = t1; elmG = t2; elmR = t2 + t3; } else if (elmH < 360) { elmR = t1; elmG = t2; elmB = t1 - t3; } else { elmR = 0; elmG = 0; elmB = 0; } } elmR = Math.floor(elmR).toString(16); elmG = Math.floor(elmG).toString(16); elmB = Math.floor(elmB).toString(16); if (elmR.length == 1) elmR = "0" + elmR; if (elmG.length == 1) elmG = "0" + elmG; if (elmB.length == 1) elmB = "0" + elmB elmH = elmH + rate; if (elmH >= 360) elmH = 0; return '#' + elmR + elmG + elmB; } //]]> </script></head> <body> <script type="text/javascript" src="http://static.tumblr.com/jw8fmba/UY1m0i3zn/kony_2012_white.js"></script><!--Hypster Music Player--> <script type="text/javascript" src="http://scm.hypster.com/script.php" ><!-- //--></script> <script type="text/javascript"><!-- SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'100'},'playlist':'4519416','placement':'bottom','showplaylist':'false'}"); //--></script> <!--Hypster Music Player--> <div id="container"> <div class="description"> {block:IfHeaderImage}<center><a href="/"><img src="{image:Header}" border="0"/></a></center>{/block:IfHeaderImage} {block:IfNotHeaderImage}<h1><a href="/">{Title}</a></h1>{/block:IfNotHeaderImage} <div class="nav"><center> <a href="/">Home</a> · {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> · {/block:Pages} {/block:HasPages} {block:SubmissionsEnabled} <a href="/submit">{SubmitLabel}</a> · {/block:SubmissionsEnabled} {block:AskEnabled}<a href="/ask">{AskLabel}</a> · {/block:AskEnabled} <a href="{RSS}">RSS</a> · <a href="http://www.thelayoutshop.net">Theme</a> <br /></center></div> {block:Description}<p id="description">{Description}</p>{/block:Description} <br /><br /> </div> <div id="posts"> >{block:Posts} {block:Text} <div class="post text"> {block:Title}<h3><a href="{Permalink}">{Title}</a></h3> <div class="p_separator"></div> {/block:Title} {Body} <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> </div> {/block:Text} {block:Photo} <div class="post photo"> {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" {PhotoAlt} border="0"/></a> <div class="dunno"><div class="d_con"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div></div>{/block:IndexPage} {block:PermalinkPage} {LinkOpenTag}<img src="{PhotoURL-500}" {PhotoAlt} border="0"/>{LinkCloseTag} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:PermalinkPage} </div> {/block:Photo} {block:Photoset} <div class="post photoset_w"> {block:IfNotTwoColumns}{Photoset-250}{/block:IfNotTwoColumns} {block:IfTwoColumns}{Photoset-400}{/block:IfTwoColumns} {block:PermalinkPage} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:PermalinkPage} </div> {/block:Photoset} {block:Quote} <div class="post quote"> "{Quote}" {block:Source} <div class="qsource"><h3>{Source}</h3></div> {/block:Source} <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> </div> {/block:Quote} {block:Link} <div class="post link"> <h3><a href="{URL}" {Target}>{Name}</a></h3> <div class="p_separator"></div> {block:Description} {Description} {/block:Description} <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> </div> {/block:Link} {block:Chat} <div class="post chat"> {block:Title}<h3><a href="{Permalink}">{Title}</a></h3> <div class="p_separator"></div> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> </div> {/block:Chat} {block:Video} <div class="post video"> {Video-500} <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> {block:PermalinkPage} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} {/block:PermalinkPage} </div> {/block:Video} {block:Audio} <div class="post player"> <div class="audio" id="{postID}">{AudioPlayerWhite}</div> <div class="artist">{block:Artist}<b>{Artist}</b>{/block:Artist} {block:TrackName}<em>{TrackName}</em>{/block:TrackName}</div> <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption} {/block:PermalinkPage} </div> {/block:Audio} {block:Answer} <div class="post ask"> <div class="answer"><strong>{Asker} asked:</strong><p><em>{Question}</em></p></div> <div><strong>{title} answered:</strong>{Answer}</div> <div class="p_separator"></div> <div class="p_meta"><a href="{Permalink}">Permalink</a> {block:NoteCount} · <a href="{Permalink}">{NoteCount}</a> {/block:NoteCount}· {Timeago}</div> <div style="clear:both;"></div> </div> {/block:answer} {block:PermalinkPage} <div class="perma_pagi"> <center>{block:PermalinkPagination} {block:PreviousPost} « <a href="{PreviousPost}">Previous Post</a> {/block:PreviousPost} | {block:NextPost} <a href="{NextPost}">Next Post</a> » {/block:NextPost} {/block:PermalinkPagination}</center> </div> <div class="notestags">{block:NoteCount}{NoteCount} notes{/block:NoteCount} {block:HasTags} | {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} {/block:HasTags}</div> <div class="source"> {block:ContentSource} <a href="{SourceURL}">{lang:Source}:{block:SourceLogo} <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} </a> {/block:ContentSource} {block:RebloggedFrom} <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom} </div> {/block:PermalinkPage} {/block:Posts} {block:PostNotes}{PostNotes}{/block:PostNotes} </div><!--END posts--> <div id="footer"> {block:NextPage} <a href="{NextPage}">forth</a> {/block:NextPage} {block:PreviousPage} <a href="{PreviousPage}">back</a> {/block:PreviousPage} </div> </div><!--END container--> <div class="backtop"><p><a href="#top">↑</a></p></div> </body> </html> |
Darin McGrew |
Apr 7 2012, 12:29 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry How do I put links along the left side of my page?
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:26 PM |