Membuat Favicon

Sebelum membahas tentang cara membuat favicon, saya akan memberitahu apa itu favicon. Favicon adalah sebuah icon kecil di sebelah bar menu, jika dilihat blog ini juga memiliki favicon "coba saja lihat di atas" maka bentuknya akan seperti ini



Agar lebih jelas, lihat gambar ini



Nah, itu yang namanya Favicon. Untuk membuatnya ikuti langkah-langkah berikut :

• Pertama--> Siapkan gambar yang akan dijadikan favicon, contohnya gambar ini
  
  
• Kedua--> Silahkan masuk ke Favicon Generator, Klik disini

• Klik tombul Browser jika sudah di situs tersebut

• Masukkan gambar yang ingin dijadikan favicon

• Klik tombul Generate Favicon

• Klik tulisan Klik Here to Download Your Favicon

• Save di komputer kawan

• Uploadlah favicon tadi ke yahoo geocities "kalau aku uploadnya ke photobucket.com"

• Sekarang kawan sudah punya alamat URL dari favicon tadi. Contohnya seperti ini "hanya contoh bukan beneran loh"
  
  http://www.geocities.com/tes_ting/favicon.ico
  

• Alamat tersebut diubah menjadi seperti ini
  

<link rel="shotcut icon" href="http://www.geocities.com/tes_ting/favicon.ico"/>

• Selanjutnya masuk ke Blogger dengan ID kawan

• Klik Tata Letak

• Klik Edit Html

• Carilah kode </head>

• Letakkan kode tadi tepat diatas kode </head>

• Klik tombul Save

• Silahkan lihat favicon yang telah kawan buat tadi

Tapi bagi yang menggunakan browser IE6, favicon tadi tidak langsung muncul--> coba dibookmark dulu alamatnya. Jika menggunakan firefox, opera, dan teman2nya favicon kawan dapat langsung terlihat.

Menampilkan Widget Hanya Pada Halaman Depan

Sebelum memulai tutorialnya, saya akan jelaskan tentang widget. Widget adalah elemen halaman yang dapat berupa link, gambar, dan lain-lain, widget ini diberi nama dan nama itu pun yang akan kitcari pada edit html yang nantinya akan kita cari.

Menampilkan hanya pada halaman depan berarti widget tersebut hanya akan tampil pada halaman depan, jadi saat kita melihat/membaca artikel widget tersebut akan hilang tersembunyi dan akan muncul kembali pada halaman awal atau home.

Untuk membuatnya cukuplah mudah tapi pertama-tama kawan harus tahu nama dari widget tersebut misalnya : Shoutbox, Pengikut, Dll. Silahkan ikuti langkah-langkah berikut ntuk tutorialnya :

• Masuk ke blogger

• Klik Tata Letak & ingat nama widget yang ingin ditampilkan pada halaman depan

• Klik Edit Html

• Lalu cari nama widget tersebut misalnya : Shoutbox

Setelah dicari maka akan ada kode seperti ini

<b:widget id="HTML1" locked="false" title="" type="HTML">
<b:includable id="main">
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>
</b:if>

<b:include name="quickedit">

</b:includable>
</b:widget>

• Kode warna hijau adalah kode yang harus ditambahkan

Ada tambahan lagi, untuk widget yang tidak diberi judul maka blogger akan menamai widget tersebut dengan Html1, Html2, Dst untuk widget Html/javascript. Text1, Text2, Dst untuk widget text. Tetapi saya sarankan agar kawan memberi judul pada setiap widget.

• Jika sudah Klik Simpan

Setelah disimpan sekarang coba kawan lihat hasilnya pada saat pada awal halaman, dan coba lihat artikel kawan sendiri dan widget tersebut akan hilang tersembunyi

Sbr:http://corpita95.blogspot.com

Membuat Cursor Selalu Diikuti Oleh Text

Membuat cursor diikuti text adalah sarana untuk memberi nuansa lain terhadap blog kawan karena pengikut cursor dapat dibuat bervariasi sesuai keinginan kawan, untuk membuatnya silahkan kawan ikuti langkah-langkah berikut :

• Silahkan kawan masuk ke blogger

• Klik Tata Letak

• Pada Elemen Halaman silahkan kawan tambah sebuah elemen halaman html/javascript

• Sekarang silahkan kawan masukkan kode ini ke dalamnya
  

<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='Tutorial Blog Optycon'.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>

• Text berwarna Putih dapat diganti dengan kata lain misalnya, Selamat Datang ato yang lainnya terserah kawan

• Selesai....untuk melihat contohnya silahkan klik disini

Sbr :http://corpita95.blogspot.com

Membuat Tombol di Posting

Tombol di posting yach, mungkin terdengar aneh tentang judul posting ini, mengapa ada tombol di posting kalau dimana-mana juga ada tombol seperti pada sidebar. Tetapi tombol ini memang tombol yang dirancang khusus menyerupai tombol pada penyedia layanan tertentu. Jika masih bingung, silahkan lihat tombol dibawah ini.




Seperti itulah tombol yang saya jelaskan tadi


Untuk membuatnya berada di dalam postingan kawan caranya mudah, hanya perlu menambahkan kode ini pada postingan kawan, tetapi menaruhnya harus pada edit HTML. Nih kodenya....

<a href="Masukkan URL tujuan/"><input value="Masukkan Pesan" type="submit"></a>

• Tulisan Masukkan URL tujuan dapat diganti dengan alamat url tujuan

• Tulisan Masukkan Pesan juga harus diganti dengan pesan kawan, contohnya Tombol ini seperti tombol contoh di atas.

Hal Lain-lain

1. MENGOREKSI ARAH KIBLAT VIA GOOGLE EARTH
   
2. MENDESAIN TAMPILAN BARU FRIENDSTER