Forum Display Enhancements - Follow us links in line with breadbrumb

I had been looking to place follow us links on the forum. Tried using advertisements, and sidebar but nothing seemed to much helpful, and also they don't show up on every page, as the follow us links should. Finally, I made this little modification in templates to place the Follow Us links in line with breadcrumb.
Snapshot:



I am going to share with you how I did it. it requires a little code editing in the admin section of your board, so if you're not comfortable doing that please don't try on a live board, or ask someone who can do it for you.

1. Go to the Styles and temples > Style manager > Choose "edit templates" for the style you want to edit

2. Click on CSS templates and a list will open up. Click on Additional.css and go to the end of the template.

3. Paste the following code there.

/* New Crumb */
#breadcrumbx {
    margin-bottom: 5px;
    width: auto;
}
#breadcrumbR {
    float: right;
}
#breadcrumbR li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#breadcrumbR ul {
    margin: 0;
    padding: 0;
}

#breadcrumbL {
    float: left;
}

/* End New crumb */

4. We have prepared CSS for the modification, now we need to place the actual code in the templates.

5. Go to the "Navigation/breadcrumb templates" and click on it to open templates under it. Click on template named "navbar"

6. Find :

<div class="body_wrapper">

7. Below that code


Find:

<div id="breadcrumb" class="breadcrumb">
	<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul>
	<hr />
</div>

8. Replace this code with the following code:

<div id="breadcrumbX">
<div id="breadcrumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul><hr>
</div>
</div>

<div id="breadcrumbR">
<ul>
<li>
<a href="http://twitter.com/books_writers">
<img src="/images/follow/twitter.jpg">
</a>
</li>
<li><a href="https://www.facebook.com/BooksWritersCom/">
<img src="/images/follow/facebook.jpg">
</a>
</li>
<li><a href="http://plus.google.com/u/0/104621077342474730540">
<img src="/images/follow/googleplus.jpg">
</a>
</li>
<li><a href="https://www.youtube.com/user/bookswriters">
<img src="/images/follow/youtube.jpg">
</a>
</li>
<li><a href="http://books-writers.blogspot.com/">
<img src="/images/follow/blogger.jpg">
</a>
</li><li><a href="https://delicious.com/bookswriters">
<img src="/images/follow/delicious.jpg">
</a>
</li><li><a href="http://www.stumbleupon.com/stumbler/bookswriters">
<img src="/images/follow/stumbleupon.jpg">
</a>
</li><li><a href="admin@zigverve.com">
<img src="/images/follow/email.jpg">
</a>
</li><li><a href="http://bookswriters.tumblr.com/">
<img src="/images/follow/tumblr.jpg">
</a>
</li><li><a href="http://zigverve.com/forum/external.php?type=RSS2">
<img src="/images/follow/rss.jpg">
</a>
</li>
</ul>
</div>
<br clear="all">

</div>

[Note: Change the links according to your own profiles.]

9. Save.

10. Download the attached zip (followlinks.zip for white background jpg files and followpngtransparent.zip for png transparent background)file and upload them to your forum's files.

11. Open your forum and you should see the Follow Us! links in the right side of your breacrumb.

[Flipfloptrader]

Thank you, very much!

May I ask what has changed?

I'm very much a beginner with code but would like to try and understand how things work.

[Fun-Masti]

When you were putting the html code yourself, I don't know how you ended up there, but the locations of closing div tags are wrong at two places. Also, I made slight change to the css of the breadcrumb. Since it was already using float status elsewhere in the default theme, I removed float:left from breadcrumbL.

[gsk8]

Great mod! I noticed that when I hover, there is an underline under the images?

I don't want to post my URL, so please ck PM. Thanks!