Add a Orange Live Demo Button like Making Different

Making Different is very good and creative blog as we all know and the author and owner of that blog also is very creative and great blogger, and i think he love orange color :) be'coz he used orange colored theme in his blog but as he add a Live Demo button in this blog that is very good and my one of the reader ask for that. so today i'm presenting that Blogger Hack. Hope you will all like it.

Add Orange Live Demo Button

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed > Expand Widget Templates
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code before ]]></b:skin>

.wg-demobt a {margin-top:0px;margin-right: 10px;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;/*-www.widgetgenerators.blogspot.com-*/background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9780e), color-stop(1, #f9ead4) );background:-moz-linear-gradient( center top, #f9780e 5%, #f9ead4 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9780e', endColorstr='#f9ead4');/*-www.widgetgenerators.blogspot.com-*/background-color:#f9780e;-moz-border-radius:6px;
-webkit-border-radius:6px;border-radius:6px;border:1px solid #f9780e;display:inline-block;color:#000000;font-family:arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}.wg-demobt a:hover{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9ead4), color-stop(1, #f9780e) );background:-moz-linear-gradient( center top, #f9ead4 5%, #f9780e 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ead4', endColorstr='#f9780e');background-color:#f9ead4;}.wg-demobt a:active {position:relative;top:1px;}

• Save your template.

How to add it in post....?

• Go to posting area > HTML
• Now paste code in it.

<div class="wg-demobt">
<a href="#">Live Demo</a>
</div>

Make Changes....!

• Replace # with your link.
• You can replace Live Demo with your own text. (Optional)

If Any Problem Comes, Ask in Comments