Candy Social Icons With Pop-out Effect for Blogger and Wordpress

After a longtime we are back again with a new post.Today we have pop out effect candy social icons which link to your social profiles.The icons are designed specially in such a way that they catch the attention of the readers and are so easy to add to your blog.This icons allows your readers to quickly follow on your favorite social networks and we have icons for your Rss Feed, Email, Facebook, Twitter, Google+, LinkedIn, YouTube and Skype.

Live Demo :

Adding The Candy Social Icons To Blogger


Steps: In The New Blogger Dashboard 
1)Click The Drop Down For Your Blog > 
2)Choose Layout > 
3)Click Add A Gadget > 
4)Choose HTML/Javascript > 
5)Paste The Below Code in it 

Code : (copy this code in notepad before copying to your blog)

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL-HERE" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Note : Add the Link to each of your social profiles as highlighted in Red.Each icon has the title above so you can easily remove the ones you don't want.

Read More

CHRISTMAS SNOW FALL EFFECT FOR BLOGGER BLOGS

Add The Snow Storm Effect To Your Blog

Simply click the add to blogger button below, on the next page select your blog and click add widget.

That's it you now have a neat seasonal look on your blog.

Read More

HOW TO ADD FACEBOOK COMMENTS TO BLOGGER BLOG WITH NOTIFICATION ENABLED 2013 (100% WORKING WITH ALL TEMPLATES)

Facebook has released many plugins for blogs and websites.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.

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

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.Go to Blogger Dashboard -->Template -->Edit Html (Tick Expand Widgets Template)

Note:-Always Backup your template Before proceed.

2.Search(Ctrl+F) for <html  and replace it with the following code.

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

3.Find For <body> tag and add the following code just after it.

<div id='fb-root'/><script>    window.fbAsyncInit = function() {    FB.init({      appId  : &#39;YOUR_APP_ID&#39;,      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(&#39;script&#39;);      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;    e.async = true;      document.getElementById(&#39;fb-root&#39;).appendChild(e);    }());</script>

Note:: Replace YOUR_APP_ID with your app id you just noted down.

4.Now search(Ctrl+F) for </head> and add these open graph meta tags just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='TechnoClouds Blogger Tutorials' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID ' property='fb:app_id'/><meta content='http://www.facebook.com/TechnoClouds' property='fb:admins'/><meta content='article' property='og:type'/>

Note::

i)Replace TechnoClouds Blogger Tutorials with your blog name.

ii)Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.

iii)Replace YOUR_APP_ID with your app id you noted Down.

iv)Replace http://www.facebook.com/TechnoClouds with your Facebook page url.

5.Now Search(Ctrl+F) for this Code.

<data:post.body/>

If you find 3 occurrence of  <data:post.body/> then add the above script after the first occurrence of it.If it doesnot work, try with second occurance.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='550'/></div><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'>Facebook Comments Plugin Enhanced by <a href='http://www.technoclouds.blogspot.com' target='_blank'><b>TechnoClouds Blogger Tutorials</b></a></div></div></b:if>

Note::

i)You can change the width of widget by replacing 550 with your desired width.

ii)As you all know you can change the color scheme to light or dark.

iii)Go to blogger dashboard --> Settings --> post and comments and set comment section as HIDE.

6.Save your Template.

If any Problem than Please comment below..............!!!!!

Read More

Slideout / Floating Facebook Like box widget Generator Tool

Adding Facebook Like box to blogger blog,lots of blogger tips and blogger tricks are offered online. Occasionally adding code to blog is not achievable due to error tags on code. Facebook Like box on blog take up more room, to reduce blog room and using for adding another widget is a superior idea. Popup Facebook Like box widget not only save your blog space and attracts visitor on scrolling technique of window. TechnoClouds come back with another fantastic widget generator tool related to Facebook from its TCLAB a Tool “Facebook jQuery Popout Like box widget Generator” is developed for all its visitors/readers. 

Here without any error in code you can generate “Facebook Like box code” by means of Generating Tool with effective style and Facebook buttons. 

No need to work hard for Generating code and adding code, easily add to blogger blog. Let’s begin the tutorial for generating code and adding

Step:1 If your blogger template already have jquery plugin ignore this step or else Add jQuery plugin

Sing into your blogger blog

Click on “Design (Layout in the New blogger interface)

Click on “EIDT HTML” link tab

Now search for code

</head>

After finding the code paste the below code above to it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Now “Save the Template”
Step 2:
After successful saving template, Click on Desgin – Page elements link tab
Click on “Add a Gadget” link

Select “HTML/Javascript” widget and paste the below your favorite Facebook Like box generated code in it

Read More

Mashable Style Social Subscription widget for Blogger

Mashable style widgets are pretty cool widgets which comes with many subscription options and they are becoming very popular now days.This widget was introduced by Mashable and we have realtered it and added few more features for you, the widget features include Google+ page follow button, +1 the Google page, like blog fan page on Facebook with likers thumbnails displayed,  recommend the page on google, follow at twitter, subscribe to updates and also includes a link.This is All in One widget that is why bloggers like this widget.Here I am providing a widget generator for this gadget so that you can easily add this gadget without any errors and very easily.Let's start adding this gadget :)

How To Add Updated Mashable Style Widget To Blogger?

As mentioned above I am providing a widget generator for this gadget,just follow below steps carefully:

1. Fill your preferred details in particular fields of the below form.

2. Click on Generate button and then click on Add To Blogger button.

3. A new window opens, Choose your blog and Save it.

Read More

"Touch Me" Sharing Widget For Blogs

The rapid development and advancement of social networking sites lead to the creation of dozens of social sharing tools and services.Bloggers now-a-days are addicted to these tools because unlike organic traffic from search engines, web traffic from social channels have overtaken search traffic.They depend on social networks like Facebook,Google plus and Twitter to drive traffic to their blogs.To help you to increase your fans and readers we bring "Touch me".Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly designed using buttons from popular services like Google Plus, Facebook, Twitter and RSS. We have coded it neatly using basic HTML and some spicy CSS styles.

LIVE DEMO:

Add it to Blogger:

1. Go To Blogger > Layout
2. Choose add a gadget
3. Select HTML/JavaScript
4. Paste the following code inside it,

<style> 
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKbXwm0M5voZzc_HpBKPMQtSwadp-Say8i6hUDHNiTzkV9Q20UVHgl7Ynm21JCnOwdqMlWRT6GdCOKZFIj0xBy0JaNbFrnAhtIJYg0SqHbTeVBwWAURbWlrHhlVXef6I8POkiT9MG5K8/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}


.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}


.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}


.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}


</style>


<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>


</div>

Please fill these requirements:

• Replace YOUR RSS LINK with your Feed burner link.
• Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
• Replace YOUR FACEBOOK LINK with your Facebook URL
• Replace YOUR TWITTER LINK with your Twitter Profile URL

         5. Hit save and you are all done!

Visit your blog to see it working just perfectly. Move your cursor over the icons and enjoy playing!


KMSMNCMAAATU

Read More

Add Animated Rainbow Changing Colors To The Links On Blogger

Hello friends! Effect of rainbow colors will give random colours to your links on hover. This widget working is based on simple JavaScript. Once applied, all the links on the page displays a rainbow effect on mouse hover and we have a one click button to add it to your blog in seconds

Add Rainbow Links To Your Blog

Simply click the button below, select the blog you want it on then click add widget :

That's it a cool effect for your links, check out more of our Blogger Gadgets.

Read More

7 Types of Animated Flying Objects Like Flying Twitter Bird For Blogger

How To Install This Widget To Blogger ?

1. Replace My Twitter Username With Yours.
2. Replace Tweet This Text With Your Text.
3. Choose a type of Bird.
4. Click On "Generate" Button.
5. Finally Click On Add to Blogger Button.

Read More

Animated Sassy Social Bookmark Gadget For Blogger

This is a very cool social bookmarking gadget with animated effect.With the Sassy bookmarks gadget a basic share button is placed in the corner of your blog and then on hover 6 icons for main social bookmarking websites like Pinterest, Google+, Facebook, Twitter, Tumblr and Email appear in a semicircle.

Add The Animated Sassy 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 The Drop Down Menu For Your Blog > Choose Template > Then 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.

</body>

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


<!-- Start Shareaholic Sassy Bookmarks HTML - http://technoclouds.blogspot.in -->
<div class='shr_ss shr_publisher'>


</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks 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-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://technoclouds.blogspot.in/2012/10/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://technoclouds.blogspot.in'>Blogger Tips</a></small>


<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://technoclouds.blogspot.in-->

Step 4. Save Your Template.


That's it the animated Sassy Bookmarks gadget is on your blog ! Make sure to check out more of our Social Bookmarks Gadgets.

Read More

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

A few weeks ago I have posted how to Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger.In this post we have same social bookmarking gadget but with oval egg shape instead of heart.On hovering mouse over the egg,the egg slides to open bookmarking buttons which allows your readers to share posts on Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.Below is a screenshot how it looks.

Add The Share This Egg To Your Blog

Remember Always Back Up Your Template Before You Make Changes

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blog's live demo choose "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 EGG Bookmarking Gadget Code From http://technoclouds.blogspot.in/ --><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 EGG Bookmarking Gadget Code From http://technoclouds.blogspot.in/ -->

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 EGG Share Code From http://technoclouds.blogspot.in/ --><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://technoclouds.blogspot.in/">Blogger Gadgets</a><!-- End EGG Share Code From http://technoclouds.blogspot.in/ -->

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 yellow 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.

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

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

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

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