Home » WIDGET BLOGGER
Welcome to NewEstr here will Find all new widget and template blogger and Latest News seo and facebook ......
Popular Posts
-
Increasing and spreading everyday idea of doing shopping and buying online, thus increasing competition between online shopping sites pr... -
Can you really earn money online? You can hear people ask this question more than once. The good news is, yes you can and anyone... -
We will review with you in this post 5 applications for devices operating Android operating system , I hope you like it. ... -
Looking for ways to generate money is becoming a very difficult job nowadays. So, many creative entrepreneurs...
-
That's it ! The iPhone and the iPhone 5S 5C were finally presented by Apple, and the new iOS7 at the conference which took...
-
Everybody needs some extra money to help towards paying bills or other miscellaneous expenses. Likewise, teenagers are constantly ... -
YouGov Is a company founded in 2000 Pilot studies marketing on the Internet, where the development of unique models of integrated ... -
Adding a Stylish Subscription Box Below Bloggers Post is a great techniques to capture your blog post readers never to leave your blo... -
How would you change LG's Optimus L7? When we reviewed LG's Optimus L7, we compared it to BMW's 328i, saying that it... -
To add a beautiful day than its predecessor, How to Add Metro Style Social Widget for Blogger . And features several new features, ...
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
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>
#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.
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
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.
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)
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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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.
Add Stylish Social Sharing Widget With Hover Effect For Blogger
2:55 AM |![[Image: Untitled.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPvc_PMzaWn4Y7y0tqNST39rUOytpCxGgTL33SFrLrHIgu5t4MkgOQb_gtw2KEkLe6onEBiTIdZMozGYBaPCEfGYgfmY74c-c7LolUGoSXjhU1Y2xNGalL9EC8fhlgX0RgxMWkyZus7A/s400/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.
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>
.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.
Add Social Sharing Buttons Below Every Post Title For Blogger
3:47 AM |![[Image: sharing-buttons.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT5ombNCus6B4FecTfhhj8HQqpMucWMiFGUuA0_qv-kgOHZql8OcKdNG1OxuXg8AtjjstGagALAuho_IXWJ9fPBwI5e9BH-rdQj4Xtdc1y-FanrDxouVybq4YX0Hi9-_MrRDl2ogWLZ5U/s400/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
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)
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.
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)
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; }
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 -->
<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.
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.
Top Hot
