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/AVvXsEhVDUosqlOJgjRco-Xu5Z-4oPzY755BN0K62f8yXpOZZEMCHni2TUj2WKDAx091dCFGfJhfO04j-R5T4jgBnYG8p9hoQJvIEZF2c8aukGl0nvMDy1RDb2rORcwPnPz4pyU3izuYJzl7B3s/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;
}

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code

In Action


Click Here

Page Navigation Styles for Blogger

This styles page navigation i got from WebDistortion but in these blogs do not provide page navigation for Blogger. So I have to convert it first so can be used in Blogger.
Maybe in the pagination style that I made not exactly the same as the original, but I try my best to make it seem like the page navigation at the original website.
This is view of those Page Navigations

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  font-size:12px;
  width:500px;padding: 10px;

}

}
.showpageNum a,.showpage a {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  }
.showpageNum a:hover,.showpage a:hover {
  background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
  border:1px solid #e4905a;color:#e4905a;text-decoration:none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }
.showpagePoint {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
  margin:0 3px 0 3px;padding:3px 8px;
  line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
  }

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code

7.Aplly Javascript

Find This :

  </body>

Paste The Below Code Before </body>

 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' 
src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'>
</script>

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Different Style Of Pagination  Just Change Your Css Style

 

  .blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  font-size:11px;
 }
.showpageNum a,.showpage a {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#FF5917;line-height:14px;cursor:pointer;white-space:nowrap;
  }
.showpageNum a:hover,.showpage a:hover {
  background-image:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x 0 -200px; text-decoration: none;
  color: #31627e;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
  background: url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') 0 -240px no-repeat; color: #BBB;
  margin:0 3px 0 3px;padding:3px 8px;
  line-height:14px;cursor:pointer;white-space:nowrap;
  border:1px solid #CCCCCC;text-decoration:none;
  }

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code

Beautiful Email Subscription Widget Below Post For Blogger

In this tutorial you will learn how to add Beautiful email subscription box below blogger post.Subscribers are one of the important factor that affect the existence of the blog.If you don't have any subscribers ,it means you don't have any loyal readers.You don't have people waiting for your posts.It will indeed make your blog less lively and least engaged.So the best way to increase subscribers and thereby traffic is to add the cool email subscription widget powered by feed burner

This email subscription widget is pretty beautiful and is Highly customized by Css which make it elegant and cool.You can add this widget any where  in your blogger blog or Wordpress blog.Bu the recommended option would be to choose the below post area as that is where visitors click are concentrated.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

 #emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=yourID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='yourID'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.</small></p></form></div></b:if>

Replace yourID with your link:

10. Now save your HTML/Javascript'.
    You are done...  


OR


Now we have completed adding styles.now we need to postion thi swidget acording to our needs.You can add this email subscribtion widget any where but here we will be adding at the bottom of the page.Hence we need to look for the footer code of the template
Find the below code [You can press CTRL+F]

<div class='post-footer-line post-footer-line-3'>

Immediately after the code add the below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YourID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='YourID'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.</small></p></form></div></b:if>

The text in red color can be replaced by your feed burner id.

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..

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