MIG33 EAGLE: blogger tutorial

Scripts fireworks effect on the blog

<div class="separator" style="clear: both; text-align: center;">
<img alt="mig33 eagle" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTaKpMpgr9zStoePEp3sXxbfRMkH-MFrDiHu17G0EEv9gChrgZsw_KdO1TciJtPYhfszp2abdRykE9-lOExWJjy_8_e-vojpqfXI1shmj5of0hjONhtKTXswUSslz2a__hpD6TQ1J039M/s320/firework.gif" title="Scripts fireworks effect on the blog" width="320" /></div>
<div style="text-align: center;">
<br /></div>
I will share <a href="http://www.mig33eagle.com/2014/11/scripts-fireworks-effect-on-blog.html" target="_blank" title="Scripts fireworks effect on the blog">scripts fireworks effect on the blog</a>. Live demo on this page.<br />
How to install a  fireworks effect on the blog.<br />
1. Go to Blogger > layout> HTML/Javascript<br />
2. Copy and paste the code below<br />
<blockquote class="tr_bq">
<script type="text/javascript"><br />function light_blue_touchpaper(){if(document.getElementById){var e;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}}function write_fire(e){var t,n,r;stars[e+"r"]=createDiv("|",12);boddie.appendChild(stars[e+"r"]);for(t=bits*e;t<bits+bits*e;t++){stars[t]=createDiv("*",13);boddie.appendChild(stars[t])}}function createDiv(e,t){var n=document.createElement("div");n.style.font=t+"px monospace";n.style.position="absolute";n.style.backgroundColor="transparent";n.appendChild(document.createTextNode(e));return n}function launch(e){colour[e]=Math.floor(Math.random()*colours.length);Xpos[e+"r"]=swide*.5;Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/";else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\";else stars[e+"r"].firstChild.nodeValue="|";stars[e+"r"].style.color=colours[colour[e]]}function bang(e){var t,n,r=0;for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";if(decay[t])decay[t]--;else r++;if(decay[t]==15)n.fontSize="7px";else if(decay[t]==7)n.fontSize="2px";else if(decay[t]==1)n.visibility="hidden";if(decay[t]>1&&Math.random()<.1){n.visibility="hidden";setTimeout("stars["+t+'].style.visibility="visible"',speed-1)}Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]}if(r!=bits)setTimeout("bang("+e+")",speed)}function stepthrough(e){var t,n,r;var i=Xpos[e+"r"];var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4;if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);intensity[e]=5+Math.random()*4;for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;decay[t]=16+Math.floor(Math.random()*16);r=stars[t];if(n<colours.length)r.style.color=colours[t%2?colour[e]:n];else if(n<2*colours.length)r.style.color=colours[colour[e]];else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"}function set_width(){var e=999999;var t=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var bits=80;var speed=33;var bangs=5;var colours=new Array("#03f","#f03","#0e0","#93f","#0cf","#f93","#f0c");var bangheight=new Array;var intensity=new Array;var colour=new Array;var Xpos=new Array;var Ypos=new Array;var dX=new Array;var dY=new Array;var stars=new Array;var decay=new Array;var swide=800;var shigh=600;var boddie;if(typeof "addRVLoadEvent"!="function")function addRVLoadEvent(e){var t=window.onload;if(typeof t!="function")window.onload=e;else window.onload=function(){if(t)t();e()}}addRVLoadEvent(light_blue_touchpaper);window.onresize=set_width<br /></script></blockquote>
change the colours at the start of the script you just copied to be the colour of fireworks you require.<br />
The fireworks should begin to explode on the screen, just like it is on this page.
<script type="text/javascript">
function light_blue_touchpaper(){if(document.getElementById){var e;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(e=0;e<bangs;e++){write_fire(e);launch(e);setInterval("stepthrough("+e+")",speed)}}}function write_fire(e){var t,n,r;stars[e+"r"]=createDiv("|",12);boddie.appendChild(stars[e+"r"]);for(t=bits*e;t<bits+bits*e;t++){stars[t]=createDiv("*",13);boddie.appendChild(stars[t])}}function createDiv(e,t){var n=document.createElement("div");n.style.font=t+"px monospace";n.style.position="absolute";n.style.backgroundColor="transparent";n.appendChild(document.createTextNode(e));return n}function launch(e){colour[e]=Math.floor(Math.random()*colours.length);Xpos[e+"r"]=swide*.5;Ypos[e+"r"]=shigh-5;bangheight[e]=Math.round((.5+Math.random())*shigh*.4);dX[e+"r"]=(Math.random()-.5)*swide/bangheight[e];if(dX[e+"r"]>1.25)stars[e+"r"].firstChild.nodeValue="/";else if(dX[e+"r"]<-1.25)stars[e+"r"].firstChild.nodeValue="\\";else stars[e+"r"].firstChild.nodeValue="|";stars[e+"r"].style.color=colours[colour[e]]}function bang(e){var t,n,r=0;for(t=bits*e;t<bits+bits*e;t++){n=stars[t].style;n.left=Xpos[t]+"px";n.top=Ypos[t]+"px";if(decay[t])decay[t]--;else r++;if(decay[t]==15)n.fontSize="7px";else if(decay[t]==7)n.fontSize="2px";else if(decay[t]==1)n.visibility="hidden";if(decay[t]>1&&Math.random()<.1){n.visibility="hidden";setTimeout("stars["+t+'].style.visibility="visible"',speed-1)}Xpos[t]+=dX[t];Ypos[t]+=dY[t]+=1.25/intensity[e]}if(r!=bits)setTimeout("bang("+e+")",speed)}function stepthrough(e){var t,n,r;var i=Xpos[e+"r"];var s=Ypos[e+"r"];Xpos[e+"r"]+=dX[e+"r"];Ypos[e+"r"]-=4;if(Ypos[e+"r"]<bangheight[e]){n=Math.floor(Math.random()*3*colours.length);intensity[e]=5+Math.random()*4;for(t=e*bits;t<bits+bits*e;t++){Xpos[t]=Xpos[e+"r"];Ypos[t]=Ypos[e+"r"];dY[t]=(Math.random()-.5)*intensity[e];dX[t]=(Math.random()-.5)*(intensity[e]-Math.abs(dY[t]))*1.25;decay[t]=16+Math.floor(Math.random()*16);r=stars[t];if(n<colours.length)r.style.color=colours[t%2?colour[e]:n];else if(n<2*colours.length)r.style.color=colours[colour[e]];else r.style.color=colours[t%colours.length];r.style.fontSize="13px";r.style.visibility="visible"}bang(e);launch(e)}stars[e+"r"].style.left=i+"px";stars[e+"r"].style.top=s+"px"}function set_width(){var e=999999;var t=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)e=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)t=document.documentElement.clientHeight}if(typeof self.innerWidth!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<e)e=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<t)t=self.innerHeight}if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<e)e=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<t)t=document.body.clientHeight}if(e==999999||t==999999){e=800;t=600}swide=e;shigh=t}var bits=80;var speed=33;var bangs=5;var colours=new Array("#03f","#f03","#0e0","#93f","#0cf","#f93","#f0c");var bangheight=new Array;var intensity=new Array;var colour=new Array;var Xpos=new Array;var Ypos=new Array;var dX=new Array;var dY=new Array;var stars=new Array;var decay=new Array;var swide=800;var shigh=600;var boddie;if(typeof "addRVLoadEvent"!="function")function addRVLoadEvent(e){var t=window.onload;if(typeof t!="function")window.onload=e;else window.onload=function(){if(t)t();e()}}addRVLoadEvent(light_blue_touchpaper);window.onresize=set_width
</script>

Scripts fireworks effect on the blog

I will share scripts fireworks effect on the blog . Live demo on this page. How to install a fireworks effect on the blog. 1. Go to B...

Blobs Blog Effect

<div class="tr_bq">
<script type="text/javascript">
// <![CDATA[
var colour="#fff"; // what colour are the blobs
var speed=66; // speed of animation, lower is faster
var blobs=20; // how many blobs are in the jar
var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect

/***************************\
*   Blobs in a Jar Effect   *
* (c)2012 mf2fm web-design  *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/

window.onload=fill_the_jar;
var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array(); 
var swide=800;
var shigh=600;
function fill_the_jar() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='0px';
dvs.top='0px';
dvs.width='1px';
dvs.height='1px';
document.body.appendChild(div);
set_width();
for (i=0; i<blobs; i++) {
 add_blob(i);
 jamjar(i);
}
}

Blobs Blog Effect

Blobs blog effect is blob animated effects on the blog. Live demo on this page. Script code: <script type="text/javascrip...

7 CSS Button Generator Online

With the use of CSS3 you can be able to give effect to the button like gradient, border-radius, box-shadow and text-shadow etc. and you don’t have to use images. Here, 7 <a href="http://www.mig33eagle.com/2014/10/7-css-button-generator-online.html" target="_blank" title="7 CSS Button Generator  Online">CSS button generator  online</a> which will help you to create CSS button.<br />
<h2 style="border: 0px; box-sizing: border-box; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
1. <a href="http://www.sciweavers.org/i2style" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">Typeset Button Maker – i2style</a></h2>
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="button" style="border: 0px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<img alt="Button Maker – i2style" border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lGRGYtoCTDYxbWuko5wah3IX-oHop5XEpIW8-AagIdnZccOvYLkvF1bF8BAd_Iuzs3JITH981l2u24KmrRf3ILBa_Pk4n31_i3KDeIeYDrdT6BIPsC698A5rmk1KDJoBFSH3uaUxC40/s1600/buttonmakeronline.JPG" title="Button Maker – i2style" width="640" /></div>
<div>
<br /></div>
</div>
<div class="button" style="border: 0px; box-sizing: border-box; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.sciweavers.org/i2style" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
</h2>
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
2. <a href="http://css3button.net/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">CSS3 Button Generator</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css3button.net/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="Awesome CSS3 Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-css3button.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
The <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CSS3 Button Generator</strong> allows you to change the font, padding, border, background gradient, inner shadow, drop shadow and text shadows using <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">up/down</strong> controls which is easier for you. Also it includes browser prefix code in css.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css3button.net/" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<hr style="background-color: #cccccc; border: 0px; box-sizing: content-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; height: 1px; line-height: 28.7999992370605px; margin-bottom: 1.5em; margin-top: 20px;" />
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
3. <a href="http://www.cssbuttongenerator.com/homepage.php" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">CSS Button Generator</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.cssbuttongenerator.com/homepage.php" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="Awesome CSS Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-cssbuttongenerator.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CSS Button Generator</strong> offers great button creation tools to you. You can vary the button’s size, text shadow, box-shadow, button-style, and color-style. The changes you make, it will reflect in button preview window. When your customization is done click on <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Get the Code</strong> tab next to the <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Button Preview</strong> tab and copy your code.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.cssbuttongenerator.com/homepage.php" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<hr style="background-color: #cccccc; border: 0px; box-sizing: content-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; height: 1px; line-height: 28.7999992370605px; margin-bottom: 1.5em; margin-top: 20px;" />
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
4. <a href="http://www.bestcssbuttongenerator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">Button X</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.bestcssbuttongenerator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="Awesome CSS3 Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-button-x.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Button X</strong> css button generator is an online tool that allows you to create beautiful and stylish css buttons. Just select a button from the library and play its CSS styles. After completing your design, click on the button itself to view the CSS and HTML codes or just click “<strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Copy code</strong>” button to copy the code to the clipboard. Now you can paste CSS style to your CSS file.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.bestcssbuttongenerator.com/" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<hr style="background-color: #cccccc; border: 0px; box-sizing: content-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; height: 1px; line-height: 28.7999992370605px; margin-bottom: 1.5em; margin-top: 20px;" />
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
5. <a href="http://css-button-generator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">CSS Button Generator</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css-button-generator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="Awesome CSS3 Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-css-buttongenerator.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
The <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CSS Button Generator</strong> is a great online button generator tool, it will satisfy your button needs. You can start off with selecting a color theme from the color tab. It offers you to give your class name to the button css and this generator provides you html and css both.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css-button-generator.com/" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<hr style="background-color: #cccccc; border: 0px; box-sizing: content-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; height: 1px; line-height: 28.7999992370605px; margin-bottom: 1.5em; margin-top: 20px;" />
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
6. <a href="http://css3buttongenerator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">CSS Button Generator</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css3buttongenerator.com/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="Awesome CSS3 Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-css3buttongenerator.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CSS Button Generator</strong> has simple interface and limited features, so you can easily understand how to use this and it will show you preview also. As per your customization, when the button is ready you have to click on the <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Copy the code</strong> text, it will copy the <strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">css</strong> to the clipboard then you have to paste in your stylesheet.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css3buttongenerator.com/" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<hr style="background-color: #cccccc; border: 0px; box-sizing: content-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; height: 1px; line-height: 28.7999992370605px; margin-bottom: 1.5em; margin-top: 20px;" />
<h2 style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
7. <a href="http://css-tricks.com/examples/ButtonMaker/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">Button Maker – CSS Tricks</a></h2>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css-tricks.com/examples/ButtonMaker/" style="-webkit-transition: all 0.25s; background: 0px 0px; border: 0px; box-sizing: border-box; color: #09a3eb; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank"><img alt="6 Extremely Useful Online CSS3 Button Generator" class="post-content-img-border" src="http://modernwpthemes.com/wp-content/uploads/2014/07/6-extremely-useful-online-css-button-generator-tool-css-tricks.jpg" style="border: 1px solid rgb(225, 225, 225); box-sizing: border-box; height: auto; max-width: 100%; padding: 5px; vertical-align: middle;" /></a></div>
<div style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 28.7999992370605px; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Button Maker</strong> also gives you limited features to generate the CSS code for your buttons. It offers you to change the border-radius, gradient, border-color, text-color, active background color and font-size. After your customization is done to get the code, you need to click on the button which you can see in button preview window.</div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://css-tricks.com/examples/ButtonMaker/" style="-webkit-transition: all 0.25s; background: rgb(9, 163, 235); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(9, 163, 235); box-sizing: border-box; color: white; font-size: 0.9em; margin: 0px; outline: 0px; padding: 2px 10px; position: relative; text-align: right; text-decoration: none; transition: all 0.25s; vertical-align: baseline;" target="_blank">View Site</a></div>
<div class="button" style="background-color: white; border: 0px; box-sizing: border-box; color: #333333; font-family: 'Titillium Web', sans-serif; font-size: 16px; line-height: 2.2; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h2 style="border: 0px; box-sizing: border-box; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 1.25em 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
</h2>
</div>

7 CSS Button Generator Online

With the use of CSS3 you can be able to give effect to the button like gradient, border-radius, box-shadow and text-shadow etc. and you don’...

List Style Checklist in Blog Post

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUvTGXt92v8aN8f1p1zZtU7QNrR60yiJAxG-BFNRKTXH0zmM774z-RW7kMPePYzu87ROpEcqbKLwDYo_LywURgVsN3IRTaBqhsyHBccb8U1iVQPXlhAwNxWhxxPj6JOWpSEtQZiyLupA/s1600/list+style+checklist.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="List Style Checklist pada Post Blog" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNUvTGXt92v8aN8f1p1zZtU7QNrR60yiJAxG-BFNRKTXH0zmM774z-RW7kMPePYzu87ROpEcqbKLwDYo_LywURgVsN3IRTaBqhsyHBccb8U1iVQPXlhAwNxWhxxPj6JOWpSEtQZiyLupA/s1600/list+style+checklist.gif" title="" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
CSS style list on the blog there are 2 kinds, namely the list-style-type and list-style-image.
<br />
<br />
<div style="text-align: left;">
<b><span style="font-size: large;">list-style-type</span></b> </div>
<div style="text-align: left;">
<br /></div>
<h2 style="background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
CSS Syntax</h2>
<div>
<span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">list-style-type: </span><i style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">value</i><span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">;</span></div>
<div>
<span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;"><br /></span></div>
<div>
<h2 style="background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
Property Values</h2>
</div>
<div>
<div>
<ol>
<li>disc<span class="Apple-tab-span" style="white-space: pre;"> </span>- Default value. The marker is a filled circle<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>armenian<span class="Apple-tab-span" style="white-space: pre;"> </span>- The marker is traditional Armenian numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>circle<span class="Apple-tab-span" style="white-space: pre;"> </span> - The marker is a circle<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>cjk-ideographic<span class="Apple-tab-span" style="white-space: pre;"> </span>- The marker is plain ideographic numbers<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>decimal - The marker is a number<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>decimal-leading-zero<span class="Apple-tab-span" style="white-space: pre;"> </span>- The marker is a number with leading zeros (01, 02, 03, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>georgian - The marker is traditional Georgian numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>hebrew - The marker is traditional Hebrew numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>hiragana - The marker is traditional Hiragana numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>hiragana-iroha - The marker is traditional Hiragana iroha numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>katakana - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is traditional Katakana numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>katakana-iroha - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is traditional Katakana iroha numbering<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>lower-alpha - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is lower-alpha (a, b, c, d, e, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>lower-greek - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is lower-greek<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>lower-latin - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is lower-latin (a, b, c, d, e, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>lower-roman - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is lower-roman (i, ii, iii, iv, v, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>none - <span class="Apple-tab-span" style="white-space: pre;"> </span>No marker is shown<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>square - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is a square<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>upper-alpha - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is upper-alpha (A, B, C, D, E, etc.) <span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>upper-latin<span class="Apple-tab-span" style="white-space: pre;"> </span> - The marker is upper-latin (A, B, C, D, E, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
<li>upper-roman - <span class="Apple-tab-span" style="white-space: pre;"> </span>The marker is upper-roman (I, II, III, IV, V, etc.)<span class="Apple-tab-span" style="white-space: pre;"> </span></li>
</ol>
<div>
CSS blog jika ingin memberi list style berbentuk lingkaran/circle</div>
</div>
</div>
<div>
<span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">list-style-type: </span><i style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">disc</i><span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;">;</span></div>
<div>
<span style="background-color: #f1f1f1; color: #444444; font-family: 'courier new'; font-size: 14px;"><br /></span></div>
<div>
<b><span style="font-size: large;">list-style-image</span></b></div>
<div>
<b><span style="font-size: large;"><br /></span></b></div>
<div>
<h2 style="background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 22px; font-weight: normal; margin-bottom: 10px; margin-top: 10px;">
CSS Syntax</h2>
<div class="code notranslate" style="background-color: #f1f1f1; border: 1px solid rgb(212, 212, 212); color: #444444; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; margin: 0px; padding: 5px; width: auto;">
<div style="font-family: 'courier new'; font-size: 14px;">
list-style-image: none|<i>url</i>|initial|inherit;</div>
</div>
</div>
<div>
<b><span style="font-size: large;">Contoh CSS</span></b></div>
<span style="background-color: #f3f3f3; font-family: 'courier new'; font-size: 14px;">list-style-image:url('http://blablabla.gif');</span><br />
<br />
Well, now to the point that makes the list style checklist on the blog post.<br />
Live Demo like the top picture.<br />
How to install in a template:<br />
<br />
template> edit html> put the following CSS code above ]]></b:skin><br />
<blockquote class="tr_bq">
.post-body ul li,<br />
.post-footer ul li{margin-left:20px;list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjICW-YC4KcDobreFfEbI2F_8tGoSaPKBtYjvNYnA11O_RYjIblT35tUnkRGos6ILRxDVJGGonyyObaN7VHR3D2wn084VG_hVia6MkfTH8P2J3tnPvAe8MHryVY1SqIbAr02VDjePWBdKk/s1600/uncheck.gif);padding:.2em 0 .2em .5em}<br />
.post-body ul li:hover,.post-footer ul li:hover{background-color:#fff;cursor:pointer;list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoBX-fcWIA82ZfFZM-dEQvOMibTCYN0HRbA_qcA-aCxJ0XkYiud38Iq_1rRqt_rUjTsYRuCG5CMLMsJTwzEHoa_CJYIaoFthyjDl6GGMvcyhNOVoZlHi6FcJ41vJvwvkk5XqG4LrdiwA/s1600/check.gif);border:1px dotted #ccc}</blockquote>
save the template and check the results. Good luck, hopefully blogger tutorials about making a <a href="http://www.mig33eagle.com/2014/04/list-style-checklist-pada-post-blog.html" target="_blank" title="List Style Checklist in Blog Post">list style checklist in the blog post</a> helpful.

List Style Checklist in Blog Post

CSS style list on the blog there are 2 kinds, namely the list-style-type and list-style-image. list-style-type CSS Syntax lis...

Cara Memasang Emoticon di atas Komentar Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXpnQJHYMQz5J1tOuW277W0_W0mDNM0g_W4-lMJ450K3sbRSHtKPK7d79Ibz20dCo2uA5ws_njtgGF9HKsy9yHuscmgDSld0pFHACpgeXskK4H9frGyAEB1EJSFnvEM_4pTwLyG-ETgFw/s1600/emoticon-komentar-blog.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Cute Emoticon di atas Komentar Blog" border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXpnQJHYMQz5J1tOuW277W0_W0mDNM0g_W4-lMJ450K3sbRSHtKPK7d79Ibz20dCo2uA5ws_njtgGF9HKsy9yHuscmgDSld0pFHACpgeXskK4H9frGyAEB1EJSFnvEM_4pTwLyG-ETgFw/s1600/emoticon-komentar-blog.gif" title="Cara Memasang Cute Emoticon di atas Komentar Blog" width="400" /></a></div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Tutorial blog kawaii siang ini adalah cara memasang cute emoticon di komentar blog.</div>
<div class="separator" style="clear: both; text-align: center;">
Kita akan menggantinya dengan emote cute, yaitu emoticon kaomoji animated.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
Sering kita jumpai di banyak blog template html5 adalah emoticon kek gini.
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkyjZrNkCnJZIL_4jZ8HjY-PR9sXXfnSDkFXU7MbRTeaRh9FrIrGvynuIbey8eG8k590GyfnHrOrKja1P89DqFATp5tYalxvobriZTDZTUjb1bP_jrB9eD159AQycKDFLPEix8N9gXJa_/s1600/emoticonkomentar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkyjZrNkCnJZIL_4jZ8HjY-PR9sXXfnSDkFXU7MbRTeaRh9FrIrGvynuIbey8eG8k590GyfnHrOrKja1P89DqFATp5tYalxvobriZTDZTUjb1bP_jrB9eD159AQycKDFLPEix8N9gXJa_/s1600/emoticonkomentar.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<img src="http://media.tumblr.com/6beb3e5a99d0f1534c166158956532a3/tumblr_inline_mmzpjcmUqU1qz4rgp.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img src="http://media.tumblr.com/8f817a8b8213c51b7216a4947b950f9a/tumblr_inline_mi7tq4kO0M1qdlkyg.gif" />Langkah pertama</div>
<div class="separator" style="clear: both; text-align: center;">
Letakkan kode css bingkai/tempat emotenya di atas ]]></b:skin></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
.emoWrap{position:relative;margin-bottom:7px;background:url(http://media.tumblr.com/e56caea58a12f244fabc1c7ec139dab2/tumblr_inline_mfnm34NnYx1qdlkyg.gif)repeat;border: 2px dotted violet;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:400;color:#333;padding:10px}<br />
.emoWrap:after{content:&quot;&quot;;position:absolute;bottom:-10px;left:10px;border-top:10px solid #3498db;border-right:20px solid transparent;width:0;height:0;line-height:0}</blockquote>
<div style="text-align: center;">
<span style="color: #674ea7;">notes:</span><br />
ganti background sesuai keinginan kmu, aku ada koleksi background cute. bisa di lihat di<br />
<img src="http://media.tumblr.com/6ca37cb5bd2cb00cb0eef77a8615f97d/tumblr_inline_mi7tqvR78X1qdlkyg.gif" /> <a href="http://ashprincesskawaii.blogspot.com/2014/03/background-cute-stripes.html" style="background-color: white; color: violet; cursor: url(http://static.tumblr.com/xjqjg7j/Mhcmxtzxp/84.gif), auto; font-family: Arial; font-size: 12px; line-height: 20.399999618530273px; text-align: left; text-decoration: none;">Background Cute stripes</a><br />
<img src="http://media.tumblr.com/6ca37cb5bd2cb00cb0eef77a8615f97d/tumblr_inline_mi7tqvR78X1qdlkyg.gif" /><a href="http://ashprincesskawaii.blogspot.com/2014/03/background-kawaii-1.html" style="background-color: white; color: #8be8e7; font-family: Arial; font-size: 12px; line-height: 20.399999618530273px; text-align: left; text-decoration: none;">Background Kawaii 1</a><br />
<img src="http://media.tumblr.com/6ca37cb5bd2cb00cb0eef77a8615f97d/tumblr_inline_mi7tqvR78X1qdlkyg.gif" /><a href="http://ashprincesskawaii.blogspot.com/2014/03/background-kawaii-2.html" style="background-color: white; color: #8be8e7; font-family: Arial; font-size: 12px; line-height: 20.399999618530273px; text-align: left; text-decoration: none;">Background Kawaii 2</a><br />
<br />
<img src="http://media.tumblr.com/8f817a8b8213c51b7216a4947b950f9a/tumblr_inline_mi7tq4kO0M1qdlkyg.gif" />Langkah kedua</div>
<div style="text-align: center;">
Copy kode jquery berikut dan letakkan di atas </head></div>
<blockquote class="tr_bq" style="text-align: center;">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> </blockquote>
<div style="text-align: center;">
<span style="color: #674ea7;">notes:</span><br />
<span style="color: #674ea7;">jika template km udah ada script jquery kek di atas,versi apapun abaikan langkah ini</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<img src="http://media.tumblr.com/8f817a8b8213c51b7216a4947b950f9a/tumblr_inline_mi7tq4kO0M1qdlkyg.gif" />langkah ketiga </div>
<div style="text-align: center;">
copy kode dan letakkan di atas </body><br />
<blockquote class="tr_bq">
<br /><b:if cond='data:blog.pageType == "item"'><br /><script type='text/javascript'><br />//<![CDATA[<br />jQuery(document).ready(function () {emoticonx({<br />emoRange:"#comments p, div.emoWrap",<br />putEmoAbove:"iframe#comment-editor",<br />topText:"Click to see the code!",<br />emoMessage:"To insert emoticon you must added at least one space before the code."<br />})<br />});<br />//]]><br /></script><br /><script type="text/javascript" src="http://yourjavascript.com/40136152393/emotashkaomoji.js"></script><br /></b:if> </blockquote>
</div>
<div style="text-align: center;">
<img src="http://media.tumblr.com/8f817a8b8213c51b7216a4947b950f9a/tumblr_inline_mi7tq4kO0M1qdlkyg.gif" />langkah terakhir</div>
<div style="text-align: center;">
save template.</div>
<div style="text-align: center;">
<br />
jika kamu ingin emoticon kuning animated kek ini<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkyjZrNkCnJZIL_4jZ8HjY-PR9sXXfnSDkFXU7MbRTeaRh9FrIrGvynuIbey8eG8k590GyfnHrOrKja1P89DqFATp5tYalxvobriZTDZTUjb1bP_jrB9eD159AQycKDFLPEix8N9gXJa_/s1600/emoticonkomentar.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkyjZrNkCnJZIL_4jZ8HjY-PR9sXXfnSDkFXU7MbRTeaRh9FrIrGvynuIbey8eG8k590GyfnHrOrKja1P89DqFATp5tYalxvobriZTDZTUjb1bP_jrB9eD159AQycKDFLPEix8N9gXJa_/s1600/emoticonkomentar.gif" width="320" /></a><br />
<br />
scriptnya:<br />
https://boyz.googlecode.com/svn/JS/emoticonnya.js<br />
<br />
gantiin aja js emotku di atas.<br />
<br />
<img src="http://media.tumblr.com/f3f61c190b41285afca3716747487076/tumblr_inline_mmzpjiW3Kj1qz4rgp.gif" /></div>
<div style="text-align: center;">
<span style="color: #8e7cc3;">notes:</span></div>
<div style="text-align: center;">
Jika kamu ingin ganti emoticonnya bongkar aja javascriptnya,dengan cara:</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
1. Klik kanan http://yourjavascript.com/40136152393/emotashkaomoji.js </div>
<div style="text-align: center;">
2. goto http://yourjavascript.com/40136152393/emotashkaomoji.js , maka akan keluar kode js di tab sebelah</div>
<div style="text-align: center;">
3. copy semua kode dan paste di notepad</div>
<div style="text-align: center;">
4. Ganti url emoticonnya dan save dengan file .js</div>
<div style="text-align: center;">
5. Upload javascript, kalo aku upload di <a href="http://yourjavascript.com/">yourjavascript.com</a></div>
<div style="text-align: center;">
6. copy url jsnya dan gantikan dengan url js emoticon versimu.</div>
<div style="text-align: center;">
7. save template</div>
<div style="text-align: center;">
Nah begitu lah cara memasang emoticon di komentar blog dan menggantikan emoticon dengan emoticon kesukaan kita. Kalo ada yg blom jelas, bisa bertanya di kotak komentar. selamat mencoba </div>
<div style="text-align: center;">
<img src="http://i4.photobucket.com/albums/y120/Starberries_/Pixels%20and%20Buttons/bunnyears.gif" /></div>

Cara Memasang Emoticon di atas Komentar Blog

Tutorial blog kawaii siang ini adalah cara memasang cute emoticon di komentar blog. Kita akan menggantinya dengan emote cute, yaitu e...

Make a Blog Contents by Date

<div style="background-color: grey; border: 1px solid #000000; height: 270px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 400px;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://www.mig33eagle.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
<br />
<center>
Examples of Blog Contents by Date</center>
<br />
<a href="http://www.mig33eagle.com/2014/03/cara-membuat-daftar-isi-blog.html" target="_blank">Contents by date</a> is the date the table of contents you post the article. Tutorial blog this time how to make a table of contents according to date. Equipped scroll pages so economical. Ways placement on page / blog page:<br />
Page> New Page> Place the following code.<br />
<blockquote class="tr_bq">
<div style="background-color: none; border: 1px solid #000000; height: 270px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;"><br /><script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script><br /><script src="http://www.urlblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div></blockquote>
<br />
Hopefully <b>tutorial blog</b> <a href="http://www.mig33eagle.com/2014/03/cara-membuat-daftar-isi-blog.html" target="_blank">Blog Contents by Date</a> may be useful.

Make a Blog Contents by Date

Examples of Blog Contents by Date Contents by date is the date the table of contents you post the article. Tutorial blog this time h...

Blockquote with Scroll

<div class="separator" style="clear: both; text-align: center;">
<img alt="Blockquote Scroll" border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz0Ldh9tfIxf4Oj9WOBvgG997-Jd0fw-vlm-cANfebgOphfHzi7bBJhi1uj3LmS9ihWXbPNbhB6giSfz1irkNoq7jjbJCEcKaPUPhZJCsPae7HEB5PsWOds-cA06kUS0XQwroP7HOGvwA/s1600/blockquote-auto-scroll.gif" title="Blockquote with Scroll" width="400" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/blockquote-dengan-scroll.html" target="_blank">Blockquote with Scroll</a> , useful to restrict the scroll height in order to save the page blockquote posts.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
How to install a blockquote with scroll.</div>
<div class="separator" style="clear: both;">
1. Go to Blogger > Template > Backup your Template > Edit HTML</div>
<div class="separator" style="clear: both; text-align: left;">
2. Find code .post blockquote or .blockquote and replace with the following code</div>
<blockquote class="tr_bq" style="clear: both; text-align: left;">
blockquote{position:relative;overflow:auto;color:#000;max-height:170px;line-height:1.3em;margin-top:5px;margin-bottom:2px;border-left:4px solid #666;border-top:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;transition:.6s;-o-transition:.6s;-moz-transition:.6s;-webkit-transition:.6s;-ms-transition:.6s;padding:10px}</blockquote>
blockquote hover can also be replaced with the code below.<br />
<blockquote class="tr_bq">
blockquote:hover{background-color:rgba(31,53,75,0.7); background:rgba(31,53,75,0.7); color:#FFF}blockquote:before{content:&quot; width:0; height:0; position:absolute; bottom:100%; left:20px; display:block; border-color:transparent transparent #0070b0; border-style:solid; border-width:10px}</blockquote>
<div>
Demo of blockquote with scroll.<br />
<br />
<br /></div>
<style>
arthur {
width:450px;
display:block;
margin: 1em 20px;
position:relative;overflow:auto;color:#000;max-height:170px;line-height:1.3em;margin-top:5px;margin-bottom:2px;border-left:4px solid #666;border-top:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;transition:.6s;-o-transition:.6s;-moz-transition:.6s;-webkit-transition:.6s;-ms-transition:.6s;padding:10px}
arthur:hover{background-color:rgba(31,53,75,0.7); background:rgba(31,53,75,0.7); color:#FFF}blockquote:before{content:" width:0; height:0; position:absolute; bottom:100%; left:20px; display:block; border-color:transparent transparent #0070b0; border-style:solid; border-width:10px}
</style>

<center>
<arthur>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
<br />
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. 
<br />
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. 
<br />
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. 
<br />
Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales.<br />
</arthur></center>
<br />
<br />
Done. May be useful.

Blockquote with Scroll

Blockquote with Scroll , useful to restrict the scroll height in order to save the page blockquote posts. How to install a blockqu...

Animated Loading Page Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwe1C62eXWw0wfuToNoYeuAPhhoy4Q-9q7w-9IsXB1LLraxrw4Fj0vcYybFuP0grnRc7tD-pw4mU8j1k9ho-Ye_1EL1lnFFkD2bdKvd3ly0TlV2f5JGuRGr7knwebSCyeolwvaqEdy_g/s1600/animated+loading+page.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwe1C62eXWw0wfuToNoYeuAPhhoy4Q-9q7w-9IsXB1LLraxrw4Fj0vcYybFuP0grnRc7tD-pw4mU8j1k9ho-Ye_1EL1lnFFkD2bdKvd3ly0TlV2f5JGuRGr7knwebSCyeolwvaqEdy_g/s1600/animated+loading+page.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/animated-loading-page-blog.html" target="_blank">Animated loading page blog</a> adalah icon loading saat kita membuka suatu halaman blog.</div>
<div class="separator" style="clear: both; text-align: left;">
Cara memasangnya di template:</div>
<div class="separator" style="clear: both; text-align: left;">
Edit html > letakkan kode berikut di atas <span style="color: #cc0000;"></body></span></div>
<blockquote class="tr_bq">
<style><br />
#ash-page-loader {<br />
        position: fixed!important;<br />
        top: 0;<br />
        right: 0;<br />
        bottom: 0;<br />
        left: 0;<br />
        z-index: 9999;<br />
        background:#<span style="color: blue;">fff</span> url('<span style="color: red;">http://sl.glitter-graphics.net/pub/677/677182xv7ft7yu0d.gif</span>') no-repeat 50% 30%;<br />
        color: #FFF;<br />
        display: none;<br />
        font: 0/0 a;<br />
        text-shadow: none;<br />
        padding: 1em 1.2em;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document.body).append('<div id="ash-page-loader">Loading...</div>');<br />
$(window).on("beforeunload", function() {<br />
    // ... Show the Animation `.fadeIn()`<br />
    $('#ash-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);<br />
});<br />
//]]><br />
</script></blockquote>
<br />
Note:<br />
Sesuaikan warna background dan gambar loadingnya sesuai keinginan.<br />
<br />
Gambar animated loading yang dapat Anda gunakan:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0fOe0bFJ8I-Js-YHRI4MFLxbnimIK8yqDai007MTlzemRkdW_aoZNfJ6s7CnXA2rFPmRavcaF3dpt8D09IX79_RpvdOEM0lKCY2JGDzFhVfVGGNCt_kCmUm6ViTryw1kkE_gsFVN1QY/s1600/ashloading1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv0fOe0bFJ8I-Js-YHRI4MFLxbnimIK8yqDai007MTlzemRkdW_aoZNfJ6s7CnXA2rFPmRavcaF3dpt8D09IX79_RpvdOEM0lKCY2JGDzFhVfVGGNCt_kCmUm6ViTryw1kkE_gsFVN1QY/s1600/ashloading1.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsmRHW0r1pwvmWH6Ay8SaCTLt4Ww7ySxm-_B95h0UxmF9_Ve8yhB1-Ret2tGPDXorQR2MA03o9pomxWB62Pk_hmMaPztPcrUY5cgPiZV7Nqr7pKlkq0gPt9w7nBqWvsxdpAlfKQoRc-c/s1600/ashloading2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsmRHW0r1pwvmWH6Ay8SaCTLt4Ww7ySxm-_B95h0UxmF9_Ve8yhB1-Ret2tGPDXorQR2MA03o9pomxWB62Pk_hmMaPztPcrUY5cgPiZV7Nqr7pKlkq0gPt9w7nBqWvsxdpAlfKQoRc-c/s1600/ashloading2.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bF6xo5qn8tgIFU81EOrZH34TIqPBW7fKLLuOPivTiSlO0rRaGcKR3ju81X4_nNdPyHcXlfXpdEjSnQ8bdld978szLFmbOlftXaeDcY60tXHfmMbKQb9kdjNxO0MLz9xc88fUahbJvNQ/s1600/ashloading3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bF6xo5qn8tgIFU81EOrZH34TIqPBW7fKLLuOPivTiSlO0rRaGcKR3ju81X4_nNdPyHcXlfXpdEjSnQ8bdld978szLFmbOlftXaeDcY60tXHfmMbKQb9kdjNxO0MLz9xc88fUahbJvNQ/s1600/ashloading3.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFTDseQaUUnlE9LDqH53kFqc8mCHnnQZQQPR9aAmrLj6-_BuQH5xxsyLex9FuRIzmwE8FEj8RYj1-rKe833T4GDX-t2oWaCJCdSndozw-_j4Oi4bgIekhmxN9OcOS3bPJbwIIfDM-mM8/s1600/ashloading4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFTDseQaUUnlE9LDqH53kFqc8mCHnnQZQQPR9aAmrLj6-_BuQH5xxsyLex9FuRIzmwE8FEj8RYj1-rKe833T4GDX-t2oWaCJCdSndozw-_j4Oi4bgIekhmxN9OcOS3bPJbwIIfDM-mM8/s1600/ashloading4.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwt8g3r34xvMPOSUWEYJil36AMuVsdZDiOXQ-rErQ7J2WhEIgt8dKK1JvtsjKj1rHF5aTZ_vvo79KCmvTUUoi3faZAJWq5clM90L3akIhMAhm0hYjDCQmh9l_mwihnV-t4pHQCm46NAU/s1600/ashloading5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwt8g3r34xvMPOSUWEYJil36AMuVsdZDiOXQ-rErQ7J2WhEIgt8dKK1JvtsjKj1rHF5aTZ_vvo79KCmvTUUoi3faZAJWq5clM90L3akIhMAhm0hYjDCQmh9l_mwihnV-t4pHQCm46NAU/s1600/ashloading5.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9hpO0-GwdPZx0H0jxR2snSP-4D3vuoDFEw5YZ9_ihA6MfeIJOQqKCImfIUs_q45K00yhl5w_AXBwp971cGFhJDH9LQV-K8rMSRlRZwG2xRdbr0h1U_bTkbuFNoi9r-bs-CH4EKGb0Kw/s1600/ashloading6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin9hpO0-GwdPZx0H0jxR2snSP-4D3vuoDFEw5YZ9_ihA6MfeIJOQqKCImfIUs_q45K00yhl5w_AXBwp971cGFhJDH9LQV-K8rMSRlRZwG2xRdbr0h1U_bTkbuFNoi9r-bs-CH4EKGb0Kw/s1600/ashloading6.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicc_2kUPLX1HuCo7qZX9ngm3WifiEpLMP3JzkIF6o9cil6i4QGqRgcLVah0ABf2tIJTZ-d9e3uFi-mFCJcXjtNSSsG0z_LeTy-y0oCha6L9d8fJKHgWVxqSffMt9-0BG8WXCYkASVLRXk/s1600/ashloading7.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicc_2kUPLX1HuCo7qZX9ngm3WifiEpLMP3JzkIF6o9cil6i4QGqRgcLVah0ABf2tIJTZ-d9e3uFi-mFCJcXjtNSSsG0z_LeTy-y0oCha6L9d8fJKHgWVxqSffMt9-0BG8WXCYkASVLRXk/s1600/ashloading7.gif" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_w2TwDitnF8ax1CV39mxZuvtWYoth80uivlvpMxYwUWMH5kQJTEKFc8jCR3jc3EtGG6Il-vr3bSCT9MY4Va-JRaIMnLXguW05ou1gfYeTrz_lFrHAbOhZ5NsR2kPnRdfNRSwHMeZ7BU/s1600/ashloading8.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_w2TwDitnF8ax1CV39mxZuvtWYoth80uivlvpMxYwUWMH5kQJTEKFc8jCR3jc3EtGG6Il-vr3bSCT9MY4Va-JRaIMnLXguW05ou1gfYeTrz_lFrHAbOhZ5NsR2kPnRdfNRSwHMeZ7BU/s1600/ashloading8.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />

Animated Loading Page Blog

Animated loading page blog adalah icon loading saat kita membuka suatu halaman blog. Cara memasangnya di template: Edit html > ...

Title Otomatis Label Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlK3ZQlBbkKgRLUfLx4DwcKVwKc52ZxOhv0zRMq__8qR2ZL6q5ji30XnFeznBOsnxZxs0WJtraqOidCpk3HS5cHGTdLtCYkIdFIFHL-7TnjUoKq0A4IJSfYXXMhbpPIzLZpWwFJXj-d0Y/s1600/title+otomatis+label+blog.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlK3ZQlBbkKgRLUfLx4DwcKVwKc52ZxOhv0zRMq__8qR2ZL6q5ji30XnFeznBOsnxZxs0WJtraqOidCpk3HS5cHGTdLtCYkIdFIFHL-7TnjUoKq0A4IJSfYXXMhbpPIzLZpWwFJXj-d0Y/s1600/title+otomatis+label+blog.gif" width="320" /></a></div>
<div style="text-align: center;">
<b>Live demo title otomatis label blog</b></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/title-otomatis-label-blog.html" target="_blank">Title otomatis label blog</a> berfungsi untuk optimasi SEO. Untuk lebih detailnya seperti gambar di atas.<br />
Cara membuatnya edit html > CTRL+F cari kode <span style="color: #0b5394;">expr:href='data:label.url'</span><br />
kemudian tambahkan kode <span style="color: #351c75;">expr:title='data:label.name'</span> di sampingnya.<br />
<br />
Contoh penambahan kode atribute title di widget label asli blogger<br />
<blockquote class="tr_bq">
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a></blockquote>
Untuk lebih jelasnya seperti gambar berikut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTaZWPAnesBjvgtQKE6b3IF5ZFO88E6II82wDawPxp5tT4Gqg3e9utWZ4xOut5Z7WIv8q2xxbMSSL73cuJBaShE-6-vvWJ00weQTnuOoJDcaubGInLr9lcormW2LAGZpP4hgxLaiG1qk/s1600/demoautotitlelabel.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTaZWPAnesBjvgtQKE6b3IF5ZFO88E6II82wDawPxp5tT4Gqg3e9utWZ4xOut5Z7WIv8q2xxbMSSL73cuJBaShE-6-vvWJ00weQTnuOoJDcaubGInLr9lcormW2LAGZpP4hgxLaiG1qk/s1600/demoautotitlelabel.gif" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Kode <span style="color: #0b5394;">expr:href='data:label.url' </span>di template blogger jumlahnya lebih dari 1, tambahkan kode <span style="color: #351c75;">expr:title='data:label.name'</span> semuanya.</div>
</div>

Title Otomatis Label Blog

Live demo title otomatis label blog Title otomatis label blog berfungsi untuk optimasi SEO. Untuk lebih detailnya seperti gambar di ...

Script NO Live Link Komentar Blog

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_gZIomuqwIv6rehE9EopDR8hEM8rpKLk8JDcO4ZwEw9zO0OYyPltYN6l26LzFSPptbARHuxWhvzHCLhEtkYMbeH_z5gT9bmqCiCRvAWHasFqrKtl0XIHnk5tqrbb3qy7MbmkMijW6eTE/s1600/no-live-link.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_gZIomuqwIv6rehE9EopDR8hEM8rpKLk8JDcO4ZwEw9zO0OYyPltYN6l26LzFSPptbARHuxWhvzHCLhEtkYMbeH_z5gT9bmqCiCRvAWHasFqrKtl0XIHnk5tqrbb3qy7MbmkMijW6eTE/s1600/no-live-link.JPG" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Dapet ilmu lagi, hasil dari blogwalking ninggalin jejak di komentar. </div>
<div style="text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/script-no-live-link-komentar-blog.html" target="_blank">No Live Link</a> pada komentar blog yaitu tidak di perbolehkan memasang link aktif pada komentar blog.</div>
<div style="text-align: left;">
Bermaksud untuk mencegah spam. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/script-no-live-link-komentar-blog.html" target="_blank">Cara memasang no live link di komentar blog</a></div>
<div style="text-align: left;">
1. login blog > template > edit html</div>
<div style="text-align: left;">
2. Tempatkan script berikut tepat di atas </body><br />
<blockquote class="tr_bq">
<script type='text/javascript'><br />function blockLinks(e,t){var n=document.getElementById(e),r=n.getElementsByTagName(t);for(var i=0;i<r.length;i++){if(r[i].innerHTML.indexOf("</a>")!==-1){r[i].innerHTML="<mark>No live link!!!</mark> Dilarang nyepam di sini!";r[i].className="spammer-detected"}}}blockLinks("comment-holder","p")<br /></script></blockquote>
</div>
3. save<br />
<br />
Semoga tutorial  blog tentang<a href="http://www.mig33eagle.com/2014/02/script-no-live-link-komentar-blog.html" target="_blank"> script no live link pada komentar blog</a> bermanfaat,<br />
dan selamat mencoba.<img alt="Kid animated gif" src="http://www.animated-gifs.eu/kids-16/0001.gif" />

Script NO Live Link Komentar Blog

Dapet ilmu lagi, hasil dari blogwalking ninggalin jejak di komentar. No Live Link pada komentar blog yaitu tidak di perbolehkan mem...

Totally Slider Recent Posts

<div class="separator" style="clear: both; text-align: center;">
<img alt="Recent Posts slider" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7JAivy0HFmtEcXBtPuid4vt1cfVW7Bphvh10ih6TIbmBYGs1od5YeXhjKo3zZ7EutnZOCCb5KAydyr0_LDTCCRT_bYeJ35jDi9MOQUwvkSfUyArsQHNCvtgGpOMUwNIKcE-Gu2eDeZqg/s1600/totallyslider.gif" title="Totally Slider Recent Posts" width="165" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
LIVE DEMO - Totally <a href="http://www.mig33eagle.com/2014/02/totally-slider-recent-posts.html" target="_blank">Slider Recent Posts</a></div>
<div style="text-align: center;">
<br /></div>
Slider yang akan saya bagi kali ini tentang totally <a href="http://www.mig33eagle.com/2014/02/totally-slider-recent-posts.html" target="_blank">slider recent posts</a>. Detailnya seperti gambar di atas. Di tempatkan pada sidebar blog, dan berikut caranya:<br />
<br />
Login blog > layout > add gadget > html/javascript > masukkan kode berikut dan simpan<br />
<blockquote class="tr_bq">
<style scoped="" type="text/css"><br />ul.ash-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}<br />ul.ash-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}<br />ul.ash-sidebar-slider,ul.ash-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}<br />ul.ash-sidebar-slider{width:100%;height:500px}<br />ul.ash-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}<br />ul.ash-sidebar-slider li:nth-child(1),ul.ash-sidebar-slider li:nth-child(2),ul.ash-sidebar-slider li:nth-child(3),ul.ash-sidebar-slider li:nth-child(4){display:block}<br />ul.ash-sidebar-slider img{border:0;width:100%;height:100%}<br />ul.ash-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}<br />ul.ash-sidebar-slider li:nth-child(2){left:0;top:50%}<br />ul.ash-sidebar-slider li:nth-child(3){left:50.5%;top:50%}<br />ul.ash-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}<br />ul.ash-sidebar-slider  .overlayx,ul.ash-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}<br />ul.ash-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0l0NwUn3EtbnImJUmwJbbKrlqQYq4bfh5xQ2aBdOSqiIZHqDNjtmogqIIpQ5PGkkqVSPIJ25nDr3mue-q_uPxX_NV819Ri5XEIx4jc3Xg0lYOdnSlg8kH4eIdx5T_XOLhz3HoMt-V0mw/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}<br />ul.ash-sidebar-slider .overlayx,ul.ash-sidebar-slider img{border:4px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}<br />ul.ash-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}<br />ul.ash-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}<br />ul.ash-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}<br />ul.ash-sidebar-slider li:nth-child(1) h4,ul.ash-sidebar-slider li:nth-child(4) h4{font-size:150%}<br />ul.ash-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}<br />ul.ash-sidebar-slider li:nth-child(2) .autname,ul.ash-sidebar-slider li:nth-child(3) .autname{display:none}<br />.buttons{margin:5px 0 0}<br />.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}<br />.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}<br />.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}<br /></style><br /><div id="featuredpostside"></div><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><br /><script src="http://yourjavascript.com/69433121312/ash-sidebar-slider.js" type="text/javascript"></script><br /><script type='text/javascript'><br />//<![CDATA[<br />FeaturedPostSide({<br />blogURL:"http://www.mig33eagle.com",<br />MaxPost:8,<br />idcontaint:"#featuredpostside",<br />ImageSize:300,<br />interval:5000,<br />autoplay:true,<br />tagName:false<br />});<br />//]]><br /></script></blockquote>
Demikian cara membuat <span style="text-align: center;"><a href="http://www.mig33eagle.com/2014/02/totally-slider-recent-posts.html" target="_blank">Slider Recent Posts</a>  semoga tutorial blog nya bermanfaat.</span><img alt="Funny smileys" src="http://www.picgifs.com/smileys/smileys-and-emoticons/funny/smileys-funny-504789.gif" />

Totally Slider Recent Posts

LIVE DEMO - Totally Slider Recent Posts Slider yang akan saya bagi kali ini tentang totally slider recent posts . Detailnya seperti ...

Label Cloud Warna Warni

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5GUEFlHsC4PA3sysix6aaW7IgjxppndKppT41H5nIVukorBuz6yoUDM9hhUGLq4ZWo_DqLJvgBJxM8bEhcgUfN4v8GUyuX-mHZY6EjGz2FXnrvgsityL0YvRaY9Xb1lKSYtPdUk98wk/s1600/label+warna+warni.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5GUEFlHsC4PA3sysix6aaW7IgjxppndKppT41H5nIVukorBuz6yoUDM9hhUGLq4ZWo_DqLJvgBJxM8bEhcgUfN4v8GUyuX-mHZY6EjGz2FXnrvgsityL0YvRaY9Xb1lKSYtPdUk98wk/s1600/label+warna+warni.gif" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://www.mig33eagle.com/2014/02/label-cloud-wana-warni.html" target="_blank">Label cloud warna warni</a> sangat menarik karena warnanya yang colorfull. <img alt="Flowers mini graphics" src="http://www.picgifs.com/mini-graphics/mini-graphics/flowers/mini-graphics-flowers-958275.gif" />Sering kita lihat banyak efek css untuk label cloud, but karena ukurannya jadi terlihat tebal dan ga cucok buat label yang banyak. Lebih indah jika warna hanya terdapat pada nama label.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Berikut <a href="http://www.mig33eagle.com/2014/02/label-cloud-wana-warni.html" target="_blank">cara membuat label cloud warna warni</a>:</div>
<div class="separator" style="clear: both; text-align: left;">
1. Login blog > temlate > edit html</div>
<div class="separator" style="clear: both; text-align: left;">
2. ctrl+f cari kode<span style="color: yellow;"> ]]></b:skin></span></div>
<div style="text-align: left;">
3. Letakkan kode css label di atas <span style="color: yellow;">]]></b:skin></span></div>
<blockquote class="tr_bq">
.label-size-1 a {<br />
font-size: 13px;<br />
text-decoration: none;<br />
color:#B3FA9D;<br />
}<br />
.label-size-2 a {<br />
font-size: 15px;<br />
text-decoration: none;<br />
color:#F79DFA;<br />
}<br />
.label-size-3 a {<br />
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;<br />
color:#FAD29D;<br />
}<br />
.label-size-4 a {<br />
font-size: 18px;<br />
text-decoration: none;<br />
color:#9DFAE9;<br />
}<br />
.label-size-5 a {<br />
font-size: 23px;<br />
text-decoration: none;<br />
color:#ECFA9D;<br />
}<br />
.label-size-1 a:hover,<br />
.label-size-2 a:hover,<br />
.label-size-3 a:hover,<br />
.label-size-4 a:hover,<br />
.label-size-5 a:hover { text-decoration:underline;}</blockquote>
<div style="text-align: left;">
kode warna dapa di ubah sesuai keinginan.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
4. Simpan template</div>
<div style="text-align: left;">
5. pada layout label di setting seperti berikut</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY437R8SvjSWtL9ClkUaagLPXRKVbLEQyyI0g8XSS8fwFxukr9AWZSauB3neupZuf43B6XFt5m3TwuphsQy0dGqvxGdMJ3c00IWumMN0fC7llr9psbfvEPcs9RkyH0-B0SvxlHhinMG0/s1600/labelcloud.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY437R8SvjSWtL9ClkUaagLPXRKVbLEQyyI0g8XSS8fwFxukr9AWZSauB3neupZuf43B6XFt5m3TwuphsQy0dGqvxGdMJ3c00IWumMN0fC7llr9psbfvEPcs9RkyH0-B0SvxlHhinMG0/s1600/labelcloud.gif" width="320" /></a></div>
<div style="text-align: left;">
 jika tidak work saat anda selesai melakukan langkah di atas, cek css label.</div>
<div style="text-align: left;">
ctrl + F cari kode css label yang berada di atas <span style="color: yellow;">]]></b:skin>, </span>misal anda menemukan kode cs label:<br />
<blockquote class="tr_bq">
.label-size a{background:#222;border:1px solid #000;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;color:#fff;float:left;font-size:12px;text-decoration:none;margin:0 5px 5px 0;padding:10px}<br />
.label-size a:hover{background-color:#111;text-decoration:none;transition:all .2s ease-out 0s}</blockquote>
<div>
delete aja kode css label yang lama, kemudian simpan lagi. </div>
<div>
Demikian tutorial blog <a href="http://www.mig33eagle.com/2014/02/label-cloud-wana-warni.html" target="_blank">cara membuat label cloud warna warni</a>. Semoga bermanfaat.<img alt="Flowers mini graphics" src="http://www.picgifs.com/mini-graphics/mini-graphics/flowers/mini-graphics-flowers-436954.gif" /></div>
</div>

Label Cloud Warna Warni

Label cloud warna warni sangat menarik karena warnanya yang colorfull. Sering kita lihat banyak efek css untuk label cloud, but karen...

MIG33 EAGLE