News Update :
https://www.microearners.com/
Showing posts with label WIDGETS. Show all posts
Showing posts with label WIDGETS. Show all posts

How to add CSS Stylish Navigation Menu On Blogger Blog

Penulis : irfi on Sunday, 29 September 2013 | 03:08

Sunday, 29 September 2013

Hello Friend!Our previous article is on How to add the author bio widget in blogger blog So today our article is on how to add this stylish Navigation bar in your blogger blog.If the primary navigation on your site or blog doesn’t provide enough space for putting all links, then this secondary CSS menu will allow you to put a lot of links in it.This navigation bar is made up of HTML and CSS no JavaScript is use in it.Many Professional blogger use Navigation menu for blogger.because adding navigation menu to your blogger blog make the visitors to quickly get the required content what they want.So many people need this.Thatswhy i designed this stylish navigation menu for your blog.Follow some simple steps inorder to at this navigation menu in your blog.

navigation menu

HOW TO ADD THIS NAVIGATION MENU ON YOUR BLOGGER BLOG:

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Press CTRL+F and search the code shown below.
    • ]]></b:skin> 
     . Paste below code just above it.

    <style>
    #navbarmenu ul{
    margin: 0;
      padding: 0;
      list-style-type: none;
      width:700px;
      position: relative;
      display: block;
      height: 50px;
      font-size: 12px;
      font-weight: bold;
      background:black;
      border:3px solid #2aa4cf;
      }
    #navbarmenu li{
     float:left;
     padding:12px
     margin:0px;
    }
    #navbarmenu a{
    color:#2aa4cf;
    font-size:20px ;
    padding:20px;
    line-height:50px;
    text-decoration:none;
    }
    #li1 a:hover{
    padding:12px;
    color:white;
    background-color:#FDB305;
    clear:both;
    }
    #li2 a:hover{
    color:white;
    background-color:#AF05FD;
    clear:both;
    padding:12px;
    }
    #li3 a:hover{
    color:white;
    background-color:#FD05D0;
    clear:both;
    padding:12px;
    }
    #li4 a:hover{
    color:white;
    background-color:#058DFD;
    clear:both;
    padding:12px;
    }
    #li5 a:hover{
    color:white;
    background-color:#FD3B05;
    clear:both;
    padding:12px;
    }
    </style>
    .LAYOUT –> ADD A GADGET –> HTML/JAVASCRIPT 

    .Copy the below code for and paste it there.
    <body>
    <div id="navbarmenu">
    <ul>
    <li id="li1"><a href='#'><span>HOME</span></a></li>
    <li id="li2"><a href='#'><span>SERVICES</span></a></li>
    <li id="li3"><a href='#'><span>ABOUT US</span></a></li>
    <li id="li4"><a href='#'><span>CONTACT US</span></a></li>
    <li id="li5"><a href='#'><span>HIRE US</span></a></li>
    </ul></div>
    .Now Save Your Template

    IF you have any Problem regarding this Menu then ask me in Comment section.

    Enjoy    You are Done!! 

    comments (2) | , , | Read More...
    Posted by irfi at 03:08 2 comments
    Labels: , ,

    How to add Author Bio Widget Under Every Post of Blogger

    Penulis : irfi on Friday, 27 September 2013 | 03:32

    Friday, 27 September 2013

    Hello friend!Our previous article is on How to add notification bar on blogger So today our article is on How to add author bio widget under every post of your blogger blog.This widget is made up of HTML and Css.Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget So i designed this widget This widget is for Blogger users only as WordPress has various plugins to deal with author boxes.I am happy to develop this author bio profile widget for bloggers. You have seen this widget in many WordPress blogs but implementing on blogger is very difficult. I was busy in this widget for last 20 hours to give a cool and Simple stylish look. Now, I have developed this author bio widget for your blogger blog. As my coding skills, i has tried to minimized the style sheet code.

    HOW TO ADD THIS AUTHOR WIDGET TO BLOG:-




  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Press CTRL+F and search the code shown below.


    • ]]></b:skin> 
     . Paste below code just above it.
    .authorbox {
    font-size:12px;
    margin:0 auto;
    padding:10px 0 5px;
    width:auto;
    background:#2aa4cf;
    border-radius:10px;
    border: 4px black solid;
    -moz-box-shadow: 0px 0px 5px #BBB;
    -webkit-box-shadow: 0px 0px 5px #BBB;
    box-shadow: 0px 0px 5px #BBB;
    height:200px;
    color:black;
    }
    .h1 {
    border-bottom:2px solid black;
    font-size:25px;
    margin:-2px auto;
    text-align:left;

    }
    #authortext {
    float:right;
    width:80%;
    font-size:16px;
    text-align:justify;
    color:white;
    margin:0;
    padding:10px;
    font-family:Helvetica,Arial,sans-serif;
    }
    .authorpicture {
    padding:15px;
    float:left;
    width:110px;
    height:100px;
    margin:25px 15px auto;
    opacity: 1;
    }
    .Now Search for below code once again
    "<div class='post-footer-line post-footer-line-1'>"

    .Paste below code just after it.

    <div class="authorbox">
    <div class="author">
    <img class="authorpicture" src="YOUR PIC URL">
    <h1 class="h1">About Editorial Team</h1>
    <p id="authortext">
                           "YOUR TEXT HERE" 
    <a href='YOUR ABOUT US PAGE URL' rel='nofollow'>Readmore</a></p>
    </div></div>
    .Now Save Your Template

    IF you have any Problem regarding this Widget then ask me  in Comment section.

    Enjoy
    You are Done!!

    comments (2) | , | Read More...
    Posted by irfi at 03:32 2 comments
    Labels: ,

    How to add Notification Bar To your Blogger Blog

    Penulis : irfi on Friday, 20 September 2013 | 03:52

    Friday, 20 September 2013

    Hello Friend How are you hope you will fine So Today our post is on How to 
    add Notification bar to blogger Blog.Basically designing a blogger blog is much easier now days Every blogger design her blog with awesome coding. So Today we are releasing a fancy style blue color notification bar for your blogger blog.Notification bar is not for blogger by default but as I told you that
    developers has created many things for blogger and this Notification bar is created by me.this bar shows manually specified links, so you can add or remove links to it manually according to your needs.
    Notification bar is the best way to highlight the latest topics or  updates of any blog.
    notification bar

    How to add this awsome notification bar to blogger:

    If you add this notification bar to your blogger blog then follow some simple and easy steps in order to add this stylish notification bar to your blog.

    1.Go To Blogger >> Template >>Edit HTML

    2.Now find for ]]></b:skin>:

    3.Now Paste the Below code just above the ]]></b:skin>:


    #notification bar{

    background:black;

    width:auto;
    height:50px;
    z-index: 999999;
    padding:-12px  ;
    margin: -41px 0 0;
    display:none;
    }
    #OIFbar{
    background: none repeat scroll 0 0 #000000;
    background:#05ADFA;
    width:auto;
    height:50px;
    padding:10px auto;
    text-align:center;
    font-family: arial,sans-serif;
    color:black;
    position: relative;
    text-align: center;
    text-decoration: none;
    margin:-10px;
    padding:2px -10px ;
    border-bottom:3px dotted black;
    }
    #OIFbar a{
    color:black;
    font-size:10px;
    font-family: arial,sans-serif;
    }
    #OIFbar hover{
    text-decoration: underline;
    }
     4.Now again go for Template

    5.Now search <body>

    6.After that paste the below code just after <body> tag

    <div id="notification bar">

    <div id="OIFbar"> 

    "ONLINE INFO POINT NOTIFICATION BAR"          
    </div></div>
     7.Now You're Done Save Your Template:)

    IF you have any problem while doing this task then feel free and kindly post your problem in comment section.I hope You find this tutorial helpful
    If you want to know more OIF Awesome widgets then Subscribe us and Follow us And finally don't forget to share this post with your friends

    Thank you
    Enjoy!!!
    comments (5) | , | Read More...
    Posted by irfi at 03:52 5 comments
    Labels: ,

    AUTO SCROLLING RECENT POSTS WIDGET TO BLOGGER

    Penulis : irfi on Sunday, 11 August 2013 | 05:54

    Sunday, 11 August 2013


       AUTO SCROLLING  RECENT POSTS WIDGET TO BLOGGER

      So,In this tutorial i will teach you how to add this auto scrolling recent post
      widget in blogger.Scrolling recent posts widget is a great widget to show the recent posts from your blog with scroll effect.As we all know that designing blogger blogs is become easier now and every blogger designe her blog with awsome coding.You also design your blog if you have some knowledge about coding.So in this tutorial I have a great looking Scrolling effect recent posts widget for you which you can easily add to your blogger blogs. It is an awesome widget.and you can easily customize it according to your wish.

      ADDING AND CUSTOMIZATION

      1. Go to blogger >> Layout
      2. Add a Gadget >> Add an HTML/JavaScript Widget
      3. Now just copy all below code and paste it inside HTML/JavaScript Widget


      1. Replace http://irfitech.blogspot.com with "your blog url"
      Thats all save your widget
      If you face any problem while adding this widget kindly leave your comment below so I will help you

      comments (1) | , | Read More...
      Posted by irfi at 05:54 1 comments
      Labels: ,

      Add stylish subscription widget to your blog

      Penulis : irfi on Thursday, 8 August 2013 | 12:59

      Thursday, 8 August 2013

      So in this tutorial i will teach you how to add stylish subscription widget to your blog.As you all know that blog without a subscription box make no sense.I recommend you to keep your blog in a good condition.If you have a subscription box then your blog gain more traffic.you can get any subscription widgets very easily just paste their coding in to your blog.today in this tutorial i have a great looking awesome subscription widget for you which you can add your blogger blog very easily.Adding this stylish subscription widget to your blog is very simple.you may need to follow just simple steps.

      HOW TO add this widget to your blog

      1. Go to blogger >> Layout
      2. Add a Gadget >> Add an HTML/JavaScript Widget
      3. Now just copy all below code and paste it inside HTML/JavaScript Widget



        CUSTOMIZATION

        1. Replace feedburner id with "your feedburner id"
        2. Replace twitter username with "your twitter username"
        3. Replace google plus id with "your google id"
        Thats all save your widget
        If you face any problem while adding this widget kindly leave your comment below so I will help you
        comments (2) | , | Read More...
        Posted by irfi at 12:59 2 comments
        Labels: ,
        Subscribe to: Posts (Atom)
        https://www.microearners.com/
         
        About Us | Contact Us | Privacy policy | Term of use | DMCA Notice | Advertise with Us | Site map
        Copyright © 2015. Irfi Tech Blogs . All Rights Reserved.
        Design Template by Irfan