Sunday, December 27, 2009

Cute Bouncing Bookmark Icon


Have you put this type of things on your blog?
If you did not put it yet, I suggest you to use it now! Make your blog more perfect with it. After this you can share your post easily with  Twitter, Facebook, StumleUpon, Digg and Del.icio.us. The icon will be bounce when you mouse over at the icon. Follow the steps below and enjoy it!


Step 1: Find this </head> tag

Step 2: Paste this code before this </head> tag

<!--Bounce icon bookmark end here-->
<link href='http://www.sigmirror.com/files/49026_ox7kn/bounce%20icon%20bookmark.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://www.sigmirror.com/files/49024_khzo0/bounce%20icon%20bookmark.txt' type='text/javascript'/>
<!--Bounce icon bookmark end here-->



Step 3: Find this <data:post.body/> tag



Step 4: Paste this code after the <data:post.body/> tag

<!--Bounce icon bookmark start here--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>

<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>

<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
</center>
</b:if>
<!--Bounce icon bookmark end here-->



Step 5: Now Save your template...

Enjoyed it! 


-------------------------------------------------------------------------------------------------------------------

Update!

If u want to put the twitter and facebook only, u just delete the other codes...

SOCIAL BOOKMARK CODE
For Twitter:
<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>

For StumbleUpon:
<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Facebook:
<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Digg:
<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

For Del.icio.us:
<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



Just paste the social bookmark code inside the code:


<!--Bounce icon bookmark start here--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>

 PUT THE SOCIAL BOOKMARKS CODE HERE

</ul>
</center>
</b:if>
<!--Bounce icon bookmark end here-->



If you have any question or suggestion, please leave your comment... Thank You

2 comments:

Sista'z Showroom on December 27, 2009 at 7:32 PM said...

kalo kita nk pilih certain bookmark je bleh kn?

Syarhan on December 27, 2009 at 9:42 PM said...

please refer the updates...tq

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template