Happy ********2********Share: CSS

Showing posts with label CSS. Show all posts

Monday, August 13, 2012

Beautiful Heart Shape Shared Buttons for your Blog

Here in this post i am sharing a cute little cupid heart which contains sharing buttons. Normally it looks like in heart shape and on hover the heart shape splits and shows the various shared buttons like Facebook share button, Twitter share button, Pinterest share button etc. See the live demo how it looks like.

Demo

Lets see how to add it to your blog.

Backup your template before editing your template.

* Go to Template > Edit HTML > find the </head> tag

* Copy and Paste the following code Above / Before </head> tag

* Now find the </body> tag and Copy/Paste the below Code Above / Before </body> tag

</div>

Note: You can change the location of the Heart by editing the values of bottom: 2%; left: 2%;(which is in red color)

* Save your template.

That's it.

Sunday, August 12, 2012

Css Blend Style Menu Bar For Blogger

This is also nice hover style menubar, Its color like blend style. This menubar not include drop down feature,But this will more attractive for dark color blogger templates.Earlier also i posted about css menubar its also similar to this. Attractive Css Drop Down Menu Bar For Blogger

Demo

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

<style>
*{padding:0; border:0; margin:0;} 
#default a,
#example a{
display:block;
width:90px;
height:46px;
margin-right:3px;
float:left;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRE-cpBoK8_3nvZ2zvWHG5PX0b7mXC_T4vRnU1QzJAQLloV3I243UOJ_Lx0NCpbMJJ6qNwDfZST3AsRZyZhifQU2TcmJQvNhjskDuAki9Uau1Em9jFZ0IJtMIs7Hw7pYQ-3t48yPLIbcY/s1600/nav-sprite.png);
background-repeat:no-repeat;
cursor:pointer;
text-indent:-9999px;} 
#example_home{background-position:0 0;}
#example_home:hover,#example_home.hover{background-position:0 -48px;}
#example_blog{background-position:-90px 0;}
#example_blog:hover,#example_blog.hover{background-position:-90px -48px;}
#example_demo{background-position:-180px 0;}
#example_demo:hover,#example_demo.hover{background-position:-180px -48px;}
#example_about{background-position:-270px 0;}
#example_about:hover,#example_about.hover{background-position:-270px -48px;}
#example_services{background-position:-360px 0;}
#example_services:hover,#example_services.hover{background-position:-360px -48px;}
#example_contact{background-position:-450px 0;}
#example_contact:hover,#example_contact.hover{background-position:-450px -48px;}
   
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
  <script src='jquery.blend.js'/>
  <script>
   $(document).ready(function(){
    $(&quot;#example a&quot;).blend();
    $(&quot;#example2 a&quot;).blend();
   });
  </script>

5. Now Find this code by using Ctrl+F <div id='content-wrapper'>

6. Paste below code Before <div id='content-wrapper'> code

<div id='demo'>
<div id="example">
<a href="#" id="example_home">Home</a>
<a href="#" id="example_blog">Blog</a>
<a href="#" id="example_demo">Demo</a>
<a href="#" id="example_about">About</a>
<a href="#" id="example_services">Services</a>
<a href="http://www.bloggertrix.com/" id="example_contact">Add This</a>
</div></div>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
you are done.

Monday, August 13, 2012

Beautiful Heart Shape Shared Buttons for your Blog

Sunday, August 12, 2012

Css Blend Style Menu Bar For Blogger

Pageviews

Followers