Addvance dynamic menu for blogger

Let me explain how to add simple facebook like box.


  • 1. Login To Blogger Account.
  • 2. Click Layout > Add A Gadget.
Code: 

<style>
/--- Roseic Drop Down Menu By www.computerjajot.com ---/
ul.oe_menu {
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #fff;
  margin:0;
  padding:0;
  background:url(http://2.bp.blogspot.com/-oAi4K-LmIw0/UcWPL_REuqI/AAAAAAAAF8w/EaSVI7ydHHA/s1600/bg.png) repeat-x;
}
}
.clear {
  clear: both;
}
a {
  color: #3299bb;
  text-decoration: none;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
ul.oe_menu {
  list-style:none;
  width:960px;
  float:left;
  clear:both;
  margin:0;
  padding:0;
  position:relative;
  top:-5px;
}
ul.oe_menu li {
  float:left;
  position:relative;
  background:url(http://2.bp.blogspot.com/-AnkajO1RlCc/UcWWoNNAYhI/AAAAAAAAF9I/i2cgtGd80b8/s1600/rosiec-tab.png) no-repeat 100% 100%;
  margin:0;
  padding:0;
}
ul.oe_menu li a .home {
  background:url(http://1.bp.blogspot.com/-YPg8xOvYQo4/UcWXAey5anI/AAAAAAAAF9Q/O6-N7HeD2Ng/s1600/home-icon.png) scroll 20px 0px no-repeat;
  width:59px;
  margin:0;
  padding:10px 0;
  *padding:0;
  display:block;
  float:left;
  position:relative;
}
ul.oe_menu li a .home:hover {
  background:url(http://1.bp.blogspot.com/-YPg8xOvYQo4/UcWXAey5anI/AAAAAAAAF9Q/O6-N7HeD2Ng/s1600/home-icon.png) scroll 20px -44px no-repeat;
  padding:10px 0;
  *padding:0;
  display:block;
  float:left;
  position:relative;
}
ul.oe_menu li .no-p-m {
  margin:0;
  padding:0;
  height:41px;
}
ul.oe_menu li .all_categries_link {
  color:#006699;
}
ul.oe_menu li .menu {
  display:block;
  color:#666666;
  text-decoration:none;
  font-size:15px;
  padding:13px 17px;
  margin:1px;
  display:block;
  float:left;
}
ul.oe_menu li .menu:hover, ul.oe_menu li.selected .menu {
  background:url(http://1.bp.blogspot.com/-snlFmZW3XYA/UcWXbMU54CI/AAAAAAAAF9Y/f34bLCvyz74/s1600/bg-tabs.png) bottom repeat-x;
  color:#fff;
  background-position:-2px 0px;
}
ul.oe_menu div {
  position:absolute;
  border:1px solid #1b63ab;
  top:46px;
  *top:44px;
  left:1px;
  background:#fff;
  display:none;
  zoom:1;
}
ul.oe_menu div ul.oe_full {
  width:100%;
}
li.oe_heading {
  color:#333;
  font-size:16px;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid #ddd;
  clear:both;
}
span.reference {
  position:fixed;
  left:0px;
  bottom:0px;
  width:100%;
  font-size:10px;
  line-height:20px;
  text-align:right;
  height:20px;
}
span.reference a {
  color:#aaa;
  text-transform:uppercase;
  text-decoration:none;
  margin-right:10px;
}
span.reference a:hover {
  color:#ddd;
}
.bg_img img {
  width:100%;
  position:fixed;
  top:0px;
  left:0px;
}
ul.oe_menu li div.one-clm {
  width:172px;
  padding:0 15px 0 0;
}
ul.oe_menu li div.two-clm {
  width:370px;
  padding:0 15px 0 0;
  position:absolute;
}
ul.oe_menu li div.three-clm {
  width:555px;
  float:left;
  padding:0 15px 0 0;
}
ul.oe_menu li div dl {
  width:170px;
  float:left;
  font:Arial, Helvetica, sans-serif;
  margin:15px 0 15px 15px;
  *margin:0px 0 15px 10px;
  *position:relative;
  *top:10px;
}
ul.oe_menu li div dl dt {
  display:block;
  width:92%;
  padding:0 0 5px 0;
  margin:0 0 5px 0;
  border-bottom:1px dashed #f1f1f1;
  float:left;
  font:bold 14px Arial, Helvetica, sans-serif;
  color:#999;
}
ul.oe_menu li div dl dd a {
  background:none;
  color:#999;
  font:12px Arial, Helvetica, sans-serif;
  padding:3px 0;
  width:92%;
  display:block;
}
ul.oe_menu li div dl dd a:hover {
  text-decoration:none;
  color:#003399;
}
/--- Roseic Drop Down Menu By www.computerjajot.com ---/
</style>



<!-- The JavaScript Drop Down Start-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var $oe_menu        = $('#oe_menu');
                var $oe_menu_items    = $oe_menu.children('li');
                var $oe_overlay        = $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
                    var $this = $(this);
                    $this.addClass('slided selected');
                    $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
                        $oe_menu_items.not('.slided').children('div').hide();
                        $this.removeClass('slided');
                    });
                }).bind('mouseleave',function(){
                    var $this = $(this);
                    $this.removeClass('selected').children('div').css('z-index','1');
                });

                $oe_menu.bind('mouseenter',function(){
                    var $this = $(this);
                    $oe_overlay.stop(true,true).fadeTo(200, 0.6);
                    $this.addClass('hovered');
                }).bind('mouseleave',function(){
                    var $this = $(this);
                    $this.removeClass('hovered');
                    $oe_overlay.stop(true,true).fadeTo(200, 0);
                    $oe_menu_items.children('div').hide();
                }) 
            });
        </script>
    <!-- navigation java script ends here -->

          




      
            <ul id="oe_menu" class="oe_menu" style="position:relative;">
                <li><a class="menu" href="http://www.computerjajot.com/"><span class="home"></span></a>
                 
                </li>
                <li><a class="menu" href="#">Blogging</a>
                    <div class="two-clm">
                        <dl>
                            <dt>Category</dt>
                            <dd><a href="#">Widgets</a></dd>
                            <dd><a href="#">Tutorials</a></dd>
                            <dd><a href="#">JavaScript</a></dd>
                            <dd><a href="#">Generators</a></dd>
                            <dd><a href="#">CSS Widgets</a></dd>
                        </dl>
                        <dl>
                            <dt>Brands</dt>
                            <dd><a href="#">Blogger</a></dd>
                            <dd><a href="#">Wordpress</a></dd>
                            <dd><a href="#">Tumbler</a></dd>
                            <dd><a href="#">Joomla</a></dd>
                            <dd><a href="#">Square Space</a></dd>
                            <dd><a href="#">LiveJournal</a></dd>
                         </dl>
                     
                    </div>
                </li>
                                            <li><a class="menu" href="#">Money Online</a>
                                <div class="one-clm">
                                    <dl>
                                        <dt>Brands</dt>
                                        <dd><a href="#">Adsense</a></dd>
                                        <dd><a href="#">Citika</a></dd>
                                        <dd><a href="#">Ad Brid</a></dd>
                                        <dd><a href="#">Yahoo</a></dd>
                                        <dd><a href="#">Bing</a></dd>
                                     
                                        <dd><a href="#">...View More</a></dd>
                                    </dl>                    
                                 
                                </div>
                            </li>
                                <li><a class="menu" href="#">Social Media</a>
                                  <div class="three-clm">
                        <dl>
                            <dt>Online Media</dt>
                            <dd><a href="#">eNews</a></dd>
                            <dd><a href="#">ePaper</a></dd>
                            <dd><a href="#">eBusiness</a></dd>
                            <dd><a href="#">eGold</a></dd>
                            <dd><a href="#">eSilver</a></dd>
                            <dd><a href="#">eSports</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                        <dl>
                            <dt>Multi Media </dt>
                            <dd><a href="#">TV News</a></dd>
                            <dd><a href="#">News Paper</a></dd>
                            <dd><a href="#">TV Anchor</a></dd>
                         
                             <dd><a href="#">View More...</a></dd>
                        </dl>

                         <dl>
                            <dt>Brands</dt>
                            <dd><a href="#">Aaj Tak </a></dd>
                            <dd><a href="#">News 24 </a></dd>
                            <dd><a href="#">Star News </a></dd>
                            <dd><a href="#">ABP News </a></dd>
                            <dd><a href="#">P7 News</a></dd>
                            <dd><a href="#">Aawaj</a></dd>
                         
                         
                             <dd><a href="#">...View More</a></dd>
                        </dl>
                      
                    </div>
            </li>
                <li><a class="menu" href="#">Social Sites</a>
                    <div class="three-clm">
                        <dl>
                            <dt>Facebook</dt>
                            <dd><a href="#">IT</a></dd>
                            <dd><a href="#">Accounts</a></dd>
                            <dd><a href="#">Management</a></dd>
                            <dd><a href="#">Marketing</a></dd>
                            <dd><a href="#">Softwares</a></dd>
                            <dd><a href="#">Hardware</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                        <dl>
                            <dt>Google</dt>
                            <dd><a href="#">Web</a></dd>
                            <dd><a href="#">Images</a></dd>
                            <dd><a href="#">Translate</a></dd>
                            <dd><a href="#">Google Plus</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                        <dl>
                            <dt>Twitter</dt>
                            <dd><a href="#">Follow</a></dd>
                            <dd><a href="#">Tweet</a></dd>
                            <dd><a href="#">Share</a></dd>
                            <dd><a href="#">Retweet</a></dd>
                            <dd><a href="#">Unfollow</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
            </li>
                 <li><a class="menu" href="#">CSS</a>
                    <div class="one-clm">
                        <dl>
                            <dt>CSS Widget</dt>
                            <dd><a href="#">Codes</a></dd>
                            <dd><a href="#">Classes</a></dd>
                            <dd><a href="#">ID</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
            </li>
                <li><a class="menu" href="#">Books</a>
                    <div class="one-clm">
                        <dl>
                            <dt>eBooks</dt>
                            <dd><a href="#">Adsense Secrets 5 </a></dd>
                            <dd><a href="#">Let Us C</a></dd>
                            <dd><a href="#">Fundamentals</a></dd>
                            <dd><a href="#">JavaScript</a></dd>
                            <dd><a href="#">Core Java</a></dd>
                            <dd><a href="#">What is Blogging</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
            </li>
                <li><a class="menu" href="#">Tools</a>
                    <div class="one-clm">
                        <dl>
                            <dt class="oe_heading">Blogging Tools</dt>
                            <dd><a href="#">HTML Editor</a></dd>
                            <dd><a href="#">HTML Encoder</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
            </li>

             

                <!--     <li><a class="menu" href="http://computeruptodate.blogspot.com">Gifts</a>
                    <div class="one-clm">
                        <dl>
                            <dt class="oe_heading">Gifts</dt>
                            <dd><a href="#">Fun Gifts</a></dd>
                            <dd><a href="#">USB Gadgets</a></dd>
                            <dd><a href="#">Clocks</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
                </li> -->

                <li><a class="menu" href="#">Help</a>
                    <div class="one-clm">
                        <dl>
                            <dt class="oe_heading">Offers</dt>
                            <dd><a href="#">Combo</a></dd>
                            <dd><a href="#">View More...</a></dd>
                        </dl>
                     
                    </div>
                </li>

banner
Previous Post
Next Post

1 comment:

  1. I appreciate you and I would like to read your next post.
    We will help you for finding any important News that you need for
    every information.
    Bangladesh online news
    Live bangladesh
    BD News
    News

    ReplyDelete