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

How to Convert Any Video Using VLC Media Player

Click on the Media option in the Menu bar and select “Convert/ Save…” option

Click on the Media option in the Menu bar and select “Convert/ Save…” option

In Convert window option and you would get a window that lets you specify the format and the location to save the video.

Click Start to start this converting process. Now you can save a Music Video as a MP3 file on your PC

Read More

How to Recover Data from a Corrupt Memory Card or USB Drive

I opened up my file manager on my phone and there was no storage card! I popped the Micro SD card out and threw it into an adapter. The adapter let me slide the card into it and then it has a USB adapter on the end. I plugged it into my laptop and my machine recognized it as a drive and gave it a letter. But when I went to click on it I get a error box with a message. It says E:\ is not accessible. The file or directory is corrupted and unreadable. DAMN! DAMN! DAMN!

Ok time for a little command line magic. I hit the start menu ““ run and typed CMD to bring up a command prompt. Then I typed Chkdsk e: /r

The chkdsk command checks a disk for structure corruption. The e: tells it what drive letter to use and the /r tells it to repair the issues it finds. You may see the warning that your drive is not a Windows XP drive ““ this is not an issue. You can continue on by pressing Y to continue. It will start to run through the files and directories. You will feel a lot better when you see your file names”¦ It proves all is not lost! Aren’t you glad you went this route instead of formatting it?

When it is almost complete it will ask you if you want to save lost chains into files ““ I always pick yes but have never used those files once to this day!

Chkdsk will report back what it has done and then go to my computer and check out your drive. Mine opened at this point and I was able to get to all my data as you can see below

I then popped my Micro SD card back into my Windows Mobile and was good to go. All in about 7 minutes on the train. Not too shabby eh?
Do you have any repair stories to share with us? Leave them in the comments. Your hardship and work might just help someone else out!

Read More

Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Hello friends...!!!

Today I am telling you how to add facebook pop out like box with slide effect for blogger. It's very simple and easy if you follow my steps. This pop out box slides on the right side of your blog. You can see demo in this blog itself.

How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website

Here There are 2 Simple Steps

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)


a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag ( using ctrl+f)
c. Add below line of code Before </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

And now click Save Template 

Step 2: Adding Widget Code ( Html code )
it's Simple

a.Layout or page elements –>> Add a gadget->> Html/javascript.

b.Add a below code in the Html/javascipt box.

Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )

<a href="http://technoclouds.blogspot.in" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI-zzbHqIYgBiOc915vsdZgsZofSmUi75EFI-YK6h9p9tqEEv60iAf6GUAVNnJIgCNaDqxd-q0llF19Z5RHvriyl9wC-739cP48Ws3Z8WRYbHL2tU-fbtcK31w9pGWc_A1XQJcX6KDrv0x/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/TechnoClouds/444150238942241&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://technoclouds.blogspot.in/">TechnoClouds</a> / <a href="http://technoclouds.blogspot.in/2012/09/add-static-facebook-pop-out-like-box.html">+Get This!</a></span></div></div>

And now click Save  

Note:-Don’t forget to change Red colour keywords.

Read More

TYPE IN HINDI

Just Type In Your Language It Will Convert In To Hindi

Text Box1:
नमस्कार सम्स्कार

Please drop your comment and question below.

Read More

How To Add Facebook Comments Box To Blogger With Notifications Enabled

In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog. With the Comments Box, Facebook users on your site can comment on your content, post those comments to their profiles, and share them with their friends on Facebook.

This is how the Facebook Comments box looks like,

How To Add Facebook Comments Box To Blogger

There are about five steps to get this done but chill out, it’s easy, ok?  Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.

Creating a Facebook Application:

1.Go To Facebook Developers Page and click on create new app

2.Enter your app name and name space

3.Fill the required fields,in app domain enter your domain name or blogspot.com if you have no custom domain

4.Scroll down and hit save changes,now you are done with creating facebook application.On the same page copy your App ID and save it in notepad.

Adding codes to your Template

1.Press ctrl+F and search for this code

<html

Infront of this add the following code.Be sure to have space before and after this code

xmlns:fb='http://www.facebook.com/2008/fbml'

Be sure to have space before and after this code.Take a look at the example below

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

2.Press ctrl+F and search for this code

<body>

3.If you can't find this search for something similar

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In the next line,paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Be sure to Replace YOUR APPLICATION ID HERE with the ID you copied earlier

4. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it paste this code:

<meta property="fb:app_id" content="YOUR_APP_ID" />
Replace YOUR APPLICATION ID  with the ID you copied

Now search for this in your template:

<data:post.body/>

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

In the line just below it paste this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.TechnoClouds-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='TechnoClouds-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSU7eebTchxkexpqp_K_E2xuVM2SEFXnAlCZ04HC09AsvuxqcnOIDtSrgADz6EnRGgQTvfz9WOf-n_MrifTAQKlJVr88IIQCAqSjSguPSIGfmXQZDhrXOagO3RLxUceja0wV0WrA3r6o/h120/comment.png '/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'width='450'/></div><div align='right'><a href='http://technoclouds.blogspot.in/2012/09/how-to-add-facebook-comments-box-to.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.

Enabling notifications for comments on your posts

- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

- Be sure to replace YOUR_APP_ID with your real application ID

- On the page that opens, click on settings and add yourself as moderator

When someone drops a comment on your blog, you should be notified that instant on Facebook.

Read More