Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

Add Google type Stylish Breadcrumbs to Blogger Blog?

Posted by Unknown

google type breadcrumbs for blogger
The Breadcrumbs or breadcrumb trail is used as an aid for navigation. The breadcrumbs allows users to keep track of their location and to understand where they are. In Blogger, the breadcrumbs are the way to realize the category of an article/post. I think you had seen this in e-commerce sites like ebay,myntra,yebhi. They used breadcrumbs to identify a product is in which category. Its just like a Home link followed by the category belongs and then the current location/current post.




Demo shows in top of this post Click Here

  • Sign in to your Blogger Dashboard
  • Go to Template -> Edit HTML
  • Step 1: Find (ctrl+F) the following code
<b:include data='top' name='status-message'/>
  • copy the following code after it
<b:include data='posts' name='breadcrumb'/>
  • Step2:  Find the following code
<b:includable id='main' var='top'>
  • copy the following code above it
<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.fe-blogger.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <b:loop values='data:posts' var='post'>
                                          <b:if cond='data:post.labels'>
                                            <b:loop values='data:post.labels' var='label'>
                                              <b:if cond='data:label.isLast == &quot;true&quot;'>
                                               
                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/>
                                            Unlabelled
                                          </b:if>
                                         
                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>
  • Step 3:  Find ]]></b:skin> and Copy the following css code above it

Style 1: Style like this blog used

 .breadcrumbs {

margin: 0px 0px 15px 0px;
font-size:95%;

}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Style 2: Google Type


Style 3: Wood Type

     .breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
        border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;

    }

Style 4: Blue Type


I hope this article will help you, if you liked this please spread our Blog.
More aboutAdd Google type Stylish Breadcrumbs to Blogger Blog?

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Posted by Unknown

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.


Demo shows in bottom right side 
Features of this Widget
  • Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering
  • CSS3 Hover Animation 

Sign in to your Blogger Account and Active Popular Posts Widget


  • First Add Popular post Widget to Blogger
    • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
    • Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
  • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
  • Copy the following code and Paste just above it
    <!-- Popular posts multi colored UI theme -->
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding:4px;
    border:1px solid #fff !important;
    }
    #PopularPosts1 img:hover {
    border-radius: 0 0 0 0;
    -moz-transform: scale(1.2) rotate(-711deg) ;
    -webkit-transform: scale(1.2) rotate(-711deg) ;
    -o-transform: scale(1.2) rotate(-711deg) ;
    -ms-transform: scale(1.2) rotate(-711deg) ;
    transform: scale(1.2) rotate(-711deg) ;
    }
    <!-- popular posts multicolored UI theme -->

    • Click on Preview Template (You can see the template without saving)
    • Save the Template.
    View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
    If any problems with this trick don't hesitate to ask, do comment here...

    More aboutAwesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

    Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

    Posted by Unknown

    Google search bar for Blogger
    All of you know about Google Search bar. You'd see the style of search bar used in Google. If you didn't see Google search bar either go to Google or please see the right top of  our blog, you can see a static Google search bar. Here is a trick to add this Google search bar to your blog. This is not the real Google search bar, instead this is a CSS3 styled search bar using Blogger's search method. If you need Google's real search bar[but it can't get Google's search box style] go to http://www.google.co.in/cse. Let's see how to add Google type search bar to your blog...


    Demo shows in right top
    Features
    • Floating Static (Fixed) Search bar
    • CSS3 styled search bar
    • CSS3 animated
    • Go to Layout -> Click on Add a Gadget
    • Select HTML/JavaScript from the list
    • Leave the Title as Blank and copy paste the following code inside the Content portion
                                  OR
        • Sign in to Blogger Dashboard and go to Template -> Edit HTML
        • Search (Ctrl+F) <body 
        • Copy and paste the following code after it


        <!-- Noop Google search box -->
            <div class='noop-searchbox' id='noop-searchbox'>
              <form action='/search' id='noop-searchform' method='get'>
                <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
                <button id='sbutton' type='submit'>
                  <span id='simg'/>
                </button>
              </form>
            </div>
        <style type="text/css">
        #sbutton {
        background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
        background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
        background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
        background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
        background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
        border: 1px solid #3079ED;
        border-radius: 2px 2px 2px 2px;
        color: #FFFFFF;
        height: 27px;
        min-width: 76px;
        padding: 0 21px;padding-bottom: 2px;
        }
        #sbutton:hover{ background-color: #357AE8;
        background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
        background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
        background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
        background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
        background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
        border: 1px solid #2F5BB7;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
        #simg {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJy79Onhg4AqvgL2gYG3Brfe5vcBySUDNO_i_4VqgaNR2UHTIxv40Ot2NxFmLkPM61iv2dJNSiRUl_brE8Soe753jO3aXTAgb3Pl0Sw2__DlO44Zm92soXtT7aZhYWuF4gCStdFCVycww/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
        display: inline-block;
        height: 14px;
        margin: 0;
        width: 17px;z-index:101;
        }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
        #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
        #s:focus {width: 200px;}
        .noop-searchbox {
        display: block;
        position: fixed;
        right: 0;
        top: 1%;
        max-width: 300px;min-width: 238px;
        z-index: 100;
        }
        </style>
        <!-- Noop Google search box -->

        I hope this article will help you. If any problem with this please do comment.
        More aboutExtreme CSS3 Floating Google Search Bar for Blogger FREE..!!