Please view the attached picture. I'm looking for a plug in that will allow me to place this kind of social linking on selected post/page etc.

thanks.

Here's a couple of links, not sure if the plugins are free.....

17 wordpress sharing plugins that will increase your blog traffic

12 Best Social Bookmarking Plugins For Your Latest WordPress Site

There are more links with a Google search, but hopefully this can help you get started.....

Thanks for the links. In the pictures the plug in is showing other companies social sites to direct people to them.

I want a plug in that will let me build and use other companies social url and have them appear on a selected post or page on my site. Not as much as sharing but directing visitors that visit my to those that support my site. Promotion.

I want to be able to display my sponsors social links etc on selected pages or post.

I have found plenty of those link/share plugins but need one where I display my sponsors. Does tha tmake sence?

Here's the link. Scroll down and see where it says "get social?" that's what I'm looking to to do.

http://www.racerxonline.com/2012/04/...ms-ryan-hughes

Hello Art,

I looked at your graphic, the links I gave you were not quite the same as your graphic. My thoughts were some plugins you can alter.....

Took a look at the link you provided and looked at the page source, here is the code just for Get Social on the link you provided:

<div class="box get_social full_social">
     <h1>Get Social</h1>
     <ul>
     <li><a class="facebook" href="http://www.facebook.com/motosportinc" 
     target="blank">Motosport.com on Facebook</a></li>
     <li><a class="facebook" href="http://www.facebook.com/ride100percent" 
     target="blank">100% on Facebook</a></li>
     <li><a class="facebook last" href="http://www.facebook.com/ProCircuitRacing" 
     target="blank">Pro Circuit on Facebook</a></li>
     <li><a class="twitter" href="http://twitter.com/motosportinc" target="blank">Follow 
     Motosport.com on Twitter</a></li>
     <li><a class="twitter" href="http://twitter.com/ride100percent" target="blank">Follow 
     100% on Twitter</a></li>
     <li><a class="twitter last" href="http://twitter.com/Pcraceteam" target="blank">Pro Circuit 
     on Twitter</a></li>
     <li><a class="youtube" href="http://www.youtube.com/motosportinc" 
     target="blank">Motosport.com on YouTube</a></li>
     <li><a class="youtube" href="http://youtu.be/Rwu1Y74Fl0E" target="blank">100% on 
     YouTube</a></li>
     <li><a class="youtube last" href="http://www.youtube.com/user/ProCircuitInc" 
     target="blank">Pro Circuit on YouTube</a></li>
     <li><a class="myspace" href="http://www.myspace.com/motosport" 
     target="blank">Motosport.com on Myspace</a></li>
     <li><a class="newsletter" href="http://www.motosport.com/dirtbike/newsletter.php" 
     target="blank">Signup for the Motosport.com Newsletter</a></li>
     </ul>
     </div>

Does this help?

WOW, Yes this helps, I went back and looked at the link and source file. Thanks, I learned something today for sure.

Know I just need to edit the file you provided to match my supporters and links right?

Then I should be able to to add this to my css files for single post,page, etc right?

How can I use it as a widget?

Thanks again,

You're sure welcome Art!

Yes, just edit the coding with your supporters and their URL addresses, the CSS file will have to be modified as well.

If you run into difficulties, either post here or start a new thread in CSS forum.

I know what widgets are, but not knowledgeable because I don't use them.

Another question please,

<ahref=<imgsrc="link for image location" alt=""/></a>

is this the correct code for adding an image? I have the small Youtube,Facebook etc logos that I would like to add to the file you provided. Thank Again.

Take this code for example. I would like to add the facebook logo before the link.

<div class="box get_social full_social">
<h1>Get Social</h1>
<ul>
<li><a class="facebook" href="http://www.facebook.com/motosportinc"
target="blank">Motosport.com on Facebook</a></li>

<divclass="box get_social full_social">
<h1>Get Social</h1>
<ul>
<li><img src="http://dirthammers.com/wp-content/uploads/2012/04/facebook.jpg"></a><aclass="facebook" href="http://www.facebook.com/motosportinc" target="blank">Motosport.com on Facebook</a></li>

O.K I got it figured out to post the logo, but some some reason when I load this into my css file for pages it pushes the sider bar down to the bottom of the page. Humm

Please view the attached picture of the current issue. Almost got it just need a little more advice.

Thanks.

For a live image link:

<ul id="menu">
                  <li><a href="http://website.com/"><img src="image.png" alt="Image Description" width="100" height="100"></a>

For just an image:

<img src="image.png" alt="Image Description" height="100" width="100">

Or:

<img class="imgBlock" src="image.png" alt="Image Description" height="100" width="100">

Just for a link, no image:

<li><a href="http://www.dirthammers.com/index.html">Dirt Hammers</a></li>

CSS is not my strong suit, the CSS file needs to be modified as well.

<h1>Get Social</h1>
<ul>
<ul id=”menu”>
<a href=" http://www.facebook.com/motosportinc "><img src=" http://dirthammers.com/wp-content/up...4/facebook.jpg " alt="Motosport.com Facebook" width="25" height="25"></a><a class="facebook" href="http://www.facebook.com/motosportinc" target="blank">Motosport.com on Facebook</a>

O.K Great. I got the above code working without moving the side bar out of place. I have two questions and I think we can wrap this one up.

First, When I paste the code and view it within a page the logo and link are more center and I would like to move it to the left. What margin code to I write for that?

Second, The link is not displayed in the center of the logo. The link sits at the bottom of the logo like in the screen shot in the last post. Any way to fix that?

Thanks.

The CSS file is where it needs to be modified, and this can be fixed. CSS is not my strong suit, so am trying to figure out the what.

Try this:

#wrapperMain {
height: 100%;
background:url('bubbles.png');
margin-left: 128px;
margin-right: 128px;
padding-top: 1px;
padding-bottom:50px;
text-align: center;
color: #000099;

Or this:

ul
{
list-style-type:none;
padding:0;
margin:0;
font: 1em bold Arial, Helvetica, sans-serif;
	padding: 1em 0;
font-weight: bold;
text-align: left;
margin-left: 165px;
}
#menu ul {
list-style: none;

It's in the padding, margin, etc., your settings will be different from what I displayed, hope this helps, because CSS is not my strong suit even though I have a few CSS files, but I had help myself from a very knowledgeable Lady.

Originally Posted by Giselle

Try this:

#wrapperMain {
height: 100%;
background:url('bubbles.png');
margin-left: 128px;
margin-right: 128px;
padding-top: 1px;
padding-bottom:50px;
text-align: center;
color: #000099;

Or this:

ul
{
list-style-type:none;
padding:0;
margin:0;
font: 1em bold Arial, Helvetica, sans-serif;
    padding: 1em 0;
font-weight: bold;
text-align: left;
margin-left: 165px;
}
#menu ul {
list-style: none;

It's in the padding, margin, etc., your settings will be different from what I displayed, hope this helps, because CSS is not my strong suit even though I have a few CSS files, but I had help myself from a very knowledgeable Lady.

Which one of these helps with centering the link with the logo? view attachment please.

Which one will take the logo/link and move them completely to the left once viewing a page or post?

Where do I place the provided code within the code I already have in the last post?

Sorry for questions, I work on this stuff at a low level. Thanks.

I am low level with CSS myself, but am going to supply the original template LadynRed gave me, this is :

html, body{
	height: 100%; /* make it fill the screen vertically */
}


body{
	margin: 0; /* zeros out default margins and padding */
	padding: 0;
	/*set the left border graphic, repeat vertically,  and make the rest of the page black */
	background: #000 url(images/leftborder.png) repeat-y left top;
	color: #000000;  /*set background color to black */
	font: 100.01% normal "Times New Roman", serif; /* sets font size equal to 16px */
}

#header{
	width: 294px; /* set dimensions to size of the logo */
	height: 89px;
	margin: 0 auto; /*centers the logo on the page */
}

/*container holds the right side border, only repeats vertically */
#container{
	background:url(images/rightborder.png) repeat-y right top;
}


/*this is the center section. Left and right margins make space for the borders to show */
#wrapperMain{
	height: 100%; /*needed to make it fill the screen vertically */
	background: #d8cdaf;
	margin-left: 82px;
	margin-right: 82px;
	padding-top: 1px; /* stops margin collapse */
	text-align: center; /* centers all text inside it */
}
/* nagivation, centered on the page */
#menu{
	margin: 1em auto; 
	text-align: center;
	font-size: 1.75em; /* about equal to 28px */
	font-weight: bold;
	width: 50%; /* need width so the menu will stay centered */
}

#menu ul{
	list-style: none; /* removes bullets from list */
	
}

#menu li{
	display: inline; /*make the list horizontal */
	margin: 0 10px; /* spacing between menu items */
	line-height: 1.5em; /* sets spacing between lines */
	
}

#menu li a{
	margin: .25em 0; /*sets top and bottom margins on the <a> link */
	
}

img{
	border: 0; /*removes the borders around images when they are links */
}

a:link {color: #000000}
a:visited {color: #8D703D}
a:hover {color: #8D703D}
a:active {color: #000000}

p{
	font-size: 1.25em;
}

/* make the text for the copyright line smaller */
.copyright{
	font: 1em bold Arial, Helvetica, sans-serif;
	padding: 1em 0;
}

/* allows the image to be centered horizontally */
.imgBlock{
	display: block;
	margin: 1em auto; /* centers the image */
}

h1{
	text-align: center;
	font-size: 2.25em;
}

Here is the real one:

html, body {
height : 100%;
}
body {
margin : 0;
padding : 0;
background : #000 url(images/leftborder.png) repeat-y left top;
color : #000000;
font : 100.01% 'normal "Times New Roman"', serif;
}
#header {
width : 294px;
height : 89px;
margin : 0 auto;
}
#container {
background : url(images/rightborder.png) repeat-y right top;
}
#wrapperMain {
height : 100%;
background : #d8cdaf;
margin-left : 82px;
margin-right : 82px;
padding-top : 1px;
text-align : center;
}
#menu {
margin : 1em auto;
text-align : center;
font-size : 1.75em;
font-weight : bold;
width : 50%;
}
#menu ul {
list-style : none;
}
#menu li {
display : inline;
margin : 0 10px;
line-height : 1.5em;
}
#menu li a {
margin : 0.25em 0;
}
img {
border : 0;
}
a:link {
color : #000000;
}
a:visited {
color : #8d703d;
}
a:hover {
color : #8d703d;
}
a:active {
color : #000000;
}
p {
font-size : 1.25em;
}
.copyright {
font : 1em bold Arial, Helvetica, sans-serif;
padding : 1em 0;
}
.imgBlock {
display : block;
margin : 1em auto;
}
h1 {
text-align : center;
font-size : 2.25em;
}

You won't need (background: #000 url(images/leftborder.png) repeat-y left top) on yours or the right etc. I have black borders on each side of my pages, which you won't have. Also on your html page you will need to have:

<link href="name.css" type="text/css" rel="stylesheet">

This code will go below the title of your html page

Originally Posted by Giselle

I am low level with CSS myself, but am going to supply the original template LadynRed gave me, this is :

html, body{
    height: 100%; /* make it fill the screen vertically */
}
 
 
body{
    margin: 0; /* zeros out default margins and padding */
    padding: 0;
    /*set the left border graphic, repeat vertically,  and make the rest of the page black */
    background: #000 url(images/leftborder.png) repeat-y left top;
    color: #000000;  /*set background color to black */
    font: 100.01% normal "Times New Roman", serif; /* sets font size equal to 16px */
}
 
#header{
    width: 294px; /* set dimensions to size of the logo */
    height: 89px;
    margin: 0 auto; /*centers the logo on the page */
}
 
/*container holds the right side border, only repeats vertically */
#container{
    background:url(images/rightborder.png) repeat-y right top;
}
 
 
/*this is the center section. Left and right margins make space for the borders to show */
#wrapperMain{
    height: 100%; /*needed to make it fill the screen vertically */
    background: #d8cdaf;
    margin-left: 82px;
    margin-right: 82px;
    padding-top: 1px; /* stops margin collapse */
    text-align: center; /* centers all text inside it */
}
/* nagivation, centered on the page */
#menu{
    margin: 1em auto; 
    text-align: center;
    font-size: 1.75em; /* about equal to 28px */
    font-weight: bold;
    width: 50%; /* need width so the menu will stay centered */
}
 
#menu ul{
    list-style: none; /* removes bullets from list */
 
}
 
#menu li{
    display: inline; /*make the list horizontal */
    margin: 0 10px; /* spacing between menu items */
    line-height: 1.5em; /* sets spacing between lines */
 
}
 
#menu li a{
    margin: .25em 0; /*sets top and bottom margins on the <a> link */
 
}
 
img{
    border: 0; /*removes the borders around images when they are links */
}
 
a:link {color: #000000}
a:visited {color: #8D703D}
a:hover {color: #8D703D}
a:active {color: #000000}
 
p{
    font-size: 1.25em;
}
 
/* make the text for the copyright line smaller */
.copyright{
    font: 1em bold Arial, Helvetica, sans-serif;
    padding: 1em 0;
}
 
/* allows the image to be centered horizontally */
.imgBlock{
    display: block;
    margin: 1em auto; /* centers the image */
}
 
h1{
    text-align: center;
    font-size: 2.25em;
}

Here is the real one:

html, body {
height : 100%;
}
body {
margin : 0;
padding : 0;
background : #000 url(images/leftborder.png) repeat-y left top;
color : #000000;
font : 100.01% 'normal "Times New Roman"', serif;
}
#header {
width : 294px;
height : 89px;
margin : 0 auto;
}
#container {
background : url(images/rightborder.png) repeat-y right top;
}
#wrapperMain {
height : 100%;
background : #d8cdaf;
margin-left : 82px;
margin-right : 82px;
padding-top : 1px;
text-align : center;
}
#menu {
margin : 1em auto;
text-align : center;
font-size : 1.75em;
font-weight : bold;
width : 50%;
}
#menu ul {
list-style : none;
}
#menu li {
display : inline;
margin : 0 10px;
line-height : 1.5em;
}
#menu li a {
margin : 0.25em 0;
}
img {
border : 0;
}
a:link {
color : #000000;
}
a:visited {
color : #8d703d;
}
a:hover {
color : #8d703d;
}
a:active {
color : #000000;
}
p {
font-size : 1.25em;
}
.copyright {
font : 1em bold Arial, Helvetica, sans-serif;
padding : 1em 0;
}
.imgBlock {
display : block;
margin : 1em auto;
}
h1 {
text-align : center;
font-size : 2.25em;
}

You won't need (background: #000 url(images/leftborder.png) repeat-y left top) on yours or the right etc. I have black borders on each side of my pages, which you won't have. Also on your html page you will need to have:

<link href="name.css" type="text/css" rel="stylesheet">

This code will go below the title of your html page

Sorry but this has gone over my head alitttle.

Question: the first code above, what does it do? Where does it go? I'm lost.

Next question: the second code you provided what does it do? where does it go?

I think what I'm trying to do is getting lost a little do my lack of css skill and lack in explaining what I'm tring to do. Sorry.

Believe me I understand, and there is no reason to be sorry at all......

They are two separate files, .html and .css, the two files have to go together. The best I can do is supply a link for a tutorial:

CSS tutorial starting with HTML + CSS

If you scroll down to step 7 you will see where the last code I supplied goes into the html file. This has pictures to show what you are doing and the how to's.

Originally Posted by Giselle

Believe me I understand, and there is no reason to be sorry at all......

They are two separate files, .html and .css, the two files have to go together. The best I can do is supply a link for a tutorial:

CSS tutorial starting with HTML + CSS

If you scroll down to step 7 you will see where the last code I supplied goes into the html file. This has pictures to show what you are doing and the how to's.

Thanks for your help. I still need to clear the air just a little. Please view the attached photo. All I want to do is center the word "Motosport.com Facebook" with the little facebook logo. The provided code seems very intense just for that. Here is my HTML code I used to provide what you see in the picture

<a href="http://www.facebook.com/motosportinc"><img src="http://dirthammers.com/wp-content/uploads/2012/04/facebook.jpg"width=25 height=25><a href="http://www.facebook.com/motosportinc" target="blank">Motosport.com on Facebook</a>
I think I know where the confusion has came form, I few post ago I switched to using HTML code. Writting style sheets is way over my head.