How To Customize Blogger Labels With Css

Today I will teach you how to customize blogger labels using Css.I am sure that no other tutorial make this type of awesome good looking hover effect Labels right now.

It will change your simple blogger labels into good looking white buttons and also add hover effect by which whenever any blogger click on it hover effect will appear.

Follow Below steps to add this awesome labels to your blog-

Step 1

• Go To Blogger Dashboard.
• Click On Layout Tab.
• Now Click On Add gadget.
• Add Labels Gadget.
• Unchecked Show Number Of Post Per Label Ans Save It.

Step 2

• Go To Blogger Dashboard.
• Click On Template Tab.
• Search ]]></b:skin> (How To Search Code)
• Paste Below Code Above ]]></b:skin>

/* Code By www.lordhtml.blogspot.com */

.list-label-widget-content ul
{
    list-style-type:none;
    padding-left:0px !important;
    display:inline-block !important;
}
.list-label-widget-content li {
    display:inline-block;
 }


.list-label-widget-content li a  {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-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(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}
.list-label-widget-content li a: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);
}

huh!! Now Save Template And Enjoy Your Awesome Label Cloud.

Read More

How To Remove Google Custom Search Logo

 I am geek always want to share some good knowledge with you.I just decided to remove Google custom search watemark,after thinking lot i just made on line Css code and success to remove this logo.

To Remove this Logo Follow Below Steps-

1. Go to your Blogger dashboard
2. Now Click On Template Tab.
3. Now Click On Edit HTML Button.
4. Find  ]]></b:skin>
5. Paste Below Css Code Above It and save click on save template button.

.gsc-input{background:none !important}

Should I remove this Logo?

Not at all you should not do this action.This is totally illegal this is only for premium users if you want to remove logo then sigh up and purchase premium account.

Read More

Customize backgrounds colors of Lightbox in blogger with Css

Hey Friends Today i will teach you how to customize light box background color in blogger with Css.This is very helpful post for photography bloggers.

What is light box?

Whenever you are opening any image in blogger then it opens in lightbox and it default color is black but in this post I will teach you how to edit lightbox background.

There's no other customization for the lightbox other than turning it on or off, but believe me as a web designer it's not impossible for me to customize it.

1. Go to your Blogger dashboard
2. Now Click On Template Tab.
3. Now Click On Edit HTML Buton.
4. Find  ]]></b:skin>
5. Paste Any of Below Css Code Above It.

Style 1

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
background-image:-moz-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(0, 0, 0, 0.411) !important; /* The bottom bar */
}

Style 2

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK
{
background-color:gainsboro !important;
background-image:-webkit-radial-gradient(center,rgba(255, 255, 255, 0.83),rgba(63, 65, 63, 0.76),rgba(0, 0, 0, 0.87)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #F0F8FF !important; /* The bottom bar */
}

Style 3

To Add this style paste below css code there.

.CSS_LIGHTBOX_BG_MASK {
background-color: rgba(14, 97, 143, 0.28) !important;
background-image: -webkit-radial-gradient(top,rgba(221, 235, 255, 0.77),rgba(207, 230, 255, 0.6) ,rgba(83, 83, 83, 0.42)) !important;
background-image: -moz-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
background-image: -ms-radial-gradient(top,rgba(255, 255, 255, 0.77),rgba(203, 255, 234, 0.6) ,rgba(34, 146, 83, 0.42)) !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: rgba(101, 122, 231, 0.43) !important;
background-position: 10px 0px;
background-size: 115px 60px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -ms-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-transition:all 0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
}
.CSS_LIGHTBOX_FILMSTRIP:hover {
background-color: #7081DA !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #A04343; /* The bottom bar */
}

All Credits Go To Deepak Kamat (Author Of Our Blog)

Comment if You Like This Post

Read More

Add Zoom Hover Effect To Blogger Images

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 any one mouse-over the image the image will automatically grow in size and after removing mouse it will come back in its own position.

If you want to add this effect to your blog then follow below steps-

Live Demo

Adding Css Code

Paste the following Css code above ]]></b:skin> 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) ]]></b:skin> 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;
}

Adding Image

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

<a class="hovergallery" href="Image-URL"><img src=" Image-URL " /></a>

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.

If You Are Facing Any Problem Feel Free To Ask By Commenting below.

Read More

Change Text Selection Color For Blogger

Hey friends Today i will teach you how to change Text Selection Color For Blogger it will make your blog look more wonderful and it is very simple to apply.

For doing this change you need to add CSS.

Browser Support-

• Mozilla Firefox
• Google Chrome
• Apple Safari

Follow following steps to make this change

• Go to blogger dashboard.
• Click on template tab.
• Now Click on Edit HTML Button.
• Now Find (ctrl + f) ]]></b:skin>
• Paste below code above ]]></b:skin>

/* Code By Lord Html */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}
/* Code By Lord Html */
::selection {
       background-color: #FFA;
       color: #000;
}

Now Save Template 

Customize

If you want to change selection colors according to your style then you need to change hex color which I highlighted with red and orange, Red color is for selection and Orange Color is for Text.

For changing Hex color go To our Hex Chart Select Hex Color And Replace It.

Read More

CSS Button With Count For Blogger

.

Today I will teach you how to add this professional looking buttons to your blog.This button need php and css combination but know you will get problem to host php so I will only teach you Css section.

To Add this Button to blogger you need little knowledge of CSS And Html 

• This button Css code will go to your blogger template and html code will placed where you want this button to display.

CSS

Paste the following Css code above ]]></b:skin> 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) ]]></b:skin>  and paste following code above it.

.gray-button {
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
background-image: -webkit-linear-gradient(top, #EEE, #CCC);
background-image: -moz-linear-gradient(top, #EEE, #CCC);
background-image: -ms-linear-gradient(top, #EEE, #CCC);
background-image: -o-linear-gradient(top, #EEE, #CCC);
background-image: linear-gradient(top, #EEE, #CCC);
border: 1px solid #CCC;
border-bottom: 1px solid #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #333 !important;
font: bold 16px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
padding: 8px 60px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
display: inline-block;
margin: 0 5px;
}
.gray-button:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
text-decoration:none;
}
.gray-button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}

HTML

Now Paste the html code where you want to display this button.

<a class='gray-button' href='#' target='_blank'>Your text Here </a>

Remark

Respect My work don't copy it or publish it without my permision,If you love our work then you are free to share and comment golden words below.If you are having any problem then you can ask by commenting below i will try to answer it.

Read More

Divide Blogger Header Into Two Parts

Today I am going to tell you how to divide your blogger header into two section.It help you to add search bar or navigation menu to header.

1. Go to Blogger > Design > Edit HTML
2. Backup your template
3. Uncheck the "Expand Widget Templates" box if in case it is checked.
4. Search for the following code:

#header-wrapper { 

  width:960px; 

  margin:0 auto 10px; 

  border:1px solid $bordercolor; 

  }

#header-inner { 

  background-position: center; 

  margin-left: auto; 

  margin-right: auto; 

}

#header { 

  margin: 5px; 

  border: 1px solid $bordercolor; 

  text-align: center; 

  color:$pagetitlecolor; 

}

#header h1 { 

  margin:5px 5px 0; 

  padding:15px 20px .25em; 

  line-height:1.2em; 

  text-transform:uppercase; 

  letter-spacing:.2em; 

  font: $pagetitlefont; 

}

#header a { 

  color:$pagetitlecolor; 

  text-decoration:none; 

  }

#header a:hover { 

  color:$pagetitlecolor; 

  }

#header .description { 

  margin:0 5px 5px; 

  padding:0 20px 15px; 

  max-width:700px; 

  text-transform:uppercase; 

  letter-spacing:.2em; 

  line-height: 1.4em; 

  font: $descriptionfont; 

  color: $descriptioncolor; 

}

#header img { 

  margin-$startSide: auto; 

  margin-$endSide: auto; 

}

Now replace this entire code with the following code,

#header-wrapper{
    width: 960px;
    color: #000;
    margin: 30px auto 0;
    padding: 0px;
    overflow: hidden;
}
#header-inner {
    background-position: left;
    background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
    color: #BF0100;
    font-size: 36px;
    font-family: 'Ultra', serif, Arial;
    font-weight: bold;
    margin: 0;
    padding: 0px 0 5px 0;
    text-decoration: none;
      text-shadow: 6px 6px 4px #ccc;
       line-height:1.2em;
}
.headerleft h3 {
    font-family: arial, tahoma,  Sans-Serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.headerleft .description {
        color: #3B3B3B;
    font:bold 12px Helvetica, arial,  sans-serif;
    margin: 0px;
    padding: 0 0 20px 0;
        text-shadow: 4px 4px 6px #ccc;
}


.headerleft {
         width: 450px;
         float: left;
         margin: 0;
         padding: 0;
         height:80px;
}
.headerright {
         width: 468px;
         height:80px;
         float: right;
         margin: 0px;
         padding:1px 0 0 0;
       
}

Now search for this code or a similar code that must contain div section of your header:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/>
</b:section>

<b:section and </b:section> tags are important.


Now replace this with the following code:

<div id='header-wrapper'>
<div class='headerleft'>
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section> 
</div>

Now Save your template and view your Page elements page

Read More

Slide Open Egg Social Bookmarking Gadget For Blogger

In this tutorial i will teach you how to add good looking share buttons which are kept inside eggs whenever any visitor mouse over it,it will hatch and all buttons comes out :)

Read more �

Read More

Css3 Navigation Menu For Blogger

Sky beauty is pure css navigation menu.It is made by Aumkar Thakur (Me),Sky beauty is divided into two part one is up to down and one is left to right,i know you don't understand this but when you will see live demo then you are going to understand it.

Read more �

Read More

Pure CSS Social Media gadget for blogger.

• 
• 
• 
• 
• 

This tutorial will show you how to make pure CSS social media gadgets for blog.As you can see above live demo of this gadget that when we mouse over it size of the buttons increase its made by me Aumkar Thakur.
So if you also want to but these type of buttons then follow some quick steps.

Read more �

Read More

Pure Css Text Box

Pure Css Textbox
�Lord Html

Description-As you see above a pure Css text box example this css text box is made by me Aumkar Thakur.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 CornflowerBlue when you will mouse over it.And if you click on text box it changes it color to dark green.The border of the text box having stitched effect and also having box shadow behind box.

Read more �

Read More