social network links in my header

[DannyG]

Ive placed to some social network buttons under my search bar in my forum header.

File to edit: overall_header.html

Here is the black html code. Just replace the parts in red with your own.
yoursocialntworpageurl.com , youricon.png, nameofthebutton

If you want to add more use the same code but add &nbsp; between the last part of the first code and the begining of the new code </a> &nbsp; <a href=

Code: Select all

<a href="http://www.yoursocialntworpageurl.com"><img src="/images/youricon.png" alt="nameofthebutton" /></a>

Demo:



Preview of buttons:


Place the .png images in root/images folder.


This original code has been edited from when it was first posted. Thanks to Vectra for the code advice

If Stoker can approve it, he is more than welcome to use as a snippet.

[Oliver]

very good work danny Very good danny. You are makink good works with bbcodes world.

You talk and you sing a lot in the streets of London.

[youtube]http://www.youtube.com/watch?v=Uu9V2i9apcE[/youtube]

[youtube]http://www.youtube.com/watch?v=CAYjrODGS_c[/youtube]

[Steve]

*edit
your missing the end tags of the a href= addy so should be like this

Code: Select all

<a href="http://www.musicmixdjsblog.blogspot.com"><img src="/images/blog.png" /></a>

img src code should have a alt="blog" for example

Code: Select all

<img src="/images/blog.png" alt="blog" />

id edit your post and remove <!-- ENDIF --><!-- ENDIF --> ,will cause someone an error if they try use your code also this

Code: Select all

</div><!--/formbox / search-box-->

so just use this code but add the fixes suggested above

Code: Select all

<a href="http://www.musicmixdjsblog.blogspot.com"><img src="/images/blog.png" />&nbsp;<a href="http://www.youtube.com/user/MusicMixDjs"><img src="/images/yt.png" />&nbsp;<a href="http://www.facebook.com/pages/Music-Mix-DJs/39137243876"><img src="/images/facebook.png" />&nbsp;<a href="www.myspace.com/musicmixdjz"><img src="/images/myspace.png" />&nbsp;<a href="http://twitter.com/musicmixdjs"><img src="/images/twitter.png" />
<br />

[DannyG]

Hi..

Code: Select all

<!-- ENDIF -->
<!-- ENDIF -->

That was just to highlight where I palced the code.

Thnaks Oli nad Vectra

[Steve]

danny where do i put this code on subsilver2 style

[DannyG]

danny where do i put this code on subsilver2 style

This one is a little more tricky, I'm not 100% sure that it will sit right in Subsilver skin. But you can have it just below the header.

You put it here: overall_header.html
Find

Code: Select all

	<div id="menubar">

Add the code before the line to find.

Demo

[Steve]

ok i never tested the subsilver2 i forgot i use prosilver ,what about standard prosilver where do i put the code ?

[DannyG]

Place in overall_header.html
Find:

Code: Select all

			<span class="corners-bottom"><span></span></span></div>
		</div>

Place code on a new line after the line to find

[Steve]

Place in overall_header.html
Find:

Code: Select all

			<span class="corners-bottom"><span></span></span></div>
		</div>

Place code on a new line after the line to find

thanks i test it tommorow ok to host your images from your site on mine

[DannyG]

Ive uploaded the zip file in first post. This has got the images