Wisnu Saputra FanG: Blogging Tips

Tampilkan postingan dengan label Blogging Tips. Tampilkan semua postingan

Jumat, 08 Juni 2012

Panduan Cara Membuat Buku Tamu "Menggantung" di Blog

03.13

Wisnu FanG

1 comment

Buku tamu/Shoutmix/Shoutbox merupakan salah satu aksesoris blog yang akoe anggap sebagai salah satu aksesoris yang wajib ada di blog/website.Bentuk dari buku tamu mungkin berbeda-beda,namun mempunyai

fungsi yang sama.Fungsinya adalah untuk memudahkan pengunjung untuk mengisi buku tamu tersebut,kalau dia pernah singgah di blog sobat.Dalam panduan blogger kali ini,akoe akan membantu sobat untuk membuat buku tamu/guest book

yang tampilannya menggantung/melayang di blog.Jika sobat mau lihat contoh buku tamu menggantung/melayang ini,sobat gak perlu jauh-jauh berkunjung ke blog lain.Silahkan sobat lihat aja di blog ini "tjoretan-akoe" yang ada di sebelah kanan sobat bagian atas.Jika sobat tertarik untuk mempunyai buku tamu yang serupa dengan blog ini,silahkan sobat langsung saja simak penjelasannya di bawah ini.Caranya cukup mudah kok.......simak ya......

Untuk memulai membuatnya,silahkan ikuti panduan dan langkah-langkahnya seperti berikut :

- Seperti biasa sobat mesti login dulu ke blog sobat
- Silahkan klik Rancangan
- Klik elemen laman
- Klik tambah gadget/add gadget
- Klik opsi HTML/Javascript
- Silahkan sobat Copy dan Paste Kode HTML di bawah ini :

- Silahkan sobat ganti tulisan yang berwarna merah dengan Kode yang sobat peroleh dari cbox

- Untuk mendapatkan kode dari cbox,silahkan kunjungi Cbox

- Silahkan Registrasi/Sign Up dengan email sobat terlebih dulu,kemudian verifikasi email trus silahkan login

- Silahkan ikuti petunjuk yang ada

- Copy dan Paste kodenya ke tulisan yg berwarna merah tersebut

- Selesai

Read more »

Selasa, 22 Mei 2012

Cara Membuat Favicon di Blog

05.34

Wisnu FanG

No comments

Apa itu favicon? Favicon yaitu sebuah icon yang terletak disamping address bar web browsers, ini akan menjadi icon identitas untuk mudah mengenali blog sobat, untuk lebih jelasnya coba lihat gambar dibawah ini

Untuk Cara Membuat Favicon di Blog, berikut Caranya :

Favicon ini harus berbentuk bujursangkar panjang dan lebar harus sama berukuran 16x16 bisa juga 32x32 pixel dengan size maksimal 100 KB, jika sobat belum mempunyai software aplikasi pembuat file .ico, dapat membuat pada layanan buat Favicon disini Cool Text.
Pada halaman depan web, terpampang beberapa logo-logo untuk favicon. Pilih lah salah satunya. Jika anda tidak ingin membuat favicon dari logo-logo yang terpampang, anda juga dapat memilihnya dari menu atas web, disana ada menu logo, buttons dan fonts. Pilih salah satunya.
Setelah anda memilihnya, aturlah sesuai dengan keinginan anda. Setelah itu klik Render Logo. Lalu, pilih Download image.
Maka akan mendownload dan tersimpan pada komputer hasilnya.
Tapi format file dari file tersebut belum mendukung. Ubahlah format file itu ke ico dengan online converter di situs Online Ico Converter.
Lalu pilih file yang telah anda download tadi. Lalu ubahlah ukuran file tadi mau 16x16 atau 32x 32 yang penting tidak lebih dari 100 KB. Setelah itu klik convert. Maka file tersebut akan mendownload dan tersimpan di komputer kita.
Langkah berikutnya masuk ke Blogger. Pilih Tata Letak, klik pada edit favicon. Setelah itu klik pada Browse dan masukkan file .ico yang telah diconvert tadi.
Simpan

Mungkin favicon tak akan segera tampil, tunggulah beberapa waktu hingga favicon blog anda tampil dan nantinya akan terlihat lebih oke... ^_^

Read more »

Cara Membuat Animasi Tulisan Berputar Mengelilingi Cursor

04.39

Wisnu FanG

No comments

Login ke dashboard blogger
Klik Tata Letak

Setelah itu klik Tambah Gadget

Pilih Gadget / Widget HTML/JavaScript

Klik Edit HTML

Tutorial Panduan Membuat Tulisan Mengikuti Cursor

Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.

<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: #999;

/* 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 = "Wisnu Saputra";
/* 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>

Keterangan :

// Your message here (QUOTED STRING)
var msg = "Wisnu Saputra";

silakah ganti tulisan Wisnu Saputra dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.

Bagaimana cara merubah warna tulisan yang mengikuti cursor tersebut ?

Karena ada beberapa teman kita yang menanyakan hal tersebut maka akan saya tuliskan caranya.

Silakan lihat pada bagian atas kode script tulisan mengikuti cursor tersebut, maka kamu akan menemukan kode

color: #999;

Silakan ganti #999 dengan kode warna lainnya yang kamu suka (ingat hanya kode #999 yang diganti). silakan temukan kode warna yang kamu suka di Daftar Kode Warna

Read more »

Daftar Kode Warna HTML

04.34

Wisnu FanG

No comments

Kode HTML Warna ini nantinya bisa di gunakan sesuai keperluan kita masing-masing, misalnya untuk merubah warna latar belakang blog blogger kita, warna header, footer, warna font, dsb.

Dafrtar Kode Warna HTML Untuk Blogger : Image

Berikut Daftar Kode Warna yang bisa anda gunakan:

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

#465584	#EEF2F7	#3A4F6C	#00D	#434951	#555
#777	#DFE6EF	#345487	#F5F9FD	#3860BB	#BCD0ED
#C2CFDF	#F0F5FA	#D1DCEB	#003	#900	#CCE9FD
#E4EAF2	#4C77B6	#DFE6EF	#EEF2F7	#F