Blogger | Social Media Bookmarking Widget With Fisheye Effect

This is another great jQuery magic, with Fisheye components from Interface and the icons I used here are from Icons etc. Here is the link to the DEMO.

Now, the steps to implement this widget to your blogger blog. Go to Blogger > Layout > Edit Html and click on Download Full Html and save it to have a backup of your template.
After the above step check on Expand Full Widget Template and place following two (2) codes within <head> and </head> section of your template;

Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/></script>
<script src='http://www.yourjavascript.com/502931191293/interface.js' type='text/javascript'/></script>

Now, find ]]></b:skin> in your template and place the following CSS codes just above it;

Code:

/* Social Bookmarking Widget */

#smb2 {
width: 100%;
position: relative;
padding-bottom:30px;
top:-20px;
}
.smb-container2 {
position: absolute;
height: 50px;
padding-left: 20px;
}
a.smb-item2 {
display: block;
font: bold 10px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
top: 0;
bottom: 0;
position: absolute;
text-align: center;
text-decoration: none;
}
.smb-item2 span {
display: none;
padding-left: 20px;
}
.smb-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

The final step is to find <div class='post-footer-line post-footer-line-3'> and place the following codes just after it;

Code:

<!--Social Bookmarking Widget Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='font-size:85%; font-weight:bold;'>Bookmark &amp; Share:</p>
<div class="smb" id="smb2">

<div class="smb-container2">
<a class="smb-item2" expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Delicious</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJ6GXTIGPaMerSl36Esr5SiQAXBHgNt26_vFErHNVX858J4-yOeHLdLDrdV9xTPwyxtP2-O_TVo3NmZbxv8xkzCzYmyn_UOgLSarTkKxSVq6rerocHvekW_eJTj7buwxy87ATS8RLuzgf/s1600/delicious.png" alt="Delicious" /></a>
<a class="smb-item2" expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4T8k82vkzejfhRIEMuLPuv7_deOKMdYDzhsg5W1x8piFO0sOOuEC_WoxUW3laLMu_BE5_j_iHut1GQP-bcudThgDqF2RuBA4Ea_AViyNpxYLc58PBsGAliIv1LmP7otGcaaYd0NqqyCv/s1600/twitter.png" alt="Twitter" /></a>
<a class="smb-item2" expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQph_JMmPYeZ1I-yQAPUb8vfOq1IXk-lKkspjWd6iHBsfyI7f_x1B6eO_7hU-OCV7-6eswME28atlDRJ93e8f5DMFrnJ8AVJn6bx3K6-Ughw1J0wK6Fj0gZE3RclnCNFj2pvLHlYJjrvWy/s1600/facebook.png" alt="Facebook" /></a>
<a class="smb-item2" expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Digg</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeRqie8jdRmlHU8z3Btay7PzajL9gEupeP3fYxFxeV9ArkZPKLrhyphenhyphenpMEydgLmorLeskU6Fo-OvsGj6LsJ4KJsOci5kY5w2oSRglRrmfAHUsSTG_cAYin5XcSf4n7eEWIBHKvveIBM2tjl/s1600/digg.png" alt="Digg" /></a>
<a class="smb-item2" expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&amp;title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk12D10eK5YE6vWzR9-o_gE08rEh13YO83832KuWLqCCUTh9SXadXGIpafzJdFAEB4Hs0uGHtOaDGBIJc9Y4WJI60a878KJg9KZZUOUY8SzK1JxRXGN3XjPDis7BJUQwUkHZJYuJPfWNT9/s1600/stumble.png" alt="StumbleUpon" /></a>
<a class="smb-item2" expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4APBclUCRh7RUt_usUQNN-UBdeyBg69AYkYVw7JLSo8S59xIqpxpY-zZ56l_Kn1YvE4p8vpJCEV8yxeG-rY6hBbDwR7agC3neJHazM5GwOEAeCYlYC0eo-3ihPHShp6upp_t4pU5_7sr/s1600/technorati.png" alt="Technorati" /></a>
<a class="smb-item2" expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVc9ib-s0PQ78wEWCdN4yuI2S86xIvopPPvOEG0vmovI9Hw-PEMl6wzZwqujV_Vn074JIGrtWlOeeLZ6JWyr5UbCI3YLpnDKsAwaB6jWGJtKWPdYdUFtKSDsH-Xwkbt5mNJ1UwwohAtuK/s1600/rss.png" alt="RSS" /></a>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(
function()
{
jQuery('#smb2').Fisheye(
 {
  maxWidth: 64,
  items: 'a',
  itemsText: 'span',
  container: '.smb-container2',
  itemWidth: 60,
  proximity: 80,
  alignment : 'left',
  valign: 'bottom',
  halign : 'center'
 }
)
}
);
</script>
</b:if>
<!--Social Bookmarking Widget Ends-->

Save the template and you are done.

Use only 128x128 pixels icons, in case you would like to replace them.

9

jayaraj said...: nice i like it i want to try them; January 02, 2010
Jayaraj said...: it is not working it is showing that your template is not parsed well the element type head must be terminated by "" so i removed </script> from the .js codes

and the template saved but see my blog the animation is not coming whats wrong i want it plzzzzzzzzzzzzzzz

jayarajyadav.blogpost.com; January 02, 2010
Googy said...: @Jayaraj.chinna...as per your comment I checked with the whole code and found noting wrong with it...It's working very fine! I would ask you to copy and paste the codes properly!; January 02, 2010
Jayaraj said...: download the copy of my template here and tell me the defect in my template why it is not working

http://www.ziddu.com/download/7998087/JayarajYadav.txt.html

help me plzzzzzzzzzzzzz

tell me as soon as possibleeeeeeee; January 03, 2010
Googy said...: @Jayaraj.chinna.....I found an error in your code, just replace the following texts within code;

<script type="text/javascript">
JQuery(document).ready(
function()
{
JQuery('#smb2').Fisheye(
{

with this code;

<script type="text/javascript">
jQuery(document).ready(
function()
{
jQuery('#smb2').Fisheye(
{

Both codes above may seem to you quite similar, but there is a minor difference, see the word "jQuery", in the above code (from your template) "J" is capital.; January 03, 2010
Sreejesh said...: Hi Googy, I found ur link from MBT, can u do one favoour I needed to create a category in alphabetical order like the one in the footer of the below site.

http://en.kioskea.net/faq/sujet-403-command-prompts-for-windows; January 06, 2010
Googy said...: @Sreejesh....Thanks for the visit & comment...well, I liked your suggestion & will try my best to come-up with such widget soon....keep visiting!; January 06, 2010
Jayaraj said...: hai sreejesh i think u came to thhis site by me

jayaraj; January 06, 2010
AhsanShankar said...: Nice I liked the widgets; January 11, 2010