.

Saturday, 14 March 2015

0 Recent Comments Widget For Blogger

The Recent Comments Widget for Blogger showcases the many present comments on your website's sidebar, revealing a snippet regarding the last opinions together with the title on the article in which the comment was actually made. The listing would be obtained in descending order (most recent at the leading).

This gadget is coded in JavaScript and designed with CSS but there has not already been added a lot of, so that it might suit the color scheme of one's Blogger template.

Parameters to be configured:
a. Number of comments: final number of comments to show
b. Date by which the opinion was published: either display or hide it
c. articles upon which an opinion is made: you may either cover the post titles or suggest to them
d. quantity of words per remark excerpt: The basic "n'' words in the comment would be noted

To include the Present Comment Widget to a Blogger blog is very simple.  Just proceed with the next steps under:

How To Add Recent Comments Widget to Blogger:

Step 1. Log in to your Blogger Dashboard (http://www.blogger.com/home) , select your blog > go to "Layout" and click the "Add a Gadget" link:


Step 2. From the pop-up window, scroll down and click on the "HTML/JavaScript" option:



Step 3. Copy and paste the below code in the HTML/JavaScript:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script>
<script style=text/javascript>
    var a_rc = 5;
    var m_rc = false;
    var n_rc = true;
    var o_rc = 100;
</script>
<script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html" rel="nofollow" >Recent Comments Widget</a></div>
<style type="text/css">
.rcw-comments a {
    text-transform: capitalize;
}

.rcw-comments {
    border-bottom: 1px dotted;
    padding-top: 7px!important;
    padding-bottom: 7px!important;
}
</style>


Step 4. Replace http://your-blog-name.blogspot.com with your address (pay attention to not have two forward slashed at the end of it).


Various other settings:
- adjust the quantity of comments which can be becoming displayed, change the "5" value from a_rc=5;
- to include the big date upon which the remark is made, alter the "false" text from m_rc=false to "true";
- to cover up the post titles, change the "true" book from n_rc=true to "false";
- to reveal basically comment characters, alter the "100" price from o_rc=100

Step 5. Click the "Save" button and go to see the recent comments widget on your Blogger blog!

Published By:
BloggerMotion
on 05:57

0 How to remove/delete labels from Blogger posts

Many writers will dsicover tags below posts (or post games) unnecessary, so long as these include already for the blog site's sidebar. Very, this guide will explain to you just how to remove them manually from the theme's HTML. To conceal brands from the writer post footer (or below blog post title), we're able to just uncheck the "Labels" option; however, this setting will most likely not work effectively in some custom templates right after which, we'll need remove the rule from your template.

Exactly how we are likely to try this?

 Hide labels in Blogger Posts using CSS

Step 1. Log in to your Blogger account > head to the 'Template' tab > hit the 'Edit HTML' button:
Step 2. Click anywhere inside the code area and search by using the CTRL + F keys the tag below (Enter to find it):

                                                         </head>

Step 3. Just above the </head> tag, add the following style:

                                                                <style>
                                                           .post-labels {
                                                          display: none;
                                                           }
                                                           </style>


Step 4. Click the 'Save Template' button to save the changes and view your blog. The labels below the posts should be hidden now.

Published By:
BloggerMotion
on 05:49

0 How to Add Neat CSS3 Dropdown Menu in Blogger

Listed here is another straightforward yet incredible dropdown selection with pure CSS3 produced by Andrew from script-tutorials.com (http://script-tutorials.com/) to that we have actually made some minor modifications so it could easily adapt in all of our Blogger layout.

In top of the correct spot of the eating plan we do have the get in touch with backlinks and the social networking icons for Facebook, Twitter, Google Additionally and RSS feed. Below these links, we now have the drop-down navigation menu and on the remaining side, the look kind.
To get better individual software and interaction, the CSS dropdown menu features sub categories that seem with an excellent touch of CSS3 box-shadow, text-shadow and a cool transition once the parent website link is actually triggered by a hover.


 Adding the CSS dropdown navigation menu in Blogger

Step 1. Access your Blogger Dashboard (http://blogger.com/) and go to Template > click on the Edit HTML button
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.

                                         </header>

Step 3. Just below add the HTML structure:




<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFal3vnj_D8nRQ8B4HE0OAd6k5Z_gVLWRAzTpr4LgYk35FD6p5-UwTikuiRyF0rWBacUbKqy_vCCSirMTaPwSGeKvek8vP9UKoZqn0pdfn1Rs8EDtNEOo6k5QRJ2uH-_2QFTgIA3zkH7yd/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAT3wF2PmtTCr9E4Vsz16eJTDaCZnRZC1dv-EyYGSfkuEECqdb_VnM6ZKUkF3W6MWlEyECbwC4yHqrj6YT3oe9obN-_OBmRcnnyE8BeYjYxAkiPbiphoOwpWQQGpjgM8QsV-7eRhd295dD/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPbxRIJGHPA-UVz2X_PZXm2ErsI2jjLAvo4Z3wQrTvUaD6EpdB1nDJEtIodMzMzRblzYqW9d-hNLD4zt75hhYFg_JOE0hHpIf5UyzFkwhC-mzoW6NMo-ocRrkAwNTltYdqPc5cnDSt7Fw/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NOcv2LRV8B9P7kL_wAVL_kFEKMVNX3BAmx3k34tio9JeRyavCQLS3hIHehJBQmJz1oFlVE7XjMZGONuql5ZYhqkFTf-g3aURPKjtwCRNqVpCwIEQcl_OkcHCPQD_vdBmZ0mVTGO0VsaH/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>
]]></b:skin>


Replace the # signs with the URLs of your own backlinks and replace the texts in bluish aided by the titles you want to look. To evolve the social networking icons, add the website links of the icons rather than the types in bluish. If you do not learn how to publish to get the URL of a picture, please read this tutorial (http://helplogger.blogspot.com/2013/09/upload-images-and-get-url-of-image.html) .

When you need to take away the sub classes, get rid of the code around the labels emphasized in yellow, like the ul tags. To take out only a menu element, eliminate the component that starts with <li> and ends with </li>

Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code:

                                               ]]></b:skin>

Just above ]]></b:skin>  add this code:

<div id='contact-links'>
    <div id='my-links'>
        <a href='#'>About</a>
        <a href='#'>Contact</a>
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFal3vnj_D8nRQ8B4HE0OAd6k5Z_gVLWRAzTpr4LgYk35FD6p5-UwTikuiRyF0rWBacUbKqy_vCCSirMTaPwSGeKvek8vP9UKoZqn0pdfn1Rs8EDtNEOo6k5QRJ2uH-_2QFTgIA3zkH7yd/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAT3wF2PmtTCr9E4Vsz16eJTDaCZnRZC1dv-EyYGSfkuEECqdb_VnM6ZKUkF3W6MWlEyECbwC4yHqrj6YT3oe9obN-_OBmRcnnyE8BeYjYxAkiPbiphoOwpWQQGpjgM8QsV-7eRhd295dD/s1600/twitter.png' title='Twitter' width='18px' /></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPbxRIJGHPA-UVz2X_PZXm2ErsI2jjLAvo4Z3wQrTvUaD6EpdB1nDJEtIodMzMzRblzYqW9d-hNLD4zt75hhYFg_JOE0hHpIf5UyzFkwhC-mzoW6NMo-ocRrkAwNTltYdqPc5cnDSt7Fw/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NOcv2LRV8B9P7kL_wAVL_kFEKMVNX3BAmx3k34tio9JeRyavCQLS3hIHehJBQmJz1oFlVE7XjMZGONuql5ZYhqkFTf-g3aURPKjtwCRNqVpCwIEQcl_OkcHCPQD_vdBmZ0mVTGO0VsaH/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
    </div>

    <div id='menu-container'>
        <nav id='neat-menu'>
            <ul>
              <li class='active'><a href='/'>Home</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Single Menu</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul>
                        <li><a href='#'>Menu element 1</a></li>
                        <li><a href='#'>Menu element 2</a></li>
                        <li><a href='#'>Menu element 3</a></li>
                        <li><a href='#'>Menu element 4</a></li>
                        <li><a href='#'>Menu element 5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- menu-search form -->
        <div id='menu-search'>
          <form method='get' action='/search'>
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
            </form>
        </div>
    </div>
</div>
]]></b:skin>
#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
    border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    clear: both;
    height: 46px;
    padding-top: 1px;
}
#neat-menu {
    float: left;
}
#neat-menu a {
    text-decoration: none;
}
#neat-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#neat-menu > ul > li {
    float: left;
    padding-bottom: 12px;
}
#neat-menu ul li a {
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
    border-color: #D1D1D1;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 0 0;
    color: #333333;
    display: block;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 11px 15px 10px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-bottom: 1px solid #2D81CC;
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    margin: -1px 0 -1px -1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
    border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #FFFFFF inset;
    height: 0;
    margin-top: 1px;
    opacity: 0;
    overflow: hidden;
    width: 240px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#neat-menu ul li:hover ul  {
    margin-top: 0\2;
    height: auto;
    opacity: 1;
    visibility: visible;
}
#neat-menu ul ul a {
    border-right-width: 0;
    border-top: 1px solid #D1D1D1;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    height: 24px;
    line-height: 24px;
    padding: 7px 12px;
    text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
    border-top: 1px solid #4791D6;
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
    border-top-width: 0;
}
#menu-search {
    margin:8px 10px 0 0;
    float: right;
}
#menu-search form {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdY5SFtLwHWxBxHh7F5MEGbILmXT5J4YUljFfrlyHKLhktlvCbaQN2DwpT85r4smYQMWR1xAUlojjN2-A4dZXRQI4w0Y1NIMNNw1ejlBVqlYeSnTmlqd1Lbd5PIh27E4TBc3zEm8sTTEfO/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
    height: 26px;
    padding: 0 25px;
    position: relative;
    width: 130px;
}
#menu-search form:hover {
    background-color: #F9F9F9;
}
#menu-search form input {
    color: #999999;
    font-size: 13px;
    height: 26px;
    text-shadow: 0 1px 0 #FFFFFF;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    outline: medium none;
    padding: 0;
    width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
    color: #C4C4C4;
}



Step 5. Click on the Save template button to save the changes... and you're done! ;)

I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.

Published By:
BloggerMotion
on 05:43

0 How To SEO Optimize Your Blogger Blog Titles For Higher Search Results

This is exactly labeled as "Blogger/blogspot Title Swapping". Swapping blog sites subject can assist boost your role in search results web page list but also boost clickthroughs. From an SEO (Research Engine Optimization) perspective, page title is considered the most vital element in your own blog in terms of rating well in look machines. If you appear at the web browser's concept bar you certainly will notice that Blogger's standard layouts exhibit your website subject right in front of each and every page or post subject. So page title would usually end up being displayed as:



After swapping the blog title, it will be appearing like this:





This type of placement will be appearing in google serp's. The key reason why you really need to put post titles during the start is because people are more inclined to search for particular post content as opposed to the real name of your blog. Thus obtaining the article titles from the start boosts your odds of becoming found.

How to optimize blogger post titles:

Step 1. Log in to your Blogger Dashboard (http://www.blogger.com/home) and go to Template > Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Type or paste the code below inside the search box to find it:

                                      <title><data:blog.pageTitle/></title>





Step 4. You need to replace the code above with this one:

                                    <b:if cond='data:blog.pageType == "item"'>
                                    <title><data:blog.pageName/> | <data:blog.title/></title>
                                    <b:else/>
                                    <title><data:blog.pageTitle/></title> </b:if>


Step 5. Click Save Template and you are done!




Published By:
BloggerMotion
on 05:26

0 Add Css/Jquery fixed horizontal menu to blogger blog

This routing bar will get semi-transparent whenever you scroll listed below and it is somewhat showing up by fading aside and getting nearly transparent. When the consumer hovers on it, the menu becomes opaque once more.

Inside the navigation there are several links, a look input and a top and bottom part key that permits the consumer to navigate for the top or bottom of the page.

Let's start adding it...

..and select the "expand widget templated" box:

2. Search (using CTRL + F) for this piece of code:

                                                   </head>

3. Just above/before the </head>  tag, add this code:

 <link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
 <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else   
                        $('#nav').stop().animate({'opacity':'1'},400);
                });
               
                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>


4) Now search for this tag:

                                     <body>
If you can't find it, search for this one:

                  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

5) Just below/after this code, copy and paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li>
<li class="search">
<form method="get" action="/search">
<input name="q" type="text" placeholder="Search..."/><input type="submit" value="" class="searchbutton"/>
  </form>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>


Note: swap URL address with the Address of your own pages and hyperlink 1, 2, 3, 4, 5, 6 with the name of the hyperlink that can come in the menu.

6) Now mouse click on the protect Template key and you are completed ;)

Published By:
BloggerMotion
on 05:12

0 How To Remove Blogger Navbar

WHAT IS BLOGGER NAVBAR?

Blogger has got a Navigation Bar that appears by default near the top of every Blogger-powered web log. This navigation club are extremely useful while you are blogging, but sometimes, it can get within the way. The Blogger navbar is actually generally hidden generally in most regarding the alternative party layouts, so this tutorial might come in handy merely for people who are utilizing a default Blogger template.

 

Advantages:

-when you go through the B symbol, it will get you to blogger.com;
-a fast url to your Dashboard and "check in /Sign out" dialog;
-it is possible to search and find additional blog sites;
-you can "Flag Blog" (if you think about material of a blog objectionable);
-NextBlog - takes one to an arbitrary, recently-updated Blogger weblog;

The sole drawback is actually graphic. If you may have customized concept, this navbar simply really doesn't easily fit in. Thus, how could we get eliminate it? It is quite easy. Just follow these measures here:

 

Turn off The Blogger Navbar

Step 1. get on the Blogger account, click your blog and check out the 'Layout' tab > identify the 'Navbar' heading and go through the revise website link as shown in this picture:


Step 2. As soon as the pop-up window appears, search down and choose 'Off', then click the Save switch:


And therefore's it! With only two easy strategies and we also have currently removed the Blogger Navbar.

Published By:
BloggerMotion
on 04:57

Home
Top