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!

Elegant pop up title for your link

Elegant link pop up title for your links in your blog...

------------- STEPS -------------

Step 1
- As usual, go to Layout > Edit HTML

Step 2
- Then use Ctrl+F shortcut key to find this ]]></b:skin> code tag

Step 3
- Paste this below code above the ]]></b:skin> code tag:

/* Titlepopup by syafzpic.com */ 

#titlepopup{
    background:#323232;/*titlepopup background color*/
    color:#f1f1f1;/*titlepopup font color*/

    padding:2px 5px;
    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;

    border:none;
    display:none;

    position:absolute;

}    

Step 4
- Paste this script code link in your <head> area or just paste it above the </head>

<script src="http://s2.sigmirror.com/files/53531_qbkj8/jquery.js" type="text/javascript"></script>
<script src="http://s2.sigmirror.com/files/53732_zbfhp/nice_appears.js" type="text/javascript"></script>

Step 5
- Save your template

Step 6
- Just use this code in any link that you wanted the popup title to be appear

<a href="PUT URL HERE" class="titlepopup" title="PUT THE URL TITLE HERE ">URL Name Here</a>

• PUT URL HERE = Replace this with URL link, for example: http://blogging-style.blogspot.com
• PUT THE URL TITLE HERE  = Replace this with the pop up title, for example: Visit me again.
  
• URL Name Here = Replace this with the name of your URL, for example: Blogger Tips and Style  
  

----------------------- Finished ------------------------

Example link with title pop up code:
<a href="http://www.syafzpic.com" class="titlepopup" title="Visit me at syafzpic.com ">SyafzPic</a>

Result = mouse-over to this word, SyafzPic

Printer friendly

Just paste this code in your post HTML:

<a href="javascript:window.print()">Print</a>

Popular posts widget

Show your popular posts at the sidebar.
Go to Add a Gadget and choose the HTML/JavaScript. Copy and paste this code in it.

<script type="text/javascript">
start_views_num = 1;
limit = 5;
</script>
<script src="http://h41r3z4n.googlepages.com/MostViewed.js" type="text/javascript">
</script>