How To:Download YouTube Videos Without Any Software

We use so many softwares like youtube downloader,speed bit video downloader...etc but there is an easy way for chrome users to download videos directly without using any software.There is an extension for chrome to download YouTube videos.

Click here to Install YouTube Downloader For Chrome

Read More

Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger

Most of the Bloggers like to have a unique look to their blogs by adding widgets that can catch the eye of the readers and get them bookmarking your blog.In this post I want to show you a cool new way to have visitors sharing your blog posts through slide out Heart Bookmarkng gadget.This is an awesome widget for bloggers.When the heart opens it shows icons of Facebook,Twitter,Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.So,below is a tutorial showing you just how to do that.... 

VIEW DEMO

Add The Split Heart Bookmarking Gadget Top Your Blog:

Remember Always Back Up Your Template Before You Make Changes

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 

</head>

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

<!-- Start Heart Bookmarking Gadget Code From http://technoclouds.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;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&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://technoclouds.blogspot.com -->

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 

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

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

Important, Move The Position Of The Gadget :

The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In RED above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.

Step 6. Save Your Template.

That's it the gadget has been added to your blog.Make sure to check out more of our Blog Gadgets and Social Bookmarking Gadgets.

Drop Your Comments And Questions Below.

Read More

HTML Encoder/Blogger Ads Converter

Html Encoder tool is Very Useful tool For a Blogger.For Instance If You Want to Display a HTML On Your Blog Posts Then After Adding the Code to be Displayed On Your Post The Actual Widget or Tool Will Show Up So In Such Cases Encoding Html is a Handy One.

Also if you try to add HTML code in blogger comment you possibly would get error. This is because Blogger Comment form doesn't support direct posting of HTML and JavaScript. In order to help you to do that we will need to change/encode the same code into a text and then post it effectively without any error. The Tool below will help you to change HTML characters to simple text, which could be easily inserted in your blogger template and comment form. You can also use it to convert your adsense code into an embeddable form. It converts special characters in this way:

< becomes '&lt;'

> becomes '&gt;'

" (double quote) becomes '&quot;'

' (single quote) becomes '&#039;'

'&' becomes '&amp;'

Read More

HTML Editor By TechnoClouds

HTML is a language for describing Web pages.It stands for Hyper Text Markup Language.HTML documents are also called Web Pages.The biggest problem faced by majority of newbie bloggers and web developers  is editing their templates. And the reason for this is lack of awareness with browser languages like CSS, XML, HTML, JavaScript etc.Well fortunately after some trial and error we could successfully create a online HTML editor tool entitled as “TechnoClouds HTML Editor” This is the first time all bloggers are having a chance to have fun playing with important codes like CSS, HTML and JavaScript and learn important coding in a more interesting way! Now you can actually test a code before adding them to blogger.

Link to HTML editor: http://technocloudslab.blogspot.in/



Instructions For Using "TechnoClouds HTML Editor" 

This tool consists of two panes i.e left pane and right pane. See a screen shot below,

The left pane is the area where you add your code and the right pane is the area responsible for displaying a visual view of the code. The CSS code is added just between <style> and </style>  and the HTML code is added just below </style>

Playing With a Code:

Lets now play with a code using our HTML Editor. I am using the Image Opacity Effect Trick here as an example.

The CSS code for Opacity Effect looks like this,

img { 

filter:alpha(opacity=100); 

-moz-opacity: 1.0; 

opacity: 1.0; 

border:0; 

} 

img:hover { 

filter:alpha(opacity=30); 

-moz-opacity: 0.30; 

opacity: 0.30; 

border:0; 

}

Now to apply this effect to an image we will need an HTML code as shared below,

<img  class="Fadein"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHySyVX1sYre08H771gOooD7a4SmAQ2U8qvcb84Su2-vjO70ZdJ3CINYVdeUY2OEbcpWvP54hqJ6Qiu1CNlFm8QDWCXIq_2DcPbkqY7EfjG8Rd-pvKm8c9qUtWMXu1RPdDN5VF5VEpCoM/s400/DIGG.png">

Now The best part, add the CSS code just between <style> and </style> and the HTML code just below </style>. Hit the Preview button and watch the dancing code in action in front of your eyes. You can now start the play!


See this screen shot,

Some Important Tips:-

• To go backward to previous changes, click Ctrl + Z
• To go forward to last changes made, click Ctrl + Y
• Once you are happy with the code that you prepared then simply paste the CSS code just above ]]></b:skin> inside your blogger template and the HTML code where you want the effect to be seen i.e post or sidebar

Hope this Tool will be of great use to bloggers and web developers across the globe. I hope you may find it easy to better understand and learn browser languages and implement them to invent new codes with new creativities. Do let me know how useful you find it. We played our part and now its your turn to spread the message!

Read More

Adding 3D Social Icons With Rotate Spin Effect To Blogger

With the Css rotate when you place your cursor over each icon they spin 360 degrees, they then spin back 360 when the cursor is removed (Cool eh).I also have a slight opacity hover effect on the icons.So in this post I will show you how to add the icons to your blog, linked to your social profiles and feeds.

Live Demo:

In the new Blogger dashboard click the drop down menu for your blog > Choose 'Layout' > Click 'Add A Gadget' > Choose 'Html Javascript' > Paste In The Following Code
WIDGET CODE:
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDs5ZPB0Cwl1AahluhwRFP7hzSQgSZsYc92OBa7wErzyyGWhbnXCFs0TnouaHL92QAJORlCUn9Z8Haib0b9JTzw29W1B_-9Qr2-uRwpm5LHbDdBDjM7efvbFlvET3-hv0UAoFMQvHo-QoA/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmowIJg-ykvt28NS2PMdJE8AREqfqRulqQjBW6B6upZKEWEpAR9q-n90y6zIcFrS-qCEKBCe97XXCvI9-hZQz9ZztjNly6DVGR7BEMvC4g2cfxzx165pFY28ZP_ltQUvqUc-tZ0Lo8_poc/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7mK3zO4mAS6VWfmpZlEyZ7uyYpbOo6N8rxwxFHQk26T6G5d7kirBH0VvmHddsAfh3be1rKAutuKnTWhYe3Kj6EwhIbwSZAmaEwa1eNy9ofq_SuJo1bobfEUSzEx95pZUv7AtURBCeVfG/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOlcrhAOVDR71sknSrnKbRDDa8Svm41SxLKvUdImFW-R9vLNp4wiOX0s799ntv6060gr2WA8Dn_LAPDXZIoSoVi2bwNy122DhmJuKva0se7om2zfx_IpIFT930KMPhWFPxLrgHxjtREYK/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_jRAI2OVQjMlNEdO3oYWaYx8mOn4T6SOAlHTr_WEvzIgYBGkDor9LUq1-jxlfKrDz4JteOWQ3pCnf0Fv4kEXVknfMgLj1cKLL5fNuSrntelVjOahjYdOrw7W8iF5QVsvlBpHFDaklt0x/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcd3xFbNX7bELQT-N3tUdQT47WZgPI-eXbL6od0i-nlPSAHW2ewVXo7fGy5NkHMKWugnXjr5Afdmt29zRslUn66OWoqqX8-vuZP6GqTvCsP2Um9azohe3UO7ONIt7Qang9soil9YjXQdBP/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="TechnoClouds"

Important - Replace the RED sections with your social profiles and feed URLs. 

Remove some of the icons - I have the code for each icon between tags like this <!--Start Rss Icon-->Code here<!--End Rss Icon-->>, to remove an icon remove the code between the tags.So for pinterest you will remove the code between the Start Pinterest and End Pinterest tags etc...

Test your Widget with HTML editor

Read More