Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Cara menambah icon di adress bar

Cara menambah icon di adress bar | alamat blog

Tutorial kali ini Panduan sukses blogger membahas cara membuat icon di adress bar atau icon di alamat blog. artikel ini mungkin tidak asing lagi untuk master blog. tapi ada sebagian teman yang baru di dunia blogger ia pasti penasaran akan keberadaan icon tersebut. salah satu teman kita yang bertanya melalui contact form blog ini. pertanyaannya sudah ku jawab melalui email. tapi biar tutor di panduan sukses blogger lebih complate sekalian saja saya pos kan. jadi jika ada yang bertanya tinggal di kasih link aja. beres.....

Nah untuk menambah icon di alamat blog atau di adress bar, berikut ini langkah-langkah membuatnya.
  • Pertama-tama siapkan icon yang ingin anda gunakan untuk adress bar tersebut
  • Disini saya sarankan ukuran gambar 24 x 24 pixel. karna ini akan mempengaruhi loading blog anda.
  • Kemudia upload icon tadi ke situs penyimpanan gambar. bisa di www.tinypic.com atau situs penyimpanan gambar yang lainnya. telusuri dengan google
  • Setelah proses penyimpanan selesai, login terlebih dahulu ke blogger
  • Rancangan
  • Edit HTML
  • Cari kode
  • Letakkan kode di bawah ini di atas kode tersebut
  • Ganti tulisan yang berwarna merah dengan alamat URL gambar milik anda.
  • Untuk memastikan proses penambahan icon sukses silahkan anda pratinjau terlebih dahulu
  • Kalau sudah berhasil silahkan di simpan
Nah sekarang lihat adress blog anda sudah di hiasi icon yang tentunya akan menjadi daya tarik tesendiri. selamat mencoba....

cara menambah icon di adress bar alamat blog, langkah menambah icon di adress bar alamat blog, tutorial menambah icon di adress bar alamat blog, cara memasang icon di adress bar alamat blog, tutorial icon di adress bar alamat blog, langkah memasang icon di adress bar alamat blog.
Read more ...

Mengganti Penampilan Cursor Lebih Menarik

Jika anda sudah bosan melihat penampilan cursor anda yang hanya berupa garis panah, dan ingin menggantinya menjadi lebih menarik, saya akan berikan triknya. Silahkan anda ganti sesuka hati gambar apapun yang akan anda inginkan.

Mungkin trik ini sudah banyak para sobat yang tahu, tapi karena saya hanyalah pemain baru dalam design website, wajar rasanya saya meluangkan waktu untuk bisa berbagi untuk para sobat sekalian yang mungkin juga baru di dunia website ini. Dan untuk senior-senior design website yang membaca postingan ini, mohon beri masukkan kepada kami yang baru belajar dan pingin belajar.

Oke, kita kembali lagi ke cursor yang kita ganti, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan anda cari di dalam template anda kode body {
6. Persis setelah kode tersebut, pastekan script di bawah ini

cursor: url("http://Percobaan.gif"), default;

7. Silahkan anda ganti tulisan yang berwarna merah dengan alamat URL gambar pilihan anda
8. Untuk mendapatkan alamat URL tersebut, silahkan surfing di sini
9. Cara mendapatkan URLnya, silahkan anda klik kanan pada cursor yang anda inginkan, kemudian klik Properties, kemudian copy alamat URL yang ditampilkan pada baris Location
10. Klik Pratinjau untuk melihat hasil kerja anda
11. Klik Simpan Template jika sudah sesuai dengan keinginan anda
12. Selesai

Selamat mencoba, semoga bermanfaat
Read more ...

Pingin link berkedip ketika mouse

Jika kita perhatikan begitu banyak link-link yang terdapat di halaman blog kita. Saya sedikit ada trik cara membuat agar link-link tersebut berkedip ketika mouse melintas di atasnya.

Silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari kode </head> di dalam template anda
6. Tambahkan script berikut ini sebelum kode tersebut

<style>
a:hover { color:#00FFFF; text-decoration:blink; border-bottom:1px dotted #FF0000; }
</style>

7. Kode #00FFFF adalah menyatakan warna link tersebut dan kode #FF0000 adalah warna garis bawahnya
8. Silahkan anda variasikan sesuai dengan warna kesukaan anda
9. Untuk mencari kode-kode warna tersebut, anda bisa lihat di blog teman saya, Uda Dalvindo Orlando [ di sini ]
10. Klik Simpan Template
11. Selesai

Selamat mencoba, semoga bermanfaat


Read more ...

MEMBUAT TEXT BERJALAN DI TITLE BAR

Titel bar di blog secara default berisi judul halaman blog yang kita buka. Kita dapat mengganti tulisan tersebut dengan tulisan berjalan.



Kodenya seperti dibawah ini :

<script language='javascript'>
message = "blognya kang intoen ^"

scrollSpeed = 100
lineDelay = 0

txt2 = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt2 = txt2 + message.charAt(pos)
document.title = txt2
prt = scrollSpeed
}
else {
prt = lineDelay
txt2 = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",prt)
}

scrollText(0)
</script>
Copy kode dan ganti text sesuai dengan keinginan, dan letakkan di blog melalui Layout-->Add a Gadget-->HTML/JavaScript Paste Kode dan Save.



Sekarang kita lihat blog kita. Kita lihat di title bar Browser kita akan terlihat tulisan berjalan. Trims atas perhatiannya.

Read more ...

MEMBUAT TEXT BERGERAK

Text bergerak atau berjalan sering kali dipakai di blog untuk membuat halaman blog lebih menarik. Kode program HTML nya simpel seperi dibawah ini.

<marquee direction="up" width="100%" scrollamount="4" height="130px" align="center">


<b>Welcome alias Selamat Datang di blognya KANG INTOEN moga bermanfaat... thanks
skip to main | skip to sidebar

</b>


</marquee>

Kode HTML ini akan membuat tuliasan bergerak dari bawah ke atas. Ganti up dengan down untuk bergerak turun, left untuk ke kiri dan right untuk gerakan kekanan. scrollamount untuk mengatur kecepatan, width dan height untuk mengatur lebar dan tinggi area text.

Hasilnya seperti dibawah ini.

Welcome alias Selamat Datang di blognya KANG INTOEN moga bermanfaat... thanks
Read more ...

MEMBUAT SALAM PEMBUKA

Saat kita melakukan Blog Walking sering kita jumpai terdapat Salam pembuka pada blog temam kita. Untuk membuatnya ada berbagai macam cara dan salah satunya yang sangat sederhana adalah seperti di bawah ini.

<script language='JavaScript'>
window.alert(" SELAMAT DATANG DI BLOG TUTORIAL");
</script>

Copy kode diatas dan paste di Layout-->Add a Gadget-->HTML/JavaScript dan Save.





Hasilnya seperti dibawah ini.



Read more ...

MEMBUAT GAMBAR BERJALAN

Seperti pernah kita bahas sebelumnya tentang membuat text berjalan, untuk membuat gambar berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Contoh gambar dibawah ini adalah gambar banner dari blog teman kita. Kodenya seperti dibawah ini :

<marquee direction="up" onmouseover="this.stop()" width="180" onmouseout="this.start()" scrollamount="2" height="200">

Seperti pernah kita bahas sebelumnya tentang membuat text berjalan, untuk membuat gambar berjalan kita hanya perlu menambahkan alamat url gambar tesebut. Contoh gambar dibawah ini adalah gambar banner dari blog teman kita. Kodenya seperti dibawah ini :

<marquee direction="up" onmouseover="this.stop()" width="180" onmouseout="this.start()" scrollamount="2" height="200">

<a href="http://bermaindiblog.blogspot.com" target="_blank"> <img border="0" alt="banner02" src="http://i620.photobucket.com/albums/tt284/ppipyo/Banner-002-1.gif"/></a>
<a href="http://freegamerevolution.blogspot.com/" target="_blank"><img border="0" width="155" src="http://i249.photobucket.com/albums/gg207/er_vachum_k/banner_azzalea.gif" title="Download Free PC Game"/></a>

</marquee>


Copy kode dan ganti URL gambar dengan alamat url yang mau di pasang, dan letakkan di blog melalui Layout-->Add a Gadget-->HTML/JavaScript Paste Kode dan Save.



direction="up" bisa diganti down (bergerak turun), left (bergerak ke kiri) dan right (berkerak ke kanan).
width="180" untuk menentukan lebar area
height="200" untuk menentukan lebar area dan
scrollamount="2" untuk menentukan kecepatan gerak.

Hasilnya akan seperti dibawah ini.

banner ads
banner ads



Read more ...

Memasang gambar melayang di pojok halaman

Menjawab pertanyaan temenku Hendri yang pingin gambar animasi (bocah imut di pojok bawah blog) atau istilah yang sering dipakai oleh para blogger mania dengan gambar melayang. Gambar melayang.....??? gimana masangnya. Simpel koq caranya ikuti saja langkah - langkah berikut ini;

1. Login Acount blogger anda;
2. Masuk pada Pengaturan ;
3. Pilih Tata letak ;
4. Edit html ;
5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin > ;

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Kode yang tercetak merah ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode < /body >,
Kemudian copy code berikut ini dan letakkan diatas kode tersebut.

<div id='melayang'>
<a href='http://tovarossi.blogspot.com'> <img src='http://i478.photobucket.com/albums/rr146/tovarossi/Dancingbaby.gif'/></a>
</div>

atau pilih code animasi berikut;

<a href='http://hendri79.blogspot.com'> <img src='http://i698.photobucket.com/albums/vv347/hendri79/th_hendriblog.gif'/></a>
</div>

Kode yang berwarna merah diganti dengan url blog anda dan kode yang berwarna hijau diganti dengan url tempat gambar anda disimpan.

7. Simpan

Selesai dah....!!!
Untuk melihat contohnya anda dapat lihat pada blog saya.





Read more ...

Memasang gambar di sudut blog

Memasang gambar di sudut blog adalah salah satu trik untuk membuat blog kita kelihatan lebih menarik. pemasangan gambar bisa di sudut atas, kiri,kanan dan bawah. untuk membuat nya sangat lah mudah. bagi yang berkenan ikuti langkah-langkah di bawah ini

•    Log in dulu ke blogger
•    Tata letak
•    Edit HTML
•    Cari kode ]]></b:skin>
•    letakkan kode berikut di atas kode ]]></b:skin>
#anima_sudut {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }
•    Ganti kode yang berwarna biru dengan posisi image yang kamu inginkan (ex : top=atas, bottom=bawah, right=kanan, left=kiri)
•    Kemudian tambah kan kode di bawah ini diatas kode </body>

<div id='anima_sudut'>
<a href='http://jayaputrasbloq.blogspot.com/'>
<img alt='' border='0'
src='http://i647.photobucket.com/albums/uu191/ariamsi/disiniann.gif'/></a>
</div>
•    Ganti kode yang berwarna merah dengan alamat blog kamu dan alamat penyimpanan image kamu
•    Kemudian simpan tamplate
Read more ...

Judul blog bergerak ke kanan

Untuk memperindah penampilan halaman blog anda, tidak ada salahnya jika anda juga mengikuti trik berikut ini, yaitu cara membuat judul blog bisa bergerak. Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Login ke blog anda
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode

<title><data:blog.pageTitle/></title>

6. Ganti kode tersebut dengan script berikut ini

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

7. Angka 300 di dalam script tersebut merupakan kecepatan bergeraknya, silahkan ganti sesuai dengan selera anda. Jika anda ganti menjadi 100 atau 200 maka kecepatannya akan bertambah, sebaliknya kecepatan akan berkurang bila diganti menjadi 400
8. Klik Pratinjau untuk melihat apakah sudah ada perubahan sesuai dengan yang kita inginkan
9. Jika sudah oke, klik Simpan Template
10. Selesai

Selamat mencoba, semoga bermanfaat





Read more ...

Cursor diikuti text


Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='DiansaCom'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai
Jika anda sudah bosan melihat penampilan cursor anda yang hanya berupa garis panah, dan ingin menggantinya menjadi lebih menarik, saya akan berikan triknya. Silahkan anda ganti sesuka hati gambar apapun yang akan anda inginkan.

Mungkin trik ini sudah banyak para sobat yang tahu, tapi karena saya hanyalah pemain baru dalam design website, wajar rasanya saya meluangkan waktu untuk bisa berbagi untuk para sobat sekalian yang mungkin juga baru di dunia website ini. Dan untuk senior-senior design website yang membaca postingan ini, mohon beri masukkan kepada kami yang baru belajar dan pingin belajar.

Oke, kita kembali lagi ke cursor yang kita ganti, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan anda cari di dalam template anda kode body {
6. Persis setelah kode tersebut, pastekan script di bawah ini

cursor: url("http://bohongan_doang.gif"), default;

7. Silahkan anda ganti tulisan yang berwarna merah dengan alamat URL gambar pilihan anda
8. Untuk mendapatkan alamat URL tersebut, silahkan surfing di sini [ cursors.funutilities ]
9. Cara mendapatkan URLnya, silahkan anda klik kanan pada cursor yang anda inginkan, kemudian klik Properties, kemudian copy alamat URL yang ditampilkan pada baris Location
10. Klik Pratinjau untuk melihat hasil kerja anda
11. Klik Simpan Template jika sudah sesuai dengan keinginan anda
12. Selesai

Selamat mencoba, semoga bermanfaat

Read more ...