Hacking Tips Tircks ,Software ,Games and many more: 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMtGN1T6zA1oV-ONiJDgarJAInfhcc4jetzRW4U5rQZtNNGw05pINHnWH_Hl0d86gP3_zyeAAU3chxce0GwYpCRfo89eGZU0cirJGep0EbrmkwRkMWbMjYR4tR9iMxfE4ElDF1cda5cE/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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0dthDDgi2NuEjshREh7RFUKYxp7G9BjhIDhajwHR7Xb3JFTXQZveFlvkGzL6tQwFa8fGT2a0QUwMhsDgJOLihzKv6AT6Z4vkUVU_hUwfDmkk1k6mYKgT07ONvE1LMpNFxF_VBSDj2mo/s1600/pctricksguru-home.png" /> Home</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84MLOyUdCM_ux4ARol5Lv0TCK0P-lUNVagh2-R0jBqGqE5d89AQqRCnOA0yhO0n8S_211HXaMs6ruXmGYUSjJx0Jnq7nWFQnKtzMeclgRYHDi4-jxeJ7aZ2nMniidMzvcWeAQqtFSLCA/s1600/pctricksguru-top1.png" /> LINK LIST</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 4</a></li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 41</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 42</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 43</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 44</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 46</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 47</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 48</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIzyE-Tkgl3gLHWOlqU5VGBxjL9603L_kov1NTxWBcM4SNTqBhwSMtwjurjfu-Ihd-PYudafCdYwoUpl66e1Aq5cbv1F837YCKeQgf8P1T9mjgjNCFhX_X7swFfWmag1eQiBxr6dB3GF0/s1600/pctricksguru-top2.png" /> LINK LIST</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 1</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 2</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 3</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 4</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 6</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 7</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 8</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 9</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJO_IrO6ZOMcADDcmX5O4KnrwRBJLMGZ1z5KumVwJCZyU15WOGeTIU4Vg13deXgPwguxfnSojorYbYpt4Qa4wzCL-pAWQma1yXm3YjlB_Rn2NGu_j_OOn3J2K5_VEBFHWHQabi-Ws5Gts/s1600/pctricksguru-bub.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2hjdreo4HioEMEZ0gWZVShPhNIi51HyfWvfrj05v_4KeYsAIcw15fBzAfh104dkyJsm9LXVox4an2rm5iyITxvx6mxYucU_CIBdHEYDbQjeqpZ5cBZXlsyIVl_t80u-9mcl-Uzl0K-o/s1600/pctricksguru-top3.png" /> LINK LIST</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5VrkvqmqJn2_4Bnm21_H6Dhx_jHmtVx2f7GVRwf1nYscxQTpiGOMRUh6nqiu_6sG7hDVpEkflKauxQUSs2O_yEyS05u8Y2DcX6bBsno6d5dU03WoMPqvmhQYKhUEvD0aPHxrbU_-a528/s1600/pctricksguru-top4.png" /> LINK LIST</a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyi4frnaDUT_zevYfDTKpOuvV4rnM6xf4t7dMt3U697rzyZM_fnsfA3BxDoobvBPMZFJnfPccvBCb4n6nbVWwtDfVWhDkbxw0wR3l_44sxwygmatIw68tuEEiZyxdcYRpZ1OvcDZYLuU/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.

Hacking Tips Tircks ,Software ,Games and many more

Pages

Tuesday, 23 June 2015

Add Multilevel CSS3 Menu Bar With Icons In Blogger

Follow The Steps Below:

No comments:

Post a Comment