Home » WIDGET BLOGGER

add vertical side menu for blogger

9:37 AM |

hi my friends Today I will give you add vertical side menu for blogger, this widget is beautiful And easy to install add a light on the template blogger and useful at the same time You can see the topic Add Vertical Floating Social Sharing Bar For Blogger

 HOW TO ADD VERTICAL SIDE MENU FOR BLOGGER



Live Demo

 Written explanation   
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<style>

 #navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

 #navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

     /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

     /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/

     /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

 #navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GFi4iiPmyepwXcGdemquQ6m2-Z0gxUzokN9vu5HY0PrD469T_0MmR9mA-pgMycchp9W8JYWZrbhmzchQm5lLFn_oCjWhVh8HW9pnlgLAGk0Okkg9R4d3gOGUbgAnzzMkVSsChlcZIM0/h120/Pc+Tools+Tips.png') no-repeat;

     height:39px;
    width:38px;
    display:block;
    position:relative;
}

 /* General hover styles */

 #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

     /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

 /* Green Button */

 #navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

 /* Blue Button */

 #navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

 /* Orange Button */

 #navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

 /* Yellow Button */

 #navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

 /* Purple Button */

 #navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

 </style>
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="URL HERE">
<span>Home</span>
</a>

 </li>
<li>

 <a class="about" href="URL HERE">
<span>About Us</span>
</a>
</li>

 <li>
<a class="services" href="URL HERE">
<span>Categories</span>
</a>

 </li>

 <li>
<a class="portfolio" href="URL HERE">
<span>Disclaimer</span>
</a>
</li>

 <li>

 <a class="contact" href="URL HERE">
<span>Contact</span>
</a>
</li>
</ul>
</div>
4) Customize your setting.Find any word click F3 or Ctrl+F.
* Replace it URL HERE with your Page URL links.
* RED  is your Page name.
 5) Save your Widget.




Read more…

Add Vertical Floating Social Sharing Bar For Blogger

4:13 AM |

hi my friends today, I'll give you a nice topic and help spread your blog,Social Bookmarking helps you to get quick traffic to your blog. This floating bar is having Facebook, Google plus, twitter, linked-in, Email and Pinterest social share buttons. If you want to add more buttons in it then you can make your own widget by going to sharethis.com and create a floating widget for your blog.

HOW TO ADD VERTICAL FLOATING SOCIAL SHARING BAR FOR BLOGGER


Live Demo

Written explanation 
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
</head>
3) Now Paste the Code Shown Below just Before it.
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
<script>
var options={ "publisher": "074821ed-063e-4ae5-bad9-3e26ecf249f3", "position": "left", "ad": { "visible": true, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "googleplus", "twitter", "linkedin", "email", "pinterest"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
4) Now Save Your Template. 


 
Read more…

Add New Breaking News Widget for Blogger

6:39 AM |

Hello to you again in the new topic, and exclusive of the blog newth3, today, we will add a new tool and easy, this tool you view the latest news blog in the form of a horizontal to suit the templates blogger. I hope you like it

how to Add New "Breaking News"


Written explanation
Step 1 : Adding to Template
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
</body>
3) Now Paste the Code Shown Below just Before it.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'YOUR URL HERE', //replace with your Domain
    numpostx  = 10; //Posts want to display
$.ajax({
    url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }                posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#recentpostbreaking').html(skeleton);
            // kode untuk efek pada breaking news
            function tick(){
            $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#recentpostbreaking').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>
  </b:if></b:if>
4) Customize your setting.Find any word click F3 or Ctrl+F.
Replace YOUR URL HERE with your site url past here.
5) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
</head>
6) Now Paste the Code Shown Below just Before it.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#5F0000}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
  </b:if></b:if>
7) Now save your template.
Step 2 : Add Widget to your blog
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.   
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
  </b:if></b:if>
<div style='clear: both;'/>
5) Save your Widget.Don't forget to add the widget on the Center place. 




Read more…

Add Stylish Social Sharing Widget With Hover Effect For Blogger

2:55 AM |
[Image: Untitled.png] 
 Add Social Media Sharing widget at top right your blog. This awesome widget was made by newth3. If you like this widget, simply follow the step below to install this awesome widget into your blog.
How To Add Cool All In One Subscription Box For Blogger


Written explanation 


 1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.    
<style type="text/css">
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
</style>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1' target="blank"><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYnPbpBeH23H3WzOisjnbIT0UhKcltfZNLAZEGprDNokTqZJoKwxHrVXcdkL32u_OBBiLpuVweKz-Il6ArihyphenhyphenRSxa1vkkgn09TEhlP_P-L1IrjA3E3EEUYa_PSYcDnvAXr6zlef1lsGQ/h120/Pc+Tools+Tips.png' title='RSS Feed'/></a><a href='http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1' target="blank">Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME2' target="blank"><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Qmhu6c0YL4iTy0wD_EGWi3MT6du-Cj3ax3fudr277dmgHXbqZi9Fmb4Id_KrHCs6BBrHnIeHiC3DuZOm9mOWa3RZrS5-CirVEV_A2-NOWHQNqeVSYXqSLA4BxegMrrf9kAv_TG5lWqU/h120/Pc+Tools+Tips.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME2' target="blank">Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='URL HERE' target="blank"><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Vuu7bzMZ6qjPhL7GMpSleKDlOMi3oBQMAilLwRjhPkW3R7YLxJjL5KYQ0s2Cp2c_XTIflFKK7aPe4jAqljuQ-h8Q_dphWxp1vQVkHSjKaaTAS9FdbB9UjFAa2E8rB4tZdAAEFh2zKPE/h120/Pc+Tools+Tips.png' title='Be Our Fan'/></a><a href='URL HERE' target="blank">Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-aaWSmrb8VgXp1Tai9nI3KfxlVIhgap2MJb0QvgIzbIexuJijFsURxIcJwGBs2F4BQyvXdDv0kMSkwGOlZnrJ4FzlHqTvakz1Kx8_72JDeD5z6EIa2dmH2wErdstCFWOB_g60Rdc2cg/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZS5Nc9sq0CpN6CWTL855i15T4881FdzvibbaC0YkohdK9U6jlMB1jIYccJjEolsm-Q63OoickuqWMT8u1jUuJ6Rn6wdXo3TEbQAAFbiAfgzhV-OgwcG0KMaYgVyXS5oQSFPByq8jS10/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG8xPeVD3K3FGNvUjqO7aMvS4tpAvGsTXB45BISPN65W2D6iYhJ8sKQQTQl1BRE960LClAgW3rWifBFdVl5-yasrMSSxcdk9DWgXfEGsbaQqlQB5X0AvlfoGWqmL8hU4jyD1nJ-Ocwtas/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXh9seltCdXjv01OmoTyWgOTMjvQhIIlLEo7RPck6h9QnfqOe-35w3RRPbB3TiJLLMsufPEfJX5wh0jJOec_O-ygUSkuyL7mZk4VGqE2L150TUcIFQ8_z19DVW3qE21d7mzzVOwwoOx-k/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2qK1g1MTfU3QbuBKKnAWHVdrewsVD4U1cxcYKQ9nh0AMBq8OchVh6KVW1ckbdPq9IGs4kSY16ZUNtiCzoN18iKPfkpLsGQTe3AEyAQ7O7Ce5ez19qQZ3bDtORY26oJZimD7YAUNY1Pno/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQ9Gp-0vG4GX44K3DfRP4ZilhU_VB818ajGU1rTXeJFjG8lpEaw9bgpwfmeaeOIqXZbSiqnN4R7pC27uwZpJ1ura0XV-wKG4jfEhuU9F_fEGc_HFMJwoiefhzhdcpb1lj9rPZRIawXjI/s1600/coolworld.in.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8k3Q-bpJzzSEpcaNkjE7o0MnGamVuf7QtGOaQgv1UsnVT7RJN96u05rZbhL5soRrJGKKjH8J1zPzXWWMICv8rtq2uaec4Ai9Jymdno1KlvK8tu-8FLtvt3DThCCWM9amFV_ESIfmq3w/s1600/coolworld.in.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>
</script>
</div>
</div>
</div>
4) Customize your setting.Find any word click F3 or Ctrl+F.
  • Replace it USERNAME1 with your Feedburner Username.
  • Replace it USERNAME2 with your Twitter Username.
  • Replace it URL HERE with your Facebook Username.



Read more…

Add Social Sharing Buttons Below Every Post Title For Blogger

3:47 AM |
[Image: sharing-buttons.png] 

hi my friend today will I present to you a new topic, Social Sharing Buttons Below Every Post Title For Blogger.
It is one of the smart ways to attract visitors I hope you like it 

HOW TO ADD SOCIAL SHARING BUTTONS BELOW EVERY POST TITLE FOR BLOGGER


1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)       
<data:post.body/>
3) Now Paste the Code Shown Below just Before it.
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_sharethis_hcount' displayText='ShareThis'></span>
4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
</head>
5) Now Paste the Code Shown Below just Before it.
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "074821ed-063e-4ae5-bad9-3e26ecf249f3"}); </script>
6) Now Save Your Template.




Read more…

Add Beautiful Metro style Menu Guide For Blogger

7:59 AM |
 

Today's lesson is a gift for each site gawkers NEWTH3 Informatics, and is a way to create a list of the horizontal sections are quite similar to the list of Metro introduced by Windows 8 and add it to your blog Blogger.

How To Add New Subscribe Box For Blogger


Written explanation
Step 1 : Adding CSS to Template
  1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)     
]]></b:skin>
3) Now Paste the Code Shown Below just Before it.
/*===MBL METRO UI Menu==*/

 body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

 /* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

 /* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

 /* END TILE BUTTONS */

 /* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

 /* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
4) Now save your template.
Step 2 : Add Widget to your blog
1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<!-- metromenu -->
<div class="metromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh6.googleusercontent.com/-envqsAeXv7I/UsaZ-f5lGLI/AAAAAAAACak/KKQe3eLnVzE/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>

 <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh5.googleusercontent.com/-phZsF-nWvOc/UsaaSutVZmI/AAAAAAAACa4/JRm0KCvlR8M/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh3.googleusercontent.com/-nQLFt07dHCU/Usaaf6Z2YpI/AAAAAAAACbM/-9PYF7lAMnk/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>

 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh5.googleusercontent.com/-_KQq8P1rtJs/Usaat2f4PdI/AAAAAAAACbg/Uc51LXtHeaM/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh3.googleusercontent.com/-ZJDuWuS9648/Usaa9j73W5I/AAAAAAAACb0/XC95mHnIiPU/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh4.googleusercontent.com/-WnlHYSIMJd8/UsabMBMInYI/AAAAAAAACcI/stvGNDTVhwc/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Get HELP</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh3.googleusercontent.com/-ClFTRP9K3OE/UsabZ-aC4nI/AAAAAAAACcc/iMY_MGwYiM0/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh3.googleusercontent.com/-rBCRpXc7X-I/UsabmYGk19I/AAAAAAAACcw/x1XK6dQHaLk/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>

 <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh6.googleusercontent.com/-1YNj39W1cbQ/Usab3jWosgI/AAAAAAAACdE/trPpP0nQ4tA/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>

 <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft metromenu">
<a href="#" class="gradient">
<img src="https://lh5.googleusercontent.com/-LgocZN_7jKo/UsacG4V49wI/AAAAAAAACdY/nP-cbDO6mlk/s128-no/Coolworld.in.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>
<!-- End metromenu -->
</div>
<!-- END metromenu -->
4) Customize your setting.Find any word click F3 or Ctrl+F. 
Replace # with the links. 
Replace Menu with your link text which you want to appear on the menu. 
5) Save your Widget.Don't forget to add the widget on the Center place. 





Read more…

Ho to add a beautifull search box to your Blog

2:53 PM |
Hi newth3 friends !! this article is for the people that are searching for a really beautifull search box for their Blog.
Read more…

Add New Subscribe Box For Blogger

6:09 AM |
 

Add Subscribe by email professionally add very fantastic  Because they contain important features. additions to add one which saves you look at all the add-on unit as it does not take a great deal of coordination Blog Therefore, this addendum is considered important for all bloggers and developers.

How To Add New Subscribe Box For Blogger


Written explanation 

 1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.  
<style type='text/css'>
#sidebar-subscribe-box{background:#9df !important;padding:3px 0;margin-top:-6px;
margin-bottom:-17px;}
.sidebar-subscribe-box-wrapper{
background-color:#93d1ea;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGtKHe-iPFI7IE8EozFMIwBy4znfdMCD6DDq0WMySk1HUWT6rSoFPwMPQuQhfnymyJJ4QPr8ojq7l5rzSNa4jddYRlwYrKqPOufUMsZLdLgnI4BEhgjDb_Y85SpVDPSWpt1e63DgCFKs/s1600/mail_s.png) right 20px no-repeat;color:#fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
line-height:20px;
padding:1px 20px 10px;text-align:left;}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}
form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQb1oICDsZXQ9t0VEGpNxzZxveTQqwF-W1ublRKu2Es-tAGU5K46TI-aiXCQkobZ4EPnj7D5ghBMQtJF1hSPRs8Bds81HBHTfi_jioFf9jQ_XzSyFvSjJt9Gi0foUMNG_IvYLYG9DunWA/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:48%;margin-right:-3px;}
.sidebar-subscribe-box-email-button{
box-shadow:none!important;
margin-left:8px;
border-radius: 6px;
width:40px !important;
background:#333;
color:#fff;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;
padding-left:10px;padding-left:1px}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#333}.sidebar-subscribe-box-email-button:active{iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:20%}embed{border-radius:3px;background:#FFF;border:1px solid #ddd;margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitG-BunscsUjS0wXFCBKydO8NrqP0zXHoMJsquD7HmVBMY8RsW_NJ06j3O-4xNpjxQ2KFY7psmDaxVjwW1g5K2y4Pk7tAImYC0wj88uQOXqv5rUS_Dpn9OWK7kO-XZDfAmrVEIJ0Eg_wA/h120/bg-pattern.png) repeat top left;border-top:1px solid #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
.border_b {
background: url(http://themes.presslayer.com/Place/wp-content/themes/Place/images/mail_border.png)repeat-x;
z-index:1;
}
.top-border{
margin-bottom:-100px;
}
</style>
<div class="top-border">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8siGT21gm_zVRpL8sGP0xmlBvXRIDd8Bdlbhj5CwEVUrIovORHlXEMvCF_srvON7ckzi2VCEStWHy-EqCNkKIAEpiwWd_Hw1_nxthxecJKLq9XVYAl-LW9B1sNcUwUP6CDy0lZJuFPI/s1600/mail_border.png" width="100%" height="3"/>
</div>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper">
<br/>
<p><font size="5">Newsletter</font></p>
<br/>
<p>Sign up to receive email updates and to hear what's going on with our company!</p>
<br/>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USERNAME1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="USERNAME1'" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="OK" /></form></div></div>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYtAmGtuCeNCr_ja7A_3S11jv9yxUzN-AskoP4XuVCzVO220O3l28tjoofiXukhGKlBVfbIjqbZaMQJELPaZNh0qcuPAuaQPjMuu1lm5oJkjRMB3u014lm5r0r5A4rLnLjKpYPe_1wlA/s1600/mail_border+(1).png" width="100%" height="3"/>
4) Customize your setting.Find any word click F3 or Ctrl+F. 
Replace it USERNAME1 with your Feedburner Username. 
5) Save your Widget.





Read more…

Add Metro Style Sharing Widget For Blogger

6:04 AM |

how to add links social sites  Facebook and Twitter and Google Plus as well as links feed of your site in the form of Metro wonderful , and is characterized by a wonderful and attractive and stylish and her aesthetic form attract the eyes of all visitors to your site as a site professionally.

 These buttons phased approach being developed in the new addition by adding the codes of HTML so wonderful sites.

How ToAdd Metro Style Sharing Widget For Blogger


Written explanation 
 1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.   

<center>
<style>
.seconds{
text-align:right;
color:#000;
font-size:10px;
}
.supportive a:active{position:relative;top:1px}
.widget-item-control a{display:none;}
    .widget-item-control a{display:none;}
    #supportive{width: 300px;
    float: left;margin-top: 10px;}
    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}
    #supportive .facebook, .googleplus, .rss, .twitter{
    position: relative;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 5;
    display: block;
    float: left;
    margin: 1px;}
    #supportive .icon{}
    #supportive .facebook{width: 147px;
    height: 150px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippGbHJUPx3HbLM_EBBZhP1IEKQtCQy6vZw5BeIVurBL35LMbFAWxluUEqWcNsSI_jIbhwCt1JUO570TnWrBeXlnRQdro77PKO7EWMZ08iYwZgrNTK_lgv0xv5f5bsgRGtKLnktL-pTvA/s1600/facebook.png") no-repeat center center;}
    #supportive .twitter{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwqVPVEDIJedUbKnLCjILBWH5IbQw4ZFNP6MWRdkQxyXHWw398EY1dhXICMCaLdtR4-nTYhH50aPQTZGVcOVM7XGqPTyAVwSLG-kbAYLWP99BBdk_tUShaHdOBsrzZUXulzPqo7eSGlY/s1600/Twitter.png") no-repeat center center;}
    #supportive .googleplus{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXEZYxpDrzV4sF5eNBk87S4e-VKB7fbLfsCyq6yWfsOtA_4yy9r7NhFlCPsISki4L0FyiV5-pC3f2SYCdXCPcrKpUThlMPeXxePZmrCXwHStNSoXMArozZaoIL_2y2D89q3Ako28Gm6s/s1600/google+plus.png") no-repeat center center;}
    #supportive .rss{ width: 299px;
    height: 74px;
    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9s8eSlx4HydrVq3RiDWn69POFy8o1QBUxme8H40on-3uJF3UOksY_MTGZlcVKiU0DOT2qZS9wr3Y0xXpgPv_toBxPRyP3ouzoli9qpvrZwpgf0JCvAkSMAVAIdbAuLbPzHqBJXNNHYp4/s1600/rss.png") no-repeat center center;}
    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwqVPVEDIJedUbKnLCjILBWH5IbQw4ZFNP6MWRdkQxyXHWw398EY1dhXICMCaLdtR4-nTYhH50aPQTZGVcOVM7XGqPTyAVwSLG-kbAYLWP99BBdk_tUShaHdOBsrzZUXulzPqo7eSGlY/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXEZYxpDrzV4sF5eNBk87S4e-VKB7fbLfsCyq6yWfsOtA_4yy9r7NhFlCPsISki4L0FyiV5-pC3f2SYCdXCPcrKpUThlMPeXxePZmrCXwHStNSoXMArozZaoIL_2y2D89q3Ako28Gm6s/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9s8eSlx4HydrVq3RiDWn69POFy8o1QBUxme8H40on-3uJF3UOksY_MTGZlcVKiU0DOT2qZS9wr3Y0xXpgPv_toBxPRyP3ouzoli9qpvrZwpgf0JCvAkSMAVAIdbAuLbPzHqBJXNNHYp4/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
</style>
<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/USERNAME3' target='_blank'></a></li>
<li><a class='icon twitter' href='http://twitter.com/USERNAME2' target='_blank'></a></li>
<li><a class='icon googleplus' href='G+ URL' target='_blank'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/USERNAME1' target='_blank'></a></li>
<div class="seconds">
<a href="http://newth3.blogspot.com/" target='_blank'>Get This</a>
</div></ul></center>
4) Customize your setting.Find any word click F3 or Ctrl+F. 
Replace it USERNAME1 with your Feedburner Username. 
Replace it USERNAME2 with your Twitter Username. 
Replace it USERNAME3 with your Facebook Username. 
Replace it G+ URL with your Google+ Page url . 
5) Save your Widget.






Read more…

Add Awesome Popular Posts Widget for Blogger

8:17 AM |
 

Today offer you how to Add Awesome Popular Posts Widget for Blogger
It shows you the most active threads in the Code and this helps to know the most threads you scenes assistant visitor to engage in these subjects
Where offer you explain

How To Add Popular Posts Widget for Blogger  

 

Written explanation 
1) Go to Blogger Dashboard → Layout → Page Elements → add a Popular Posts Widget.
2) Change the settings of Popular post and unchecked mark snippet And Images thumbnail.

[Image: Untitled.png]

Customizing Popular Posts
3) Go to Blogger Dashboard → Template → Edit HTML.
4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)
]]></b:skin>
5) Now Paste the Code Shown Below just Before it.
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
6) Now save your template.






Read more…

Add Beautiful Animated Lavalamp Menu for Blogger

9:52 AM |
[Image: Menu+Lavalamp.png] 

Welcome to a new topic, and this time the lists lava lamp
Is something important to help the visitor to access the sections or pages faster
Day and give you a list of distinct character As you can see in the picture above is a list of
Similar to the Apple site list!

Step 1 : Adding CSS to Template


Written explanation
1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)  
]]></b:skin>
3) Now Paste the Code Shown Below just Before it.
#coolworld-nav,#coolworld-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#coolworld-nav {
    background: url('https://lh3.googleusercontent.com/-njAX-XszMS0/UrbEt-GR-VI/AAAAAAAACKA/2BG9m1qFBg4/w961-h58-no/Coolworl.in.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#coolworld-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);

    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#coolworld-nav li {
    background: url('https://lh5.googleusercontent.com/-FAxhkCWpvmI/UrbEc91HO4I/AAAAAAAACJs/JI8cOMisx0g/w2-h49-no/Coolworl.in.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#coolworld-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#coolworld-nav li:hover > a {
    color: #00B4FF;
}
#coolworld-nav li:hover, #coolworld-nav a:focus, #coolworld-nav a:hover, #coolworld-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#coolworld-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;

    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#coolworld-nav ul li {
    background: none;
    width: 100%;
}
#coolworld-nav ul li a {
    float: none;
}
#coolworld-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('https://lh5.googleusercontent.com/-Z7hCS-rEro8/UrbEEx7jvvI/AAAAAAAACJY/Wrz2Hvl4tIk/w64-h16-no/Coolworl.in.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#coolworld-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#coolworld-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#coolworld-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#coolworld-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#coolworld-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#coolworld-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#coolworld-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#coolworld-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}
4) Now save your template.

Step 2 : Add Widget to your blog 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<ul id="coolworld-nav">
<li><a href="#">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<div id="lavalamp"></div>
</ul>
4) Customize your setting.Find any word click F3 or Ctrl+F. 
Replace # with the links.
Replace Menu , Submenu with your link text which you want to appear on the menu. 
5) Save your Widget. Don't forget to add the widget on the Center place.




Read more…