Create a Pressed Button Effect with CSS

The HTML

Simply add a class to your link.

<a href="#" class="readmore">Click Here</a>

The CSS

This is where the fun stuff happens.
First just give the button it’s visual styling. In this case I’m duplicating the grey button effect from my home page slider.
Note the box shadow style. The y-axis distance is set to 3px, which gives the box element a 3px drop shadow on the bottom.

The Rollover

Now, on hover, you will want to again style the visual portion of the button. Then you will need to do two things:

• Position the link “relative” and assign the top to have 3 extra pixels.
• Define the box shadow again, only now set the value to “none”.

This removes the distance of the drop shadow and moves the button down to that equal distance.

.readmore {
background: #2f2f2f;
text-align: center;
display: block;
width: 120px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
.readmore:hover {
position:relative;
top:3px;
color: #fqq;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}


OR TRY THIS 

a.readmore {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamS6X_jR97hrEjEXCCWITiwGSBIoHlvxxEfa8SvccQItatnORMptuCjP7Kwj08XvNGV9Zp_QJH9yRFTLjA9_5PbFhhLjC0XwHp0RPWJ8TLoi1LJFXuY2sXA7MtffS7a2b15CZnZagIGw/s1600/readmore_bg.jpg")
 no-repeat scroll right center transparent;
 border: medium none;
 border-radius: 8px 8px 8px 8px;
 box-shadow: 0 3px 3px #000000;
 width: 120px;
 color: #5DBA82;
 font-size: 16px;
 font-weight: bold;
 line-height: 16px;
 margin: 5px auto;
 padding: 5px 55px 5px 15px;
 text-align: center;
}
a.readmore:hover {
 box-shadow: none;
 color: #FFFFFF;
 position: relative;
 top: 3px;
}

In Action

Click Here

Read More »

How to remove attribution powered by blogger

It can be removed by three methods.

Using edit HTML method


Step 1: Go to Template > Edit HTML > Proceed

Step 2: Search for attribution, We can find the following code.

 <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Step 3: Delete or comment out the above code.

Sometime, this method will work. If it is not working use the following method.


Using Unlock method


For this method, up to step 2 everything is same. After searching and finding the above code, change the red coloured true to false.

 <b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

So the code will be like this.

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>

Now close Edit HTML. Go to Layout. Find widget named Attribution. Click edit. Click on the Remove button. Gone..

Removing Attribution

Hide using CSS Method

For this method, up to step 2 everything is same. Add following code inside your style sheet. i.e., above

]]></b:skin> 

tag. Search for this tag and add following just above it.

  #Attribution1 {display: none;}

Then save..

Read More »

How to remove subscribe to posts(atom) on blogger

Under every post on Blogger, there is a Subscribe to posts(atom) link. This link is a RSS feed subscription link. The default postion of the link is under the page navigation. Blogger has only the default text on their template.
In order to remove this link, we can use two methods. First method is the removal method and second one is the hiding method. Hiding one link in a page has effect on your search engine optimization. If a search engine finds a hided link on your blog, it will count you as a spammer. So avoid that method. Any way I am mentioning both methods.

Remove the link

As I mentioned before, this is the best method. Go to Edit HTML of your blog template, tick Expand Widget .

<b:include name='feedLinks'/>

Delete the code from the template and save. Now check your blog.

Hide the link

This method has some effect on search engine optimization. If the above method is not working, use this method. We can hide any blocks using display:none. This method also using this technique.

Take Edit HTML and locate 

]]></b:skin>

Add the following code just before to the above code.

.feed-links{display:none !important;}

Now save the template and check your blog.



Under every post on Blogger, there is a Subscribe to posts(atom) link. This link is a RSS feed subscription link. The default postion of the link is under the page navigation. Blogger has only the default text on their template.
In order to remove this link, we can use two methods. First method is the removal method and second one is the hiding method. Hiding one link in a page has effect on your search engine optimization. If a search engine finds a hided link on your blog, it will count you as a spammer. So avoid that method. Any way I am mentioning both methods.

Remove the link

As I mentioned before, this is the best method. Go to Edit HTML of your blog template, tick Expand Widget Templates and then find following code.(#)
- See more at: http://www.bloggerhow.com/2012/04/how-to-remove-subscribe-to-postsatom-on.html#sthash.kJPr9JKX.dpuf

Read More »