AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


Blogger Random Post Generator

First you need to add the label gadget by using the following method.

1) Add the label Gadget
2) Add Label Style (CSS Style)
3) Label Theme


Add the label Gadget

Step 1:
     After login and enter your post Click Layout.


Blogger Layout


Step 2:
     From right hand side find the Add Gadget button,

Add gadget Button in blogger

Step3:
     After press the "Add a Gadget" link button a popup window is display and some option is there, scroll down and find the Labels gadget and press the "+" symbol.

Add Label Gadget from blogger default gadget


Step 4:
     The label configuration window is displaying you can adjust the default settings.

Label configuration in blogger

Step 5:
     The gadget is added and you can move it to your favorite place, like below image.
Move blogger gadget to your favorite Place



     Now you can see the label you added, but it don't have any style just show a link button, you can apply style by following methods.

Add Label Style (CSS)

Step 1:
     Click template and Edit HTML.

blogger edit html


Step 2:
     After clicking the "Edit HTML" you will see like below image.

edit Blogger HTML code


Step 3:
     Press ctrl+F and find the name using </head>.


Step 4:
     Just add any one of the following code above the </head> tag.


Leaf Theme with hover Effect





<style>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label a {
    color: #fff;
    text-decoration: none;
}
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}
</style>

Skeleton Label Theme





<style>
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    border: 1px solid;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    float: left;
    font-size: 116%;
    list-style: none outside none;
    margin: 2px;
    padding: 4px;
    transition: all 0.3s ease 0s;
}
.Label a {
    color: #000;
    text-decoration: none;
}
</style>

Skeleton with background color Label Theme





<style>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
    .Label li:hover {
        transform: rotate(5deg);
    }
.Label a {
    color: #fff;
    text-decoration: none;
}
</style>

Arrow Label Theme



<style>
 .Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
        border-bottom: 1px solid #145091;
        border-left: 1px solid #145091;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #3F6893;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #B5D8FF;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
        border-bottom: 1px solid #145091;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #145091;
        border-top: 1px solid #145091;
        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }
</style>


Rotate Blogger Label Theme


<style>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 116%;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(351deg) scale(1.7);
}
.Label a {
    color: #fff;
    text-decoration: none;
}
</style>

21 comments:

  1. Thanks a lot for posting this
    i used it on my blog
    i will come back to visit this page often

    ReplyDelete
  2. Was very usefull, thank you

    ReplyDelete
  3. Thank u for sharing. Now i use it..really works :)

    ReplyDelete
  4. Please ckeck leaf theme with hover effect lable. Its nt working

    ReplyDelete
    Replies
    1. it is working here!! you mean not in your blogger?

      Delete
  5. Keept it up Sir.

    https://tahirkhandawar.blogspot.com

    ReplyDelete
  6. I like Rotate Blogger Label Theme...

    ReplyDelete
  7. Leaf Theme With Hover Effect not work?

    ReplyDelete
  8. "Leaf Theme With Hover Effect" Code is not work. Please help me.
    my mail - induwarauthsara@gmail.com

    ReplyDelete
  9. THe leaf them and the rotate blogger code seems to be the same

    ReplyDelete
    Replies
    1. Yes.
      Leaf Theme With Hover Effect and Rotate Blogger Label Theme is same..??

      Delete

Notification

Total Pageviews