Cara Menambahkan Fitur-Fitur Dalam Blog

Halo teman-teman ,Saya akan menjelaskan berbagai fitur-fitur didalam Blog yang perlu anda ketahui.

A.  Cara Membuat Animasi Pada Blog

   langkah-langkahnya ;
   1. Masuk Akun Blogger Sobat
   2. Pilih Tata Letak & Klik Tambah Gadget 
   3. Pilih Gadget HTML/Java Script
   4. Paste Kode gambar animasi yang sobat inginkan dibawah ini:
   5. Kalau sudah Klik SIMPAN

   Contoh :

•    Gambar Animasi Bergerak Naruto 

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div> 

•    Gambar Animasi Bergerak Spongebob

                                                                      

<div style="position: fixed; bottom: 80px; left: 10px;width:130px;height:160px;"><a href="http://softwaremaniapc.blogspot.com/2013/03/cara-membuat-gambar-animasi-bergerak-di.html" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://softwaremaniapc.blogspot.com/" target="_blank">Tutorial Blog</a></center></small></div>

 B.  Cara Mengganti Template Pada Blog

1. Login ke blog anda
2. Di kiri atas, klik Panah bawah .
3. Klik blog yang ingin diupdate.
4. Di menu sebelah kiri, klik Tema.
5. Klik tema yang ingin Anda gunakan.
6. Di kanan bawah, klik Terapkan ke Blog.
7. Opsional: Untuk menyimpan salinan tema, di kanan atas, klik Backup/Pulihkan  Download tema. 

C.  Cara Membuat Efek Gelembung Pada Blog

1. Masuk ke Blog anda

2. Buka halaman tata letak

3. Klik Add a Gadget

4. Pilih Gadget HTML/JavaScript

5. Masukkan script efek gelembung

6. Klik Simpan/Save

D.  Cara Menampilkan Jumlah Pengunjung Pada Blog

Langkah-langkahnya :

1. Masuk ke blog anda.
2. Klik Menu Opsi lain.

3. Klik Tata Letak.

4. Klik Add Gadget.

5. Klik HTML/Javascript.

6. Copy kode berikut :

<a href=”http://whos.amung.us/stats/cl4ibw7nzzry/”><img src=http://whos.amung.us/widget/cl4ibw7nzzry.png” width=”81″height=”29″border=”0″ title=”Click to see how many people are online”/> </a>

E.  Cara Membuat Tulisan Berjalan Mengikuti Kursor

1.  Masuk ke menu Tata Letak dan klik Tambahkan gadget

2. Kemudian klik tombol tambah pada pilihan HTML/Javascript

3. Setelah itu masukkan kode berikut ke dalam kotak konten seperti pada gambar, silahkan ganti script yang ditandai merah dengan kode warna dan tulisan yang sobat inginkan, jika sudah klik Simpan.. Selesai

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #4679BD;/*Ganti warna sesuai keinginan*/
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;}
</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(){
var msg = "Welcome To My Blog"; // Ganti tulisan sesuai keinginan
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
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>

4. Berikut adalah tampilan text bergerak mengelilingi kursor pada blog

Saya rasa hanya itu yang dapat saya informasikan, Semoga bermanfaat!

Terima Kasih