Big Sexy Social Bookmark

2:29 AM
If in the previous article I have discussed how to create a "sexy social bookmarking", this time In this article I will give you how to create a "Big sexy Social bookmarking" like the picture below.

Addition of very good social bookmarking to promote our blogs on a site on facebook, twitter, digg and others.

Below are the steps how made:
1. Add the following CSS code in the code of ]]>
div.sociable { margin: 16px 0;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
2. You find the code


if you're already wearing readmore blog, then there are two code.
then select the second code does not let me appear on the main page.
See you after you enter the following HTML code below the code above.


Ngobrol Seputar Bisnis Online


  • Digg

  • del.icio.us

  • Facebook

  • Google

  • StumbleUpon

  • Technorati

  • TwitThis



Save template and see result

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments