Add Multilevel CSS3 Menu Bar With Icons In Blogger

Hi friends, in this post, I am going to tell you how to add CSS3 powered menubar with icons in blogger. This menubar looks really very cool and can be added in blogger blogs very easily.

Follow The Steps Below:

• Login to your blogger account and go to Template > Edit HTML > Proceed > Expand Widget Templates.
• Now press ctrl+F keys and find ]]></b:skin>
• Now, just above ]]></b:skin>, paste this code:

/* icons Css3 menu www.pctricksguru.com*/


ul#ptg {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;
    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */
}
ul#ptg,ul#ptg ul {
    list-style:none;
    margin:0;
}
ul#ptg,ul#ptg .subs {
    background-color:#444;
    border:1px solid #454545;
    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#ptg .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
ul#ptg li:hover>* {
    display:block;
}
ul#ptg li:hover {
    position:relative;
}
ul#ptg ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#ptg ul {
    padding:0 5px 5px;
}
ul#ptg .col {
    float:left;
    width:50%;
}
ul#ptg li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#ptg>li,ul#ptg li {
    margin:0 0 0 5px;
}
ul#ptg ul>li {
    margin:5px 0 0;
}
ul#ptg a:active,ul#ptg a:focus {
    outline-style:none;
}
ul#ptg a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#ptg ul li {
    float:none;
    margin:6px 0 0;
}
ul#ptg ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#ptg li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#ptg img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#ptg span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#ptg ul span {
    background-image:url("http://1.bp.blogspot.com/-6qHJT8xyxS8/UOlcZaSZsmI/AAAAAAAAGR8/-39aKs8TNEU/s1600/bloggetrix-arrow.png");
    padding-right:20px;
}
ul#ptg ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#ptg > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;
    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#ptg > li:hover > a {
    background-color:#313638;
    line-height:25px;
}

• Now, save your template.
• Now go to Layout > Add A Gadget > HTML/Javascript and paste the code given below in the content box:

<ul id="ptg">
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-RS1OnHjwdYk/USiQQkU09cI/AAAAAAAAAGM/GlVNjhZlIY4/s1600/pctricksguru-home.png" /> Home</a></li>
<li><a href="http://djmculinary.com/?big=#"><span><img src="http://2.bp.blogspot.com/-nL6QDUrqpCY/USiQjB4QYoI/AAAAAAAAAGU/dxjzsWwjqQA/s1600/pctricksguru-top1.png" /> LINK LIST</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 1</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 2</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 3</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 4</a></li>
<li><a href="http://djmculinary.com/?big=#"><span><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 41</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 42</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 43</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 44</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 46</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 47</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 48</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 6</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 7</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 8</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 9</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="http://djmculinary.com/?big=#"><span><img src="http://2.bp.blogspot.com/-6om6fY59kGM/USiR1d4YB7I/AAAAAAAAAGo/376OQWb7cRc/s1600/pctricksguru-top2.png" /> LINK LIST</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 1</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 2</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 3</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 4</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 6</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 7</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 8</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 9</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-qRAjpJVhGSs/USiQ2qAOeNI/AAAAAAAAAGc/Oj2ej8NMrOM/s1600/pctricksguru-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://1.bp.blogspot.com/-sp7-AJJ109k/USiSDFMym_I/AAAAAAAAAGw/kpj8GzrPNys/s1600/pctricksguru-top3.png" /> LINK LIST</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-mhljjH-bseQ/USiSOQyhQfI/AAAAAAAAAG4/xEVu67HarkQ/s1600/pctricksguru-top4.png" /> LINK LIST</a></li>
<li><a href="http://djmculinary.com/?big=#"><img src="http://3.bp.blogspot.com/-DNwXYmrx-9Y/USiSZZJXxaI/AAAAAAAAAHA/2ODRD0emz9M/s1600/pctricksguru-top5.png" /> LINK LIST</a></li>
</ul>

• Save the widget and then save the arrangement of your blog layout.
• Open your blog and see the preview.

CLICK HERE TO SEE DEMO

Read More

BigRock Coupon Codes For 2013

Hi friends, BigRock is one of the most popular domain and web hosting service provider site. It is consistently growing and getting a lot of customers. Today, I'm gonna provide you the discount coupons for 2013. Please note that these coupons may expire anytime so you must use these as soon as possible.

25% off + 11% off

Just use coupon code FEBAFF and get 25% off on web hosting and 11% off on new domain registration.

10% Off + 20% Off

Use the coupon code BRALDL and get 10% off on domains and 20% off on web hosting.

29% off  + 10% off

Use the coupon code BIG29 and get 29% off on Web Hosting + 10% off on Domains. Coupon expires on 31st March 2013.

26% off  + 10% off + 25% off

Use the coupon code  MARAFF and get 26% off on Web Hosting + 10% off on Domains + 25% off on Do-it-Yourself Website Builder. Coupon expires on 31st March 2013.

Get free domain with hosting

Use the coupon code BRSUPER while purchasing .com or .net domain and get another domain free with 6 months free hosting.

.biz Website Package for Rs.199

Use coupon code BIGBIZ and get complete .biz website package for just Rs. 199 that includes 1Gb hosting, website builder, 60 email accounts, 175 templates and E-Commerce features.

Read More

Give Your Facebook A New Look

Hello friends, facebook has recently updated it's layout and added news ticker, timeline and the brand new Graph Search. But, still if you want to give your facebook profile a makeover, then you must read this post and give it a try. Make sure you have google chrome browser.

Steps To Change Facebook Layout

• Visit chrome web store and search for NewGenBook Desktop extension. Here is the Direct Link.
• There, click ADD TO CHROME button and if it asks for any confirmation, click OK.
• Now let the extension being installed in chrome.
• All done. Now open facebook and login to your account. You will see the new layout of your facebook profile.

So, you can see that this layout is very cool looking and the chat box and login screens are also changed.

NOTE: If graph search is activated in your profile, then you can face difficulties with the search bar placement.

Read More

How to use marquee text on desktop in XP

Hello friends. Hope all of you might be reading my posts on my first blog THE NEXT GENERATION. This is my second blog where I'll share tips and tricks about blogging and computers. No cracks, no hacking tricks, only fresh and clean content.
So, starting the first post of this blog, I am going to tell you how to add marquee text in your desktop.

Note: Marquee text is a text which slides/scrolls in the different directions. You can easily create the marquee texts by using html.

Let's start the process:

• First of all, we need to create an html file in which we will create marquee text. So, to create the html file, simply open notepad and then type this code:
  
  

  <html>
  <head>
  <title>Marquee Text</title>
  </head>
  <body>
  <marquee direction="left" behaviour="slide">
  ***Hi, I Love Blogging And Making New Friends***
  </marquee>
  </body>
  </html>

• Now, save this file as marquee.html
  
• Finally, we have created our simple marquee page. You can change the font color and background color of the marquee text by using <font> and <bgcolor> tags. Now, it's time to show the marquee text on the desktop, so let's start the next steps:
  
•  Right click on the desktop and click "Properties".
  
•  Display Properties window will appear. Click on "Desktop" tab.
  
• Now click on "Customize Desktop" button.
  
  
• Now, "Desktop Items" window will appear. Click Web tab and New button.
  
  
•  Now, locate the html file which we created earlier and then click OK.
  
  
•  Now, you will see that the marquee webpage is added in the list. Just click OK.
  
  
• Now, click Apply and then OK in Display Properties window. After that, you will see that your html file is visible in the desktop. You can move and adjust the window by dragging with the mouse.
  
• To make it unmovable, just right click on the desktop and then click "Arrange Icons By > Lock Web Items On Desktop".
  
• To remove the marquee from the desktop, just see the 9th step and delete the added file from the list, then click OK, Apply then OK.

Read More