Cara Membuat Baner Iklan Unik 125X125 Dengan CSS3

Unknown
Askum all....!!!
Kesempatan kali ini c.arjem mencoba untuk menjelaskan bagaimana cara membuat baner iklan 125X125dengan css3 + effect transition +transformasi, baner iklan ini memang unik selain bisa berubah bentuk, baner iklan ini bisa berjalan dan berputar untuk lebih jelsnya sobat bisa melihat gambar di bawah ini.atau arahkan kursor pada baner iklan yang ada pada blog ini,


      cara menerapkannya iuti lngkah-langkah berikut ini
  • Login ke blog sobat
  • Pada area dashboard Pilih template >>Edit HTML
  • Cari kode ]]></b:skin> tekan ctrl +f untuk mempermudah pencarian
  • Copy kode di bawah ini &letakan tepat di atas kode ]]></b:skin>
  • Selanjut simpan template
#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px; background: blue; -webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s; left: 100px; right: 100px; background: red;
-webkit-transform: rotate(360deg);
}
  • Langkah berikunya silahkan sabat klik Tata letak  >> add gadget >> pilih HTML / javascript
  • Kemudian copy script di bawah ini dan pastekan pada kolom gadget yang baru sobat tambahkan tadi
<div id="kotak-iklan-125x125">
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
</div>

NB: silahkan sobat ganti script yang berwarna hijau di atas dengan URL iklan sobat

>>more>>
Tidak ada komentar:

Membuat Icon Judul Artikel Bisa Muncul & Menghilang

Unknown
Askum all....
Kali ini C.arjem mau menjelaskan & berbagi tentang bagaimana cara membuat icon di samping judul postingam yang sanggup muncul saat di sorot cursor & menghilang saat cursor tidak lagi di atasnya , gimana penasaran kan ?? hehehehe.... tenang aja sobat C.arjem tak akan membiarkan hati sobat bertanya-tanya dan  tutorial ini akan menjadi jawabanya.


  • Pertama login ke blog sobat
  • Ke dua masuk rancangan Edit HTML
  • Ke tiga cari kode  ]]></b:skin> tekan ctrl+f untuk mepermudah pencarian
  • Ke empat copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>  .
h3.post-title{
       padding-left:15px;
       padding-right:8px;
       display:inline-block;
       background-position:4px 6px;
       background-size:5px 5px;
       text-decoration:none;
       color:#C60000;
       font-weight:500;
       text-shadow:1px 1px 1px #000000;
       transition:0.8s ease-in;
       -o-transition:0.8s ease;-in;
       -moz-transition:0.8s ease-in;
       -webkit-transition:0.8s ease-in;
       -ms-transition:0.8s ease-in;
}
h3.post-title:hover{
background:url(http://i1279.photobucket.com/albums/y529/coretan_arjem1/loading_zps0197b318.gif) no-repeat;
       background-position:1px 2px;
       background-size:15px 15px;
       color:#F00000;
       padding-left:22px;
       padding-right:6px;
}
  • Yang terahir save template danlihat hasilnya  ( semoga bermanfaat )
>>more>>
Tidak ada komentar:

Memasan Sosial Netwok / Jejaring Pada Blog

Unknown
Tampilan blog yang cantik serta pengunjung yang ramai adalah suatu impian yang di dambakan oleh stiap blogger, tool ndaaaak...?? hehehe .sama halnya dengan sosial network / jejaring yang mempunyai pengaruh besar dalam blog kita setidaknya blog sobat bisa terkenal melalui sosial network tersebuat, ok bagi sobat yang ingin memasang silahkan ikuti langkah-langkah berikut


1- Login ke blog sobat
2- Masuk page element/ tata letak
3- Add gadget pilih HTML/javascript
4- Copy paste script di bawah ini
<style>#NBT-SNS {width: auto;margin-top: 0px 0px 0px 0px;padding-right : 0px 0px 0px 0px;}#NBT-SNS li {cursor: pointer;height: 40px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('http://i1279.photobucket.com/albums/y529/coretan_arjem1/aa_zpsbe52250e.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 35px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 0px 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .30s ease-in-out, background-color .30s ease-in-out;-moz-transition: width .30s ease-in-out, background-color .30s ease-in-out;-o-transition: width .30s ease-in-out, background-color .30s ease-in-out;transition: width .30s ease-in-out, background-color .30s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 68px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width:  auto;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -1px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS"><li><a href="https://www.facebook.com/coretan.arjem?ref=tn_tnmn" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/Coretan_arjem" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/u/0/107642724862044125057" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://pinterest.com/coretanarjem/" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="https://www.youtube.com/dashboard" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/coretanarjem" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul><div style='clear: both;'></div>
5- Ganti tulisan yang berwana biru dengan URL soba
6- Yang terahir save template dan lihat hasilnya

>>more>>
2 komentar:

Membuat Effect Berubah Bentuk Pada Gambar Post

Unknown
Hai semuanya ......!!! kali ini saya akan berbagi tentang bagaimana cara membuat gambar postingan berubah bentuk saat di sorot kursor, dengan menambahkan sedikit kode css sobat biasa membuat perubahan yang cukup menarik, bagi yang ingin mencoba silahkan ikuti tutorial berikut ini:
- Pertama login ke blog sobat
- Kedua masuk rancangan Edit HTML
- Ketiga cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
- Setelah ketemu copas kode di bawah ini & letakkan tepat di atas kode ]]></b:skin>
.post img{padding:4px  ;margin:0px 0px 0px 0px;margin-top:0px 0px 0px 0px;border-radius:50px 2px 50px 2px;-webkit-transition: all 0.9s ease;-moz-transition: all 0.9s ease;transition: all 0.9s ease;border: 1px solid #BA064B;overflow: hidden;}.post-body img:hover{border-radius:2px 50px 2px 50px;background: -moz-linear-gradient(top, #BA064B 1%, #BA064B 50%);}

  sekian tutorial dari saya semoga bermanfaat

>>more>>
3 komentar:

Cara Membuat Kembang Api Pada Kursor Blog

Unknown
Bagi seorang blogger memang tak ada bosennya untuk memberikan tampilan yang terbaik bagi pengunjungnya sama halnya dengan artikel ini yang akan saya bagikan pada sobat semua yaitu bagaimana cara membuat kursor blog bertabur kembang api ,langsung saja menuju ke TKP


1. Login ke blog sobat
2. Masuk tata letak
3. Add gadget pilih HTML javascript
4. COPAS script di bawah ini

<script>
var xLayerNo=0;
function xLayer(newLayer, x, y, w)
{
if(x==null)x=0;
if(y==null)y=0;
if(w==null)w=100;
  if(document.layers)
{
if(typeof newLayer == "string")
{
this.layer=new Layer(w);
this.layer.document.open();
this.layer.document.write(newLayer);
this.layer.document.close();
}
else
this.layer=newLayer;
this.layer.moveTo(x,y);
this.images=this.layer.document.images;
  }
else
if(document.all)
{
var Xname;
if(typeof newLayer == "string")
{
xName="xLayer" + xLayerNo++;
  var txt =   "<DIV ID='" + xName
+ "' STYLE=\"position:absolute;"
+ "left:"  + x + ";"
+ "top:"   + y + ";"
+ "width:" + w + ";"
+ "visibility:hidden\">"
+ newLayer
  + "</DIV>";
document.body.insertAdjacentHTML("BeforeEnd",txt);
}
else
xName=newLayer.id;
this.content = document.all[xName];
this.layer   = document.all[xName].style;
this.images  = document.images;
}
else
if (document.getElementById)
{
/*** Add Netscape 6.0 support (NOTE: This may work in I.E. 5+. Will have to test***/
var newDiv;
if(typeof newLayer == "string")
{
var xName="xLayer" + xLayerNo++;
var txt = ""
+ "position:absolute;"
+ "left:"  + x + "px;"
+ "top:"   + y + "px;"
+ "width:" + w + "px;"
+ "visibility:hidden";
var newRange   = document.createRange();
newDiv = document.createElement("DIV");
newDiv.setAttribute("style",txt);
newDiv.setAttribute("id", xName);
document.body.appendChild(newDiv);
newRange.setStartBefore(newDiv);
strFrag = newRange.createContextualFragment(newLayer); newDiv.appendChild(strFrag);
}
else
newDiv = newLayer;
this.content = newDiv; this.layer   = newDiv.style;
this.images  = document.images;
}
return(this);
}
function xLayerFromObj(theObj)
{
if(document.layers)
return(new xLayer(document.layers[theObj]));
else
if(document.all)
return(new xLayer(document.all[theObj]));
else
if(document.getElementById)
return(new xLayer(document.getElementById(theObj)));
}
if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{
var eventmasks = {
      onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
      onclick:Event.CLICK, ondblclick:Event.DBLCLICK,
      ondragdrop:Event.DRAGDROP, onerror:Event.ERROR,
      onfocus:Event.FOCUS, onkeydown:Event.KEYDOWN,
      onkeypress:Event.KEYPRESS, onkeyup:Event.KEYUP, onload:Event.LOAD,
      onmousedown:Event.MOUSEDOWN, onmousemove:Event.MOUSEMOVE,
      onmouseout:Event.MOUSEOUT, onmouseover:Event.MOUSEOVER,
      onmouseup:Event.MOUSEUP, onmove:Event.MOVE, onreset:Event.RESET,
      onresize:Event.RESIZE, onselect:Event.SELECT, onsubmit:Event.SUBMIT,
      onunload:Event.UNLOAD
};
/**** START prototypes for NS ***/
xLayer.prototype.moveTo = function(x,y) { this.layer.moveTo(x,y); }
xLayer.prototype.moveBy = function(x,y) { this.layer.moveBy(x,y); }
xLayer.prototype.show = function() { this.layer.visibility = "show"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hide"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.bgColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.background.src = image; }
xLayer.prototype.getX = function() { return this.layer.left; }
xLayer.prototype.getY = function() { return this.layer.top; }
xLayer.prototype.getWidth = function() { return this.layer.width; }
xLayer.prototype.getHeight = function() { return this.layer.height; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "show"; }
xLayer.prototype.setContent   = function(xHtml)
{
this.layer.document.open();
this.layer.document.write(xHtml);
this.layer.document.close();
}
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip.top =y1;
this.layer.clip.left =x1;
this.layer.clip.bottom =y2;
this.layer.clip.right =x2;
}
xLayer.prototype.addEventHandler = function(eventname, handler)
{
        this.layer.captureEvents(eventmasks[eventname]);
        var xl = this;
        this.layer[eventname] = function(event) {
            return handler(xl, event.type, event.x, event.y,
                           event.which, event.which,
                           ((event.modifiers & Event.SHIFT_MASK) != 0),
                           ((event.modifiers & Event.CTRL_MASK) != 0),
                           ((event.modifiers & Event.ALT_MASK) != 0));
        }
}
/*** END NS ***/
}
else if(document.all)
{
/*** START prototypes for IE ***/
xLayer.prototype.moveTo = function(x,y)
{
this.layer.pixelLeft = x;
this.layer.pixelTop = y;
}
xLayer.prototype.moveBy = function(x,y)
{
this.layer.pixelLeft += x;
this.layer.pixelTop += y;
}
xLayer.prototype.show = function() { this.layer.visibility = "visible"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.setContent   = function(xHtml) { this.content.innerHTML=xHtml; }
xLayer.prototype.getX = function() { return this.layer.pixelLeft; }
xLayer.prototype.getY = function() { return this.layer.pixelTop; }
xLayer.prototype.getWidth = function() { return this.layer.pixelWidth; }
xLayer.prototype.getHeight = function() { return this.layer.pixelHeight; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
this.layer.pixelWidth=x2;
this.layer.pixelHeight=y2;
this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
var xl = this;
this.content[eventName] = function()
{
            var e = window.event;
            e.cancelBubble = true;
            return handler(xl, e.type, e.x, e.y,
                           e.button, e.keyCode,
                           e.shiftKey, e.ctrlKey, e.altKey);
        }
}
 /*** END IE ***/
}
else if (document.getElementById)
{
/*** W3C (NS 6) ***/
xLayer.prototype.moveTo = function(x,y)
{
this.layer.left = x+"px";
this.layer.top = y+"px";
}
xLayer.prototype.moveBy = function(x,y) { this.moveTo(this.getX()+x, this.getY()+y); }
xLayer.prototype.show = function() { this.layer.visibility = "visible"; }
xLayer.prototype.hide = function() { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.getX = function() { return parseInt(this.layer.left); }
xLayer.prototype.getY = function() { return parseInt(this.layer.top); }
xLayer.prototype.getWidth = function() { return parseInt(this.layer.width); }
xLayer.prototype.getHeight = function() { return parseInt(this.layer.height); }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip = function(x1,y1, x2,y2)
{
this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
this.layer.width=x2 + "px";
this.layer.height=y2+ "px";
this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
var xl = this;
this.content[eventName] = function(e)
{
            e.cancelBubble = true;
            return handler(xl, e.type, e.pageX, e.pageY,
                           e.button, e.keyCode,
                           e.shiftKey, e.ctrlKey, e.altKey);
}
}
xLayer.prototype.setContent   = function(xHtml)
{
var newRange   = document.createRange();
newRange.setStartBefore(this.content);
while (this.content.hasChildNodes())
this.content.removeChild(this.content.lastChild);
var strFrag    = newRange.createContextualFragment(xHtml); this.content.appendChild(strFrag);
}
} else
{
xLayer.prototype.moveTo = function(x,y) {  }
xLayer.prototype.moveBy = function(x,y) {  }
xLayer.prototype.show = function() {  }
xLayer.prototype.hide = function() {  }
xLayer.prototype.setzIndex = function(z) {  }
xLayer.prototype.setBgColor = function(color) {  }
xLayer.prototype.setBgImage = function(image) {  }
xLayer.prototype.getX = function() { return 0; }
xLayer.prototype.getY = function() { return 0; }
xLayer.prototype.getWidth = function() { return 0; }
xLayer.prototype.getHeight = function() { return 0; }
xLayer.prototype.getzIndex = function() { return 0; }
xLayer.prototype.isVisible = function() { return false; }
xlayer.prototype.setContent   = function(xHtml) { }
}
</script>
<script>
function xMouse()
{ this.X = 0;
this.Y = 0;
if(navigator.appName.indexOf("Netscape") != -1)
{
this.getMouseXY = function (evnt)
{
document.ml.X=evnt.pageX;
document.ml.Y=evnt.pageY;
}
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = this.getMouseXY;
document.ml = this;
}
else if(document.all)
{
if(navigator.appVersion.indexOf("MSIE 5.") != -1)
this.getMouseXY = function ()
{
document.ml.X = event.x + document.body.scrollLeft;
document.ml.Y = event.y + document.body.scrollTop;
}
else
this.getMouseXY = function ()
{
document.ml.X = event.x;
document.ml.Y = event.y;
}
document.ml = this;
document.onmousemove = this.getMouseXY;
}
return(this);

}
</script>
<script>
var m = new xMouse();
var oneDeg=(2*Math.PI)/360;


/*** verander hieronder de variabelen voor een ander effect ***/
var Radius = 1;
var NumStars=64;
var NumSteps=5;
var StepAngle=(11.25)*oneDeg;
var StarObject=new Array();
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
return(parseInt(hex,16))
}
function CreateStar()
{
this.layer = new xLayer("X", 100, 100, 10);
this.currAngle = 0;
this.step = 0;
this.x = 100;
this.y = 100;
return (this);
}
/*** Choose a random pinwheel configuration ***/
function restart()
{
var num=Math.floor(Math.random()*4);
for(i=0;i<NumStars;i++)
StarObject[i].layer.hide();
if(num==0){
Radius = 1;
NumStars=32;
NumSteps=16;
StepAngle=(25)*oneDeg;
}


for(i=0 ; i<NumStars; i++)
{
var s=StarObject[i];
s.currAngle = (StepAngle*i);
s.step = (i%NumSteps);
s.x=m.X;
s.y=m.Y;
}
for(i=0;i<NumStars;i++)
StarObject[i].layer.show();
}
function start()
{
for(i=0 ; i<NumStars; i++)
{
StarObject[i]=new CreateStar();
StarObject[i].currAngle = (StepAngle*i);
StarObject[i].step = (i%NumSteps);
StarObject[i].layer.clip(0,0,2,2);
StarObject[i].layer.setBgColor("red");
}
for(i=0 ; i<NumStars ; i++)
StarObject[i].layer.show();
/*** Remove this if you only 1 type of pinwheel ***/
Rotate();
}
function changeColour(s)
{
var colour="";
r2= Math.floor(Math.random()*2)*255;
g2= Math.floor(Math.random()*2)*255;
b2= Math.floor(Math.random()*2)*255;
if(r2==0 && g2==0 && b2==0)
r2=255;
colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
s.layer.setBgColor(colour);
s.x=m.X;
s.y=m.Y;
}
function Rotate()
{
var x;
var y;
for (i = 0 ; i < NumStars ; i++ ) {
var s=StarObject[i];
if(s.step==0)
changeColour(s);
var angle = s.currAngle;
var rad   = s.step*Radius + 10;
x = s.x + rad*Math.cos(angle);
y = s.y + rad*Math.sin(angle);
s.layer.moveTo(x,y);
s.step = (s.step+1)%NumSteps;
}
setTimeout("Rotate()", 30);
}
function handle_resize()
{
if(document.layers)
start();
}
window.onresize=handle_resize;
window.onload=start;
</script>

5. Save template dan lihat hasilnya

>>more>>
3 komentar:

Cara Membuat Kursor Di Kelilingi Tiga Bintang Berekor

Unknown
Mungkin sobat udah pada tahu tentang artiukel ini ,Cara membuat kursor di kelilingi 3 bintang warna wani berekor, tapi coretan arjem ingin berbagi dengan yang belum tau, kali aja ingin menghiasi tampilan kursor pada blognya, bagi yang ingin mencobanya silahkan ikuti utorial berikut ini.


- Langkah pertama login ke blog sobat
- Kedua masuk dashboar>>tata letak >> Add gadget >> pilih HTML/javascript
- Copy paste code script di bawah ini
<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"></div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"></div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"></div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

 - Terahir save template

Keterangan : ganti script yang berwarna orange dengan warna favorit warna sobat, untuk kode warna silahkan klik disini

>>more>>
2 komentar:

Membuat Gambar Warna Warni Saat Disorot Cursor

Unknown
Dengan tampilan gambar yang warna warni saat di sorot cursor memberi kesan tersendiri pada blog kita yang pasti akan lebih cantik, bagi sobat yang ingi mencobanya silahkan ikuti tutorial di bawah ini.

  • Pertama seperti biasa login ke blog sobat
  • Kedua pergi ke rancangan Edit HML
  • Ketiga Contreng Expand Widget Template
  • Kemudian cari script ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
  • Setelah ketemu copy paste code di bawah ini dan letakkan tepat di atas script ]]></b:kin>
@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
-webkit-animation:hue 1s linear infinite;
}

Sekian tutorial dari kami semoga bermanfaat

>>more>>
3 komentar:

Perawatan Rambut Alami Ala INDIA

Unknown
Asskum all..!!

Hai sobat kali ini kami akan membahas tentang cara bagaimana merangsang pertumbuhan rambut serara alami karna rambut adalah mahkota bagi kita yang perlu di rawat supaya tidak menimbulkan kebotakan ok kita langsung aja bahan-bahan yang di perlukan sebagai berikut :

Satu tangkai lidah buaya

Satu butir telor ayam kampung

Dua sendok makan madu asli

Tuju sendok makan susu zabadi

Cara pembuatannya 
Kupas lidah buaya lalu di parut dan telurnya kocok sampai berbusa kemudian ambil satu buah makok
satukan semua komposisi yang sudah di siapan dan aduk hingga rata
Cara mnerapkan
Oleskan adonan tersebut pada rambut dan kulit kepala sampai merata diamkan 15 lalu bilas dengan air bersih tanpa menggunakan sampo. lakukan langkah tesbut dua kali seminggu
begitulah tutorial ala INDIA dari kami.semoga beranfaat.

>>more>>
Tidak ada komentar:

Membuat Entri Populer Lebih Keren

Unknown
Asskum all, gimana punya kabar, so pasti baik-baik aja bukan ??
Pada kesempatan kali ini kita akan membahas bagaimana Cara membuat entri populer lebih menarik,
tanpa banyak basi  kita langsung menuju ke TKP. berikut ini contonya

  • Ok langkah pertama masuk blog sobat
  • Masauk ke Rancangan >>Edit HTML
  • Jangan lupa Expand Widget Template
  • Kemudian cari ]]></b:skin> tekan Ctrl+F untuk mempermdah pencarian
  • Yang terahir copy paste kode script di bawah ini dan letakkan tepat di atas ]]></b:skin>

<style type='text/css'>.PopularPosts .item-title{display:yes}.PopularPosts ul li {border-radius:50px 0px 0px 50px;float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;border: 1px solid #444;overflow: hidden;box-shadow: 0px 0px 1px #333;font-style: normal;font-weight:bold;width: 100%;height:60px;border-radius:35px 5px 5px 35px;}.PopularPosts ul li:hover{background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);overflow: hidden;color: #414141;width: 100%;height:60px;border: 1px solid #ffffff;box-shadow: 0px 0px 2px #ffffff;}.PopularPosts ul li img {padding:1px  ;margin:1px;margin-top:3px;border-radius:35px 35px 35px 35px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 1px solid #333;height: 50px;width:50px;overflow: hidden;}.PopularPosts ul li img:hover {border:1px solid #ffffff;border-radius:25px 25px 25px 25px;background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);box-shadow: 0px 0px 10px #ffffff;}</style>


Keterangan: 

Setelah pengeditan selesai pratinjau dulu, lihat dengan seksama bagian atas header muncul script seperti ini ( --> ) apa gak, kalo muncul script sperti tersebut silahkan sobat hapus kode yang berwarna orange diatas. moga bermanfaat

>>more>>
Tidak ada komentar:

Cara Memasang Kalender Keren Di Blog Coretan Arjem

Unknown

Pada kesempatan kali ini arjem akan berbagi tentang bagaimana cara memasang kalender di blog, sekedar accessories untuk mengisi ruang kosong blog sobat, kalender model terbaru unik,cantik dan menarik.
bagi sobat yang berminat ikuti langkah-langkah berikut ini :


1.Masuk ke blog sobat>>tata letak
2.Add gadget  pilih javascript
3.Copy paste code di bawah ini



<!-------Do not change below this line-------><div align="center"><iframe align="center" src="http://www.calendarlabs.com/calendars/web-content/calendar.php?cid=1002&uid=451436591&c=8&l=en&cbg=D46D2B&cfg=FFFFFF&hfg=&hfg1=&ct=70&cb=1&cbc=000000&cf=Verdana&cp=bottom&sw=0&hp=t&ib=1&ibc=FFDC82&i=images/sunrise.jpg" width="183" height="373" marginwidth=0 marginheight=0 frameborder=no scrolling=no allowtransparency='true'>Loading...</iframe><div align="center" style="width:140px;font-size:10px;color:#666;">Powered by <a  href="http://www.calendarlabs.com/printable-calendar.php" target="_blank" style="font-size:10px;text-decoration:none;color:#666;">Printable Calendar</a></div></div><!-------Do not change above this line------->




<!-------Do not change below this line-------><div align="center"><iframe align="center" src="http://www.calendarlabs.com/calendars/web-content/calendar.php?cid=1002&uid=587041845&c=8&l=en&cbg=FFFFFF&cfg=003300&hfg=003300&hfg1=003300&ct=80&cb=0&cbc=003300&cf=verdana&cp=bottom&sw=0&hp=t&ib=1&ibc=990066&i=images/royalorchid.jpg" width="183" height="373" marginwidth=0 marginheight=0 frameborder=no scrolling=no allowtransparency='true'>Loading...</iframe><div align="center" style="width:140px;font-size:10px;color:#666;">Powered by <a  href="http://www.calendarlabs.com/calendars/moon-phases-calendar.php" target="_blank" style="font-size:10px;text-decoration:none;color:#666;">Moon Calendar</a></div></div><!-------Do not change above this line-------




<!-------Do not change below this line-------><div align="center"><iframe align="center" src="http://www.calendarlabs.com/calendars/web-content/calendar.php?cid=1002&uid=1399163986&c=8&l=en&cbg=FFFFFF&cfg=FFFF66&hfg=660000&hfg1=660000&ct=70&cb=1&cbc=000000&cf=verdana&cp=bottom&sw=0&hp=t&ib=1&ibc=000000&i=images/miley.jpg" width="183" height="373" marginwidth=0 marginheight=0 frameborder=no scrolling=no allowtransparency='true'>Loading...</iframe><div align="center" style="width:140px;font-size:10px;color:#666;">Powered by <a  href="http://www.calendarlabs.com/pdf-calendar.php" target="_blank" style="font-size:10px;text-decoration:none;color:#666;">PDF Calendar</a></div></div><!-------Do not change above this line------->




<!-------Do not change below this line-------><div align="center"><iframe align="center" src="http://www.calendarlabs.com/calendars/web-content/calendar.php?cid=1002&uid=973507605&c=8&l=en&cbg=000000&cfg=FFFFFF&hfg=FFFFFF&hfg1=FFFFFF&ct=80&cb=1&cbc=FFFFCC&cf=verdana&cp=top&sw=0&hp=t&ib=1&ibc=990000&i=images/heart.jpg" width="183" height="373" marginwidth=0 marginheight=0 frameborder=no scrolling=no allowtransparency='true'>Loading...</iframe><div align="center" style="width:140px;font-size:10px;color:#666;">Powered by <a  href="http://www.calendarlabs.com/online-calendar.php" target="_blank" style="font-size:10px;text-decoration:none;color:#666;">Online Calendar</a></div></div><!-------Do not change above this line------->


Semoga bermanfaat


>>more>>
8 komentar:

Pasang Jam Keren Pada Blog Keren Coretan Arjem

Unknown
---Jam keren untuk blog ---


Pada kesempatan kali ini arjem akan membahas cara memasang accessories jam keren pada blog, dimana jam widget ini bisa mengingatkan waktu sama pengunjung / para bloggernya itu sendiri, mungkin tutorial ini sudah banyak di luncurkan oleh blog tetangga, tapi dengan tampilan jam terbaru,keren dan unik ini sobat ingin mengganti , ok arjem akan memberi  beberapa contoh :

1.
<center><script src="http://clock1.mytictac.com/private/mytictac.js?c=b72262f9b3632e758a05444818cec6e1"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge en flash</a></noscript></center>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=68534347b6dc920277af0208701982f9"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge flash</a></noscript>
3.
<script src="http://clock1.mytictac.com/private/mytictac.js?c=68646066e895908f7b72fd5b7b6f8ff6"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">Horloge gratuite</a></noscript>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=3c0fa244448033367c5ac9390e1f946a"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge flash gratuite</a></noscript>
5.
<script src="http://clock1.mytictac.com/private/mytictac.js?c=ca15b8038cc4f71a7d95e3be8514b489"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">Horloge gratuite</a></noscript>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=60b9ec28d3eed4e71ea0aee2ff037ee3"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge flash</a></noscript>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=bc8ded45e913dfbec26564fd89ea615d"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge pour blog</a></noscript>

<script src="http://clock1.mytictac.com/private/mytictac.js?c=51dfe05505780cc314e43cbe108bc15a"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge pour site web</a></noscript>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=079a48c9b0484b0965e0fa6e76b9eca2"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">horloge pour blog</a></noscript>
<script src="http://clock1.mytictac.com/private/mytictac.js?c=247e597a071162713dc4025bc64b1a7d"></script>
<noscript><a href="http://www.mytictac.com/fr/index.php">Horloge gratuite</a></noscript>

Sekarang cara menerapkan
Pertama login ke blog sobat>>tata letak>>add gadget>>pilih javacsript dan copy paste salah satu code script diatas .
Kalo pasisinya gak pas dengan blog sobat tambahkan code ini contoh:

<center>letakkan disini code script jam di atas</center>
>>more>>
3 komentar:

Cara Pasang Emotion Keren Pada Blog Keren

Unknown

:-dMemasang emotion pada blog salah satu solusi untuk membuat blog kita kelihatan lebih ramai, selain itu pengunjung bisa bersenda gurau dengan meng espresikan dirinya  melalui emotion tersebul, coba lihat di mig33 yang namanya emotion sangat laku keras , untuk emotion yang gwe bahas sekarang contohnya seperti berikut.


:) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ **p &amp;lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( &amp;lt;:) &amp;lt;=) (-.-,) *=p =p* ''J :W :bye: :imhere: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist:

Gmn sobat keren kan ? hehehehe...!! ya jelas keren doong, bagi sobat yang ingin menerapkan di blognya silahkan ikuti langkah-langkah berikut ini.


  • Petama silahkan login ke blog kalian masing-masing
  • Kedua buka rancangan Template EditHTML jangan lupa Expand Wedget Template
  • Ketiga cari code </body> lalu tetakan code di bawah ini tepat di ata code </body>
<style type='text/css'>
.emoWrap {
  background-color:transparent;
  border:none;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://republicofnote.googlecode.com/svn/trunk/emoticon%20di%20kotak%20komentar' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange    = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
  • Dan ke empat simpan tempale >> lihat hasilnya>>

>>more>>
1 komentar:
Langganan: Postingan (Atom)