Belajar Desain Web/ Blog Sendiri

Total Tayangan Halaman

Admin
P R O F I L E P H O T O V I D E O F R I E N D P E S A N
L A B E L E N T R I G A L L E R Y N E W S W I D G E T
H O M E

Senin, 03 Oktober 2011

Code Blogger Top Comment







<script type="text/javascript">

function pipeCallback(obj) {

document.write("<ul>");

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write("</ul>");

}

</script>

<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&

_id=33e2eb4dc25c7c21b9c586e11d2bc904&url=http%3A%2F%2FBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>





Code Keterangan HTML/ XML


Code Blogger Keterangan XML

<b:includable>


<!--


Harus Ditaro Di dalam Tag b:includable


-->


</b:includable>





Code Background Circle

ISI






<style type="text/css">

#circle {

 border-radius: 36px; /* half of button size + padding */

 -moz-border-radius: 36px;

 height: 60px;

 width: 60px;

 border: 2px solid #ccc;

 left: 50%;

 background: -webkit-gradient(linear, left top, left bottom, from(#f53e0c), to(#ffbaa8));

 background: -moz-linear-gradient(top, #f53e0c, #ffbaa8);

 text-align: center;padding: 5px;

}

</style>

<div id="circle">

ISI</div>







Code Blogger Box Widget

<b:section class='sidebar' id='sidebar' preferred='yes'>







</b:section>





Senin, 23 Mei 2011

Code Teks Mouse





<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #CCCC33; /* warna huruf */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>


<script type='text/javascript'>
//<![CDATA[
;(function(){
var msg = " webdesainonline "; /* tulisan yang akan muncul */
var size =15; /* ukuran huruf */
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;


////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>





Code Background Radius



ISI
ISI
ISI
ISI
ISI
ISI




<style type="text/css">

#Example_A {

    height: 65px;

    width:160px;

    -moz-border-radius-bottomright: 50px;

    border-bottom-right-radius: 50px;

    background-color: #00FF00;

    text-align: center;

}



#Example_B {

    height: 65px;

    width:160px;

    -moz-border-radius-bottomright: 50px 25px;

    border-bottom-right-radius: 50px 25px;

    background-color: #00FF00;

    text-align: center;

}



#Example_C {

    height: 65px;

    width:160px;

    -moz-border-radius-bottomright: 25px 50px;

    border-bottom-right-radius: 25px 50px;

    background-color: #00FF00;

}



#Example_D {

    height: 5em;

    width: 12em;

    -moz-border-radius: 1em 4em 1em 4em;

    border-radius: 1em 4em 1em 4em;

    background-color: #00FF00;

    text-align: center;

}



#Example_E {

    height: 65px;

    width:160px;

    -moz-border-radius: 25px 10px / 10px 25px;

    border-radius: 25px 10px / 10px 25px;

    background-color: #00FF00;

    text-align: center;

}



#Example_F {

    height: 70px;

    width: 70px;

    -moz-border-radius: 35px;

    border-radius: 35px;

    background-color: #00FF00;

    text-align: center;

}

</style>

<table width="200px" border="0" cellspacing="0" cellpadding="5">

  <tr>

    <td><div id="Example_A">ISI</div></td>

    <td><div id="Example_B">ISI</div></td>

    <td><div id="Example_C">ISI</div></td>

  </tr>

  <tr>

    <td><div id="Example_D">ISI</div></td>

    <td><div id="Example_E">ISI</div></td>

    <td><div id="Example_F">ISI</div></td>

  </tr>

</table>





Code Table Warna



BARIS 1


KOLOM 1

KOLOM 2




<style type="text/css">



.indeks {

 background-color: #FFFFFF;

 width: 100%;

 margin-right: auto;

 margin-left: auto;

 text-align: center;

}

td.off {

 background-color: #FF0000;

}

td.on {

 background-color: #00FF33;

}

tr.off {

 background-color: #FF00FF;

}

tr.on {

 background-color: #0099FF;

}




</style>




<div class="indeks">

<table  style=" padding:5px"width="100%"  border="1px">

<tr class="T off" onmouseover="this.className=' T on'" onmouseout="this.className='T off'"> <td colspan="2"><center>BARIS 1

</center></td></tr>

<tr> <td class="T off" onmouseover="this.className='T on'" onmouseout="this.className='T off'"><center>KOLOM 1</center></td> <td class="T off" onmouseover="this.className='T on'" onmouseout="this.className='T off'"><center>KOLOM 2</center></td> </tr>

</table>

</div>





Code Background Sudut



ISI




<style type="text/css">

#sudut {

  border-radius: 16px; /* half of button size + padding */

  -moz-border-radius: 16px;

  height: 20px;

  background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));

  background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);

padding: 5px;

text-align: center;

}

</style>

<div id="sudut">

ISI</div>







Kamis, 12 Mei 2011

Code Background Shadow


A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R



<style type="text/css">
#Example_A {
    -moz-box-shadow: -5px -5px #888;
    -webkit-box-shadow: -5px -5px #888;
    box-shadow: -5px -5px #888;
    background-color: #00FF00;
    text-align: center;
    width: 50px;
}
#Example_B {
    -moz-box-shadow: -5px -5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px #888;
    box-shadow: -5px -5px 5px #888;
    background-color: #00FF00;
    text-align: center;
    width: 50px;
}
#Example_C {
    -moz-box-shadow: -5px -5px 0 5px #888;
    -webkit-box-shadow: -5px -5px 0 5px#888;
    box-shadow: -5px -5px 0 5px #888;
    background-color: #00FF00;
    text-align: center;
    width: 50px;
}
#Example_D {
    -moz-box-shadow: -5px -5px 5px 5px #888;
    -webkit-box-shadow: -5px -5px 5px 5px#888;
    box-shadow: -5px -5px 5px 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_E {
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_F {
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_G {
    -moz-box-shadow: inset -5px -5px #888;
    -webkit-box-shadow: inset -5px -5px #888;
    box-shadow: inset -5px -5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_H {
    -moz-box-shadow: inset -5px -5px 5px #888;
    -webkit-box-shadow: inset -5px -5px 5px #888;
    box-shadow: inset -5px -5px 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_I {
    -moz-box-shadow: inset -5px -5px 0 5px #888;
    -webkit-box-shadow: inset -5px -5px 0 5px#888;
    box-shadow: inset -5px -5px 0 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_J {
    -moz-box-shadow: inset -5px -5px 5px 5px #888;
    -webkit-box-shadow: inset -5px -5px 5px 5px#888;
    box-shadow: inset -5px -5px 5px 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_K {
    -moz-box-shadow: inset 0 0 5px #888;
    -webkit-box-shadow: inset 0 0 5px#888;
    box-shadow: inner 0 0 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_L {
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px#888;
    box-shadow: inset 0 0 5px 5px #888;
    background-color: #00FF00;
    text-align: center;
}
#Example_M {
    -moz-box-shadow: 5px 5px rgb(0,0,0);
    -webkit-box-shadow: 5px 5px rgb(0,0,0);
    box-shadow: 5px 5px rgb(0,0,0);
    background-color: #00FF00;
    text-align: center;
}
#Example_N {
    -moz-box-shadow: 5px 5px rgba(0,0,0,0.7);
    -webkit-box-shadow: 5px 5px rgba(0,0,0,0.7);
    box-shadow: 5px 5px rgba(0,0,0,0.7);
    background-color: #00FF00;
    text-align: center;
}
#Example_O {
    -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
    box-shadow: 5px 5px rgba(0,0,0,0.5);
    background-color: #00FF00;
    text-align: center;
}
#Example_P {
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px black;
    -webkit-box-shadow: 5px 5px black;
    box-shadow: 5px 5px black;
    background-color: #00FF00;
    text-align: center;
}
#Example_Q {
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    background-color: #00FF00;
    text-align: center;
}
#Example_R {
    -moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
    -webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
    box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
    background-color: #FF00FF;
    text-align: center;
}
</style>
<table width="200" border="1" cellspacing="0" cellpadding="20" align="center">
  <tr>
    <td ><div id="Example_A">A </div>
    </td>
    <td><div id="Example_B">B </div>
    </td>
    <td><div id="Example_C">C </div>
    </td>
  </tr>
  <tr>
    <td><div id="Example_D">D </div>
    </td>
    <td><div id="Example_E">E</div>
    </td>
    <td><div id="Example_F">F </div>
    </td>
  </tr>
  <tr>
    <td><div id="Example_G">G</div>
    </td>
    <td><div id="Example_H">H </div>
    </td>
    <td><div id="Example_I">I </div>
    </td>
  </tr>
  <tr>
    <td><div id="Example_J">J</div>
    </td>
    <td><div id="Example_K">K</div>
    </td>
    <td><div id="Example_L">L</div>
    </td>
  </tr>
  <tr>
    <td><div id="Example_M">M</div>
    </td>
    <td><div id="Example_N">N</div>
    </td>
    <td><div id="Example_O">O</div>
    </td>
  </tr>
    <tr>
    <td><div id="Example_P">P</div>
    </td>
    <td><div id="Example_Q">Q</div>
    </td>
    <td><div id="Example_R">R</div>
    </td>
  </tr>
</table>


Code Background Opacity

ISI
ISI
ISI
ISI
ISI

OR

ISI
ISI
ISI
ISI
ISI


<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">ISI</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">ISI</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">ISI</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">ISI</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">ISI</div>

OR

<div style=" background: rgb(243, 191, 189) ; ">ISI</div>
<div style=" background: rgb(246, 143, 142) ; ">ISI</div>
<div style=" background: rgb(249, 95 , 94)  ; ">ISI</div>
<div style=" background: rgb(252, 47, 47)   ; ">ISI</div>
<div style=" background: rgb(255, 0, 0)     ; ">ISI</div>



Code Background Gradients


GRADIENTS 1

GRADIENTS 2


<style type="text/css">

.GRADIENTS1 {
    background: -moz-linear-gradient(0% 0% 270deg,#00abeb, white, white 50%,#66cc00 51%,white 100%);
    background: -webkit-gradient(linear, left top, left bottom,
                       from(#00abeb), to(white),
                       color-stop(0.5, white), color-stop(0.5, #66cc00));
    height: 100px;
    width: 100%;
    text-align: center;
}
.GRADIENTS2{
    background: -webkit-gradient(radial, 430 50, 0, 430 50, 506, from(red), to(#000));
    background-image: -moz-radial-gradient(430px 50px 45deg, circle cover, red 0%, black 100%);
    text-align: center;
}


</style>


<div class="GRADIENTS1"> GRADIENTS 1 </div>
<div class="GRADIENTS2"> GRADIENTS 2 </div>



Code XML Markup











Article Title



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Article Title



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.






 <style>
    .b {
    width: 400px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
    section { display: block; }
    section#articles { width: 240px; float: left; padding: 10px; background-color: #fbf0cc; }
    article > header { text-decoration: underline; margin-bottom: 10px; }
    aside { float: left; width: 100px; padding: 10px; }
    footer { overflow: hidden; clear: both; text-align: center; padding: 20px; }
    nav li { float: left; width: 100px; text-align:center; padding: 10px; color: #fff; }
    nav ul { list-style: none; overflow: hidden; padding: 0; margin: 0; background-color: #FFFF00; }
    a { color: #65ac1c; }
    nav li a {
    color: #FF0000;
}
  </style>
<div class="b" style="font: 75% Lucida Grande, Trebuchet MS">
  <header>
    <hgroup>
      <h1><nav></nav>
      </h1>
    </hgroup>
  </header>
<nav><ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a></li>
        <li><a href="#">About</a></li>
            </ul>
    </nav>
    <section id="articles">
      <article>
        <header>
          <h2><a href="#">Article Title</a></h2>
        </header>
        <section>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
      </article>
      <article>
        <header>
          <h2><a href="#">Article Title</a></h2>
        </header>
        <section>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </section>
      </article>
    </section>
    <aside>
      <h2>Top links</h2>
      <ul>
        <li><a ref="external" href="#">Link 1</a></li>
        <li><a ref="external" href="#">Link 2</a></li>
        <li><a ref="external" href="#">Link 3</a></li>
        <li><a ref="external" href="#">Link 4</a></li>
        <li><a ref="external" href="#">Link 5</a></li>
      </ul>
    </aside>

    <footer>
      Footer content
    </footer>



Code Background Kotak


ISI


<style type="text/css">
#kotak {
 border-radius: 3px;
 -moz-border-radius: 3px;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
 background: -moz-linear-gradient(top, #fff, #ddd);
 border: 1px solid #bbb;
 text-align: center;
 padding: 5px;
}
</style>
<div id="kotak">
ISI</div>




Code Keterangan CSS

<b:skin><![CDATA[

/* --------------------------------------
KETERANGAN
-----------------------------------------*/

/*KETERANGAN*/

]]></b:skin>

or

<style type="text/css">

/* --------------------------------------
KETERANGAN
-----------------------------------------*/

/*KETERANGAN*/

</style>




Code Blogger Header

<b:section class='sidebar1' id='sidebar1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='header' type='Header'>

<b:includable id='title' >
<!--judul-->
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
   <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

<b:includable id='description'>
<!--deskripsi-->
   <div id='description'><span><data:description/></span></div>
</b:includable>

<b:includable id='main'>
<!--image-->
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
      </div>
    <b:else/>
      <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>

</b:widget>
</b:section>




Code Blogger Content

             <b:section class='sidebarcontent' id='sidebarcontent'  showaddelement='yes'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/> &#187;</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&#171; <data:olderPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

</b:widget>
</b:section> 




Rabu, 11 Mei 2011

Code Teks Marquee

Background

Kedap-kedip

Panjang slide

Tinggi slide

Horizontal center

Vertikal center

Dari kanan

Dari kiri

Bolak-balik horizonta


Bolak-balik vertikal


Akan berhenti 1x

Akan berhenti 2x

cepat

Akan hilang


Disentuh berhenti


Bounce

<p style="background-color:#66FF99">
<marquee bgcolor="#FFFF00">Background</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrolldelay="500">Kedap-kedip</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee width=20%>Panjang slide</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee height=50>Tinggi slide</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee  hspace="100px">Horizontal center</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee  vspace="10px" >Vertikal center</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction=left>Dari kanan</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction=right>Dari kiri</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee behavior=alternate>Bolak-balik horizonta</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction="up" behavior="alternate" height="100px" scrolldelay="10" hspace="200"><center>
Bolak-balik vertikal</center></marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee behavior=slide>Akan berhenti 1x</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee loop="2" behavior="slide"  scrolldelay="50" >Akan berhenti 2x</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrollamount=50>cepat</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee loop=1 >Akan hilang</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee hspace="200" behavior="alternate" direction="up" onmouseover="this.stop()"height="100" onmouseout="this.start()" ><center>
Disentuh berhenti</center></marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrolldelay="10" behavior="alternate" direction="up" scrollamount="2" height="100px"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Bounce</marquee></marquee>



Code Blogger Footer

<b:section class='sidebarfooter' id='sidebarfooter'  showaddelement='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>


<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>


</b:widget>
</b:section>       



Code Blogger Entri Dinamis

    <div class='post-header-line-1'/>
    <div class='post-body entry-content'>
<p><script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 0px 0px;margin-bottom:0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
   
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!--isi post -->
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<!--link isi post-->
<div><a expr:href='data:post.url'>Selengkapnya &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p><br/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>




Code Blogger Hidden Navbar

<b:skin><![CDATA[
  
  #navbar-iframe {display: none;}
  
  
   ]]></b:skin>




Code Blogger Kerangka

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
        <data:blog.title/>
    <b:else/>
        <data:blog.pageName/> | <data:blog.title/>
    </b:if>
</title>

  <b:include data='blog' name='all-head-content'/>
   <b:skin><![CDATA[
 
   ]]></b:skin>
 
   </head>
<body>

       <b:section class='sidebar' id='sidebar' preferred='yes'>



</b:section>


</body>
</html>



Selasa, 10 Mei 2011

INDOSIAR & SCTV


Code Teks/ Kolom Berbayang





shadow-example


<style type="text/css">
#shadow-example {
  text-shadow: rgba(64, 64, 64, 0.496094) 6px 7px 5px;
  -webkit-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
  -moz-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 300px;
  height: 200px;
  padding: 50px;
  font-size: 35px;
}
</style>
<br />
<br />
<center>
<div id="shadow-example">
shadow-example </div>
</center>


TEMPLATE INI DIJUAL. Diberdayakan oleh Blogger.
PASANG BANNER DISINI
Powered By Blogger