Monday, January 7, 2013

Awesome Jquery Rotate Effect For Blogger Images

File Under: , No comments

In this post im gonna explain how to add awesome jquery  rotate  effect for  images. For  this  post im
using CSS with jquery.You can use  this  effect on side bar  with  any  image  size. its  easy to  add to blogger. I think  i don't  need to  explain more. just check the demo link below. you will get it.Get my
earlier images effect post here.

Awesome+Jquery+Rotate+Effect+For+Blogger+Images

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<script>
    $(function() {
        var tot = $(".img_c").length;
        var stat = deg = 10;
        var rotate = "";
        var frame, mozframe, webkitframe;
        $("img").each(function(index) {
            $(this).css({
                "transform": "rotate("+deg+"deg)",
                "-moz-transform": "rotate("+deg+"deg)",
                "-webkit-transform": "rotate("+deg+"deg)",
                "-o-transform": "rotate("+deg+"deg)"
            });

            rotate = "100% {" +
                "transform: rotate(360deg);" +
                "-moz-transform: rotate(360deg);" +
                "-webkit-transform: rotate(360deg);" +
                "-o-transform: rotate(360deg);" +
                "} ";

            var imgclass = parseInt(index+1);
            frame = " @keyframe anim" + imgclass + " { " +
                rotate + "}";
            mozframe = " @-moz-keyframes anim" + imgclass + " { " +
                rotate + "}";
            webkitframe = " @-webkit-keyframes anim" + imgclass + " { " +
                rotate + "}";
            $('<style> '+ frame + mozframe + webkitframe +
                ' .img'+imgclass+' { animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-moz-animation: anim'+imgclass+' 3s ease 0s infinite alternate;' +
                                   '-webkit-animation: anim'+imgclass+' 3s ease 0s infinite alternate; }'
                +'</style>').appendTo('head');

            deg = deg + stat;
        });
    });
    </script>
    <style>
        body {
            background: #fff url('wood_pattern.png') repeat top right;
        }
        .content {
            margin: 0 auto;
            padding: 100px;
        }
        img {
            margin: 10px;
            padding: 20px;
            background: #fff;
            -moz-box-shadow: 0px 0px 3px #d3d3d3;
            -webkit-box-shadow: 0px 0px 3px #d3d3d3;
            box-shadow: 0px 0px 3px #000000;
            position: absolute;
        }
    </style>


    <br />
<div class="content">
<div class="img_c">
<img class="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
<div class="img_c">
<img class="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4R0izOEGsSV1oHxC2k-9Vhz8Ob6xafRHDe_qHj1dFLEW1IBf2SR8RrGPS3t2P65WUHzZYeMu9j_0AJwmGZOrhLngaOlmiGpmwOJA7PSqhTMjxgljgdVPER1TH6dLbdqZbw77UoeCC4Y/s1600/nature.jpg" /></div>
</div>

Replace red color link with your image URL

7. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, January 6, 2013

Add Multilevel CSS3 Menu Bar With Icons For Blogger

File Under: , , 3 comments

In  this  post,  im  gonna   explain,   how  to  addMultilevel CSS3  Menu Bar With Icons for your
blog.This menu bar  looks so  attractive  because, it  included small  icons,If  you  want  to  change
icons  according  to your  topic. You can  change icons link in HTML code. If  you  have  problem
with this menu, Just  contact me.i  will help. you can get my earlier menu bar form here.

Multilevel+CSS3+Menu+Bar+With+Icons
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

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

/* icons Css3 menu www.bloggertrix.com*/

ul#navbt {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;

    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#navbt,ul#navbt ul {
    list-style:none;
    margin:0;
}
ul#navbt,ul#navbt .subs {
    background-color:#444;
    border:1px solid #454545;

    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#navbt .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;

    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
ul#navbt li:hover>* {
    display:block;
}
ul#navbt li:hover {
    position:relative;
}
ul#navbt ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#navbt ul {
    padding:0 5px 5px;
}
ul#navbt .col {
    float:left;
    width:50%;
}
ul#navbt li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
    margin:0 0 0 5px;
}
ul#navbt ul>li {
    margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
    outline-style:none;
}
ul#navbt a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#navbt ul li {
    float:none;
    margin:6px 0 0;
}
ul#navbt ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#navbt li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#navbt span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#navbt ul span {
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh8ZGYGvAo7jyVAf02TAnojHzQWHzPm0i4e9ddpimZ7naJcOUnhNwMfptUnfULJmOsuCy93P2ScumndnXTPlxxhr88KN_d5Q8XV4gihhnPeJj0Iw6zXviMtePIGK27prT-yFU58SgLilo/s1600/bloggetrix-arrow.png");
    padding-right:20px;
}
ul#navbt ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;

    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
    background-color:#313638;
    line-height:25px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX3NG8IWyYAycfuqbnnB85PMrjXBe-KJkNhrIPxwrnCqb4z0b24iTKd6cbrdVsr0KrtTuWBUPa126cKrVfP9NWXfvo5Gsp6txpqa4tWI797A7xuON8xg_BWoU1UFepJRWBkzb3IFpVLuU/s1600/bloggetrix-home.png" /> Home</a></li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J5Tb2hdK3hrgeafum-Q8an7ZWrvetHYYae2PwOnkjYrsTUTf2Hp2N27YDZLuYuBQY0zY8ypnMI0UXHXm8XcSE59erCWuL3zm-YiqdgbWbM4XDpS3YNaD-7L7ktK0npLqKJ-TL8FS1Yc/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
                                    <div class="subs">
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 45</a></li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 49</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoTNOPPVA0TpowEiFWvSKfIvn3m6Sk1XXrbgU1TpR56FH56UT-DKbu0xmfaXaELdGrJKICjkKBLRB15h4Nv2muxuhND306w8I54XoaNqjJigpxC9-EaJE0A7bYAa9h-obXLlOLshNKcA/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 5</a></li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAyc6sIzm4JoNXP7zaVjN4V3DAdGZF1tiG4cOU6yCcQLvZheNaIPMdhsVCHFsrDeqVtURHvDBaJKjeYz7xy5HqzzHL0HXPv-l6ZTzfgUojYTZuSIxq6GJmQK-1qdNEI8J_hvq8Sltiy0/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxF3dpqFBvV7SWezldxmv3raX2d2xpjTV5i3Hc2Ih-q1Zy-3AILWb7hwPptP6GSh0VwReZG5Sb36l04spiIg8_ZeoS9_oj_B2HCmPRI1HEpjOVhDlsmJ0JnFYnlzY1A33t1hOmnrm83Ho/s1600/bloggetrix-top3.png" /> PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjV9QyZtU4wQnSBNCLpPrHleg0Wov4SQaLC32L_fmp-LYaMvyV792wbmF0gEillEPRfXwLmuWNkgTNrY_9Duzsw5R0UEP0qJmWTVZ5S73xVdc7y-S_McWP0RQlA3Yuzoo5Mj5npyuxpA/s1600/bloggetrix-top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTc_SYpmtTJT6GSJeIY7xGczVVKB81kSWkuElT2DKfTFGg5arfOdVvcGHumQfhxjyfa6ULYLEvSqJfw0pHoEKTAHMHs3NEl42j44snevz4GhggPg2F3sTb6ausSWCWe9k57OpLy1Rang/s1600/bloggetrix-top5.png" /> XSLT</a></li>
            </ul>
Replace Title and # for links.
10. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, January 5, 2013

Star Style Social Sharing Widget For Blogger

File Under: , 2 comments

Today im gonna explain how to add  Star Style Social Sharing  Widget For  Blogger with  nice
hover effect.Im using  CSS and HTML  for  this tutorial. Check  below  link  for  demo. You can
get  my  Earlier social network buttons from here
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

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

4. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

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

/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizVDIKGKfvG1QZIOFpaj79YObnaDagR-EspJ47PKAjo9rpNL_3y0bMqSZzJMO47eabDnuh67Xq2rlg-8M6wNW4fnO53c9MRQqQR7mcTVNbdJaScCkc6r8VZlpG0B2c2rN7GSC0Kzly9TE/s1600/bloggertrix_google.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIUZrBM2GpPvBmim7Gi49P6zlvt96V2hF0oQfY6fYPJDF-yCZvu8bjSz2mJy1fb3fwArWBKLhQEr7Uk9Mwu0XD8-9RMjcGa6dIswP1ehQFqLcKqvLowQ7VTVFp8UYPMVxaL0Na2h38QM/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.stumbleupon.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TSw0fhZuIrnV3O_uV5uTTjKmE6zApkwxSwJ1It0KNYDPZ0J3W5xkxesE1iZVF5SOjWfNyAScV8ZSabSPccRTohKCbee4jeUekq7GEJFiSfx7_jaY8cMyRd6Ldk-BNJ9BrKc9_aoeXas/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0L5n1PgSlhcMKWnnyt0_F16L5LBIgCytWtRt6KpiNMj2Ep3rbP7LcZa_5q_NWwuNJWw_7x12k1jjrFJYB789OYRRDLw9LhYKbOTUVvX2f1iM5x_l1Bf09CGvO9Aceqf_WV6wJ3R51F8g/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR0uJzj65f9Z0jTgN-9xNR2ERGXghrd58ArvkQJ-JrZDsGk3Cin0FtyaKYM5tHKBnO_xSooA3tPJ05x-HhSbS3sOxGNEBfJm6rTrodbDmluN0rvhGWCnV28cTLLWcbPkR3vgf1QLqwp6s/s1600/bloggertrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
 *Replace urls as your like.

10. Now save your template. You are done.
Read More

Friday, January 4, 2013

Customized Wordpress Style Author Bio Box To Blogger

File Under: 9 comments

In this post, im gonna explain how to add customized wordpress style author  bio  box for blogger. You  can add  this  box every end of y our  blog  post. Change  the usernames according to your details,i mentioned it with  highlighting the code.Other  thing is,  for  this bio box.  you  can  use  80 x 80 pixel  image.

Wordpress Style Author Bio Box To Blogger Part 1

Customized+Wordpress+Style+Author+Bio+Box+To+Blogger

Demo

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

2. Now select "Template" Like Below.

Select-template

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    <div class='post-footer-line post-footer-line-1'>

6. Paste below code Before <div class='post-footer-line post-footer-line-1'> tag

/* Code for the author box starts here bloggertrix.com */
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc;margin-top: 0px; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:11px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}

.social-connect-widget{width:400px;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}

#news-letter{margin-left:-35px;clear:both;padding-top:5px;width:300px;margin-top:-5px;}
.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:15px;margin-top:5px;background: url(http://cdn1.iconfinder.com/data/icons/UII_Icons/48x48/email.png) no-repeat;}

* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }

</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor" style="margin: 100px 0 0 300px;">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHJ6Gr_cduD0-b3RllsIEB9qLoy_KU-yFx9Q-PpfqBk4FABEmcKXYT5sx2JbKlDyzLJrwfPId805MqahK-llUvUexOCxA8cYVfvqtwemRVOIno5KPTkU_w2q1poF6pp8QXnjwCjP9m7M/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong> 
<a href="http://twitter.com/bloggertrix" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
    
<div id="author-connect">
    
<div class='social-connect-widget' style='margin-top:10px;margin-bottom:10px;margin-left:-15px;'>  
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgqpxSZXU9-lWeC06ymK0OTguzOs4eT5IptXSruHH5-jFHM2tMUQIyKgzfJsU-YYn4yc2nOKnfkZamsyyXQ8i_AvpwTfRdEdi-oigUtKnZTsvfacs5nZsJb8Vqa3sPhyphenhyphenTzkX-bwXBd9M/s1600/twitter.png' title='Follow Us on Twitter!'/></a> 
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTw_1YE4fZJnEeUIlOSDVUCIsO5Acml2l8hjrzL4-K5p4-IX9NXGp_mORjFZQxTnAs9ht1zsbroIBYhKhW0ShcOssoySqI94SJNQMW0TJOIcO9Pg4M_dOuAr1gC9syI4TSoMZCcvHX6u4/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHdJdZVxy7E4nEnvJnfz9jZFeRxlVM_zOY8pAPIGyLWo9vQeOg4RHt__8AnaBZ5msdX1xit4c7BMFk8k2l9z60VpGr15FU4aIjLSN5_nOY2iCDwWjYhRSGNhYlhRij97dkeJ3LRCmjBE/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMEOVlkhvKMFurInAD3tpiTFnJCF2JLMaHlwE89fFwGqZNJOvZsxdUps_LGjxI69Cz89Id1zi72N-ilI7h7tJzC6LFRF06CVM01Fh1IVjs7qIg6CiKjpMiRFc2R9H2MUPPADhSgkh5Llw/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg5-t864I5sUwEVdpJ8NMLJlg1-Yj_I4C97Qe4tmpe4PRe-LKoszbqrJpDXH64cIIhoyHBCFOKYqVTy2RSMJQTovQt0dlh5pA1DEYzXid5_cvx-gmw1DprztWqRb3iLa5Zvw4tFygaOI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/bloggertrix'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV000rKRuUguqrCHgOqVHcq-FR0rwHPaANo0fP9HyZRHw_WEQSLTL4j0Xb5SMmohKJEHdeX27OwEC7jnp2R5kyK_bEKANjQM3_a3HmINLWejTuut1YSYcx8gVHD1zW1F9CuqvRoFcVBTA/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW9s6vjff7pWTODTLAvONrKLnpgoqh_iHAoCPBx6mj8QJe7hOInq2m0wqGLDlohGsK7e4ZZHcGuqN5jAEAd6KsvjKhD6R5ymA90On10don0Z_5tM79x4KC4Gc87-Vp3FYUDNXF-BUMow0/s1600/image.png' target='_blank'/></a>
</div>
<hr style="width:155px;" />
    <div id="news-letter">
<span class="msg-box"></span>
<b>Subscribe</b>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
</form>
</div>
</div></div>
</b:if></b:if>​

*Replace  USERNAME  With Twitter User name.
*Replace  USERNAME  With faceook User name.
*Replace  USERNAME  With stumbleupon User name.
*Replace  USERNAME  With digg User name.
*Replace  Bloggertrix  With feedburner name.

4. Save HTML/Javascript. you are done.
Read More

Thursday, January 3, 2013

Show Pinterest Latest Pins Widget On Blogger

File Under: 13 comments

In today tutorial im gonna explain, how to show Pinterest recent pins on your blog.This is easy to add, Pinterest provided a tool for us. you can do some customize andadd it to your blog easily.So you can try this Pinterest builder tool.Follow us on pinterest

recent+pins+on+blogger

1.  Log in to your pinterest account.

2. Go to Widget builder page.


   
3. Under Widget builder page, you can see 4 options. If you select
   Profile widget : Will Show up to 30 of your latest pins
   Board widget:   Will Show up to 30 of your favorite board’s latest pins

4. Now enter your Pinterest board URL
    Go to top menu bar on pinterest and click your username select board from drop down menu.
copy paste your URL from address bar.


5. Under advance setting, you can change the size of the image and board size.
   Click preview to see board preview.

6. Now you can see 2 code below to preview button.So, you have to add these 2 code to your blog.

Add Pinterest recent pin widget to blogger


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Code will something like below.

<a data-pin-do="embedBoard" href="http://pinterest.com/bloggertrix/blogger-tricks/"></a>
<script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js” ></script>
7. Now save your HTML/Javascript'.

    You are done...

Read More

Wednesday, January 2, 2013

How To Add Apple Style Menubar For Blogger

File Under: , 4 comments

In  this  post  im  gonna  explain,  how  to add Apple  style menu  bar for  your  blog. This is
similar menu bar in apple.com site.Its include search  box  too. hope  this  will  help  who are
searching menu bar. Im  using Css and  HTML for this menu bar.You can get my all  menubar here

Add+Apple+Style+Menubar+For+Blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

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

/* The CSS Code for the menu starts here bloggertrix.com */

#appleNav { margin:40px 0; list-style:none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
   
    text-shadow: 0 -1px 3px #202020;
    width:980px; height:34px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}
#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelxtB2OLyBjGt2wyX7c0YluieOeg2S8HIVX99tC-GpkJ1BXra2mxRhyphenhyphenJOhXMj55sgG-vg3Ihyphenhyphenp8z1pejxwyxGqwn-LAQWdC68Am1dszF7vmiEra4XyRFFW8EAphNlI99fKixAoQBAZsHn/s1600/btrix_magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelxtB2OLyBjGt2wyX7c0YluieOeg2S8HIVX99tC-GpkJ1BXra2mxRhyphenhyphenJOhXMj55sgG-vg3Ihyphenhyphenp8z1pejxwyxGqwn-LAQWdC68Am1dszF7vmiEra4XyRFFW8EAphNlI99fKixAoQBAZsHn/s1600/btrix_magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    background-color:#6E6E6E; /* Fallback */
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;    
    border-left:none;
}
#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}
#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    border-right:none;
    width:124px;
}
/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}
#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}​

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <nav>
<ul id="appleNav">
   <li><a href="http://www.bloggertrix.com/" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9CJeuzmD8prxTkFr4nfELfuDqtngypiqHt_wV-c7lAZMIyNn4efnrqffVm8xCanSbdh9tQ9zX8NUPvLI2l-uRelbkItoUIiEy6SjRsXnyhiiXeGEcZdtr1XAfcC3D6FK-c9xI0-btW9vv/s1600/btrix_logo.png" alt="Apple Logo" /></a></li>
   <li><a href="#" title="Store">Store</a></li>
   <li><a href="#" title="Mac">Mac</a></li>
   <li><a href="#" title="iPod">iPod</a></li>
   <li><a href="#" title="iPhone">iPhone</a></li>
   <li><a href="#" title="iPad">iPad</a></li>
   <li><a href="#" title="iTunes">iTunes</a></li>
   <li><a href="#" title="Support">Support</a></li>
   <li>
        <form>
        <input type="text" />
        </form>
   </li>
</ul>
</nav>​
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More