Rabu, 29 Desember 2010

Cara Mengganti Icon/Logo Blog Di Address Bar

Pada tulisan kali ini saya akan mencoba untuk menuliskan tutorial cara mengganti icon/logo yang terletak di address bar, bagi teman-teman yang ingin tahu bagaimana cara merubah icon blog di address bar, cara mengganti icon blog ini tidak hanya berlaku untuk blog blogger saja, walaupun sedikit beda :-)

Oh ia... yang saya maksud icon/logo itu seperti yang di gambar di bawah ini lho
Cara Mengganti Icon/Logo Blog Di Address Bar

Nah yang di maksud icon blog/situs adalah gambar B atau Bintang. Kita bisa mengganti icon blog kita sesuai dengan gambar icon yang kita inginkan.

Cara Mengganti Icon Blog hampir sama dengan Cara Bikin Tulisan Berjalan Di Address Bar tapi mengganti icon lebih mudah, yang penting gambar untuk icon sudah ada.

Sudah siap untuk mengganti iconnya?...

Panduan Mengganti Icon Blog Di Address Bar

  • Untuk mengganti icon di address bar langkah pertama yang harus anda lakukan adalah Login ke Blogger
  • Setelah itu klik menu Layout atau Tata letak
  • Kemudian klik menu Edit HTML
  • Silahkan temukan kode ini </head>
  • Setelah itu kode nya sudah di temukan silakan taroh kode icon di bawahnya.
Berikut kode untuk mengganti icon yang harus di pasang
<link href='MASUKKAN LINK LOGO/GAMBAR DISINI' rel='SHORTCUT ICON'/>

Pada tulisan MASUKKAN LINK LOGO/GAMBAR DISINI'Silakan masukkan alamat/url logo/gambar yang ingin di jadikan icon blog.

Selamat mencoba, semoga berhasil...
Mengganti Icon Blog

Pasang Message Box Di Blog Anda

Tau gak sih Message Box itu apa ? Message Box itu semacam alert yang biasa kita jumpai di komputer apa bila terjadi error. tapi di dunia maya pun banyak website atau blog yang menggunakan Message Box untuk Blog mereka. Contohnya bisa kita lihat di blog ini , apabila kita membuka blog ini maka akan muncul message box bertuliskan :" Welcome To blog  amry ". keren kan :p .


Maka dari itu saya akan mengajarkan teman teman untuk membuatnya .

1 . Buka menu Rancangan pada Dashboard, lalu pilih Edit Html

2. Lalu cari Tag <head>

3. Lalu Copas ( Copy Paste ) script dibawah ini sebelum tag <head>

<script type='text/javascript'>
alert (&quot;Welcome To Blog ala amry&quot;)
</script>


4. Tulisan yang saya beri tanda merah itu bisa kalian ganti sesuka hati

5. Lalu buka blog anda dan liat hasilnya.

pasang effek krusor tulisan ular ularan pada blog

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...
Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode </head>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Kalau sudah ketemu, copas kode berikut diatasnya.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Masukkan teks kamu disini";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :

document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +

'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>

Catatan :
  1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks
  2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).
  3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.
  • Jangan lupa disimpan.

Selamat main ular-ularan...

Selasa, 28 Desember 2010

MEMBUAT FORMAT CONTACT US DI BLOG

Pengunjung blog terkadang ingin bertanya sesuatu tentang postingan yang anda tampilkan atau masalah lainnya yang berkaitan dengan blog anda.
Untuk itu anda sebagai pemilik blog harus menyediakan ruang bagi pengunjung untuk bertanya (apapun istilahnya) dalam bentuk ruang tersendiri yang biasa disebut Contact Us ( Hubungi Kami)
Sebenarnya pengunjung bisa dsaja memberikan komentarnya pada kotak komentar, namun kadang-kadang isinya mungkin lebih bersifat pribadi/mengandung unsur rahasia. Maka solusinya anda harus membuat ruangan tersendiri dalam Form Contact Us /Hubungi Kami.
LANGKAH-LANGKAHNYA :

1.Kunjungi situs : http://kontactr.com
2.Klik Menu Signup untuk daftar di bagian kanan atas..
3.Isi kotak yang tersedia dengan data-data anda.
4.Klik tombol Signup setelah data anda lengkap.
5.Selanjutnya pihak kontactr akan mengirim email ke email anda pada waktu daftar tadi.
6.Buka email anda kemudian klik email dari kontactr untuk melakukan activate account anda.
7.Pada halaman kontactr muncul tulisan success dan tulisan :Your account has been activated successfully.
  Click here to login to your account now. Klik .Click here untuk login.
8.Silahkan anda lakukan login dengan username dan password anda tadi.
9.Pada halaman berikutnya ada sript dibawah tulisan Ajax Embed Code. Copy script tersebut dan
     paste di halaman post baru anda.
10.Jika ingin mengubah tampilan warna, klik Customize This Widget, silahkan anda atur tata warna
     yang anda inginkan.
11.Klik Terbitkan Entry setelah anda menambahkan kalimat-kalimat yang anda rasa perlu
     ditampilkan bersama Form Hubungi Kami (Contact Us)
12.Silahkan anda coba........ Semoga bermanfaat.