[how to] Invite friends to fb page directly from blog or website?

Social bookmarking buttons are very commonly seen on blogs, and there are any number of widgets that will give you a ton of all the common buttons, such as Facebook Like, Twitter Tweet, Google +1, and so on. The Facebook 'Invite Friends' button is different in the sense that it isn't a bookmarking button. It is something much more useful - it enables users easily refer certain content to their friends, and also helps bloggers with increasing their audience. Today's how-to is all about creating an 'Invite Friends' button, and adding it to your (Blogger) blog.

What is the Invite Friends button?

You typically see this sort of button on Facebook Pages only. Page administrators can invite their friends to like their page. Other people who visit the page, and have liked it can also invite their friends. This helps with generating a new audience for your Facebook page, and hence your website or blog. You can put this button on your blog as well so that people can invite their friends from right there, instead of going to a Facebook page.

When a person clicks on the invite friend button, a new pop-up window opens. This allows them to search and select multiple friends of theirs at once. As per Facebook's limit, 50 people can be selected at a time. Clicking on the Send Requests button will send out requests to people on behalf of the sender to like the particular Facebook page.

Adding Invite Friends button to Blogger

This process involves generating a small Facebook app of your own. Go to the Facebook Developer Page, and create a new app. In order to be able to access this page, you need to be registered as a developer.

If you're not already registered as a developer, simply click on the Register button as shown. After confirmation, you will be taken to the Facebook Developers Page.

• Click on Apps > Create New

• Enter a name and identifier for your app, and then choose a category
• Copy your App ID. This will be used later

• Now, take a look at the following code. It is the code for our button, but not quite ready yet. All you have to do is, replace the ID given in this code with your own (given in bold text). You can change the other text in bold as well with your own customized message. And of course, you can customize the CSS styling.

<style>
.MBT-FB a {
font-family: tahoma, verdana, arial, sans-serif !important;
font-weight:bold !important;
font-size:12px !important;
width:150px !important;
border:solid #29447e 1px !important;
border-bottom:solid #29447e 1px !important;
cursor:pointer !important;
padding:6px 6px 6px 6px !important;
background-color:#5c75a9 !important;
border-top:solid #8a9cc2 1px !important;
text-align:center !important;
color:#fff !important;
text-decoration:none  ! important;
}
.MBT-FB a:active {
background-color:#4f6aa3 !important;
}
</style>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init ({
appId:'412074162260996',
cookie:true,
status:true,
xfbml:true
});
function FacebookInviteFriends () {
FB.ui ({
method: 'apprequests',
message: 'Invite your friends'
});
}
</script>
<div id='fb-root'></div>
<span class='MBT-FB'>
<a href='#' onclick='FacebookInviteFriends();'>Invite your friends</a>
</span>
<script type='text/javascript'>
if (top.location != self.location) {
top.location = self.location
}
</script>

• Now, go to your app page, and then go to settings.

• 
  
• Click on Add a new platform and then click on Website. Enter the URL of your site, and then save your changes. This step ensures access to your app from your site URL.

You're now all done! You can add the code given above anywhere on your blog!

Facing problems? Please feel free to ask in the comments section below. Hope this post helped. Cheers :)

Read more ...

How Ro Add Eye-Catching Blockquote With Hover Effects In Your Blog website

Today i am going to share Blockquote for blogger and website.  Created Simple Css Codes For a Blockquote. This Blockquote Highlighter Is quite Nice And Eye-Catching.

How to add CSS Style Sheet in Blogger Template:
  Go to Blogger
  select  Template
  EDIT HTML

And now Search For ]]></b:skin> With CTRL+F

  After you find ]]></b:skin> just above it paste the following coding

Live Demo

/*****************************************
TricksTeacher blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
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;
}
.post blockquote:hover
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}

save your template and enjoy

Read more ...

How To Add Color Gamut To Blog Links For Rainbow Effect

I am going to share how to add rainbow effect on blog links but the main concept is to add rainbow effect  which use  different color gamut. Its not actually rainbow because it shows only 4 to 5 color instead 7. Rainbow effect make your blog little attractive that can convert a dull or text base blog.

Go to blogger.com Template

Now find ]]></b:skin> by Pressing 

Ctrl + F

 And Paste the below code after/below ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
var rate = 5;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;
var act = 0;
var elmH = 0;
var elmS = 128;
var elmV = 255;
var clrOrg;
var TimerID;
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Rainbow widget by www.tricksteacher.blogspot.com//
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Now save your template and enjoy :)

Read more ...

Add A Horizontal Ribbon Menu With Hover Effect

Hello Friends. Today we are going to publish about a horizontal ribbon menu with hover effect.
Horizontal menu are the most necessary part of our blog.Now a days every bloggers are wanting to make his blog looks professional and for those bloggers this menu is better. This horizontal ribbon menu is created by fully CSS3 without using JavaScript and no any images uses so this menu is not effecting in your blog speed.It's hover effect is cool.


Add It On Your Blog


    Log In To Blogger.com
    Select To Layout And Add A Gadget
    Select HTML/JavaScript And Paste It Inside The Box.

Live Demo

<style>

.TricksTeacher-ribmenu span {
    background:#A81B6A;
    display:inline-block;
    font-family:verdana;

    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.TricksTeacher-ribmenu a:hover span {
    background:#FFD204;
    margin-top:0;

}
.TechBlogGuide-ribmenu span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.TricksTeacher-ribmenu span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.TricksTeacher-ribmenu a:link, .TricksTeacher-ribmenu a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.TricksTeacher-ribmenu:after, .TricksTeacher-ribmenu:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.TricksTeacher-ribmenu:after {
    border-right-color:transparent;
}

.TricksTeacher-ribmenu:before {
    border-left-color:transparent;
}
</style>

<div class='TricksTeacher-ribmenu'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>TricksTeacher</span></a>
    <a href='#'><span>Tricks</span></a>
    <a href='#'><span>jQuery</span></a>
    <a href='#'><span>CSS</span></a>
  
</div>

    Replace All The "#" With Your Own Blog Link.
    Now Save It And Enjoy

Read more ...

How to Add Design Labels Buttons For Blogger with CSS3

How to Add Design Labels Buttons For Blogger with CSS3

    login blogger account

    Go to Template / HTML /  Proceed

    By using (CTRL+F) key find this code ]]></b:skin>


 Now just above/before the code you've found at step 3 paste the following CSS3 codes.

.cloud-label-widget-content span a{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;}.cloud-label-widget-content span a: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); }

How to Add a Label Widget

Read more ...

CSS3 Animated "Live Demo" And "Download" Bubble Buttons For Blogger

How To Add Animated CSS3 Bubble Buttons To Blogger

For easy and better inderstanding here I am dividing this article in two parts.

1.     CSS Part
2.     HTML Part

so let's start

1. CSS Part

1.     Go to Blogger Dashboard > Template
2.     As always take a backup of your template
3.     Search for below code in your template

]]></b:skin>

Add below code just above it

.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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe1O4ZHZR_IaRjDvLyyLxu0JMWNdz1qK2jHhlWoqyfpjKL1IOp2oy4auleVY4FHiQFaDf-JKkJJtX7nN1RBrGxsAmclva49300iJsfxNbjAifIBq7lEID3SXoJGlSW6OioEkcVPXIsNVI/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));
}

Now we have integrated the CSS part in the template let's see how to use them.

2. HTML Part

Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.


1
TEXT HERETEXT HERETEXT HERETEXT HERE

<a href="LINK HERE" class="button big blue">TEXT HERE</a>
<a href="LINK HERE" class="button big green">TEXT HERE</a>
<a href="LINK HERE" class="button big orange">TEXT HERE</a>
<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2
 

TEXT HERETEXT HERETEXT HERETEXT HERE

<a href="LINK HERE" class="button blue medium">TEXT HERE</a>
<a href="LINK HERE" class="button green medium">TEXT HERE</a>
<a href="LINK HERE" class="button orange medium">TEXT HERE</a>
<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

 3

TEXT HERETEXT HERETEXT HERETEXT HERE

<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>

 4

 

TEXT HERETEXT HERETEXT HERETEXT HERE

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

 Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

That's all.I hope you will like these button.


If you liked this post, Please Share This !!


 

Read more ...

Customize Blogger Labels With CSS3

I am shared Customize Blogger Labels With CSS3 This label hack can be easily applied to your labels by just adding some CSS code in to your blog

How To Apply This Label Hack? 

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

 Finally save your template and you are done.


 

If you liked this post, Please Share This !!

Read more ...