Blog Tricks

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven’t such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Just below that add the following group of codes:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’spinning_icons’>
<a class=’twitter’ expr:data-text=’data:post.title’ expr:data-url=’data:post.url’ href=’http://twitter.com/share’ rel=’nofollow’ target=’_blank’ title=’Twitter’>Twitter</a>
<a class=’delicious’ expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Delicious’>Delicious</a>
<a class=’digg’ expr:href=’&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Digg’>Digg</a>
<a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Facebook’>Facebook</a>
<a class=’stumbleupon’ expr:href=’&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’ title=’Stumbleupon’>Stumbleupon</a>
<a class=’rss’ href=’http://feeds.feedburner.com/hacktutors‘ target=’_blank’ title=’RSS’>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url(‘http://4.bp.blogspot.com/-KxcARTmAlQI/TwCDycGOXVI/AAAAAAAABis/rBrMzmoyN6c/s1600/twitter_32.png’); }
.delicious{ background:url(‘http://4.bp.blogspot.com/-82J7zeYp1s8/TwCEN_HoAhI/AAAAAAAABkQ/t1wtld8lNA4/s1600/delicious_32.png’); }
.digg{ background:url(‘http://1.bp.blogspot.com/-MtS4dU0fY4A/TwCENEQUQvI/AAAAAAAABkE/glAaVSTKJDM/s1600/digg_32.png’); }
.facebook{ background:url(‘http://4.bp.blogspot.com/-Sxhuf0CW8OY/TwCEMpoaq0I/AAAAAAAABkA/PfhoKDMBcBQ/s1600/facebook_32.png’); }
.rss{ background:url(‘http://4.bp.blogspot.com/-Q5bYfx3dD2g/TwCEKQfYMQI/AAAAAAAABjw/XrXOvdFeZZs/s1600/rss_32.png’); }
.stumbleupon{ background:url(‘http://3.bp.blogspot.com/-hwn17i1SLNU/TwCEJNfyIWI/AAAAAAAABjo/TBb8oc2KHGs/s1600/stumbleupon_32.png’); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Thanks to Paulund for this cool CSS3 bookmarking button spinning effect.
Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Other hacks to improve blogger comment system are highlight blog author comments andnumbering blogger comments which can be quite useful for you to make blogger comment system more useful and beautiful.

Now lets continue to how adding reply button to each comment in blogger.


Let now continue to tutorial how to add this to blogger comment system.

Step 1 : Go To dashboard Click Design > Edit Html > Tick the ‘Expand Widget templates’ box.

Step 2 : Press Ctrl + F and search for below code

And place the below codes after it.

You must need to change the YOUR-BLOG-ID with your blog id.Now how to get your blog id.Just got to blogger Design > Page Elements.
Now see for adress bar in your browser.You will get link like this.



Just get the id number in pink border and replace in the above code.And you have done now and just save your template.Now you will be able to see the reply button in each blogger comments.

Now Some customization to reply button.

Some users will like to want to keep reply button instead of text [reply].So just replace [Reply] in red in above codes with below image link and you will get reply image instead of that text.

Just to have your own image change the image link with yours to have your own image.

Advantages

As now your readers just need to hit the reply button to any particular comment and a pop window will open like below and just need to write comment there and publish it.As it will make comments publish fast and easily.

 

Just type your comment after the text written in window above and publish it.

Comparison To WordPress

As in WordPress when doing comments using reply button, the comment get publish after the comment u replied to but in this hack the comment get publish as usual in last as blogger does, not like wordpress 🙂

But still i feel many will like this for sure to make look here blogger comment system look good and making easy for readers o reply.

If you have any further questions leave your comment below i will try to solve your issues.

Lets Make a Scrolling Bar menu for your Blog

First of all sign in your blog and go to Layout section. Now you have to click on Add a Page Element Where you want to add the scrolling bar widget.

Click Image To enlarge

Select HTML JAVASCRIPT to add the page element .

Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.

Copy this codes and paste it to page element and save it.

Now preview your blog.

You can change your links and text in the codes to show of yours links and posts.

Note:-In the codes you can edit height and width in red to adjust it to your blog.