Menambahkan fitur flash jam
Menambah Fitur Flash Jam
Cara Memasang Jam Di Blog Keren, Sobat blogger, cara memasang atau menambahkan widget jam di blog sangatlah mudah untuk di terapkan, biasanya bagi seorang blogger untuk mempercantik tampilan blog adalah dengan menambahkan widget yang unik dan enak di pandang mata, yaitu salah satunya menambahkan atau memasang widget jam di blog yang di kelola dengan tujuan untuk mempercantik blog.
Menambahkan jam di blog salah satu widget untuk menghias blog anda menjadi lebih keren tentunya selain itu widget ini juga bisa menjadi pengingat untuk melihat jam berapa waktu di tujukan sekarang, selain itu kita juga punya pilihan untuk tampilan jamnya sendiri yang sesuai selera kita. Bagi anda yang ingin menambahkannya silahkan ikuti tutorialnya.
Cara Memasang Atau Menambahkan Jam Di Blog Keren
1. Silahkan klik atau buka link http://flash-clocks.com/analog-flash-clock-page1.html
2. Di tab baru pilih salah satu tampilan jam yang anda suka.
3. Klik HTML Embed Tag > Copy semua code tersebut
2. Di tab baru pilih salah satu tampilan jam yang anda suka.
3. Klik HTML Embed Tag > Copy semua code tersebut
Lihat contoh gambar di bawah :
4. Sekarang buka akun blogger anda.
5. Pilih menu tata letak > Add gadget > Html/Javascript > Paste code tadi yang di ambil > Klik Save
Lihat contoh gambar di bawah :
- [Panduan Pemula] Cara Mengganti Template Blogger.com
800px-Blogger-logo
Dua minggu yang lalu kita sudah membahas cara membuat blog gratis di Blogspot atau Blogger.comdan semoga sobat masih tetap semangat menulis di blog barunya. Selanjutnya kita akan membahas cara mengganti template di Blogger baik menggunakan template yang sudah ada atau template baru.
Untuk mengganti template, pertama yang harus Anda putuskan adalah apakah Anda ingin menggunakan template yang sudah disediakan oleh Blogger.com, atau memilih untuk menggunakan template lain, mungkin hasil desain sendiri atau didapat dari situs lain.
Jika Anda ingin menggunakan template sendiri maka sebaiknya unduh dari file template pilihan Anda terlebih dahulu. Namun jika Anda memilih menggunakan template yang sudah ada, maka Anda bisa langsung memulai proses perubahan template.
- Buka halaman Blogger.com dan masuk ke akun Google Anda. Kemudian klik blog yang template-nya hendak diganti, di dalam kasus ini saya masih menggunakan blog yang kita buat di tips sebelumnya dua minggu yang lalu.
- Setelah berada di dashboard blog klik menu Template.
- Masih di menu Template, scroll mouse Anda dan temukan sejumlah pilihan template yang sudah disediakan oleh Blogger.com. Ini yang saya maksudkan di paragraf awal, jika Anda ingin menggunakan template yang sudah ada silakahkan arahkan kursor ke salah satu template dan klik opsi Terapkan ke Blog.
- Tetapi apabila Anda ingin menggundakan template buatan sendiri atau orang lain, lihat sudut kanan atas layar komputer Anda dan temukan tombol Cadangkan/Pulihkan atau jika dalam bahasa Inggris Backup/Restore.
- Setelah tombol tersebut Anda klik, maka akan muncul jendela popup seperti gambar di bawah ini. Untuk melanjutkan klik tombol Browse.
- Anda akan diminta untuk memilih file template yang sudah Anda unduh sebelumnya, jika sudah ditemukan klik tombol Open.
- Anda akan kembeli ke jendela popup tadi, lalu klik tombol Unggah.
- Setelah pemberitahuan proses unggah (upload) template selesai maka sekarang blog Anda sudah menggunakan template baru, coba buka halaman muka dan perhatikan. Mungkin Anda akan menemukan susunan template yang kacau, untuk memperbaikinya Anda perlu membaca panduan modifikasi yang biasanya disertakan di dalam file template yang Anda unduh. Semua panduan akan menuntun Anda ke menu tata letak, untuk itu klik Tata Letak atau Layoutkemudian terapkan semua tutorial yang diberikan oleh pembuat template. Jika sudah selesai, klik tombol Simpan dan lihat perubahan yang terjadi.
Untuk mempermudah penggantian template, saya merekomendasikan Anda untuk memilih templateyang sederhana. Template yang rumit membutuhkan banyak proses modifikasi, dan jika terlalu sulit dikhawatirkan justru membuat Anda patah semangat dan meninggalkan blog yang baru Anda buat.
- Cara Mengubah Bentuk Cursor Mouse dan Menambahkan Model Cursor Baru
Jika anda bosan dengan bentuk cursor mouse yang sekarang ini. Anda bisa mengubahnya dengan berbagai kumpulan model tampilan yang menarik dan keren. Namun sebelumnya kita harus mempelajari dulu bagaimana prinsip mengubah cursor mouse baik itu di windows xp, vista maupun windows7.
adapun langkah-langkah dalam memasang widget animasi bergerak yai-tu :
silakan copas :
setelah itu simpan !!!
( angka dapat kalian atur sesuai dengan kebutuhan)=> untuk mengedit/ mengatur lokasi sesuai kebutuhan misal animasi bergerak ini dapat di
buat agar tidak ada di pojok/sudut blog . melainkan diam / berada pada posisi
yang kalian ingin kan , jika kalian tertarik untuk mengeditnya .silakan kalian edit "position : fixed ; bottom:0px;left:10px"
position fixed : maksudnya adalah posisi animasi akan selalu bergerak . jika andaingi posisi animasi tersebut hanya diam pada satu posisi maka silakan hapus position : fixed ini
bottom : 0px : maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah .
jika kalian ingin membuat animasi tersebut tidak berada di bawah ,misalkan kalian ingin animasi berada di atas silakan kalian editbottommenjadi topleft : 10px : maksud left :10px ini adalah jarak antara animasi dengan sisi kiri . jika kalian ingin membuat animasi tersebut tidak berada di kiri,misalkan kalian ingin animasi berada di kanan silakan kalian editleft menjadi right.
saran ..!!!!
jika anda ingin mengedit animasi menjadi di kanan dan di atas sebaiknya edit saja seperti ini"position : fixed ; top:0px;right:10px"
- masuk atau login ke blog kalian
- klik Rancangan / Design kemudian klik Elemen laman / page Elements
- Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
- pilih HTML/JAVA SCRIPT
- lalu copy pastekan script-script berikut ini ( sebaiknya jangan di beri judul )
script di bawah ini telah di setting sedimikian rupa agar animasi tersebut ada tepat di pojok kiri bawah blog . jika kalian tidak mau animasi tersebut berada di pojok kiri bawah blog kalian .. silakan kalian hapus atau edit kembali script yang berwarna hijau pada contoh di bawah ini setelah gambar animasi ..
silakan copas :
 |
| Animasi Helikopter Gif |
( angka dapat kalian atur sesuai dengan kebutuhan)=> untuk mengedit/ mengatur lokasi sesuai kebutuhan misal animasi bergerak ini dapat di
buat agar tidak ada di pojok/sudut blog . melainkan diam / berada pada posisi
yang kalian ingin kan , jika kalian tertarik untuk mengeditnya .silakan kalian edit "position : fixed ; bottom:0px;left:10px"
position fixed : maksudnya adalah posisi animasi akan selalu bergerak . jika andaingi posisi animasi tersebut hanya diam pada satu posisi maka silakan hapus position : fixed ini
bottom : 0px : maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah .
jika kalian ingin membuat animasi tersebut tidak berada di bawah ,misalkan kalian ingin animasi berada di atas silakan kalian editbottommenjadi topleft : 10px : maksud left :10px ini adalah jarak antara animasi dengan sisi kiri . jika kalian ingin membuat animasi tersebut tidak berada di kiri,misalkan kalian ingin animasi berada di kanan silakan kalian editleft menjadi right.
saran ..!!!!
jika anda ingin mengedit animasi menjadi di kanan dan di atas sebaiknya edit saja seperti ini"position : fixed ; top:0px;right:10px"
nahhh , sekarang coba kalian lihat hasilnya ..prok ..prok ..prok ..jadi apa
!!!!adapun script widget animasi yang lainnya dan bisa anda letakan di pojok blog dan banyak lagi yang telah saya temukan di mbah google , lihat di bawah ini : (cara membuat nimasi bergerak di pojok blog kalian ).
tinggal copy paste'in saja yaa .:
- Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog
Cara Membuat Tulisan Bergerak Mengikuti Kursor Di Blog
Blognya memiliki tampilan yang unik. Belum lagi, bentuk sidebarnya yang lain daripada yang lain. Dan masih banyak lagi keunikan-keunikan lainnya. Salah satu kreatifitas seorang blogger yang keren adalah ia memasang atau mengubah kursor ada tulisannya.
Kejadian ini pun Ngonline06 alami saat mengunjungi sebuah situs seorang kawan. Saya awalnya nampak bingung. "Dimana kursornya ini, koq gak nongol-nongol," gumam hati saya. Saya pun dibuat bingung dengan adanya tulisan yang muter-muter. Tak tahunya, tulisan yang muter-muter itulah yang selalu mengikuti kemana arah kursor berada. Maka kejadian itulah yang menginspirasi Ngonline06 dan memberi kesan yang dalam. Artinya, pemilik blog telah memberikan kesan unik pada diri ini dan itu bagus dan memang seharusnya pemilik blog mampu memberi kesan yang serupa kepada pembacanya.
Terlebih kesan untuk selalu mengunjunginya. Wooow kan....
Apakah sahabat pernah mendapati sebuah blog dengan kursor yang selalu diikuti oleh sebuah tulisan seperti yang Ngonline06 alami? Jika sudah, keren bukan? Apa jadinya, jika blog sahabat juga bisa menampilkan hal yang serupa, seperti tulisan nama sahabat atau orang yang sahabat sayangi? Tentu ini akan menjadi hal yang spesial bukan.
- Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog
Maka pada kesempatan ini, Ngonline06 akan berbagi tips Membuat Tulisan Bergerak Mengikuti Kursor di Blog. Sebagaimana motto Ngonline06, caranya pun sangat simpel. Lakukan saja, hal-hal berikut dengan baik.
- Langsung saja menuju dashbord blog sahabat.
- Klik Layout (Tata Letak) blog.
- Pilih add gadget (tambah gadget) > HTML/Java Script.
- Tulis java script di bawah ini pada kotak yang tersedia.
- Simpan dan lihat hasilnya.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;
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[
;(function(){
// Tulis pesan sahabat Ngonline06 disini ya... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// 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.2;
// 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;
// Kode cursor Ngonline06 selesai....! //
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: ganti huruf yang berwarna merah dengan tulisan yang hendak ditampilkan.#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;
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[
;(function(){
// Tulis pesan sahabat Ngonline06 disini ya... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// 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.2;
// 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;
// Kode cursor Ngonline06 selesai....! //
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>
Cara menampilkan jumlah pengunjung blog di blog kita
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>
7. Pastekan ke kotak / kolom Konten
8. Klik Simpan
9. Lihat Blog anda, Hasil seperti gambar dibawah ini.
SELAMAT MENCOBA
Komentar
Posting Komentar