5 Steps to Add Signature to Blogger Posts (with Demo)

Do you want to add a signature text or image to your Blogger posts? Post signature is usually a text or an image at the end of each post, adding custom signature to your blogger posts not only give it certain flair but also gives a visible stamp of your authority over your blog content. You can manually insert signature to new blog posts but what about old post, its not easy to add signature manually in already published posts specially if they are in hundreds.

Don't worry your are howbloggerz user, nothing is impossible here. I have created a set of CSS and HTML code to automatically add signature in old and upcoming new posts. The best part about this method is that you can edit your signature at any time and the changes will reflect on every post.

There are two types of signature you can add either text or image and both have different way of installing therefore i have added instruction for both types with images and created a demo to make you have a look.

DEMO

How to Add Signature to Blogger Posts

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

<div class='post-footer'>

Note : There are two occurrence of the above code. 1st occurrence for mobile view and second for desktop.


Step 3. Just above <div class='post-footer'> Place the following code:

• To Add Text Signature

• To Add Image Signature

     <style type="text/css">
.hbz-signature {
     font-size: 22px;
     font-family: Papyrus,fantasy;
     text-shadow: 5px 2px 2px #dddddd;
     margin-top : 30px;
     text-color: #222222;
}

.hbz-signature span {
     font-size: 14px;
     vertical-align: top;
}
    </style>
    <div class="hbz-signature"><span>By</span> You Name</div>

    <style type="text/css">
.hbz-signature {
     margin-top: 30px;
}

.hbz-signature img {
     background: transparent none repeat scroll 0% 0%;
     border: medium none;
     box-shadow: none;
}
    </style>
    <div class="hbz-signature"><img src="Your Signature Image URL"  alt="Your Image Name"/></div>

 Step 4. Configuration of Code:

For Text Signature:

• Adjust the value 22 to change font size of text.
• Replace the value Papyrus,fantasy to change the font family of the text (List of Font Family).
• Replace the value #dddddd to change text shadow color (Color Codes).
• Replace the value #222222 to change text color.
• Replace You Name with your name or with any other text.

For Image Signature:

Note: To create your Signature image you can use photo editing software on your mobile or machine, or the online Pixlr editor.

If you don't know much about editing, you can use tool Mylivesignatue (Recommended).

• Replace Your Signature Image URL with the URL of the image.
• Replace Your Image Name with name of the image.

Read : How to Get the URL of an Image

Step 4. Click Save template.

That's all!

Now go through your blog and see you signature text or image on each blogger post. Coding usually depends on the template you are using, therefore if you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How to Change Blogger Email address (with Images)

Blogger does not provide option to change primary email id and so many blogger user asking "how to change my blogger email address" with different reasons, chosen a wrong blogger email address at the time of creating a blogspot blog is one of the top reason but if you are also looking to change your blogspot login email address with any reason then you are at right place.

Now days their are too many different ways to change blogger account email id but don't worry i have come with easy one, i have created an article on the best and easiest way to change your email address on blogger including step by step instructions (with images):

Changing Blogger Login Email Address

Step 1. Login to your blogger account for which you want to change your login email id.

Step 2. Now navigate to Blogger Dashboard > Settings > Basics > Permissions section.

Step 3. Click + Add authors and send an author invitation to your new email id.

Step 4. Go and Accept the author invitation in your new email address and again login to blogger with old email id.

Step 5. Again navigate to Permissions section. You will see another author in Permissions section. Change the role of new email id from Author to Admin.

Step 6. Now login to blogger with your new email address. You will see your blog in dashboard.

Step 7. Go to Settings > Basic > Permission section and remove your old email address from the Blog Authors.

That's it!

You have successfully changed your blogspot email address with new email id. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How to Customize Blogger's Official Lightbox

Blogger by default added the Lightbox feature to add more interactivity to images we normally upload in our post, with their lightbox its much more easier to view images by using the arrow keys and even the background is darker for getting more focus on the images instead of text added in that post. But till now we do not have any option to customize the overall looks of lightbox by changing its background color, changing the bar color containing all the images small thumbnails and much more.

For those of you who have chosen to use the Blogger's Lightbox View instead of custom jquery lightbox for displaying pictures when clicking on them now have the option to change its style in a whole different way by just using few line's of CSS code. You will be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background. It means we can customize the Blogger Lightbox entirely on our taste. After adding our CSS code, the entire look of the lightbox window will be changed - the background color, the bar showing the thumbnails, the border of images, the text within it, transparency and the close button. Now just follow the given step by step tutorial with images and demo :

DEMO

How to Customize Blogger's Official Lightbox

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

 ]]></b:skin>

Step 3. Just above ]]></b:skin> add following CSS :

    /* Background or Overlay*/

    .CSS_LIGHTBOX_BG_MASK {
    background-color: #000000 !important;
    background-image: url(background-image-url) !important;
    opacity: 0.8 !important;
    filter: alpha(opacity=90) !important;
    }


    /* Images Border and Shadow */

    .CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    outline: 0px solid #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #ffffff;
    -moz-box-shadow: 0px 0px 5px #ffffff;
    box-shadow: 0px 0px 5px #ffffff;
    }


    /* Close Button */

    .CSS_LIGHTBOX_BTN_CLOSE {
    background-image: url(button-image-url) !important;
    }


    /* Thumbnails Bar */

    .CSS_LIGHTBOX_FILMSTRIP {
    background-color: #000000 !important;
    }


    /* Index Info (number of images) */

    .CSS_LIGHTBOX_INDEX_INFO {
    color: #898989 !important;
    }

Step 4. Configuration of CSS:

- Replace background-image-url with the URL of the image for background.
- Replace button-image-url  with the URL of the image for close button.
  For example : background-image: url(https://www.image.com/image.jpg) !important;

  Related post: How to get image URL

  Note : If you want use default value for close button then remove the CSS :

                 /* Close Button */

                 .CSS_LIGHTBOX_BTN_CLOSE {
                 background-image: url(button-image-url) !important;
                  }

- Adjust the value 0.8 ( from 0 to 1 ) to change the transparency (Opacity) of background.

- Replace the value #xxxxxx to change the color of particular element in particular section (Color Codes).

• For example : Say if you want to change the background color of  Thumbnails bar to #ffffff, then change the value #000000 to #ffffff under  /* Thumbnails Bar */ inside background-color :
  
       /* Thumbnails Bar */
  
      .CSS_LIGHTBOX_FILMSTRIP {
      background-color: #ffffff !important;
      }


• Or Say if you want change the Text color of Index Info then change the value #898989 with any other say #dddddd under /* Index Info (number of images) */ inside color :
  
      /* Index Info (number of images) */
  
      .CSS_LIGHTBOX_INDEX_INFO {
      color: #dddddd !important;
      }

- Adjust the value 5  to change the radius of image (all 3 values should be same).

Note: Make sure your blogger lightbox is enabled - Settings > Posts, comments and sharing > Showcase images with Lightbox


Step 5. Click Save template.

Great !

Refresh your blog and click on any image to see your own customized blogger lightbox. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...

How To Add jQuery Drop Down Menu To Blogger

Drop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers. Drop down menus can help organize and categorize content links. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! It helps visitors to easily get the required content from the whole blog.

Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images:

Adding The jQuery 2-Sub Drop Down Menu

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

</header>

Step 3. Just below </header> add the following HTML code :

 <div id="navmenu">
    <ul>
        <li><a class="highlight" href="#">Home</a></li>
        <li><a href="#">Product</a>
              <ul>

              <li><a href="#">Product 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              <li><a href="#">Product 2</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Category</a>
              <ul>

              <li><a href="#">Category 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Step 4. Configuration of HTML code :

1. Replace # with the URL of the link.

Say if your post URL is  http://howbloggerz.blogspot.com/2016/05/how-to-add-drop-down-menu-to-blogger.html
or if your page URL is  http://howbloggerz.blogspot.com/p/page.html

To make sure that current page link highlighter works properly with country redirect.

Add only : /2016/05/how-to-add-drop-down-menu-to-blogger.html
or /p/page.html


Example :

<a href="/2016/05/how-to-add-drop-down-menu-to-blogger.html">Title</a>

Note: Use full URL for home page link ( do not use above format ).

2. Replace the text inside the code with title of that specific URL.

<a href="#">Title</a>

3. How to add more categories :

To add another category say "Group" before "About", place the following code just above it :

<li><a href="#">Group</a></li>

Example :

<div id="navmenu">
    <ul>
        <li><a class="highlight" href="#">Home</a></li>
        <li><a href="#">Product</a>
              <ul>

              <li><a href="#">Product 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              <li><a href="#">Product 2</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Category</a>
              <ul>

              <li><a href="#">Category 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Group</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

4. How to add Sub-category :

Say if you want to add sub-category to category "Group" then place the following code just above the closing tag </li> of "Group" :

<ul>
<li><a href="#">Sub Group</a></li>
</ul>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group</a></li>
      </ul>
</li>

To add another sub category in "Group" add following code just above closing tag </ul> of  "Group" :

<li><a href="#">Sub Group</a></li>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a></li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>

5. How to add Sub-sub category :

Say if you want to add sub-sub category inside "Group" in "Sub Group 1"  add the following code just above the closing tag </li> of "Sub Group 1" :

<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a>
            <ul>
            <li><a href="#">Sub-Sub Group</a></li>
            </ul>
      </li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>


Step 4. Again find the code </head> and place anyone of the following code just above it :

DEMO

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 70px;
        background-color: #232323;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
        width: auto;
    }
   
    #navmenu > ul > li {
        float: left;
        margin-left: 15px;
        position: relative
    }
   
    #navmenu > ul > li > a {
        color: #a0a0a0;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 70px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #232323;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 55px;
        left: 50%;
        margin-left: -90px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 65px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #cc2c24;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
        }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 50px;
        background-color: #265783;
        box-shadow: 0 2px 3px rgb(167, 205, 240);
        width: auto;
        border-bottom: 3px solid #214565;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #214565;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #214565;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 70px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 50px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -15px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 20px;
        left: -20px;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "10px 28px 12px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        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 );
        height: 50px;
        box-shadow: 1px 1px 3px #C2C2C2;
        width: auto;
        border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        -moz-border-radius: 0 0 3px 3px;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #CFCFCF;
    }
   
    #navmenu > ul > li > a {
        color: #000;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #50A2EE;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 150px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 54px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: -25px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 10px 8px 12px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }

    #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
    }

    #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
        border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
    }

    #navmenu ul ul li:last-child {
        border-bottom: 0px;
    }
   
    #navmenu ul ul li:hover span {
        -webkit-transform: rotate(90deg);
        -ms-transform:rotate(360deg);
        transform: rotate(90deg);
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 206px;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #00A2E8;
    }
   
    #navmenu ul ul span {
        background-image: url("https://4.bp.blogspot.com/-Odm4GB62Eno/Vy9sfmXdRDI/AAAAAAAAAn4/4O95b1gxOQ8Vzss-iOznxkcik5BCcHzBgCLcB/s1600/hbz-arrow.png");
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        position: absolute;
        right: 20px;
        top: 10px;
        width: 18px;
        height: 18px;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "10px 28px 12px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        background: -webkit-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        background: -moz-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        background: linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a1a1a1',GradientType=0 );
        height: 50px;
        box-shadow: 1px 1px 3px #C2C2C2;
        width: auto;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;

    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        margin-left: 15px;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 5px 15px;
        border: none;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        text-shadow: 0px 2px 1px #C6C6C6;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #000;
        background-color: #fff;
        box-shadow: 1px 2px 3px #8d8d8d;
    }
   
    #navmenu ul ul a.highlight {
        background-color: #F5F5F5;
    }

    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 54px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 54px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: -25px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fff;
        padding: 10px 8px 12px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }

    #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
        border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
    }

    #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
        border-radius: 0 0 15px 15px;
        -webkit-border-radius: 0 0 15px 15px;
        -moz-border-radius: 0 0 15px 15px;
    }

    #navmenu ul ul li:last-child {
        border-bottom: 0px;
    }
   
    #navmenu ul ul li:hover span {  
        animation: fade 1s forwards;
        -webkit-animation: fade 1s forwards;
        -moz-animation: fade 1s forwards;
        -o-animation: fade 1s forwards;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite; 
        -o-animation-iteration-count: infinite;
    }
   
    @keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-webkit-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-moz-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-o-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 206px;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #000;
        background-color: #F5F5F5;
    }
   
    #navmenu ul ul span {
        border-color: transparent transparent transparent #777;
        border-style: solid;
        border-width: 5px;
        display: block;
        position: absolute;
        right: 20px;
        top: 14px;
    }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });

        $("#navmenu ul ul").hover(function() {
            $(this).prev().addClass("highlightz");
        }, function() {
            $(this).prev().removeClass("highlightz");
        });

        function getRandomClass() {
           var classes = new Array("a", "b", "c", "d", "e", "f");
   
           var randomNumber = Math.floor(Math.random()*7);

           return classes[randomNumber];
        };
        $("#navmenu ul ul li:has(ul)").hover(function() {
           var randomClass = getRandomClass();
           $(this).attr("class", randomClass);
        });

        $('#navmenu ul ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });

        $('#navmenu ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });


    });
</script>


<style type="text/css">


    #navmenu ul ul li.a:hover a, #navmenu ul ul li.a:hover ul {
        background-color: #65834C;
        color: #fff;
    }


    #navmenu ul ul li.b:hover a, #navmenu ul ul li.b:hover ul {
        background-color: #4F4C83;
        color: #fff;
    }

    #navmenu ul ul li.c:hover a, #navmenu ul ul li.c:hover ul {
        background-color: #4C7983;
        color: #fff;
    }

    #navmenu ul ul li.d:hover a, #navmenu ul ul li.d:hover ul {
        background-color: #834C4C;
        color: #fff;
    }

    #navmenu ul ul li.e:hover a, #navmenu ul ul li.e:hover ul {
        background-color: #4D6899;
        color: #fff;
    }

    #navmenu ul ul li.f:hover a, #navmenu ul ul li.f:hover ul {
        background-color: #97944C;
        color: #fff;
    }

    #navmenu ul ul ul a:hover {
       text-decoration: underline;
    }

    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 50px;
        background-color: #384959;
        box-shadow: 0 0 3px rgb(206, 206, 206);
        width: auto;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   

    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight,
    #navmenu .highlightz {
        color: #000;
        background-color: #fff;
    }

    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        position: absolute;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fff;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 180px;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>

Step 4. Click Save template.

That's all !

Refresh your blog to see stylish horizontal jquery menu with highlighter. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)

Read more ...