Cara Menambahkan Lencana Facebook di Blog

1. Untuk mendapatkan kode lencana dari facebook, login facebook terlebih dahulu dengan mengetikkan alamat  http://www.facebook.com/badges/

2. Setelah itu klik Profile Badges

3. Setelah itu akan muncul tampilan sbb :

 4. Klik Tombol

5. Setelah itu copykan teks kodenya

6. Setelah itu masukkan ke dalam blog kalian dengan menambahkan SCRIPT/HTML

7. Lalu hasilnya seperti gambar dibawah ini :

Cara Membuat Kursor di Ikuti dengan Nama Sendiri

1. Langkah pertama Login terlebih dahulu ke blog kalian
2. Setelah itu klik Menu Layout (lihat gambar dibawah ini)

3. Setelah itu klik Add Gadget
4. Lalu Pilih Menu HTML/Script (lihat gambar dibawah ini)

5. Lalu Copy Script di bawah ini :

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

/* 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">

/* 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 = "Doddy Pascal";

/* 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>

6. Kemudian Paste pada kotak content (lihat gambar dibawah ini)
7. Setelah itu ganti lah nama  pada script yg bercetak tebal di bawah ini:

// Your message here (QUOTED STRING)
var msg = "Doddy Pascal";

Lihat gambar di bawah ini :

8. Setelah itu klik Save

9. Kemudian buka blog Anda untuk melihat perubahan.

Tutorial Membuat Efek Pada Blog

Trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.

Sebaiknya jangan tambahkan efek ini kalau di blog anda sudah menggunakan efek video slide/pemutar music mp3 online/penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek pada Blog :

• Login ke dashboard blogger anda.
• Klik Template >  Edit HTML.
• Cari kode </head>  pada template dengan menggunakan Ctrl+F.

 Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
1. Efek Petir :
<style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style>

2. Efek Bola Salju
<script src='http://blognyailmu.googlecode.com/files/Script%20Salju.js' type="text/javascript"></script>

atau
<script src='http://yourjavascript.com/1171704334/efek-salju-faisal.js' type='text/javascript'/>


3. Efek Daun Jatuh :
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>

4.  Efek Hati Berjatuhan :

<script src='http://the-kampoeng-blogger.googlecode.com/files/hatiberjatuhan.js' type='text/javascript'></script> 

5. Efek Kupu - kupu :
<script src='http://the-kampoeng-blogger.googlecode.com/files/Kupu-kupu.js' type='text/javascript'></script>  

• Save template anda dan lihat hasilnya.

Selamat mencoba Membuat Efek di Blog.

Gambar Rakitan

Ini adalah gambar aplikasi merakit PC

Tuliskan nama Blog kalian pada komentar di postingan ini ...!!!

Latihan membuat blog
Esktrakurikuler Web Design Di SMP Taruna Bhakti

Nama   : Doddy Pascal
Alamat  : Griya Pekapuran Indah