Slide Out Egg Bookmarking Gadget For Blogger

Presenting a cute egg shaped fixed position on hover slide open bookmarking gadget for your blog. This is a normal bookmarking gadget but is dressed-up in a cute way. This stays at a fixed position on your blog. This contains Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email buttons and the Share This Icon Offers hundreds more bookmarking choices. First you must check out the screenshot before you add this cute gadget to your blog. I have a tutorial below specially made for you for adding this widget to your blog. So lets go on to the tutorial

How to add slide out egg bookmarking gadget to blogger?

1. Go to "TEMPLATE" and click on "EDIT HTML".

2. In the "HTML EDITOR" find(CTRL+F) for </head> 

3. Just before/above </head> paste the following code:

<!-- Start Heart Bookmarking Gadget Code From http://bloggertrickshut.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://bloggertrickshut.blogspot.com/ -->

4. Now find for </body> (Use CTRL+F to find codes)
5. Just before/above </body> paste the following code:

<!-- Start Heart Share Code From http://bloggertrickshut.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://bloggertrickshut.blogspot.com/ ">Blogger Widgets</a><!-- End Heart Share Code From http://bloggertrickshut.blogspot.com/ -->

Customizing the position of the gadget/widget!

This is an easy customizable widget. You don't need to customize any big thing in this widget/gadget. Just you need to change the position of the widget. Well, it is optional because if the position fits your blog you may continue without customizing the position. So all just you need is to change the highlighted text in the above code. The code says: bottom: 2% and left:2%. This means the widget will float 2% away from the bottom and left. You can change those percents to change the position of your widget. 

After all, we have added a new cute sharing widget to our blog. I will be posting many other coll and cute bookmarking gadgets and more. Don't forget to subscribe to Blogger Tricks Hut. Happy Blogging. Comments are welcome.

Read More

Flash Animated Label Cloud Widget For Blogger

Presenting the Flash Animated Label Cloud Widget for blogger. This is a fully flash widget with wonderful effects. This is a easy customizable widget and automatically extracts labels from your blog. This has been a very popular plugin at WordPress. Your blog will surely get a good look with this tutorial. So in this post you will learn how to add this super cool widget to blogger blogs and customize it as per your needs. So lets get on to the tutorial!


DEMO

How to add this widget to blogger?

1. Sign into your blogger account.

2. Go to your blog and jump to "LAYOUT".

3. From there add a "HTML/JAVASCRIPT" gadget.

4. In the "HTML COMPOSER" paste the below code:-

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://pcTricksarena.BLOGSPOT.COM/">BLOGGER TRICKS</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "HTTP://BLOGGERTRICKSHUT.BLOGSPOT.COM",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 15,
    speed          : 100,
    width          : 250,
    height         : 250,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

How to customize this widget? 

As mentioned above this widget is an easy customizable widget, just fellow the simple steps to make this widget suit your blog. Just understand the simple words to be changed!

1. Change our blog url to yours(if you won't do it, labels will be extracted from

    our blog not yours).

2. In the label color- change the code 000000 to the color your want.

3. Change the hover color 333333 to the color you want.

4. Change background color FFFFFF to the color you want.

5. Change size 15 to the text size suiting your blog's sidebar links.

6. Change the height(250) and width(250) to the height and width your

    sidebar suits. 

That's it you have successfully added a super cool label cloud to your blog. Keep blogging. Don't forget to share. Bye!

Read More

Pageviews,Visits,Stats Counters for your blog or website

There are many website counters which will help you track your website pageviews visits etc in detail.

Following are some counters which is helpful for you to track your visitors.


1.Revolver Maps
Revolver Maps are interactive visitor globes rendered by the Revolver Engine. Check the widget on the left: Use the buttons or drag to navigate.

The Revolver Graphics Engine is a strongly specialized 3D renderer. It's available as a Java version as well as a Flash version. The RevolverMaps Service bases on both implementations.

you can get it free without any registration

just go to http://www.revolvermaps.com/ and get a map for free

2.Whos Amung Us

Just go to http://whos.amung.us/

and copy javascript in you website you do not required any registration process

whos.amung.us was created to bring you innovative web stats. We are not traditional. Page views are too easy to count. Instead, our widgets tell you how many users are on your website or blog right now, what pages they are on, how many of them there has been in the past, and where they come from - live. 

3.Histats

Register you website at http://www.histats.com/ and just paste code given by them in your blog or website and start tracking your visitors 

Histats is

• 100% free
• Very large and powerful log analyzer for deep data inspection
• Password protected 
• 60+ styles
• Real time control panel for multiple sites

4.Flag Counter

Add our free counter to any webpage and collect flags from all over the world. Every time someone from a new country visits your site, a flag will be added to your counter. Not only will this make your site far more interesting, but clicking on your Flag Counter will reveal amazing information and charts!

Just go to http://flagcounter.com/

no registration is required just choose any style and proceed and implement/paste code in your blog or website

and drop your queries in comment box 

Read More

Cool Shareaholic JQuery Slide Bookmarking Gadget With Tooltips And Counters For Blogger

Over the years on Spice Up Your Blog i have found Social Bookmarking gadgets to be amongst the most popular posts.Whats more the most popular Bookmarking gadgets have been from the "Sharing Is Sexy" series.Back in May 2011 we published a post with The Awesome Complete Animated Sexy Social Bookmarks V3 For Blogger, that post really did cover all options.Today i want to give you something similar but with some cool extras.The Shareaholic bookmarking widget still has the "Drop Down" and "Slide Up" features but also features tool tips and counters showing how many times your posts were shared.Take a look at the demo and screenshot below (for the demo scroll to the foot of the post on the test blog).

 

Add The jQuery Slide Bookmarking Gadget To Your Blog

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template 

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template) 

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<div class='post-footer'>

Step 5. Now Copy And Paste This Code Directly Below / After <div class='post-footer'>

<!--Start Ssocial Bookmarks from http://www.spiceupyourblog.com -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @username&quot;}};
</script>

<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
<!-- End Social Bookmarks from http://www.spiceupyourblog.com -->

Important :

Change username in red with your twitter username, if you dont have a twitter username please remove paulcrowepro and leave it blank.

The two sections of code in yellow make the gadget only appear below your posts on the post pages not the home page.If you want the gadget to appear on your home page remove the two snippets.

Step 6. That's it save your template and check out your cool new gadget.

Credit for the original version of this goes to Shareaholic.

Read More