Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. 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


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


Sunday, 23 June 2013

How To Create A Blog From Blogger - Part 3

Posted By: on Sunday, June 23, 2013

How To Create A Blog From Blogger - Part 3

Part 3: Creating And Publishing A New Post





Let's Start



  • Click On New Page >> Blank Page

  • Give A Title To Your Page
  • Add Your Content
  • Click Publish




That's It ! ! ! !




Read More


Friday, 21 June 2013

How To Create A Blog From Blogger - Part 2

Posted By: on Friday, June 21, 2013

How To Create A Blog From Blogger - Part 2

Part 2: Adding New Posts To Blogger




Click The Orange Button To Create A New Post As Shown Below


Adding Title And Content To Your Blog Post



Adding Labels To Your Blog's Post


Change The Link Of Your Blog's Post


It end's Here

Read More


How To Create A Blog From Blogger - Part 1

Posted By: on Friday, June 21, 2013

How To Create A Blog From Blogger - Part 1


  1. For making a Blog From Blogger. 
  2. You must create a new, fresh id of Gmail.
  3. After Making the Gmail Fresh, New Id go to Blogger
  4. Sign in using that Gmail Id.
  5. Do the  Steps Shown On The Pictures

  1. Click On The New Blog Button

  1. Select Title For Your Blog
  2. Select Address For Your Blog 
  3. Select A Theme/Template For Your Blog


Done ! ! ! ! 
Your blog has been created ! ! ! ! 

Read More


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