Shutter Up Animated Mouse Over Effect Social Media Widget For Blogger

 Shutter Up Animated Mouse Over Effect Social Media Widget For Blogger

 Hello Bloggiyan! Today we are sharing beautiful Shutter up Animated Social Media Widget to make your blog stylish. social media is a great way increase your blog traffic by sharing blog post on social media network. so this stylish widget help you to connect your visitor on your social media network. As showing a widget which is very impressive and with awesome css effects that is called window effect. We recommend you to try once this widget on your blog .

Just Single Step To Add Widget On Your Blog .

1. Go to blogger dashboard.

2. Click on layout.

3. Choose add a gadget.

4. Choose HTML/JAVASCRIPT.

5. Copy the below code and paste it.

• Facebook
• Twitter
• Google Plus
• Rss

6. Save the Template Arrangement Done.

Customization :

Replace Highlighted color link with your link 

Post Your Comments And Ideas

Disable Mouse Text Selection On Blogger And WordPress

Disable Mouse Text Selection On Blogger And WordPress

For Protecting Your blog from copyright the easiest way is to disable mouse selection on your blog by which no one can copy text and images, we can make it possible by using small JavaScript code which will disable mouse selection on blog.

JavaScript Code For Disabling Mouse Selection

For Blogger

• Go to blogger dashboard
• Click on Template tab.
• Now Add Gadget >> HTML/JavaScript
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

For WordPress

• Go to Wordpress dashboard
• Now click on Appearance >> Widgets >> Add New Text Widget
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

With this trick we can disable mouse selection in both blogger and WordPress, This trick is working on all major browser which support JavaScript.

Mouse Over Zoom Effect For Blogger Picture Post

Mouse Over Zoom Effect For Blogger Picture Post 

Hello Bloggiyan! If You have image gallery in your blog or many picture stock here is a stylish gift for you. This is pure Css tutorial,it will help you to make your blog attractive,if you are running photography blog then this effect is best for you. Whenever User Move mouse over the image the image will automatically enlarge in size and after removing mouse it will come back in its own original position.
Above Is animated preview of Picture Zoom Effect Widget for blogger.

Easy Step To Add Mouse Over Pic Zoom Effect Into Blogger.

Paste the following Css code above ]]> in your blog html code section.If you don't know how to paste Css then go to Template>Edit HTML>And there find (ctrl + f) ]]> and paste following code above it.

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}

Done Save

Adding Effect Over Image 

Now You need to add image, select image in blogger where you want to add this effect and follow below steps :

Image-URL">Image-URL " />

Replace Image-URL with your image in which you want zoom hover effect.

After Adding Image URL place the code where you want to display this image.

Post Your Comments And Ideas 

Pure Css Text Box With Mouse Over & Copy Text Color Change Effect

Pure Css Text Box With Mouse Over & Copy Text Color Change Effect

As you see below a pure Css text box with mouse over effect That change color while moving mouse around text box also its change color while you copy text inside this text box .This text box is having hover effect which make this software good looking the main advantage of this text box is that it change it color from black to Cornflower Blue when you will mouse over it.And if you click on text box it changes it color to shrek green.The border of the text box having  stitched effect and also having box shadow behind box.

Find out how to make Pure Css Text box-

Its all the about Css & Html.If you know basic of Css & Html the you can make this text box.You don't need to make code as I will provide you.You only need to copy and paste.

How Add This Code In CSS 

1. Go To Blogger >> Template >> Customise 

2. After Opening  Template Customise Go To Advanced >> Add Css.
3. And there paste the code.

 Paste Following Code In Add Custom CSS Field

.postmsgg23
{
color: white;
background-color: black;
width: 500px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}

.postmsgg23:hover
{
background-color: CornflowerBlue ;

}
.postmsgg23:active
{
background-color: darkgreen ;
}

Paste The Html Section where you want to put Css text box in your Website and Paste the Css section in your website Css.

HTML 

Yout Text Here

 

IF you are facing any problem to add this Pure Css Text Box in Blogger, Feel free to comments here.

Mouse Over Css Effect Stretch Buttons Style For Blogger

Mouse Over Css Effect Stretch Buttons Style For Blogger

Hi Bloggiyan Today I am going to teach you how to make good hover effect buttons for your page,blog or website.As you all know it all starts with Css & HTML.So you should have little knowledge of Css & HTML.Its not very tough to make this god looking hover effect buttons.

If you also want to put this good looking buttons in your blog then follow some quick steps

 As I told you that we need the help of Css in making this type of buttons.Below are some Css codes copy that code in your website.

Where To Paste This Code????

If you don't know where to paste this code i will teach you follow the steps.


1. Go To Blogger >> Template >> Customise 

2. After Opening  Template Customise Go To Advanced >> Add Css.
3. And there paste the code.

 Paste Following Code In Add Custom CSS Field

a.hupt:link {
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}

a.hupt:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
width: 160px;
}

Template Code Work Done..

Now where You Want to show this button here is Html code paste the code the button will start appearing.

FB

If You Need Any Help to put this A

New Animated CSS3 Mouse Over Bubble Buttons for Blogger

New Animated CSS3 Mouse Over Bubble Buttons for Blogger

These animated and fully professional bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

How To Install Animated Bubble Buttons In Blogger ?

• Go To Blogger >> Template >> Edit Html 
• Search for ]]>
• Copy The Following Code & Paste It Above ]]>

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQOFUWCW9bIQ_ZPUIae5hyUbW6DQNkFFK_gGM-8URFsQO8ILzO5_1sOjIDsby2Ui1gyQcBBPBmtpLnTTCo8nUiIx6rC0KB94XfYzq1IpiMg5qsILQpNFjYXcnYMu4ZKik05dMgzVulsc/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

• Click Save Template !

How To Use These Buttons ?

Whenever you want to use any button then copy any button code from the list below and paste it in the HTML editor.

Big Buttons :

TEXT HERE
TEXT HERE
TEXT HERE
TEXT HERE

Medium Buttons :

TEXT HERE
TEXT HERE
TEXT HERE
TEXT HERE

Small Buttons :

TEXT HERE
TEXT HERE
TEXT HERE
TEXT HERE

Small Rounded Buttons :

TEXT HERE
TEXT HERE
TEXT HERE
TEXT HERE

• Replace "LINK HERE" With Your Button Link
• Replace "TEXT HERE" With Your Button Text
• That's All

How To Disable Mouse Selection On Blogger And WordPress

 How To Disable Mouse Selection On Blogger And WordPress 

I hate when someone copy my work, Copying others content and ideas. What can be worst than that ??

For Protecting our blog from copyright the easiest way is to disable mouse selection on your blog by which no one can copy text and images, we can make it possible by using small JavaScript code which will disable mouse selection on blog.

JavaScript Code For Disabling Mouse Selection

For Blogger

• Go to blogger dashboard
• Click on Template tab.
• Now Add Gadget >> HTML/JavaScript
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

For WordPress

• Go to Wordpress dashboard
• Now click on Appearance >> Widgets >> Add New Text Widget
• Paste JavaScript code there which I provided above.
• After pasting code click on Save button and say bye to content thief.

With this trick we can disable mouse selection in both blogger and WordPress, This trick is working on all major browser which support JavaScript.