2 Stylish Css Demo Download Button For Blogger

How to add new and Stylish Demo and Download button with mouse hover effect - If you have a template blog and you are looking for a demo and download button for your blog, then you are at the right place. Because today, with the help of this article I'm going to share with you a new and stylish demo and download button for your blog which comes with mouse hover effect.

If you want to see the demo of this buttons, then scroll down this page at the bottom.

For those who want to add this buttons on their own blog, simply follow the below simple steps.

How to add?

At the first, visit to the blogger dashboard - Visit

Go to the "Template" section.

Click on the "Edit Html" button.

Now add any one "Style Css" code in your template just before ]]></b:skin> or </style>.

/* CSS Button Style 1 by indzign.blogspot.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

<----->OR<----->

/* CSS Button Style 2 by indzign.blogspot.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Save your template.

After that, add any one HTML code while making a post in HTML mode.

<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="http://askwithloud.blogspot.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://askwithloud.blogspot.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

<----->OR<----->

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://askwithloud.blogspot.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://askwithloud.blogspot.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

Note- Replace the above highlighted URL with your own URL.

STYLE 1

See the Pen Cara Membuat Tombol Demo dan Download Flat UI by Indzign (@Indzign) on CodePen.

STYLE 2

See the Pen Cara Membuat Tombol Demo dan Download Flat UI Style 2 by Indzign (@Indzign) on CodePen.

That's it! I hope you like this buttons! Stay tuned for more cool buttons like this! Thanks for reading +Prince Chaudhri 

How to Show Related Post In Between Blog Posts

How to Install Related Post plugin in between your blog posts - Hi guys I Hope you are enjoying my blog. You know guys I'm working harder to make your blog dashing. Anyways I have a new plugin for your blog, I got this plugin on an Indonesian Blogger Blog - "You can read that article from here". With the help of this plugin you can display related post links in between your every blog articles. This is the awesome way to engage your visitors.

Before you install it on your own blog, make sure to take a look of this plugin by clicking on the below demo button.

Demo

Now if you like it and want to install it, then simply follow the below simple steps to add this plugin.

How to Show Related Post In Between Blog Posts?

At the first, visit to your blogger dashboard - Visit

Go to the "Template" section.

Click on " Edit Html" button.

Copy the below CSS code and paste it just before ]]></b:skin> or </style>

/*RelatedPost*/
.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline}

Find the below code (Any one code.)

<data:post.body/>
!-->OR<--!
<div class='artbody' itemprop='articleBody description'><data:post.body/></div>

Now replace it with the below code.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>See Also</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

After that, copy the below code and paste it just before </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
  </b:if>

Save the template, refresh your blog and see the magic.

That's it! I hope you like this plugin! Stay tuned for more cool plugins! Thanks for reading +Prince Chaudhri 

How to Add HTML Colors Code Maker In Blogger

How to Install a Stylish colors code maker in blogspot static page - Color hex is a easy to use tool to get the color codes information including color models (RGB,HSL,HSV and CMYK), css and html color codes. If you're a web designer then this color code maker tool will help you a lot. You can easily find HTML color codes for your website using this awesome color picker.

Before you add this color code maker, Make sure to take a look of this tool by clicking on the below demo button.

Demo

After watching the demo of this color code maker, if you like it and want to install it on your own blog, then follow the below simple steps.

How to Add HTML Colors Code Maker In Blogger

At the first, visit to your blogger dashboard - Visit

Create a new post or page.

Switch to HTML mode.

Copy and paste the below code.

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;}
#main-wrapper { width:98%!important;}
.post { width:98%!important; }
 </style>

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<center>
<object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="500" id="obj1" width="500"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center>
<div align="right">
<a href="https://www.blogger.com/blogger.g?blogID=4300381413715071552"><small></small></a></div>
</div>
</div>
</div>

All done, Now Publish your post and see the magic.

That's it! I hope you like this color code maker tool! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri 

How to Add Online Html Editor Tool In Blogger

How to install a Online HTML editor tool in blogger blog - Use this free online HTML editor to create HTML codes for your website or blog. This is a Live editor so you can see the results as you edit. Click on the "Preview" button at any time to view the generated code. This free Live HTML editor program allows you edit your source code online without downloading any application. 

For those who want to add this tool on their blog, Make sure to take a look of this tool by clicking on the below demo button.

Demo

After watching the demo of this tool, if you're ready to install it, then follow the below simple steps.

How to Add Online Html Editor Tool In Blogger

At the first, visit to your blogger dashboard - Login

Create a new Post/Page.

Switch to HTML mode.

Copy and paste the below code.

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;}
#main-wrapper { width:98%!important;}
.post { width:98%!important; }
 </style>

<div class="post-body entry-content">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>

#send{

font-family: Calibri,  Verdana, Helvetica, sans-serif;

background: #6f9ff1;

color: #fff;

font-weight:bold;

font-size: 14px;

border: 0;

cursor: pointer;

height:30px;

width:80px;

border-radius:4px;

box-shadow: 5px 5px 5px #CCCCCC;

border:1px solid #79a7f1;

}

.textbox{

background:#fff;

border:1px solid #3697F7;

border-radius:4px;

-moz-border-radius:4px;

-webkit-border-radius:4px;

padding:4px;

font:normal 15px verdana, arial;

color:#FBB468;

margin:0px;

height:25px

}

</style>

<br />
<table style="padding: 2px; width: 450px;">

<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: solid 1px #cccccc; box-shadow: #CCC 0px 1px 3px; color: #0080ff; font-family: arial, verdana, Tahoma; font-size: 12px; font-weight: bold; height: 400px; margin: 0px; padding: 5px; scroll: auto; width: 454px;"><style>

Add CSS Code Here

</style>

Add HTML Code Here</textarea>

</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: #ffffff; border-radius: 10px; border: solid 1px #cccccc; box-shadow: #CCC 0px 1px 3px; height: 400px; padding: 5px; width: 454px;">

</iframe>

</td>

</tr>
</tbody></table>
<br />
<button id="send" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">

Preview</button>

<button id="send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">

Clear </button></div>
<br />
<div style="clear: both;">
</div>
</div>
</div>

All Done, Publish your post and see the magic.

That's it! I hope you like this tool! Stay tuned for more cool plugins! Thanks for reading +Prince Chaudhri 

How to Add CSS Compressor Tool In Blogger

How to Add CSS Minifier/Compressor Tool In Blogger static page - Today I'm going to share with you a new Css compressor tool that is useful for compressing CSS codes. This is one of the best tool to optimize your CSS code to make your website faster by decreasing the file size. This free CSS Minifier will compress your CSS code with no side effects.

What Does This Tool Do? - This online CSS compressor can take your CSS scripts and automatically detect and remove unnecessary code you do not really need to display your web pages in the exact same manner. It also minifies unnecessary large CSS tags/code into much smaller code. Your actual style and layout will not be affected.

For those who want to add this tool on their blog, First take a look of this widget by clicking on the below demo button.

Demo

Now follow the below simple steps to add this compressor tool.

How to install CSS Compressor Tool In Blogger?

At the first, visit to your blogger dashboard - Login

Create a new post in a static page.

Then add the following code in the HTML tab (not Compose).

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>

Now publish the post and see the magic.

That's it! I hope you like this css minifier tool, Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri 

Simple Random Post Widget For Blogger

How to install a simple Random post widget on blogger blog - In my previous article I already described about the importance of the Random Post widget. You can read that article here - "Dynamic Random post widget for blogger". So lets move on the main topic because I'm not going to waste your time by writing boring things over here. 

Before you add this simple random post on your blog, make sure to take a look of this widget by clicking on the below demo button.

Demo

After watching the demo of this widget, if you're agree with it and want to install this widget, then follow the below simple steps.

How to install Simple Random Post Widget?

At the first, visit to your blogger dashboard - Login

Go to the "Layout" section.

Select "Add a gadget"

Choose Html/JavaScript from the popup menu.

Copy the below Html code and paste it in Html/JavaScript Box.

<ul id="random-posts"></ul>
<style scoped="" type="text/css">
#random-posts{list-style:none;margin:0;padding:0}
#random-posts li{padding:0 0 5px 0;font-size:90%;margin:5px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#random-posts li a{color:#333}
</style>
<script type='text/javascript'>
//<![CDATA[
var homePage = "http://askwithloud.com/",
numPosts = 8;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<strong><li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></strong>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>

Note - Replace the above highlighted URL with your own blog URL.

After that, save the widget, refresh your blog and see the magic.

That;s it! I hope you like this simple random post widget! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri