AllBlogTools.com | Blogger Templates and Tricks

AllBlogTools.com | Blogger Templates and Tricks

Link to AllBlogTools.com | Blogger Templates, Tutorials, Tools.

Create Bubble Buttons Using CSS3

Posted: 27 May 2012 07:35 PM PDT


This image has no alt text

A cool feature to add in your site is a bubble button, and this CSS3 animated button tutorial comes from web developer Nagu Akkina . The effect here is when you hover your mouse over the buttons, you will see bubble movements in it. However, the effects are only visible to browsers that support CSS3.

Here's a live DEMO of his work.

Below are the following steps Nagu demonstrates on how you can add bubble buttons:

  1. Go to your Blogger Dashboard > Design > Edit HTML
  2. Make a backup first before doing any changes to your blog
  3. Expand Widget Templates
  4. Find this code (hit ctrl+F on your keyboard)
 ]]></b:skin>

Replace it with the following CSS code:

 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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCnNJKVmSP1OZJDj4c-dz9wPztvaGvmwDQ4kDLOp7hIlPsS5SoMBtZ1cHUyx2aUnadC-KsZhDkHXwL4SLPFtPzVR3KBWlxaTRCBIrFp7UZPy3K976b4oSzoGH7preo20HwXnSQutzj8po/s1600/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));   }   ]]></b:skin>

Save template.

For HTML,

(for large sized buttons)

 <a href=" your LINK" class="button big blue"> your LINKNAME/TITLE</a>   <a href=" your LINK" class="button big green"> your LINKNAME/TITLE</a>   <a href=" your LINK" class="button big orange"> your LINKNAME/TITLE</a>   <a href=" your LINK" class="button big gray"> your LINKNAME/TITLE</a>

 

(for medium sized buttons)

<a href=" your LINK"> your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>

 

(for small sized buttons)

<a href="your LINK">your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>   <a href=" your LINK"> your LINKNAME/TITLE</a>

(for small sized buttons with rounded corners)

<a href=" your LINK "> your LINKNAME/TITLE </a>   <a href=" your LINK "> your LINKNAME/TITLE </a>   <a href=" your LINK "> your LINKNAME/TITLE </a>   <a href=" your LINK "> your LINKNAME/TITLE E</a>

 

 

 

 

 

How To Embed A Tweet Into Your Blog Post

Posted: 27 May 2012 07:19 PM PDT


This image has no alt text

Today's little Blogger trick has actually been going on around the Blogger community for quite some time now, and here’s a nifty tutorial from Fiveforblogger that may help you out with it:

  1. First thing you need to do is sign in to your Twitter account
  2. Look for the particular tweet you'd like to embed
  3. Click 'Expand' then 'Details'. This will take you to the tweet's URL.
  4. Click on 'Embed this Tweet' to get the code. This will cause a dialog box to pop up.
  5. In the embed options dialog box, be sure that you have the 'HTML' tab selected (not 'Shortcode' or 'Link') then copy the code inside. As for the 'Alignment', feel free to pick whichever you prefer (None/Left/Right/Center).
  6. Back in your Blogger post editor, make sure you're in HTML mode first then just simply paste the code inside.
  7. Click on 'Preview' to see the result before saving.

If you're having a problem with the embedded tweet's appearance (i.e. it's being displayed as a blockquote) then it might have something to do with the script. To fix this, try excluding the script from the copied HTML code.

 

FootballSite

Posted: 27 May 2012 04:00 PM PDT


This image has no alt text

Note: There is a file embedded within this post, please visit this post to download the file.

  • Sports Blogger Template, Sports blogs.
  • 2 column, right sidebar, 3 Column footer, blue colors.
  • Fixed width, Slider, social icons, WordPress for blogger, 2 menu bar, Web 2.0, free Premium.
  • FootballSite is a free blogger Template for sports blogs.
zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)