NewEstr: WIDGET BLOGGER

Home » WIDGET BLOGGER

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.

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.

Additions similar thereto Metro Style Social Icons for Blogger and How to Add Metro Style Social Widget for Blogger

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.

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 |

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…

Add Featured Posts Slider Widget For Blogger

10:07 AM |

Hello, my friends, is a slideshow of the most important additions are looking for many people because they add a distinctive
But some codes contain many difficult for some to deal with them and put them into the mold
Today I present to you the most beautiful and easier template can be mounted to your blog
A copy of the slideshow

How To Add Featured Posts Slider 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>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://newth3.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border: 4px solid #2E8DCE;
    border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
    color: white;
    font-family: Oswald;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
    background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    background: #8FB93D;
    font-family: Oswald;
    padding: 4px;
}
</style>
</center>

4) Customize your setting.Find any word click F3 or Ctrl+F.

♥ Replace it URL HERE with your URL.

5) Save your Widget.

Read more…

Add Round Shape Popular Posts Widget for Blogger

11:11 AM |

Today's topic is important for each user blog. added months where "Posts common," which is one of the latest additions and beautiful; But today is a form new and wonderful as you see in the picture

Posts common is that you view the most important topics in the blog where visits to these pages, This is extremely useful for bringing visitors where his best displays threads in blog.

How To Add Round Shape Popular Posts Widget for Blogger

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.

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;} .popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;} #PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget>

5) You may/may not expand this code. All you have to do is replace the whole code with the code given below.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/>  <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

6) Now save your template.

Read more…

Add Stylish CSS Buttons For Blogger

8:45 AM |

Give you some amazing techniques that will you like colored buttons and add some dynamic buttons on the bubble shape using CSS Animations template blogger, was designed by animated buttons Tutorial Zine. Featuring bubble CSS buttons when the mouse hovers over it issued vibrating bubbles and makes this effect is more than wonderful, is available in four colors and three sizes of threads so you can add any button of any size only by just changing the name of the category of a button.

How To Add Stylish CSS Buttons For Blogger

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.

a.button-facebook,a.button-googleplus,a.button-linkedin,a.button-pinterest,a.button-rss,a.button-twitter { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: 0 1px 1px #999; color: #fff; display: inline-block; font-size: 16px; margin: 0 20px 20px 0; padding: 10px 15px; text-align: center; width: 130px; text-decoration:none;}a.button-facebook { background-color: #2b4170; /* fallback color */ background: -moz-linear-gradient(top, #3b5998, #2b4170); background: -ms-linear-gradient(top, #3b5998, #2b4170); background: -webkit-linear-gradient(top, #3b5998, #2b4170); border: 1px solid #2b4170; text-shadow: 0 -1px -1px #1f2f52;}a.button-facebook:hover { background: -moz-linear-gradient(top, #2b4170, #3b5998); background: -ms-linear-gradient(top, #2b4170, #3b5998); background: -webkit-linear-gradient(top, #2b4170, #3b5998);}a.button-googleplus { background-color: #c33219; /* fallback color */ background: -moz-linear-gradient(top, #e64522, #c33219); background: -ms-linear-gradient(top, #e64522, #c33219); background: -webkit-linear-gradient(top, #e64522, #c33219); border: 1px solid #c33219; text-shadow: 0 -1px -1px #972412;}a.button-googleplus:hover { background: -moz-linear-gradient(top, #c33219, #e64522); background: -webkit-linear-gradient(top, #c33219, #e64522);}a.button-linkedin { background-color: #0073b2; /* fallback color */ background: -moz-linear-gradient(top, #009cda, #0073b2); background: -webkit-linear-gradient(top, #009cda, #0073b2); border: 1px solid #0073b2; text-shadow: 0 -1px -1px #005486;}a.button-linkedin:hover { background: -moz-linear-gradient(top, #0073b2, #009cda); background: -ms-linear-gradient(top, #0073b2, #009cda); background: -webkit-linear-gradient(top, #0073b2, #009cda);}a.button-pinterest { background-color: #a0171c; /* fallback color */ background: -moz-linear-gradient(top, #cb2027, #a0171c); background: -ms-linear-gradient(top, #cb2027, #a0171c); background: -webkit-linear-gradient(top, #cb2027, #a0171c); border: 1px solid #a0171c; text-shadow: 0 -1px -1px #761114;}a.button-pinterest:hover { background: -moz-linear-gradient(top, #a0171c, #cb2027); background: -ms-linear-gradient(top, #a0171c, #cb2027); background: -webkit-linear-gradient(top, #a0171c, #cb2027);}a.button-rss { background-color: #e2733d; /* fallback color */ background: -moz-linear-gradient(top, #e88845, #e2733d); background: -ms-linear-gradient(top, #e88845, #e2733d); background: -webkit-linear-gradient(top, #e88845, #e2733d); border: 1px solid #e2733d; text-shadow: 0 -1px -1px #9a4824;}a.button-rss:hover { background: -moz-linear-gradient(top, #e2733d, #e88845); background: -ms-linear-gradient(top, #e2733d, #e88845); background: -webkit-linear-gradient(top, #e2733d, #e88845);}a.button-twitter { background-color: #0081ce; /* fallback color */ background: -moz-linear-gradient(top, #00aced, #0081ce); background: -ms-linear-gradient(top, #00aced, #0081ce); background: -webkit-linear-gradient(top, #00aced, #0081ce); border: 1px solid #0081ce; text-shadow: 0 -1px -1px #005ea3;}a.button-twitter:hover { background: -moz-linear-gradient(top, #0081ce, #00aced); background: -ms-linear-gradient(top, #0081ce, #00aced); background: -webkit-linear-gradient(top, #0081ce, #00aced);}

Using It in Your Posts

Use any 1 of the codes

Quote:

<a class="button-facebook" href="#">Cool World</a></div>

Quote:

<a class="button-googleplus" href="#">Cool World</a></div>

Quote:

<a class="button-twitter" href="#">Cool World</a></div>

Quote:

<a class="button-linkedin" href="#">Cool World</a></div>

Quote:

<a class="button-rss" href="#">Cool World</a></div>

Quote:

<a class="button-pinterest" href="#">Cool World</a></div>

Customize

Replace Cool World with your own text.

Change # to the desired link.

Read more…

breaking News

Popular Posts

Labels

Add New Subscribe Box For Blogger

Add Metro Style Sharing Widget For Blogger

Add Awesome Popular Posts Widget for Blogger

Add Beautiful Animated Lavalamp Menu for Blogger

Add Featured Posts Slider Widget For Blogger

Add Round Shape Popular Posts Widget for Blogger

Add Stylish CSS Buttons For Blogger

Top Hot

Welcome to NewEstr

facebook: abdelali tibicht

Email: hinrykah@gmail.com