Cute Bookmarking style under posts

Get this cute bookmarking share style with titlepopup under your blog posts now for free. Just follow the instruction given and you will see the cute result below your blog posts...

Step #1

- Go to Layout > Edit HTML

Step #2

- Before you made any adjustment of your blog please save your blog template first!

Step #3

- tick on the Expand Widget Templates

Step #4

- Use Ctrl+F shortcut key and search for this ]]></b:skin> tag:

Step #5

- Paste this code above the  tag:

/* Bookmark with titlepopup by syafzpic.com */
#titlepopup{
position:absolute;
border:none;
background:#323232;/*titlepopup background color*/
padding:2px 5px;
color:#f2f2f2;/*titlepopup font color*/
z-index: 20;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 5px;
-moz-opacity: .87;
display:none;}   
.syafzpicc{opacity:0.45;}
.syafzpicc:hover{opacity:1;}

 

Step #6

- Once again, use Ctrl+F and search for this code:
<data:post.body/>

Step #7

- Paste this code below right after the <data:post.body/> code:

<div> <div style='background:#fbfafa; padding:9px; border:solid 3px #dedede; font-size:12px;'> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td> <img src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/syafzpicstyle5.png'/> </td> <td style='background:#ffffff; border:solid 2px #f1f1f1; padding:9px;' width='495'> <center> <!--Twitter--> <a class='titlepopup' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5twitter.png'/> </a> <!--Digg--> <a class='titlepopup' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this post on digg.com'> <img class='syafzpicc' style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5digg.png'/> </a> <!--Delicious--> <a class='titlepopup' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='del.icio.us.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5delicious.png'/> </a> <!--Facebook--> <a class='titlepopup' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' title='Facebook.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Facebook' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5facebook.png'/> </a> <!--Technorati--> <a class='titlepopup' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5technorati.png'/> </a> <!--Yahoo--> <a class='titlepopup' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&t=" + data:post.title' title='Yahoo.com' target='_blank'> <img class='syafzpicc' style='border:none;' alt='Yahoo' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/style5yahoo.png'/> </a> </center> </td> </tr> </table> </div> </div>

Step #8

- Save your template and done!

InspiredMagz.com