My Blog Widgets: Buttons

Mashable Style Social Subscription Widget

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9XWQd-e0lT-w9THyQfTFjHStdOU-vcy1K9lGh6_UH2krBH09x6GGb1fAZ_8EHVObzub5WuasU-iSIRN01rbrK9K9-CyFdN2dtPY9QMVixHLHeu5ydikJJZjwvasr8Vf9eA5HrJzdaYAz/s1600/Mashable+Style+Social+Subscription+Widget+Generator.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9XWQd-e0lT-w9THyQfTFjHStdOU-vcy1K9lGh6_UH2krBH09x6GGb1fAZ_8EHVObzub5WuasU-iSIRN01rbrK9K9-CyFdN2dtPY9QMVixHLHeu5ydikJJZjwvasr8Vf9eA5HrJzdaYAz/s320/Mashable+Style+Social+Subscription+Widget+Generator.png" width="320" /></a></div>
The great social media blog Mashable is always an inspiration in whatever they do. I came across a great wordpress plugin created by inspiredmagz
 and they named it as mashable social bar. We downloaded their plugin 
and converted it to a blogger compatible form. We also managed to solve 
its compatibility issues for IE and further strengthened its HTML 
structure. This widget can now be used in every blogspot blog just with 
an extremely easy installation step. As you can see this widget contains
 links to your Facebook Fan page, Google+ page and recommendation button, twitter follow button, RSS and LinkedIn links and most importantly an attractive subscription form that will 
further increase the number of your Email subscribers. The conversion 
didn't took me very long and I am pleased to present it to all of you. 
 
 
How to Install This Widget On 'Blogger' ? 
<ol>
<li>Customize Options in Given Widget Generator Form</li>
<li>Click on Generate Button</li>
<li>Finally Click Add to Blogger Button to add this widget on Your blog</li>
</ol>
<div style="font-family: Georgia,"Times New Roman",serif;">
**Note:- After changing any values, First Click Generate Button and then See Your Preview.

</div>
 
<center>
<iframe frameborder="0" height="1200px" scrolling="no" src="https://dl.dropboxusercontent.com/s/44opa5nzxoumv56/Mashable%20Style%20Social%20Subscription%20Widget%20Generator%20by%20Muhammad%20Nauman.html" width="700px"></iframe></center>
 
<div style="text-align: center;">
Any Problem....?</div>
<div style="text-align: center;">
Ask in Comment....</div>

Mashable Style Social Subscription Widget

The great social media blog Mashable is always an inspiration in whatever they do. I came across a great wordpress plugin created by inspi...

How to Add Professional Dropdown Menu in Blogger

Drop
 down menus are very important in blogging and these kinds of stuff is 
also considerable for the visitors be'coz visitor when firstly see your 
menus and other widget and if he like that then she/he wish to visit 
again itself and content also very important fro the every blogger. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstkr5YMbFxt364-dEOz1dKGgYZQJR_FfrWfnrbCLRSh9augkM0T8WPgqocoioP2_EK5wqfWn_yasajsZGGuVJ0k8eaRXvekbWlPYskkOsJCpFaCBq0Vp2MO1iBwbByti3gL9YlZgRKlal/s1600/How+to+Add+Professional+Dropdown+Menu+in+Blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhstkr5YMbFxt364-dEOz1dKGgYZQJR_FfrWfnrbCLRSh9augkM0T8WPgqocoioP2_EK5wqfWn_yasajsZGGuVJ0k8eaRXvekbWlPYskkOsJCpFaCBq0Vp2MO1iBwbByti3gL9YlZgRKlal/s640/How+to+Add+Professional+Dropdown+Menu+in+Blogger.gif" width="640" /></a></div>
Step 1: How to Add Professional Dropdown Menu in Blogger. Now let's start adding it... Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Layout>Add a Gadget. 
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
Step 3: After click on Add a Gadget link A pop-up box will open now</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 19.19999885559082px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #333333; line-height: 19.19999885559082px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s1600/2013-12-07_051839.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NBHy5gDBgEgcJxXLh_uiUcubKIfCWObP_PsxBB1lJOBdgv_IFLDpDcW7-a9VdOR1ihQexmiqwtC3lJh7V7TXfilbhjVGhPuVMzbRLrlQH7vivr3FbaIkrcfRGTCKzuvdNOxvLd3VYtjT/s400/2013-12-07_051839.png" style="-webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(192, 192, 192); height: auto; max-width: 95%; padding: 4px; transition: all 0.4s ease-in-out;" width="400" /></a></div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 Select "HTML/JavaScript" from the gadget options by clicking the blue plus sign for that gadget.</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
Step 4: Select 'HTML/Javascript' and add the one of code given below.</div>
<div style="background-color: white; color: #333333; line-height: 19.19999885559082px;">
 </div>
<blockquote class="tr_bq">
<style> 
 
/* Blue Dropdown Menu by www.myblog-widgets.blogspot.com/ */ 
#nav { 
display:inline-block; 
width:100%; 
margin:0px auto; 
padding:0; 
background:#335599 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -110px;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
box-shadow:0 2px 2px rgba(0,0,0, .5); 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); 
} 
#nav li { 
margin:10px; 
float:left; 
position:relative; 
list-style:none; 
} 
#nav a { 
font-family:verdana; 
font-weight:bold; 
color:#e7e5e5; 
text-decoration:none; 
display:block; 
padding:8px 20px;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
text-shadow:0 2px 2px rgba(0,0,0, .7); 
}/* selected menu element */ 
#nav .current a, #nav li:hover > a { 
background:#7788aa 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -20px; 
color:#000; 
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); 
text-shadow:0 2px 2px rgba(255,255,255, 0.7); 
}/* sublevels */ 
#nav ul li:hover a, #nav li:hover li a { 
background:none; 
border:none; 
color:#000; 
} 
#nav ul li a:hover { 
background:#335599 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png)
 repeat-x 0 -100px; 
color:#fff;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
text-shadow:0 2px 2px rgba(0,0,0, 0.7); 
}#nav ul li:first-child > a { 
-moz-border-radius-topleft:10px; /*some css3*/ 
-moz-border-radius-topright:10px; 
-webkit-border-top-left-radius:10px; 
-webkit-border-top-right-radius:10px; 
} 
#nav ul li:last-child > a { 
-moz-border-radius-bottomleft:10px; /*some css3*/ 
-moz-border-radius-bottomright:10px; 
-webkit-border-bottom-left-radius:10px; 
-webkit-border-bottom-right-radius:10px; 
}/* drop down */ 
#nav li:hover > ul { 
opacity:1; 
visibility:visible; 
} 
#nav ul { 
opacity:0; 
visibility:hidden; 
padding:0; 
width:175px; 
position:absolute; 
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BBxRdrWbZvjpxE0Vcrk6H2-mbspdxED4HFg3sxxPQ7vqv6T2nOrk8dkyE1eLJPkdUYoAjQlY5N9NKaKLYnIuboznUoS2JVcXI7yPnwu4PjmD1TPMWuPFx5Dfp0B-C9xDEtWBiplV4XW4/s320/bg-ABT.png) repeat-x 0 0; 
border:1px solid #7788aa;border-radius:10px; /*some css3*/ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
box-shadow:0 2px 2px rgba(0,0,0, .5); 
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5); 
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s; 
-webkit-transition:opacity .25s linear, visibility .1s linear .1s; 
-o-transition:opacity .25s linear, visibility .1s linear .1s; 
transition:opacity .25s linear, visibility .1s linear .1s; 
} 
#nav ul li { 
float:none; 
margin:0; 
} 
#nav ul a { 
font-weight:normal; 
text-shadow:0 2px 2px rgba(255,255,255, 0.7); 
} 
#nav ul ul { 
left:160px; 
top:0px; 
} 
 
</style> 
 
    <ul id="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Tutorials</a> 
            <ul> 
                <li><a href="#">HTML / CSS</a></li> 
                <li><a href="#">JS / jQuery</a> 
                    <ul> 
                        <li><a href="#">jQuery</a></li> 
                        <li><a href="#">JS</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">PHP</a></li> 
                <li><a href="#">MySQL</a></li> 
                <li><a href="#">XSLT</a></li> 
                <li><a href="#">Ajax</a></li> 
            </ul> 
        </li> 
        <li><a href="#">Resources</a> 
            <ul> 
                <li><a href="#">By category</a> 
                    <ul> 
                        <li><a href="#">PHP</a></li> 
                        <li><a href="#">MySQL</a></li> 
                        <li><a href="#">XSLT</a></li> 
                        <li><a href="#">Ajax</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">By tag name</a> 
                    <ul> 
                        <li><a href="#">captcha</a></li> 
                        <li><a href="#">gallery</a></li> 
                        <li><a href="#">animation</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </li> 
        <li><a href="#">About</a></li> 
        <li><a href="http://myblog-widgets.blogspot.com/">FAQ's</a></li> 
    </ul></blockquote>
 
Make Changes.....!!! 
1. Replace it # with your link.  
2. Replace all Green Area with your showing menu name.

How to Add Professional Dropdown Menu in Blogger

Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors be'coz visitor when firs...

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s1600/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmy9XDkzMUmLauFvzoiCjAgfZsS4tT4jkJtEjssjoVE1MUwl2mzcsClooucltPdjjiYbOWaVtG5zv51IXy0qALxKu75rVt1z4HA6P5dcGYLZPIsaU3u02Ym7wcXvHY0yFt1yE6Agd-Obg/s640/How+to+Add+Pro+Download+Button+With+Mouse+Hover+Effect.gif" width="640" /></a></div>
Buttons
 are very important for the blogger OR if you want to add a button which
 gives some downloading stuff then you can easily add this button and 
also It'll give a very professional look to your blog which is very 
important in today's day be'coz many visitors always think and feel 
about the professionalism of the blogger template and buttons and others
 stuff like widgets, buttons, plugins they always gives importance to 
the look of any template, which looks likes a professional. 
 
Step 1 : Now let's start adding it...

<div>
<div style="text-align: right;">
<div style="text-align: left;">
Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Template> Edit HTML> Proceed.</div>
</div>
 
<div style="text-align: right;">
<div style="text-align: left;">
 </div>
</div>
<div style="text-align: right;">
<div style="text-align: left;">
Step 3: Find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd> + <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:</div>
</div>
</div>
<blockquote class="tr_bq">
]]></b:skin></blockquote>
 
Step 4: Paste below code just before ]]></b:skin>  
<blockquote class="tr_bq">
#RWG-probutn .pure { background:#E3E3E3
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0iIRQfXxF7gt9IP9lP_S5P2HWGL4OhRpiISIqky9i5UznYkK7j-SvT0uf7rYV_jYNDeMukGyugFOLIq_VY13ucWQHDjNQyzZcUFpT0iUSL8swbVrpqS6oMGzZbb3OwdHniubGmt_OJsi/s1600/RWG-probutn.png)
 3px 0 no-repeat; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; display:block; color:#212121; float:none; height:80px; width:80px; line-height:80px; padding-top:1px; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out, background-color .25s ease-in-out; -o-transition:width .25s ease-in-out, background-color .25s ease-in-out; transition:width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px; margin:10px auto 0; } #RWG-probutn a span { display:none; font-size:1.4em; } #RWG-probutn:hover a span { display:inline; } #RWG-probutn:hover .pure { width:420px; } #RWG-probutn .download { background-position:0 0; }</blockquote>
 
Step 5: Now Save Your Template. 
<h2>
Q: How to Use it in Post....?</h2>
 
<div>
Step 1: Open post editor</div>
<div>
Step 2: Click HTML button</div>
<div>
Step 3: Post below code in it</div>
<blockquote class="tr_bq">
<div id="RWG-probutn"> <a href="#" class="pure download">Download</a> </div></blockquote>
 
Make Changes... 
Step 1: Replace it # with your button link. 
Step 2: Replace it Download with your button name. 
 
 
<div style="text-align: center;">
Finally, Publish Your Post and You're Done.</div>
 
<div style="text-align: center;">
Pro
 look is very important for all kind of blogger's and also for all kinds
 website's and some plugins like buttons, widgets etc. they gives a good
 and fine look to every blog and also to a website so, I think you 
should try it MUST.</div>

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

Buttons are very important for the blogger OR if you want to add a button which gives some downloading stuff then you can easily add t...

AddThis

Mashable Style Social Subscription Widget

How to Add Professional Dropdown Menu in Blogger

How to Add Pro Download Button With Mouse Hover Effect in Your Blog

AddThis Smart Layers