Berbisnis Online ala Google

Jumat, 08 April 2011

Cara membuat efek ketikan pada judul blog

Ada beberapa cara untuk membuat judul blog menjadi animatif, trik kali ini sedikit berbeda dimana judul blog akan muncul seperti sebuah ketikan dari masing-masing huruf dari judul blog anda. Contohnya seperti di blog saya ini, bagus kan kawan ? cara membuatnya cukup mudah kok kawan tinggal ikut saja cara berikut ini, langsung saja kita belajar membuatnya kawan dari pada berlama-lamaan disini.

Cara membuat efek ketikan pada judul blog
1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Lalu centang Expand Template Widget
5. Paste script berikut ini tepat diatas kode </body>


<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>

6. Simpan jika sudah selesai

Cara membuat animasi tulisan bergaya ketikan di blog

Ingin tahu cara membuat tulisan seperti di ketik. berikut adalah ini tips singkat untuk membuat animasi tulisan seperti huruf ketikan, caranya cukup mudah koq untuk membuatnya.
Contoh :


Cara membuatnya melalui website di sini. Silakan ketik kalimat apa yang ingin Anda buat. Terdapat setingan untuk mengatur besar banner serta huruf.


Setelah selesai klik Created Screed. Di bagian atas akan muncul animasinya, silakan simpan animasi gif tersebut. Anda dapat mengupload di blog atau ditempat lain

Cara membuat menu blogger keren

Sudah tahu menu blog yang super keren. Anda pasti bertanya menu blog seperti apa ? menunya seperti animasi sebelah kanan yang berwarna coklat kalau mousenya di dekatkan maka menu blognya akan keluar sendiri, kalau di jelasin masih tidak asik kawan langsung saja kita belajar membuatnya kawan dan mempercantik blog kita.

Cara membuat menu blogger keren
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini



<script src='http://dhedyfaste.xp3.biz/script/menukeren.js' type='text/javascript'></script>


<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor="green";
menuIsStatic="yes";
menuWidth=150;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="black";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="black";
linkOverBGColor="#000000 ";
linkTarget="_top";
linkAlign="Left";
barBGColor="green";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="red";
barVAlign="center";
barWidth=20; // no quotes!!
barText="CATEGORIES";


// ----- Mulai Edit Menu
ssmItems[0]=["Daftar Menu"] //Header Menu
ssmItems[1]=["Home", "http://ini-hanya-blog.blogspot.com",""]
ssmItems[2]=["About me", "http://www.blogger.com/profile/00805402707957297143",""]
ssmItems[3]=["Facebook", "http://www.facebook.com/fadhil.corbin",""]
ssmItems[4]=["Twitter", "http://twitter.com/Fadhilcorbin",""]
ssmItems[5]=["Youtube", "http://www.youtube.com",""]
ssmItems[6]=["Tips blogger", "http://ini-hanya-blog.blogspot.com/search/label/Blogger/first blog",""]

buildMenu();
//----- Selesai Edit Menu
</script>



6. Simpan jika sudah selesai


Catatan :

Ganti tulisan yang berwarna merah dengan link yang anda miliki kawan


Cara membuat efek kembang api pada blog

Cara membuat efek kembang api diblog
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini



<script src="http://postrecent.googlecode.com/files/kembangapi.js" type="text/javascript">
</script>

6. Simpan jika sudah selesai

Cara membuat translate di blog

Anda pasti tahu apa itu Translate ? Translate adalah penerjemah bahasa, memasang Translate di blog sangat di perlukan karena mungkin orang dari negara asing bisa aja masuk ke blog anda, untuk tidak mengecewakan atau apalah pada orang tersebut dan dengan memasang translate di blog anda mungkin bisa membuat orang tersebut betah berlama-lama untuk membaca di blog anda. nah sekarang kita akan belajar cara membuat Translate pada blog, mari kita ikuti cara berikut ini.

Cara membuat translate di blogger
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

 <center><a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/inggris.gif" height="20" title="English" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/francis.gif" height="20" title="French" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jerman.gif" height="20" title="German" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/spnyol.gif" height="20" title="Spain" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/italia.gif" height="20" title="Italian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/belanda.gif" height="20" title="Dutch" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/rusia.gif" height="20" title="Russian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/brazilia.gif" height="20" title="Portuguese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jepang.gif" height="20" title="Japanese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/koreautara.gif" height="20" title="Korean" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/saudiarabia.gif" height="20" title="Arabic" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/cina.gif" height="20" title="Chinese Simplified" align="absbottom"/></a></center><br/>




6. Simpan jika sudah selesai

Cara membuat efek hujan salju di blog

Membuat efek salju di blog, sekedar hanya ingin berbagi kepada blogger yang lain khususnya yang mempunyai template dengan background atau warna dasar hitam, akan kelihatan lebih menarik lagi tentunya jika diseimbangkan dengan warna putih, dan warna putih itu berasal dari efek hujan salju. Walau lagi musim salju atau tidak. Kita tetap bisa kan membuat hujan
salju di blog kita. Memang di sini tidak ada hujan salju, masih tetap
juga kita bisa buat hujan salju di

blog kita, bagaimana caranya membuat hujan salju di blog kita ? caranya cukup mudah kok kawan, langusung saja kita belajar kawan.

Cara membuat efek hujan salju di blog


1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode berikut ini diatas kode </head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>

  <script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

6. Simpan jika sudah selesai

Cara memberi teks yang mengikuti kursor

Kali ini saya akan menjelaskan bagai mana caranya membuat kursor di blog anda di ikuti oleh text, tips ini adalah untuk mempercantik blog anda dan cukup menarik juga kawan. Cara membuatnya cukup mudah kok kawan tinggal ikuti saja cara berikut ini, langsung saja kita belajar membuatnya kawan dari pada berlama-lamaan di sini.

Cara memberi teks yang mengikuti cursor
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget

4. Pilih HTML/JavaScript

5. Masukan kode HTML berikut ini



<script language="javascript">
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='INI HANYA blog';//ganti message-nya
var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-15; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=20; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#FF0000"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-100;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-100);
moveid(txtA[i],0,-100);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}

moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);


6. Simpan jika sudah selesai
Catatan :
Ganti tulisan yang berwarna merah dengan text yang ingin anda inginkan untuk mengelilingi kursor blog anda kawan.