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

How To Add Beautiful Subscribe Section to Blogger

Do you like to add a good looking Subscribe section to your blog?Then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiabJX9WkoUqY6hFs23hEuAraFGqoZWUs7HyJEN6bQ9c1Ek8MX2MF4yereRSpIuh1gzoKiC33H50q1d8oW91L_5FzntxW1ZOYzXAuEEOyHjdXjqb_wms_OWqsd2ZGVZIsIeS-lxBMzgPAw/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFzLC1jAE59dRBfV9OYPj9iAznVKlaryF1aIuqR3fB3UyyOxJQBWvC1GwAsqSDcOfLuNbR240HsVj5W2okYQFXGpgGwTZ-WMuarH4a94z801kM-D0suz9SAVyyzmEpON3ATdu8NkckPnR/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRF0PKBb-769-mkOzF0GIulQRKU4ztxlNpsieedFv1ImHP14_HUHAYP4-x-UQ7PKO5i2x0L9EO_nGnFQmO-TxRvj5Dgs3QdjcJVJxZlDDfLvFDexdkGSipdgoV4UONDMD-G_F8CvAOkFP/) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.



4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

You are done.

Read More

How Show Blogger Widget Only In Posts-Homepage-Archive Pages

How to Show Blogger Widget Only In Home Page Or Post Pages of blogger,as you have seen in wordpress blog its your wish to what widget and what add you want to show in sidebar of that page but this service cant be used in blogger as all sidebar bar widgets are linked to all pages in blogger including home page but now you can select the option which sidebar widget you want to show in blogger homepage and which one in all other blogger post pages.

As one more beautiful hack how to show only post titles in blogger home and label pages has also been released,dont forget to red about it.

Lets follow on this tutorial i.e how to show blogger widget only in home page or blogger posts pages.

Add the widget in blogger layout where you want to display in blogger.Now you wnt to select on which pages of blogger it should be displayed.

Now go to "Edit HTML" page.
Mark "Expand Widget Templates"

And Search for
<b:widget id='HTML3' locked='false' title='Your Title name you gave to your widget' type='HTML'>
The number in red can be any like 1,2,3,4 it depends on your no of widget your are adding but the title to the widget you gave will be same.

So to make the widget code find easily for you find the below word
<b:widget id='HTML

and you will find many codes like these so keep on matchng the title name of widget of them to which you want to show on different pages.

After finding the code of widget you want to display on different pages add the red codes to them as i have shown below.

1) To display the any Blogger widget only in HomePage

<b:widget id='HTML5' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Add the red codes as shown above in codes whch you found for that particular widget in your blog html.

2) To display widget in all posts pages but not in HomePage

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3) To Display Widget In Archive Pages

<b:widget id='HTML3' locked='false' title='Widget Title Name' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Read More

Add transparent notificaton bar to blog

Many Popular blogs use a notification bar to show a News feed and latest content because it attracts your visitors attention.You can add a link to a featured post, your Rss feed, social profile or an affiliate offer.So here I will show you how to add an awesome notification bar with close button.Its very simple and looks very cool.You can use it on a blogger blog and wordpress blog or even in your websites.


Add The Transparent Notification Bar To Blogger

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

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)

</body>

Step 3. Copy and Paste the following code Directly Above / Before </body>

<!-- Notification code start -->
<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ9D6AhUwLzOFYIG9kQxKsBddgCYyfZTkWcW1wSu3fH7eGG0OhhrdmzajEHWmgUqecGQPGjMS0LnOwsxDjGlD4CbfEziS4eEU5ynIbOr-5NOH3iABxg7rjuxveozz7jtIxlVbkuYvFV5Bi/s1600/ut-bg.png&#39;) repeat;

color:#fff;

text-align: center;
margin:0 auto;

border-top: 1px solid #fff;

height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;

font-color:#fff;

}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Add This Transparent Notification Bar To Your Blog <a href='http://www.pctricksarena.blogspot.com.com' target='_blank'>Transparent Notification Bar</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>
<!-- End of Notification code, info - http://www.pctricksarena.blogspot.com -->

How to change color and Notification Message.

In this code i have chosen such a color combination so that its looks transparent and whenever you take your mouse on this bar it become more visible.

Change Message - The message and link are highlighted in red above, change as required.

The colors used for the bar are highlighted in yellow and can be changed as required, find hex color codes.

Read More

Funny 8 tricks

1. lets start with a funny one. just copy the below code and paste it to your web browser address bar and press enter..



javascript:function Shw(n) {if (self.moveBy) {for (i = 35; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); } } }} Shw(6)

you will see that your browser is shaking.
 (Note: In some browser it may not work )


2. do you know how to make a folder without a name? is it possible? oh yea it is possible. just try it out..

# Click the folder, then right click on it, then click rename and delte the old name.

# Then pressing ALT button from your keyboard and type 0160 after that press enter.

Important think to notice - you have to type by holding the ALT button, don't stop pressing and while you will type 0160 it will not appear.You should continue typing and then press enter. Another important thing is that you have to type the code (0160) by your numpad. If you type the code from the upper number key it won't work. So, make sure your Numpad key is on.




3. Now I am gonna show you how to make your pc faster than before. I can make your pc about 200% faster. To make you PC faster than before please folow the steps

# Go to start then click run and then type regedit

# Select HKEY_CURRENT_USER and then select control panel folder and then select desktop folder. Do it correctly

# You will see registry setting at your right hand side, after that select menu show delay and then right click and select modify.

# you will find edit string option -----> default value data is 400 , you have to change the value Data to 000

# Restart your computer. You will notice that your computer has become much more faster.




4. Check your antivirus: you can test your anti virus is it working or not. Just follow my instruction:

# open a wordpad or note pad and save this.

X50!P%@AP[4\PZX54(P^)7CC)7}EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*

save it as eicar.com . while doing this your anti-virus should stop you. its not harmful either but if the anti virus is active it will warn you. if it does not then your anti virus is good for nothing .



5. Forbidden name trick: Do you know you it is not possible make a folder with the name "con" ? No matter how many times you try to make a folder with the name Con you won't be able to make it. I don't know the reason.



6. Strange font: Open your notepad and increase the font size to 72 , then change the the font to "Windings" . Now write your name in Capital later and look what you see there ? Surprised?




7. Super Desktop pranks: Take a screen shot of your desktop (by clicking SysRq button) and then paste the image to paint and save it as Jpeg image format . Then open the image of your desktop and make it your desktop wallpaper. Now hide all the icons from your desktop (Right click > arrange icons by > Hide desktop icon) . Also unlock the taskbar. Now your desktop will look like exactly same like before but everyone will be fooled whenever they try to click any icon. You can do this trick on your friends computer and enjoy the fun show :)



8. Microsoft word tricks: Just open your microsoft word and then type =Rand(200,99) then press enter. Enjoy the magic

Read More