Do "we" have a forum for those of us fumbling about with blog templates? I've searched the net for help already, before coming here...

I am messing about with my blogspot.com template. I find lots of "things" to do with it, but the most annoying part is that for all the scripts that can be inserted, no one seems to be able to tell the readers WHERE to put the scripts so that they work.

I've been "sourcing" web sites to try to learn where "what" goes "where." One can go to any URL, then up to the Tool Bar => "View>Page Source" Any page on the net can be accessed this way, and the scripts are there to be had.

Take blogspot.com for example... I have four blogs on the go...one is specifically set up as a test site for experimentation...

TEST SITE

Each seems to have a slightly different template, and no two are alike... so mimicking one template over more than one blog site is dicey...it takes a fair bit of juggling.

Right now, I'm trying to figure out how to activate an image, so that when you tap on it, you are redirected to another site. e.g. by tapping on an image I can direct the reader to one or more of my blogs without them having to search the web for them. Yes, I know links can be set up, but it looks a bit more interesting if images do the work, rather than words.

Here is a simple working example...
<br /><br /><a href="http://www.google.com/"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></a></dd>

This will put a GOOGLE search image on my blog...but it is too large and forces the side bar to the bottom of the page if it is inserted where I had it, in the side bar...along with some of my other images. It will appear at the bottom of the page instead. Therefore, I need to reduce its size without negating its purpose. That is another issue.

So...1. reduce size and 2. where to locate script so it appears where I want it

Any suggestions...

Hello, this code will reduce the size to 158x60 and will align it in the center of the page. You can adjust the size to whatever you like and change the alignment to left, right or centre.

Place the code in between the two 'body' tags:

<div align="center">
<br />
<br />
<a href="<A href="http://www.google.com/"><img">http://www.google.com/"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" width="158" height="60" /></a>
</dd>
</div>

Try this link, you can edit the html code on blogspot. If you need any help with it give us a shout: HTML 4.01 / XHTML 1.0 Reference - HTML Tag Reference

Regards

Martin

mhookem: do we not have a web page forum? It may be another one to begin. There must be tons of us wannabe html writers out here This is only the first issue that I am dealing with. And having fun in the process

Since there are only three body tags, one near the top, and one at the bottom, with almost the entire template in between, I am at a loss as to just where to put the scrip you sent. My I send you a copy of the template off-line/forum?

What I have been doing is experimenting with inserting this and that script all over the place, one at a time, and seeing what the results are. And what works on one template does not seem to work on another, even though they are templates from the same blogspot.com site...just different coloured backgrounds.

<div align="center">
<br />
<br />
<a href="<A href="http://www.google.com/"><img">http://www.google.com/"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" width="158" height="60" /></a>
</dd>
</div>

Where exactly does this go?

By the way I have my background set at 1000 and my content set at 750 and my sidebar set at 245. So, 158 would easily fit into the sidebar.
--------------------------------------------------------------------------

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 750px;
float: left;
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 {
width: 245px;
float: right;
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 */
}

--------------------------------------------------------------------------

Here is the section which I discovered was the place to insert scripts, it's near the bottom of the template:

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Template Testing (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>
--------------------------------------------------------------------------

We could technically say that the html editing comes under the 'Development' forum, but I know what you mean. I posted a thread about some .asp but had little response.
Perhaps we could should talk to Sami and see what he thinks we can do.

We don't seem to get very many posts concerning code from what I can see. Holding more discussions on the subject could well bring in more viewers and give us the opportunity to see a bit more of what's going on in the world of software development.

I've only recently started looking at .asp which is essentially VB script, and I'm already having problems,

Do you have your own HTML editor? I'm using Dreamweaver at the moment, which is really useful, and at the same time really annoying!

I don't know if you're aware but the blog pages seem to be mht, which handles scripts slightly differently:

'Web document formatted using the MIME HTML or "MHTML" standard; encodes images and other media files referenced by a .HTML document into the same file the HTML is stored in; the data is encoded using .MIME encoding.

Most Web pages viewed in a Web browser only contain HTML and reference images and other media files that are stored in other directories on the server; because all the files are encoded into a single file in a MHTML document, MHT files are commonly used to archive Web pages'

Information provided by MHT File Extension - Open .MHT files


Regards

Maritn

I don't want to be selfish and expect a whole web site, syschat, to bend over, but if I were selfish, I could use for it... I have visited many such fora and there appears to be about a 100/1 ratio of the "ig-norant/norant "

I have been "into" computers for many years, but I am just now (in my 60's) getting into this web script stuff, it never interested me before...and only as a means of allieving the frustration of having to deal with a rather unintersting template at my blogs. When I look at other's blogs, some blow you away with their appearance. Obviously they know what they are doing. Some day, I'd like to have my own web site...so I am apprenticing on/in the blogs...self-teaching in the process.

As to editors...I started out with Netscape 7's Composer...a free inclusion with Netscape 7.x. I believe that there may have been earlier versions, but I paid no attention to them.

I mucked about with a few trials, of various progs, but they were all too complicated. I am a visual learner and one who learns by doing...once a "not bad" artist and graphic designer in the hobby world...rtd...teacher. Therefore I like to start out with a blank sheet and create. As the spirit moves me, I then look to do some particular action, but not knowing how, I go and try and find an answer. This is like walking across a raging river by using the available step stones. Finding the most solid step stones has been a chore...but I am getting there.

Try this program: Serif WebPlus 9 - Web Design Software. Serif make their programs very easy to use, and always with beginners in mind and at the same time give you the chance to learn some of the harder stuff.

You can download an earlier version for free, it's version 6.0 but I've got version 7.0 which is more than good enough to make your blog look great: Free Web Site Publishing Software Download - WebPlus.

It's got a lot of 'point and shoot' about it.
But you can put in some of your own code when you need to.

Regards

Martin

You've been most helpful...but I'd like to get this activated button thingy out of the way first. Can you refer to my two previous notes, outling what I am trying to do and offer any "expert"' advice?

re: the Google Image Icon
re: my personal Icon Image

re: sizing them
re: locating them in template

TTYL...TOMORROW...

This code will put the google image as a link on your blog, to create your personal image link just replace the address to google with your own and replace the image source with your own. Adjust the size of your image to your liking and adjust the position of the layer containing your image to any you want on the page:

<div id="Layer1" style="position: absolute; top: 0; left: 0" align="centre"><a href="<A href="http://www.google.com/"><img">Google"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" width="158" height="60" /></a></div>

Don't forget to place all of this code inside the 'body' tags.

Regards

Martin

For the most part this is not a programming forum, though i am unsure if HTML is really considered a programming language to most coders... CSS maybe, JS sure and anything equally complicated.

I post on a couple of popular coding sites, but i do not mention them here as i do not wish to take away from SC as it is a good site, and a great resource in the computer related issues. Perhaps Sammy will consider expanding into a web development category?
For now, if you could post the entire file, with images as a zip or other compressed file, or post a link, It would likely be much easier to diagnose the errrors from the source

*I'm not yankin' your chain either, I really am experienced with HTML, CSS, JS, AJAX, PHP, Perl, and a few others in the web dev department.


I don't know if mhookem agrees, but inline CSS is really something that should be avoided if possible.

__________________

</Dream In Code>
-William. § (marvin_gohan)

William: no problem... as I don't have a clue re: what I am doing...nor can appreciate the languages you refer to. I just go with what works in the context of my template, overwhich I have no control! And I am just tossing out "needs" as they crop up. Sami seems o.k. with it. I chose this forum because it seemed the safest place to go and not upset anyone. I could "talk" off line, if you want...and Sami would prefer. I'm not dense, just need directing.

I have stumbled on some of the fora you refer to where those who know what they seem to be doing are going on about "stuff" that completely mystifies me. Sami seems to be at my speed so far.

I contacted you, as Sami did not seem to pick up on my need for the SysChat linking code...and I thought that that was because he was unaware of it. So, I went to the "top" to see if you were aware of it, and would not mind sharing it.

[EDIT: NOTE: CHECK THE NEXT PAGE FOR A SOLUTION I WORKED OUT]

To Sami: I seem to have got the Google business sorted out on my own, thanks...now I am trying to insert a similar image, using the SysChat image in the upper left of your web pages. I can't find the specific code in the "source view" of the page...and until I have that, I can't experiment with where it goes in my template. What I usually do, is download the image, then upload it as an addition to my regular posts...that gives me the image code...then I transfer that over to my template...that gives me the image...now I need to integrate that with an activation code to get it to respond to a viewers cursor and take them to SysChat.com ...tap on the image...go to SysChat...ta da! ...just as it is now, on the SysChat site

I also might share something that I discovered, and you guys may already know, but your readers don't...

I mentioned earlier that templates should have instructions built into them, but instructions that cannot be seen in the actual end result. I discovered that once I found the magic place to set the code, if I inserted <!-----[message]----> just above the insertion point, it stayed there to guide me, and was not seen in the finished view. Wow, was that an incite and of great help. It all boiled down to the ! mark...without it the dashed bar and notes showed.

Here's the example:
-------------------------------------------------------------------------
</Blogger>
</div></div>
<!-- End #main -->

<!--------delete this line before posting------------->

<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">

<!--------then in here I place the necessary code--->

<DIV ALIGN="CENTER"><A HREF="http://www.eff.org/br/"><IMG
SRC="http://www.eff.org/br/br.gif" ALT="[Blue Ribbon Campaign icon]"
HEIGHT="76" WIDTH="112" BORDER="1" ALIGN="MIDDLE"><BR />
Join the Blue Ribbon Online Free Speech Campaign!</A><BR /></DIV>

<!-- Begin #profile-container -->

<$BlogMemberProfile$>

<!--------and in here I place the necessary code--->

<!-- End #profile -->

--------------------------------------------------------------------------

Hey, this stuff is fun...and I am well past the age of retirement I'm pretty much just copy and pasting, so not a lot of understanding of what I'm actually doing is needed.