MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you:

Friends, This is a special widget to your blogger, It work with CSS code with mouse hover effect. This is a stylish widget, buttons are arranged vertically. You can add this widget without effort .Keep read this post and add this widget into your blogger.

 

Log in to your blogger account.

• Select Layout option.

 

• Click on Add gadgets

 

• Select HTML/Javascript from list.

 

• Copy below code and paste in HTML/Javascript box.

 

 

<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('http://www.matrixar.com/-ideGImN96dw/UTWB6QXCL_I/AAAAAAAAHHE/6qR4e2z-QUw/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/YOUR-FACEBOOK-USERNAME">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/YOUR-TWITTER-USERNAME">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/YOUR-FEEDBURNER-USERNAME">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>

 

Change highlighted RED color with your social media username/ID

 

• Save it.

 

 

Leave a comment ….. if this widget is not working…………………………..

2013, By: Seo Master

Seo Master present to you:

Hi, Do you want to see a stylish social sharing widget. Friend, Now i share a simple and beautiful social sharing widget for your blogger. It  make a good feel and it make with simple gradients. If you want to add this on your blogger. Follow this post and  make it..

 

Log in to your blogger account.

• Select Layout option.

 

• Click on Add gadgets

 

• Select HTML/Javascript from list.

 

• Copy below code and paste in HTML/Javascript box.

 

 

<style>
/* Social Icons
----------------------------------------------- */
a.social-icons {
margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
opacity: .7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>
<a class="social-icons" href="https://facebook.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/facebook_zps17e8a317.png" /></a>
<a class="social-icons" href="https://twitter.com/"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/twitter_zpsad21acd1.png" /></a>
<a class="social-icons" href="https://stumbleupon.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/stumbleupon_zpsb5c9fe2f.png" /></a>
<a class="social-icons" href="http://www.feedburner.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/rss_zps237db27e.png" /></a>
<a class="social-icons" href="http://flicker.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/flickr_zps538aca1b.png" /></a>

 

• Save it.

 

 

Leave a comment ….. if this widget is not working…………………………..

2013, By: Seo Master

Seo Master present to you:

Friends ,This is a useful post about how to apply different mouse hover effect to your picture in blogger. Now i show four effect to your blogger. This effect works with CSS3 script you can add this four effect on your Blogger. Follow this instructions carefully and add it in to your blog…

Log in to your Blogger account

• Select on Template Option.

 

• Click on Edit HTML .

 

• Find (CTRL+F)  ]]></b:skin> tag.

 

• Copy and paste CSS code above ]]></b:skin> tag.

 

• Copy and paste HTML code, where you want to see your image. ( Replace highlighted RED color with your image link )

 

EFFECT -1

 

 

CSS code

 

.efecto-rotate-uno {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-uno:hover {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}

 

HTML - code

<img class="efecto-rotate-uno" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

 

 Replace highlighted RED color with your image link

 

EFFECT –2

 

 

CSS code

 

.efecto-rotate-dos {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-dos:hover {
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

 

HTML - code

<img class="efecto-rotate-dos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

 

Replace highlighted RED color with your image link

 

EFFECT - 3

 

 

CSS code

 

.efecto-rotate-tres {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-tres {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}
.efecto-rotate-tres:hover {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}

 

HTML - code

<img class="efecto-rotate-tres" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

 

Replace highlighted RED color with your image link

 

EFFECT – 4

 

 

CSS code

 

.efecto-rotate-cuatro {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-cuatro:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

 

HTML - code

<img class="efecto-rotate-cuatro" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

 

 Replace highlighted RED color with your image link

 

 

 

 

Are you happy.???/…… Leave a commnet if it is not working on your blogger…

 

2013, By: Seo Master