Add buttons social networking plugins

Today's lesson is about how to add buttons elegant private social sites or sections of the Code CSS technology.
These buttons you can view different pages on social networking sites or additional partitions private blog  in a professional manner so that it appears as a normal writing and as soon as the mouse pointer is positioned over the writing writing appears framed colored circle in the great movement with the possibility of the amendment on the color of the circle.
As these buttons can be placed inside the threads on your blog as a preview button or download button, for example.

Explain how:

1. Went to the control panel of your blog.

2. Click on the template.

3. Then edit the html.

4. Click Continue.

5. Chose to expand the template

6. Search for this code using Ctrl + F:  </head>

Place immediately before the following code:

<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* Fuente - Tamaño y estilo */
list-style-type: none;
text-align: center; /* Alineación "left", "center", o "right"  */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: black; /*Color del título base*/
margin: 0 auto; /* Espacio entre los títulos en px se quitaría auto */
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white; /* Color del título resaltado */
background: #a71b15; /* Color de fondo del efecto */
-webkit-border-radius: 50%; /* Medida en porcentaje del borde circular */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* Mover el texto del menú hacia arriba para centrarlo si se necesitara */
}

</style>

7. Now all you have to do to add the buttons on the form of a special tool sites or Forums is to go to the control panel of your blog
8.Planning.9. Addition tool.10. Select Html / Javascript.11. Add the following code:
<div class="spotlightmenu">
<ul>
<li><a href="Link your Facebook page or section link "><span>Write the name of the department or Facebook</span></a></li>
<li><a href="link2"><span>name2/span></a></li>
<li><a href="link3"><span>name 3</span></a></li>
<li><a href="link 4"><span>name3 </span></a></li>
</ul>
</div>

Note:

- Modify the code including suits you.

- You can drag the addendum to the place that suits you best.

- If you want to insert the buttons inside the Multi all you have to do when no charges Topic Click html next form and insert this code in place that would like to show the buttons.
- You can control the number of buttons Bhdf or add part referred to blue in the previous code.

-->

No comments

Posted at 4:31 PM |  by Unknown