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!

Fancy Bookmarking style below post

Hi... nice to meet all of you again.

In my older post, I had tell all of you about my first social bookmark share design. Today, I want to tell you my second social bookmark share design. This second design have more different than the first one (Please don't remove the copyright by syafzpic.com part). I don't want to waste any more time for the introduction session. Let's we proceed to the tutorial shown below...

Step 1.
- Use Ctrl+F and search for this  ]]></b:skin> tag. Paste this code above the ]]></b:skin> tag:

.syafzpicc {
opacity: 0.45;
}
.syafzpicc:hover {
opacity: 1;
}

Step 2.
- Then, use and search Ctrl+F for this <data:post.body/> code.

Step 3.

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

<div> <div style='background:#9f3503; padding:9px; border:solid 3px #dedede; font-size:12px;'> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td> <img style='border:none;' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/sharethispostone_by_syafzpic.png'/> </td> <td style='background:#341709; border:solid 2px #2e2e2e; padding:9px;' width='495'> <center> <!--Twitter--> <a class='syafzpicc' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com.' target='_blank'> <img style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/TwiTTer_syafzpic.png'/> </a> <!--Digg--> <a class='syafzpicc' 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 style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/digg_32.png'/> </a> <!--Facebook--> <a class='syafzpicc' 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 style='border:none;' alt='Facebook' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/facebook_32.png'/> </a> <!--Delicious--> <a class='syafzpicc' 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 style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/delicious_32.png'/> </a> <!--Stumble--> <a class='syafzpicc' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='stumbleupon.com.' target='_blank'> <img style='border:none;' alt='Stumble' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/stumbleupon_32.png'/> </a> <!--Technorati--> <a class='syafzpicc' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/technorati_32.png'/> </a> </center> </td> </tr> </table> </div> </div>


Step 4.
- Save your template and enjoy the elegant bookmarking share under your post.


Credits:
- syafzpic 

I hope all of you enjoy the tutorial and please leave a comment...

Nice bookmark under post

Hi...I'm SyafiqZaimi, Syarhanz's brother, nice to meet all of you.

Peace be upon to all of you. Today is a great day and I want to start it by posting something in my blog post.
Now, I want to show you my first social bookmark share design. I make it by my own and now I want to share it with my readers (please don't remove the copyright by syafzpic.com)... Like people always told, 'sharing is caring + loving'. To put that nice bookmark share on your blog, you just need to follow the steps given. You can see the example at the end of this post.

Step 1.
- Use Ctrl+F and search for this  ]]></b:skin> tag

Step 2.
- Then, use and search Ctrl+F for this <data:post.body/> code.

Step 3.

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

<!-- syafzpic bookmark style 3. For more details please go to syafzpic.com --> <div> <div style='background:#341709; padding:9px; border:solid 3px #dedede; font-size:12px;'> <div> <img style='border:none;' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/lovethispostheader.png'/> </div> <table border='0' cellpadding='0' cellspacing='0' width='auto'> <tr> <td style='background:#9f3503; border:solid 2px #2e2e2e; padding:9px;' width='495'> <center> <!--Twitter--> <a class='syafzpicc' expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' title='twit this post on twitter.com.' target='_blank'> <img style='border:none;' alt='Twitter' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/TwiTTer_syafzpic.png'/> </a> <!--Digg--> <a class='syafzpicc' 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 style='border:none;' alt='Digg' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/digg.png'/> </a> <!--Furl--> <a class='syafzpicc' expr:href='"http://furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' title='share with furl.com.' target='_blank'> <img style='border:none;' alt='Furl' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/furl.png'/> </a> <!--Delicious--> <a class='syafzpicc' 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 style='border:none;' alt='Delicious' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/delicious.png'/> </a> <!--Stumble--> <a class='syafzpicc' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' title='stumbleupon.com' target='_blank'> <img style='border:none;' alt='Stumble' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/stumbleupon.png'/> </a> <!--Technorati--> <a class='syafzpicc' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' title='technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/technorati.png'/> </a> <!--Reddit--> <a class='syafzpicc' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='share with technorati.com.' target='_blank'> <img style='border:none;' alt='Technorati' src='http://i625.photobucket.com/albums/tt337/syafzpic/syazavatar/reddit.png'/> </a> </center> </td> </tr> </table> </div> </div>

Step 4.
- Save your template and enjoy the elegant bookmarking share under your post.


Credits:
- syafzpic

I hope all of you enjoy the tutorial and please leave a comment...Enjoy the tutorial!