Showing posts with label Blogger Widgets and Plugins. Show all posts
Showing posts with label Blogger Widgets and Plugins. Show all posts

Sunday, 1 September 2013

Use of CSS To Change Blogger Labels to Cute Black Colour

Posted By: on Sunday, September 01, 2013

Use of CSS To Change Blogger Labels to Cute Black Colour
Use of CSS To Change Blogger Labels to Cute Black Colour
Blogger blogs will be made-to-order or colorized a lot of superbly than your expectations. you'll have seen several blogger users United Nations agency have embellished their blogs with varied colours and fancy designs. This all is finished by victimization lovely CSS tricks. If you're accustomed to CSS then it will not be troublesome for you to alter your straightforward diaryspot blog to a dynamic colourful space. However, if you do not have in depth information of CSS then don't be concerned , as a result of this can be 2013 and you've got the ability of thousands of free resources accessible on the net. you'll simply use Google for locating free resources. There area unit thousands of designers & blogs out there United Nations agency have provided A to Z resources at no cost. we have a tendency to area unit one among them, and we've additionally set to supply you specific widgets  resources for decorating your blogger blogs. And nowadays we've a good gismo for you which ones can simply modification your Blogger.

This contrivance is incredibly straight forward to put in on your journalger blog, you do not ought to add any script etc to your HTML. simply you'll have to repeat paste some CSS codes within the css section of your journal, and you will see a pretty Labels contrivance with black color buttons. currently let's begin the way to do it?

Let's Add It

  • Go to Blogger >> Template >> Edit HTML
  • Now find <b:skin>...</b:skin> tag which will appear after <head> tag
  • If you can't find this tag just see below image for example.
  • Now, before this tag </b:skin> add the following CSS code.

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}

This is identical gizmo we have a tendency to area unit mistreatment on this diary, and this gizmo is super quick to load, as a result of solely CSS codes area unit used. If you haven't nonetheless intercalary the Labels Layout >> add a Gadget and Add the labels widget

Need Help? 

If you wish any facilitate relating to this gizmo or the other issue in your diaryger blog then kindly use the comment kind below and post your question. lookout until next tutorial.

Read More


Monday, 26 August 2013

Add Social Media Sharing Buttons Widget to Blogger Blog

Posted By: on Monday, August 26, 2013

Social media could be a highly regarded promoting tool currently a days, by sharing journal content with facebook, twitter, Google+ friends and fans will bring heaps of free traffic towards your journal. And thus, we want to feature some social sharing buttons to our blogger blogs for giving guests the prospect to share our content with their friends &amp; circles.  In blogger, there's a sharing contrivance you'll be able to see once every post in default templates. except for a lot of attraction you'll be able to add further sharing contrivance below or on top of each journal post. Therefore, Today, i am sharing a social media contrivance that you'll be able to boost your journal and it'll be showing below each post or below each post title. All major social media networks buttons square measure enclosed during this contrivance.

How to Add This widget to Blog?

  1. Go to Blogger >> Template >> Edit HTML >> Jump Break >> Blog1
  2. Now find this <data:post.body/> line ( Tip: use Ctrl+F to find )
Note:
Now if you want to add the social buttons below each post title then paste below code right before/above this <data:post.body/> but if you want to add this widget below every post then just paste it below/after this <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<table border='0'>
<tr>
<td><div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='padding-top:6px;'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div></td>
<td><div style='margin-right:25px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
</td>
<td><div style='margin-right:25px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='40px'/>
</div>
</td>
<td>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
</td>
</tr>
</table>

  • Now search for this </head> tag and just before/above it paste below code
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Save your template and currently read your journal. you may see social media buttons showing on your journal posts. Note: Social sharing buttons can solely seem once one post is clicked, on blog's main page it will not seem. fancy the new easy kind of social sharing buttons and do raise queries and queries concerning it in comment section. conjointly share this with everybody. keep Blessed. 

Read More


Sunday, 14 July 2013

Create CSS3 Drop Down Menu Without Any Images And Scripts

Posted By: on Sunday, July 14, 2013

After my 2 previous posts Add Read More Link To Your Blogger Blog Posts , Optimize Your Images In Blogger For Better SEO. I'm again back with my new post . It is an Pure CSS3 And HTML based menu recommended for those who run blogs. In this menu there are no images and scripts which is good .It is really very cool and dashing menu which makes your blog look some great. You can easily install it on your blog. The demo is the above picture.

Add It

  • Go To Blogger >> Layout >> Add A Gadget >> HTML/Javascript 
  • Add The Following code in it.
 <style>
/*------ CSS3 Drop Down Menu By cpedia (cloudspedia)---------*/
#cpedia-menu, #cpedia-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#cpedia-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#cpedia-menu:before,
#cpedia-menu:after {
content: "";
display: table;
}
#cpedia-menu:after {
clear: both;
}
#cpedia-menu {
zoom:1;
}
#cpedia-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#cpedia-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#cpedia-menu li:hover > a {
color: #fafafa;
}
*html #cpedia-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#cpedia-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#cpedia-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#cpedia-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#cpedia-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#cpedia-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#cpedia-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#cpedia-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#cpedia-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#cpedia-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#cpedia-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#cpedia-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#cpedia-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#cpedia-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="cpedia-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Cloudspedia/a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Customizations:-



  • Change # with your link
  • Change Categories etc with your own title
Thanks ! ! !

Read More


Sunday, 7 July 2013

Add Numbers To Your Blogger Comments

Posted By: on Sunday, July 07, 2013


Today I am going to share an amazing widget which is Add Numbers To Your Blogger Comments. This helps the visitors to see how many comments you get.

How it Works ?

It is just like ordered list <ol>. Blogger blogs always uses this <ol> tag to display the comments in vertical order. Each comment hold it's own number.

Yesterday's Post:-




Must Read:-



Do it

  1. Go to Blogger >> Template >> Edit HTML
  2. Find </b:skin> (tip use Ctrl + f to find)
  3. Paste the following code just above </b:skin>
/*----- Comment Counter by Cpedia -----*/
.comment-thread ol {
counter-reset: cpedia-comments;
}
.comment-thread li:before {
content:counter(cpedia-comments);
counter-increment: cpedia-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: cpedia-comments-sub;
}
.comment-thread li li:before {
content: counter(cpedia-comments) "." counter(cpedia-comments-sub,lower-latin);
counter-increment:cpedia-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {  margin:0px 0px 8px 28px!important;} 

That's It Now Save It And Check It ! ! ! 

Read More


Thursday, 4 July 2013

Add Fancy Black Version Of Social Buttons

Posted By: on Thursday, July 04, 2013



Time To add some thing black and white. Want to make your blog look some historical? Want to make your blog look some beautiful. Than don't worry CloudsPedia is here to brought something new always. I created my own fancy version of Social Button widget . The benefits of this widget are that it give your blog a great look and attractive.

How To Add This?



  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Add the Code Below

<a href="http://www.facebook.com/Cloudspedia"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiebuaGHSfyP9fxdHxvBBtJ5uT7X52foj3qelW3RJaUMNByq_Gj3USb0bHk1DN9kDrs_PQy0DY7VSX0iaXSEbMjP4z61CDnN9AeyBUfCNAO3kN5mWlU7DKooZwK_e23tAZA3q4SSax-FyTt/s225/Facebook+Black.jpg" width="80" height="80" title="Like Us On Facebook!" /></a>
<a href="http://www.twitter.com/Cloudspediaweb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rtwaVSYfLVrlkmUrgJ1cjLL_CRKEdluNZyT-S8AviIUDqlypJUw5icBeKbLQFYjktLBCrMSHbKliJDSnMxavC3g4bq_8tFWFaywbqUdkJccFCdJu1NSjnL-hvL8KpHlB5uvROn7pji9J/s225/Twitter+Black.jpg" width="80" height="80" title="Follow Us On Twitter!" /></a>
<a href="https://plus.google.com/u/0/100865451092814927289"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMbQVs2QJiXePKgmvK6wb6pNFs-soa1IfsmXD2UwSDIYzZntJNUrO7RmNpMY4xqVkgpo6cGCDcyt7-hRj4XvItHaOOptBZy1l9z_oYE_ExIZg7S443PJ9xNpN72ozNHZX47iZ6w3p1E03/s225/Google++Black.jpg" width="80" height="80" title="Follow Us On Google +!" /></a>

  • Change Cloudspedia with your facebook page link.
  • Change Cloudspediaweb with your twitter username.
  • Change 100865451092814927289 with your google + url
Best of luck!!!

Read More


Sunday, 30 June 2013

Awesome Floating Follow Us Twitter Widget For Blogger

Posted By: on Sunday, June 30, 2013

How To Add Awesome Floating Follow Us Twitter Widget For Blogger
This beautiful Widget Allows Your blog visitors to go and check out your profile easily by clicking on on the image. This Widget is having some great look , attractive. This widget is created by simple html and is easy to add.




Must Read:-

How To Add This?

  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Add the Code Below
<div style="position: fixed; bottom: 20%; right: 0%;"><a href="http://twitter.com/Cloudspediaweb" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg73NDQC6ooVkC7uIjoELNKesjELLnrXuG5jGJa0aE2IHVx1NldzWjn68zGixeCEgi8pjAvBH2SUIX6xIssJq5pJK_bXrPxM0D3ARDVDN79cYYbKCywYa1No4pkCr-lgu_5BWSpLLB4f5w/s1600/CloudsPedia-twitter-float.png"></a></div>

Customization :-

  • Change 20% With your own to increase or decrease the length of the widget.
  • Change Cloudspediaweb with your twitter username. 

Read More


Friday, 21 June 2013

Customize Your Cloud Labels with an Hover Effect In Blogger

Posted By: on Friday, June 21, 2013

If you come back to the years between 2008-2010 in which the Blogger was updating time to time and this was the best time to create or customize widgets and plugins and at that time Google updated the Blogger blogs speed and the widgets became as fast as light and then they updated the labels to clouds and then cloud labels widget was customized. Today I will tell you how to add that customized cloud labels. I recommend you to add it because it is with an hover effect which attract people to your blog/site. Make your blog beautiful , colorful, attractive.

First See It's Demo


Labels Before customization :-


Labels After customization :-


How Will It Work ??

Each Label name will be in a rectangular box .In default labels there are different sizes of fonts  in labels. But in the customized they are all equal and looks great .

Let's Add It

  1. Go to Blogger >> Layout >> Add a Gadget >> Labels

Change The Settings As Shown On The Picture



And Save It ! ! ! 


Now, Go To


  1. Go to Blogger >> Template >> Edit HTML
  2. Click On Code To Activate It
  3. Find the code given below (tip: Press CTRL+F to find)
  4. ]]></b:skin>
  5. Now Add the Below code just above it
/*-----Custom Labels Cloud widget by www.CloudsPedia.blogspot.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
Save Your Template And You are Done ! ! ! ! !.


Read More


Add Social Buttons Below Every Blogger Posts

Posted By: on Friday, June 21, 2013

Today this is my second post and again I published a Blogger Widget .These are social buttons and are customized with the use of CSS for hover effects .When you click on the buttons there will be an transparency which attract visitors to your blog/site. The Steps of this widget are very simple.

Let's Do It ! ! !

  1. Go to Blogger >> Template >> Edit HTML
  2. Click On Code To Activate It
  3. Find the code given below (tip: Press CTRL+F to find)
  4. ]]></b:skin>
  5. Now Add the Below code just above it
And just above it paste the below for opacity

/*------------ Cpedia Image Opacity--------------*/
.Fadein img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}


Now, Search For 

<data:post.body/>

and just below it paste the below code,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;'><b>Thanks For Making This Possible! Kindly Bookmark and Share it.</b></span><br/><br/>
<a class='Fadein' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4hGE1jorolyK6SI6oNIv60jeVpQ8gh2HqlU4P4BDNpDjqCvHDJLrW6_SeUKLbeKX7tRID2kpxEPZ1tqrdVu4rcH1Neqo_cPhX5MKQe92lBdiTWCmhKJMKYTwqLVg9rUNRjWcA5DNajhw/s400/TECHNORATI1.png ' width='64px'/></a>
<!--DIGG-->
<a class='Fadein' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0OrWcZf_g2G8gB269FXiRIO3hKctEz8MdPFOIovPwrYBD0VZ_N0RgBozOPeTMhFznwYOGqqy2jpf-tqmJnP0chpmMGenM9xL8YMpki82uMTZ7nBU24UNSLRZjTJ4n84RurPRWeU7TJ_Y/s400/DIGG1.png ' width='80px'/></a>
<!--Stumble-->
<a class='Fadein' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht8kh38vIxpG9UKwT1AjeJqEzs64F5dNEGuCzURo8mfrtI4P_-SGJPL27W0dbz0bG2kDZd4KHNMAwOd_TdxTuYm6KrL4HqG9X-DdRZwfhfxxxTaqZ8SnT0bjpCD0wcMK3DVzzxeR_VtK4/s400/stumble1.png' width='100px'/></a>
<!--Reddit-->
<a class='Fadein' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QIqi6Om0XMloJRT2W6kRz1k0MYi1zoizsC0Ou4QOGh6Kmqbx_AGLLAU2cxccrdJAuHdWhp7O_yi0HZrFqcKgka-StSlx3-iAdYOTfy_E53w_rLkzfNWCjbA_YAcGHiLUCfNWGSAGfIA/s400/REDDIT1.png' width='100px'/></a>
<!--Facebook-->
<a class='Fadein' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' height='80px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7M88Uf0RwzIMfI0lMCzCA9XbNzLB3bJLpUn1xsfU0AglH365DWSjA1LAtTy32HRWCnvgYlxlJ5e2qfKusB9FHgiRoJtf_kTmEoeh4jl7apRFyCEQ7owSJX-HG76erKnGgMUDxCx0ak4/s400/FACEBOOK1.png ' width='80px'/></a>
<!-- Twitter -->
<a class='Fadein' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' height='64px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPU7PUEbToLJ1d1KerdfxobuDavUdvzE8rTiV3ZpmzDfHlOlgQ0YCaVioPR8ZnRvkN2owGl817Mj4hazhCa5trYu7q6RWto7v0Uh79rhhQW9jKtWgf6HuzGrQSB79PXPC4m1NKifASKM/s400/TWITTER1.png' width='64px'/></a></center>
</b:if>

Now, Save it 

If you face any kind of problem kindly comment ! ! !

Read More


Thursday, 20 June 2013

Add Animated Social Sharing Widget To Blogger

Posted By: on Thursday, June 20, 2013

As you know that after a rapid , a very large development and growth Social Sites . Almost all the people who run a website they are showing much interest in making their site social for more and more visitors with their favorite social sites i-e Facebook , Twitter , Google + etc .That's why people are making and   developing social widgets and plugins using CSS, CSS 3,HTML 5 or any other .This one is the latest edition of June 2013. When a visitors hover his cursor over an icon an rectangular box  will appear with it's icon's name and border.

Features Of Animated Social Sharing Widget

  1. This widget is developed by pure use of CSS 3
  2. The icons used in this widget are not simple they are highly pro build with pure CSS 3.
  3. There are five social icons in this widget with an hover effect.
  4. This widget adds more color, beauty to your blog

Let's Add It

Difficulty = 3  out of 5
The steps are some difficult and will take upto 7 minutes

  1. Go to Blogger >> Template >> Edit HTML
  2. Click On Code To Activate It
  3. Find the code given below (tip: Press CTRL+F to find)
  4. ]]></b:skin>
  5. Now Add the Below code just above it
/*---cloudspedia.blogspot.com Animated Social Sharing Tooltips Widget ---*/.cpedia-wrapper{ padding: 0; width: 535px; height: 70px; margin: 80px auto 30px auto;}.cpedia-wrapper ul{ float: left;}.cpedia-wrapper ul a{ display: block; width: 68px; height: 70px; margin:  -10 -24 px; outline: none; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxqngLPdRzKp6cagtVBJpn-06xRuAmkjFWkfzzIs12vTbiwHEcpimtgIZQ6_gASftu9FvC4VyhvJ8GOVJB66j8oJHXzEYCJ6jnaplc-aGYPP14JUc4tXtJ4MO5e1BTPtgOC78aB07Hpzq/s1600/1.png) no-repeat top left; text-indent: -9000px; position: relative;}.cpedia-wrapper ul .cpedia-gplus{    background-position: 0px 0px;}.cpedia-wrapper ul .cpedia-twitter{    background-position: -68px 0px;}.cpedia-wrapper ul .cpedia-pinterest{    background-position: -136px 0px;}.cpedia-wrapper ul .cpedia-facebook{    background-position: -204px 0px;}.cpedia-wrapper ul .cpedia-linkedin{    background-position: -272px 0px;}.cpedia-wrapper ul .cpedia-rss{    background-position: -340px 0px;}.cpedia-wrapper ul a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: Shanti, Arial, Helvetica, sans-serif; font-weight: 400;  font-size: 14px; color: #2f6986; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #2f6986; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}.cpedia-wrapper ul a span:before,.cpedia-wrapper ul a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1);}.cpedia-wrapper ul a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #2f6986;}.cpedia-wrapper ul a:hover span{ opacity: 0.9; bottom: 70px;}


And Save it !!!

Now, Go To


  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Add the Code Below
<div class="cpedia-wrapper">   <ul><a class="cpedia-gplus " href="https://plus.google.com/u/0/100865451092814927289"><span>Google Plus</span></a></ul>       <ul><a class="cpedia-twitter" href="http://twitthis.com/twit?url=http:/www.cloudspedia.blogspot.com"><span>Twitter</span></a></ul>       <ul><a class="cpedia-pinterest" href="http://pinterest.com/your-URL/"><span>Pinterest</span></a></ul>       <ul><a class="cpedia-facebook" href="http://www.facebook.com/sharer.php?u=http://www.cloudspedia.blogspot.com"><span>Facebook</span></a></ul>       <ul><a class="cpedia-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>       <ul><a class="cpedia-rss" href="http://feeds.feedburner.com/Cloudspedia"><span>Feeds</span></a></ul>   </div>

Now , Change


·         Replace https://plus.google.com/u/0/100865451092814927289 with your Google Plus URL.
·         Replace Pinterest-URL with your Pinterest User name.
·         Replace Linkedin-URL with your Likdendin account URL.
·         Replace http://feeds.feedburner.com/Cloudspedia with your blog's Feed URL.


Read More


Friday, 14 June 2013

Add Social Buttons With An Amazing Mouse Hover Effects To Blogger Blog

Posted By: on Friday, June 14, 2013

Hi All I am Fine and I hope you will be fine too. As you know that previously I shared and Awesome Social Bookmarking Widget With Mouse Hover Effect For Blogger. And today I am sharing a best , eye catching , beautiful , fully customized widget for blogger. This is an social widget. I published that widget because it is an type of SEO . You have seen that in almost every social widget I labeled it as SEO . I labeled it as SEO because when ever someone likes / shares your posts pages it is automatically published in it's wall / timeline so then his friends / relatives see it and comes to your site , so it's an good and amazing type of SEO. This widget is developed from CSS Hover Effects Hope you like it. 

Let's Add It


  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Add the Code Below


/* --- Cloudspedia Social Hover Buttons Plugin For Blogger --- */                              <div id="mbl-social-hover">
<div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCyUJW01rcRDgspRZAJFxASRnLsFZ9cvOAfEx7zo0_6IBZvF4hATP8KRGH-qxpJfuly0JvFFbN1A1rer4ShTxjg2LltbudWzKwEMQK9cBBwNUZRcCKlVtjN-2nPzQkFDiNceO5I3Wd28/s1600/SUB-BAN.png" /></div>
<div id="links"><a href="http://twitter.com/cloudspediaweb" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBWe45Lu8qV_0wJKD1tUeLUHYlN5haTAtSuHK_eRmQlZ-OOOiDN0js4zHzuGbDYFUxh_gD_iubSgxetWbUhMLrA_YEV937r9TZzOZl34SzG8ZoAQsqr6UcY3H1ThPPbWiabadstwhH8l8/s1600/cloudspedia.blogspot.comtwitter.png" /></div></a>

<a href="http://www.facebook.com/cloudspedia" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid1r4rhlP0G8n6o4n5VuZse63Y5OgojrrJp4CQNp2iMESfOBw55sRLH0MBo-xhujkkgyHHq5IqYIcBjY7YjzCnxaoHLWLQ_m2UdAzlnhHiwGfbHaihC47G3KfhIi3x0fpf2uWveFUDRuU/s1600/cloudspedia.blogspot.comFB.png"  /></div></a>

<a href="https://plus.google.com/u/0/106374439082237286396" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEY602f2g1gGUklW7t-Vosj4wFWOlitZKxdwxtXQhHcNJLKbj8SJUcnyySl2HrRGT_SJHfxSDbNYVboMZE9gXLd_sG5BlZIPJ9XYqJhjZDn6MoKnhx2NnQakY_asUbIsvb3pv3JJbZd2g/s1600/cloudspedia.blogspot.comgoogle.png" /></div></a>

<a href="http://pinterest.com/YourName/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4s9NYgfdjErN1PLQFoK4zlwQ1x1AYH7OnNvAEC_2yoSx__912l9E4GUKOUY3yp5raqUn-zXtomt_Kfg0lnYTGMGggvXxdLODgV69-s-uXKZEFzfmlZjQsW2c6cgIgirU07EAA5zlvc-A/s1600/cloudspedia.blogspot.compin.png" /></div></a>

<a href="http://feeds.feedburner.com/Cloudspedia" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2YUIYka_vgB4nwESZknSbFKGTxl2rV2cPZyLtyQPHkzEBqFnxNqjUHD-njMJ7OUYg3nACc_rHlJmsr7dHmJp2qAmIsMdARzdgZc2TG-TqU-uoRN2umXw8aYOVZXl5jgSSoxJ3XVnmlBI/s1600/cloudspedia.blogspot.comrss.png" /></div></a>
</div></div>

<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0jzbsgjkmc8dL9Oqdm7APazlAYy-21VAr2ugVwg3Lsgw3bsSqSBDO-qJYYEnHJOvkWuJr0dElLHrIETmrYAgfZrEGNgwp53iiZK9cVvzQ5QA41JbOHdw23buyY8X9FrhoDB7ZYb205s/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>
<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0jzbsgjkmc8dL9Oqdm7APazlAYy-21VAr2ugVwg3Lsgw3bsSqSBDO-qJYYEnHJOvkWuJr0dElLHrIETmrYAgfZrEGNgwp53iiZK9cVvzQ5QA41JbOHdw23buyY8X9FrhoDB7ZYb205s/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style><small><a href =http://goo.gl/M1XMC>Social Buttons Widget By Cloudspedia</a></small>

 Now , Change
cloudspedia  with your facebook url
https://plus.google.com/u/0/106374439082237286396 with your Google +  Url

 YourName with your Pinterest profile name

 Cloudspedia with your RSS Feed URL.

 Thanks.

 Hope You Like It

Read More


Tuesday, 11 June 2013

Avesome Social Bookmarking Widget With Mouse Hover Effect For Blogger

Posted By: on Tuesday, June 11, 2013

Hi all again today in my 12th post I will tell you how to add Avesome Social Bookmarking Widget With Mouse Hover Effect To Blogger.
This is an social widget. It is developed by the use HTML And J Query. It is an attractive widget with an Share button when you hover on the share button Five (5) more buttons will appear

  1. Facebook Like Button
  2. +1 ing Button
  3. Stumble Upon Submit Button
  4. Digg Button
  5. Tweet Button
I recommend you to add this because I am also using it because this widget is very attractive , beautiful and mostly colorful which makes your blog/site colorful and beautiful.






Live Demo On The Left

Lets Add It


First Add The jQuery Plugin


  1. Go to Blogger >> Template >> Edit HTML
  2. Click On Code To Activate It
  3. Find the code given below (tip: Press CTRL+F to find)
  4. </head>
  5. Now Add the Below code just above it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Now Find Below Code 

<head>

  1. Now Add the Below code just Below it
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Now Go To


  1. Go to Blogger >> Layout >> Add a Gadget
  2. Select HTML/Java Script
  3. Don't Give Any Title To Gadget
  4. Add the Code Below

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function () { jQuery(".hbslidebox").hover(function () { jQuery(this).stop().animate({ left: "0" }, "medium"); }, function () { jQuery(this).stop().animate({ left: "-70" }, "medium"); }, 500); }); /*]]>*/</script><style type="text/css"> .hbslidebox { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigNpsVMY0wwGvxl5KGjOzUAqHSZzZtYjhLkp7Vh6g1GBaW6AGvKqkvSeNTT5HCON_b06cdqSGFqYKg5kZJoWGZpa8J4KjjOegBKakrQEm8BTRzRoV38D-4Ah8bXW3ZiHQxeT_x_z13NyA/s1600/www.cloudspedia.blogspot.com-tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 45px 0 0px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%; } .hbslidebox div { border:none; position:relative; display:block; } #floatingbuttons { background: #fff; border-radius: 5px 5px 5px 5px; border: 1px solid #CCCCCC; float:left; padding:0 0 3px 0; bottom:15%; z-index:399; } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; } .addbuttons { clear:both; text-align:center; padding-top:5px; } .addbuttons a span.getfloat, .addbuttons a span.sharebuttons { color:#000; background:none; font-family:arial, sans-serif; display:block; font-size:9px; font-weight:bold; text-decoration:none; line-height:11px; } .addbuttons a:hover span { color:#fff; background:none; text-decoration:underline; }</style><div class="hbslidebox" style=""> <div> <div id='floatingbuttons' title="Share this post!"> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script> <script type="text/javascript"> (function () { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Medium Button --> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> <div class='floatbutton' id='facebook'> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='google+1'> <g:plusone size="tall"></g:plusone> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> </div> <div class="addbuttons"> <a href="http://goo.gl/M1XMC" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div></div>


Now Save It .

You Have Done ! ! !

Read More


Subscribe to: Posts (Atom)

  • Home
  • About Us
  • Contact Us
  • Sitemap

    • Back To Top ^

    Copyright © 2013. Cloudspedia. Designed by: Fast Tech Tips.CoM

    About us

    Shiraz Shakeel is a young boy who is founder and the owner of Cloudspedia. He is 13 years old and living in Pakistan, K.P.K, Peshawar. Now a days, He is studying in 7th grade and running his site..... Continue Reading

    Global Ranking