Showing posts with label Bar. Show all posts
Showing posts with label Bar. Show all posts

Thursday, 7 March 2013

UP Bar V1 Launched, Add This To Your Blog Freely

Hi Dear After Very Hard Working I am Make UP Bar For You All.....and Free.....!

Its Just Like Hello Bar...! and You Can Also Add It To Your Blog For Free....!
This Is My Original Work....! Don't Copy This Article.....!

Demo On Top Of  This Page

Stay Connected Click Here For Contact Me
  1. Copy Below Code
  2. Go To Blogger > Dashboard
  3. Click on Drop Down Menu and select Layout
  4. Add a HTML/JavaScript Gadget
  5. Paste below code in it.
<style>
/*---Codes by www.umerprince.blogspot.com---*/
#wg-rosebar {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtm {
border-bottom:3px solid #000;
background-color:#000000;
overflow:none;
width:100%;
height:30px;
position:fixed;
top:0;
left:0;
}

#wg-rosebarbtmdata {
color:#fff;
padding:5px;
}

#wg-rosebarbtmhide {
position:absolute;
top:4px;
right:12px;
width:20px;
height:20px;
cursor:pointer;
}

#wg-rosebarbtmshow {
position:absolute;
top:0;
right:5px;
width:30px;
height:25px;
cursor:pointer;
background-color:#F60;
padding-top:5px;
border-bottom:3px solid #000;
border-left:3px solid #000;
border-right:3px solid #000;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.wg-rosebarbtmdownarrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #CC5200;
}

.wg-rosebarbtmblock {
width:8px;
height:10px;
background-color:#CC5200;
}

.wg-rosebarbtmuparrow {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #CC5200;
}
</style>
<div id="wg-rosebar" >
<center id="wg-rosebarbtmshow" onmouseup="document.getElementById('wg-rosebarbtm').style.display='block'"><div class="wg-rosebarbtmblock"></div><div class="wg-rosebarbtmdownarrow"></div></center>
<div id="wg-rosebarbtm" >
<center id="wg-rosebarbtmhide" onmouseup="document.getElementById('wg-rosebarbtm').style.display='none'"><div class="wg-rosebarbtmuparrow"></div><div class="wg-rosebarbtmblock"></div></center>
<center id="wg-rosebarbtmdata"><a href="http://umerprince.blogspot.com">Widget Generators</a><b>Write Your Text Here</b></center>
</div>
</div>


Make Changes ....!

  1. Change Write Your Text Here With Your Text
  2. Change http://umerprince.blogspot.com With Your Link
  3. and Save It.......!
©Copy Right :
This All Is The "HelloBar" is he CopyRight of www.hellobar.com And "UP Bar" is the DMCA CopyRight Of www.UmerPrince.blogspot.com. We did not have and relationship with them and They also has Nothing With Us. 

Sunday, 30 December 2012

Cool / Awesome Drop Down Menu Bar For Blogger

This tutorial will explain how to add cool
drop down menubar for your blogger.Actually
menubar is main thing of the blog.Because
you can add main pages link with it, like
contact us page,Privacy policy,Site-map, etc.
So, you have to choose right menubar to your
blog.Now i posted more quality menubars,
you can add it as your like. Click below link to
get all menubar tutorials.


1. Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

  • <script src='http://bloggertrix.googlecode.com/files/menu1.js' type='text/javascript'></script>
  • <style>
  • #menu *{
  • margin:0px; padding:0px; list-style-type:none; text-decoration:none}
  • div#menu{position:relative}
  • #menu ul.menu{ white-space:nowrap}#menu ul.menu li{ display:inline-block; height:57px; position:relative}#menu ul.menu li div{ position:absolute; top:55px; left:0px}#menu ul.menu li div div{ position:absolute; top:-6px; left:176px}#menu ul.menu li div ul li{ display:block; float:none; width:auto; height:auto}#menu ul.menu li a{ padding-left:15px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj_WmOEVO-qivxXDKdCe5kemmqxBNp7uvm_h5eFHIYUmEku40tD2OmfBT3RwD3cKNZQ7z8Zj799UghmdkF9j3Yez-7kOaDfKFDe2KtT21rkCXA6m2LP9rEJ_10N3Jg9V9lfzgwHCVECBt/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:left -1000px; display:inline-block; margin:6px 2px}#menu ul.menu li a span{ padding-right:15px; padding-left:0px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj_WmOEVO-qivxXDKdCe5kemmqxBNp7uvm_h5eFHIYUmEku40tD2OmfBT3RwD3cKNZQ7z8Zj799UghmdkF9j3Yez-7kOaDfKFDe2KtT21rkCXA6m2LP9rEJ_10N3Jg9V9lfzgwHCVECBt/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#menu ul.menu li:hover a{ background-position:left -90px}#menu ul.menu li:hover a span{ background-position:right -135px}#menu ul.menu li.active a{ background-position:left 0px}#menu ul.menu li.active a span{ background-position:right -45px}#menu ul.menu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#menu ul.menu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#menu ul.menu li div{ width:194px; padding-top:6px; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBW1euST73tx8ipONpfOE7r9R7D2AD7X3ldYzNzYwvSDAnjeZHMx-fSwCwdOGUvM5d4ZkNizHT5z36iBU5n9EcoNcHyaMeaR-_p1ediQRMNUg-EK1RtxJkXLWLo3Y21A2DIFhmxF5Yx9k/s1600/submenu-top.png"); background-repeat:no-repeat; background-position:0px top}#menu ul.menu li div ul{ padding:9px; padding-top:0; background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoWrUIlh3mZfQipk6Kljm7WcAcsBvKKriCjfJtPDFiIPvkajDGVxhy4IBRU2OTcE7oSFq6kwx6fzUhhCDGXGIvQNUgyLn85hMcqlmqM3BvO8TjKoaZ3IYhPYEErrALsygFrktpeAyxaDl_/s1600/submenu-bottom.png"); background-repeat:no-repeat; background-position:0px bottom}#menu ul.menu ul li:hover{ background-repeat:repeat-x; background-position:0% 100%; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzCFKmRF07XFt2QNmr5RtzNTIxpNUvKruO6MtJh6U_c2o_0o25Wp4QQ2wM1NeSjDNrto2CVzr8nY8Zc-RIfhHElAJGGSlw4vO59TWhr7mqKNd23dUhGtgwqz2pNOEeNua7S_Pu9sJNFz/s1600/menu_level2_item_hover.png)}#menu ul.menu ul li:hover>a{ background-repeat:repeat-x; background-position:0% 0%; background-color:transparent; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzCFKmRF07XFt2QNmr5RtzNTIxpNUvKruO6MtJh6U_c2o_0o25Wp4QQ2wM1NeSjDNrto2CVzr8nY8Zc-RIfhHElAJGGSlw4vO59TWhr7mqKNd23dUhGtgwqz2pNOEeNua7S_Pu9sJNFz/s1600/menu_level2_item_hover.png)}
  • #menu{ height:57px; padding-left:14px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqXOmTHwcCKo4Mxddj-br0i7Q5T8F52MFnL6tVFoZSUE9J4YupA8OCP08COJrX_1K9bPDGGKxu9OhyphenhyphenqjXJrVV5Iim9sCd6Et5h5dmuUULjehha5uW1a1-4E41AobFXgyH80GE3JiLMHGt/s1600/page_header_b.png) repeat-x;
  • -webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
  • #menu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#menu li:hover>a>span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#menu ul.menu li a span{ font-family:Arial; font-size:18px; font-weight:400}#menu ul.menu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#menu ul.menu li div ul{ padding-bottom:8px}#menu ul.menu li div ul li:first-child{ border-top-width:0px}#menu li>div{visibility:hidden}#menu li:hover>div{visibility:visible}/* */#menu ul.menu ul li:hover{ background-color:#393c45}#menu ul.menu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#menu ul.menu li{ *zoom:1; *display:inline}#menu ul.menu li a{ *zoom:1; *display:inline}#menu ul.menu li a span{ *zoom:1; *display:inline}#menu ul.menu li div ul li a{ *display:inline}#menu ul.menu ul li:hover{ *background-image:none}#menu ul.menu ul li:hover>a{ *background-image:none}/* IE6 */#menu ul.menu li a{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7uQTQhrlXFzYREbyYa9-fL7VX30dI_sM54-daRTsFb6LSSs81O4sqYolfNybWmk7IDO1gOPgx_Nr2uAZWP6Q7hsE3lD4jmRKcwpAisZZ-lm94M-N1a6RXybLhdTYoxKpvp1PU-N9sLOn/s1600/menu_level1_item.gif")}#menu ul.menu li a span{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7uQTQhrlXFzYREbyYa9-fL7VX30dI_sM54-daRTsFb6LSSs81O4sqYolfNybWmk7IDO1gOPgx_Nr2uAZWP6Q7hsE3lD4jmRKcwpAisZZ-lm94M-N1a6RXybLhdTYoxKpvp1PU-N9sLOn/s1600/menu_level1_item.gif")}#menu ul.menu li div{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP4zXXL9e82-RVlhl2AD8s_TAXOaEMTp6AmGFMriCas16qcbEndptOFCw4-bjSqlj1xCTx8Kd0D5UBwz4GEJlWWKkXFAviVO4aGjt44k0WCuRNO1aB_XOgV3MgYY-43UEitoHyFxOlJe9r/s1600/submenu-top.gif");z-index:10}#menu ul.menu li div ul{ _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid_6VMlTgHbKLsb5bn5Y-j4_IzS1hRUaSyqjB2UeOExsBFFzOW_Csw2YAG0jA7PpLy-4_v6NbSXQsEthOwX6VLqyPWQCBFwhq2BRIkSg402dEkxuZ8VmLJeb37-qQDHa1P_A4CRBbXHFgW/s1600/submenu-bottom.gif")}#menu ul.menu li a:hover{ _background-position:left -90px}#menu ul.menu li a:hover span{ _background-position:right -135px}#menu div{_display:none}#menu div li:hover div{_display:block}#menu div li:hover li:hover div{_display:block}#menu div li:hover li:hover li:hover div{_display:block}/* */
  • </style>
  • <div id="menu">
  • <ul class="menu">
  • <li><a href="http://umerprince.blogspot.com" class="parent"><span>HOME</span></a>
  • </li>
  • <li><a href="http://umerprince.blogspot.com/search/label/Tools?&max-results=6" class="parent"><span>Tools</span></a>
  • <div><ul>
  • <li><a href="http://umerprince.blogspot.com/search/label/Blogger%20Tricks?&max-results=6" class="parent"><span>Blogging Tricks</span></a>
  • <div><ul>
  • <li><a href="Editors & Tips"><span>http://umerprince.blogspot.com/search/label/Blogger%20Tricks?&max-results=6</span></a>
  • <div><ul>
  • <li><a href="http://umerprince.blogspot.com/2012/12/HTMLEditor.html"><span>HTML Editor</span></a></li>
  • <li><a href="http://umerprince.blogspot.com/2012/12/HTMLEncorder.html"><span>HTML Encorder</span></a></li>
  • <li><a href="http://umerprince.blogspot.com/2012/12/GreatColorChart.html"><span>Color Chart</span></a></li>
  • <li><a href="#"><span>ITEM 1.1.4</span></a></li>
  • <li><a href="#"><span>ITEM 1.1.5</span></a></li>
  • </ul></div>
  • </li>
  • <li><a href="#"><span>ITEM 1.2</span></a></li> <li><a href="#"><span>ITEM 1.3</span></a></li>
  • <li><a href="#"><span>ITEM 1.4</span></a></li>
  • <li><a href="#"><span>ITEM 1.5</span></a></li>
  • <li><a href="#"><span>ITEM 1.6</span></a></li>
  • <li><a href="#"><span>ITEM 1.7</span></a></li>
  • <li><a href="#"><span>ITEM 1.8</span></a></li>
  • <li><a href="#"><span>ITEM 1.9</span></a></li>
  • </ul></div>
  • </li>
  • <li><a href="#" class="parent"><span>ITEM 2</span></a>
  • </li>
  • <li><a href="#" class="parent"><span>ITEM 3</span></a>
  • </li>
  • <li><a href="#" class="parent"><span>ITEM 4</span></a>
  • </li>
  • </ul></div>
  • </li>
  • <li><a href="#" class="parent"><span>LINK 3</span></a></li>
  • <li><a href="#" class="parent"><span>LINK 4</span></a></li>
  • <li><a href="#"><span>LINK 5</span>
  • <li class="last"><a href="#"><span>LINK 6</span></a></li>
  • <li class="last"><a href="#"><span>LINK 7</span></a></li></a></li>
  • <li class="last"><a href="http://www.umerprince.blogspot.com/"><span>Addthis</span></a></li>
  • </ul>
  • </div>
4.Save HTML/Javascript. you are done.

Related Posts Plugin for WordPress, Blogger...