Mojoe - Melepas Rindu

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 ]]></ b: skin>

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 <p> <data:post.body/> </ p>
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.

<div class='sociable'>
<div class='sociable_tagline'>
<img alt='Ngobrol Seputar Bisnis Online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZ182p5b_oRQg9IV-u0YVMYPWRS397Ls0PxOftF0a2Xa234LqUAlNQKZyey9Jd7OlouJZGqPTFEcaFyfdy58d4RLnChqgJTCf0CuAuNRygsyM2dS8WBmzks407Lv0fEJEL-d4NJ0HKHWy/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB9qEMVciExofqQAnKMZYJ_WYFIzmeAxdpJWrzOo3uoQx6RyLY9nvixu8P0UisTNYUz3Iae3X4aIT-T_e1D9ia-n03oGLRwyS05J53VAyzJBCY8v45Lfp4QeuhyjjFEJ9ygxs3JTzWz0Bt/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9-s1cEonJm0EXf-vkBX4mShIDhQznz7a_yxyGzsEvcIadJ-ZZtG6lLRJ7f9xwm576LW1Ezo-hFnFzeacBJgC-KB7siD33Xvqf0ekOhyCI0EHjuvKKDw6xbSlgk37m8JRQxGb8puQjTwq/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8szvq0Vh4H-OmCpbJWKBtBF-QrLbuWezwA8ZWW356IVTsFHZXWmpDsncwGFJvWXexCCrjgU4zwcDOlNvwXyFLLXxot1MNJpDn2_iKON8qb3EnU-AC1VVNQV0JRvscSvgv0Z6fx3_pr9CD/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqDrZYcEGwNV3LOw4lWdrAHkRQVVcWUQNA5p0QEGelL58ItocuE8JDAAApzxQT76bR_UFHtMVO-zDlIWcivc6wEDcqzB90HNSAKNcZl_xEw5TXDv63AzZOHjr6uJA7XVs45KEY_8itOOWu/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhf8G4DO2uK-xFzRZPPvSvo-5q8tPecIjIjderj5hkpPFgcrAKJKZAipEJvhrwjfUxYCx-V3Hb7zlPNAYbrs6RadoX39jW7G9KofNFhCliGMNFYgCyi5Mb_1EvNQtNLRgTyJEf1_M9aBk/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLj35CQrIxDqfKelO0N3sTCoydCyxzvmudh_FaRejbaYjr-501_Nj1unQqXPuHt0Z2xTyCCctfNiWWVguAwaZYlUku4Lqpez_rVTWW2QeA-ZSzN97VZpvJVCUs0C7taaDSSfaarXp3JjKJ/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59pCj9Ub991OJnuAVPn2HaGMlmhcWkzZqrylgLy63pEztes_jORMs3jHMuAehHo8anRm1sb6EZZAqaYfgOpLpG3hk16mwy5kVel3hfz1lT08oDAYlxP745Hk44zuBCo6YHNHuGr8Pm3tc/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>

Save template and see result