Tutorial Blogger: Desember 2013

Sabtu, 21 Desember 2013

Cara Membuat Efek Tulisan Berjalan Seperti Diketik

Enaknya ngeblog di blogspot adalah bisa mencoba berbagai trik blog, baik untuk mengoptimalkan blog ataupun memperindah tampilan blog. Dalam sebuah blog yang biasa paling dominan adalah teks atau tulisan. Ada beragam cara membuat efek-efek pada tulisan, mulai dari tulisan berkedip, link bergoyang , sampai yang akan kita pelajari hari ini yaitu membuat tulisan berjalan seperti diketik.

Tulisan dengan efek berjalan seperti diketik, sama seperti sama seperti saat kita mengetik pakai laptop. Saat jari kita menekan huruf, maka akan muncul huruf dan seterusnya. Efek ini membuat tulisan tampil huruf per huruf. Efek ini bisa dipakai untuk memikat mata pengunjung agar melihatnya, misalnya sebuah pengumuman. Untuk membuat tulisan dengan efek seperti diketik cukup mudah. Kita tinggal menyalin script berikut ini:

Script di atas bisa dipasang di post dan juga di sidebar. Untuk di postingan, masukan dengan opsi HTML saat menulis. Sedangkan untuk sebagai widget bisa dengan saat di tata letak, pilih tambakan gadget dan pilih HTML/Java Script. Ganti tulisan yang berwarna merah dengan teks yang kamu inginkan, contohnya akan tampil seperti ini:

Selamat Datang di Blog Saya, Jangan Lupa Baca & Komentar!_

Hasilnya seperti diatas

Cara Membuat Efek Meteor Jatuh di Blog

Cara Membuat Efek Meteor Jatuh Pada Blogspot - Meteor Jatuh Pada Blog memang kedengarannya agak mustahil terjadi, tapi inilah kenyataannya. Bagaimana tidak ? Efek Meteor Jatuh ini mengingatkan kita kembali kepada Jaman Dinosaurus yang dahulu kala terkena Jatuhan Meteor. Penasaran bukan ?

Langsung menuju ke Page Element Klik Add Widget + Html/Javascript + Copas kode berikut :

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js">
</script>

Kemudian Save dech.

Semoga Cara Membuat Efek Meteor Jatuh di Blog semoga berguna dan bermanfaat.

Jumat, 20 Desember 2013

Cara Membuat Efek Daun Jatuh di Blog!!

Okeh Langsung aja cekiddooott..

Kali ini saya bakal nge-share cara menambah efek daun berjatuhan di blog, silahkan cobaaa.
Caranya :
1. Masuk ke Dasbor
2. Klik Template

3. Klik Edit HTML

4. Klik Lanjutkan

5. Centang kotak Expand Widget Templates seperti pada gambar

Cari Kode </head> kemuadian copast URL ini tepat diatasnya

6. Selesai, klik simpan

.: JANGAN LUPA KOMENTAR :.

Cara Membuat Efek Bintang Jatuh/Starfall di Kursor Blog !!!

Selamat sore sobat Blogger khususnya anak Indonesia, kini sayabakal nge-share cara membuat efek bintang jatuh dari kursor.. silahkan aja yang kebelet pengen tau.. langsung aja Cekkidott..

Caranya :
1. Buka Blogger
2. Klik Tata Letak
3. Klik Tambah Gadget

<script type='text/javascript'>

// <![CDATA[

var colour="#52D8ED";

var sparkles=100;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

NP :
- Kode berwarna kuning adalah kode warna yang bisa kamu ganti
Silahkan pilih kode warna yang kamu pengen :
Merah #cc0000
Orange #ff9900
Kuning #ffff00
Hijau #00ff00
Biru Muda #00ffff
Biru tua #0000ff
Pink #ff00ff
Ungu #9900ff
Putih #ffffff

.: JANGAN LUPA KOMENTAR :.

Kumpulan Kursor di Blog !!! (Kursor Klub Bola)

pagi gini enaknya sih minum minuman yang dingin wkwk , lanjut aja kita ke topik yaitu mengubah kursor di blog menjadi kursor klub sepak bola faforit kalian, penasaran kan? langsung aja kita cekkidot..

Kali ini saya bakal nge-share cara mengubah kursor blog menjadi kursor klub sepak bola,, mau tau? lanjuut

Caranya :
1. Masuk ke Blogger
2. Klik Template

3. Klik Edit HTML

4. Klik Lanjutkan

5. Centang kotak Expand Widget Templates seperti pada gambar

Cari code </head> dan copast kode berikut tepat diatas kode </head>

<style type='text/css'>
HTML,BODY{cursor: url("http://cur.cursors-4u.net/games/images9/gam860.gif"), auto;}
</style>

Ganti link berwarna merah dengan link dibawah ini :
FC Barcelona

http://cur.cursors-4u.net/sports/images7/spo766.png
Manchester United

http://cur.cursors-4u.net/sports/images5/spo590.png
Manchester City

http://cur.cursors-4u.net/sports/images5/spo591.png
Liverpool FC

http://cur.cursors-4u.net/sports/images5/spo592.png
Arsenal FC

http://cur.cursors-4u.net/sports/images6/spo612.png
Tottenham Hotspur

http://cur.cursors-4u.net/sports/images5/spo574.png
Chelsea FC

http://cur.cursors-4u.net/sports/images6/spo604.png
A.C. Milan

http://cur.cursors-4u.net/sports/images7/spo768.png

http://cur.cursors-4u.net/sports/images7/spo767.png

http://cur.cursors-4u.net/sports/images7/spo765.png

http://cur.cursors-4u.net/sports/images7/spo763.png

http://cur.cursors-4u.net/sports/images6/spo611.png

http://cur.cursors-4u.net/sports/images6/spo610.png

http://cur.cursors-4u.net/sports/images6/spo609.png

http://cur.cursors-4u.net/sports/images6/spo608.png

http://cur.cursors-4u.net/sports/images6/spo606.png

http://cur.cursors-4u.net/sports/images6/spo605.png

http://cur.cursors-4u.net/sports/images5/spo599.png

http://cur.cursors-4u.net/sports/images5/spo600.png

http://cur.cursors-4u.net/sports/images6/spo601.png

http://cur.cursors-4u.net/sports/images5/spo587.png

http://cur.cursors-4u.net/sports/images5/spo585.png

http://cur.cursors-4u.net/sports/images5/spo577.png

http://cur.cursors-4u.net/sports/images5/spo576.png

http://cur.cursors-4u.net/sports/images5/spo574.png

http://cur.cursors-4u.net/sports/images5/spo572.png

http://cur.cursors-4u.net/sports/images5/spo571.png

.: JANGAN LUPA KOMENTAR :.

Cara Menambahkan Kotak Obrolan (Chat Box) di Blog !!

Seperti biasanya kali ini kita wali dengan membaca bismillah 'Bismillah Hirrohman nirrohim' skali lagi بسم الله الرحمن الرحيم dan silahkan saja bagi yang sudah penasaran langsung aja baca, Cekidott...

Mautau caranya silahkan sedott..

Caranya:

1.langkah pertama yang harus dilakukan adalah kunjungi websitehttp://envolve.com ,karena website
inilah yang akan memberi kita script.ini adalah tampilan dari alamat url diatas

2.setelah itu pilih pricing,lalu klik sign up for free

3.isi data yang di minta pada form dengan menulis data seperti : alamat blog , judul blog , email , first name, nick name dan password email anda.

4. Masuk ke Dasbor
5. Klik Template

6. Klik Edit HTML

7. . Klik Lanjutkan

8. Centang kotak Expand Widget Templates seperti pada gambar

Cari Kode </head> kemuadian copast URL yang disediakan tepat diatasnya

9. Maka jadilah seperti ini :D heheh

.: JANGAN LUPA KOMENTAR :.

Jika sudah selesai segera Follow Twitter ini > twitter.com/siiAndreT

Kumpulan Kursor Blog (Kursor Islami/Islamic Cursors) !!

Okeh sebelum mengetahui carany aebih baik kita membaca basmalah 1... 2... 3.... بسم الله الرحمن الرحيم udah membaca basmalah? Silahkan kita Lanjut, Cekkidottt....

Caranya :
1. Masuk ke Blogger
2. Klik Template

3. Klik Edit HTML

4. Klik Lanjutkan

5. Centang kotak Expand Widget Templates seperti pada gambar

Cari code </head> dan copast kode berikut tepat diatas kode </head>

<style type='text/css'>
HTML,BODY{cursor: url("http://cur.cursors-4u.net/games/images9/gam860.gif"), auto;}
</style>

silahkan ganti teks berwarna merah dengan URL di bawah ini :