Blog Intania

Rabu, 20 Mei 2015

Cara membuat blog menjadi keren!

Published : 20.10 Author : Intania

hi lagi gan!, ini pertama kali Blog Intania menuliskan Tips&Trick, oke langsung saja ya

1. Template

ada banyak jenis nih gan
a. BisnisOnline
b.Template naruto
c.Template Lucu
d.template Gaul
nah itu tadi jenis Templates searang lanjut!

2. Cara menambahkan pesan Pembuka pada grup

Pertama Kalian Buka
https://www.blogger.com
Kemudian Buka -----> Tata letak
Kemudia Add Gadged / Tambah Gadget ------> HTML/JavaScript
Dan Copy And Paste Code Di Bawah Ini

<script type='text/javascript'>
var name = prompt("Hallo..Selamat Datang... Nama Kamu siapa..?", "nama kamu disini");
alert("Salam Kenal ya :) "+name)
alert("Selamat Membaca Cheat di Blogku... :)")
</script>

Lihat Hasilnya
yang tulisan warna merah bisa diganti sesuai hati.
Semoga Bermanfaat :) Kalo Yang Belum Bisa Tulis Komentar Entar Saya Jawab

3. Cara membuat kursor menjadi gambar kartun

Cara untuk tampilan blogger lama :
1.Login ke blogger anda
2. Pilih Rancangan
3.klik Tambah Gadget Html/JavaScript
4.Copy & paste kan kode html mouse yang diinginkan di bawah ini
5.Terakhir Simpan

Cara untuk tampilan blogger baru :
1.Login ke blogger anda
2. Pilih Laman
3.Pilih Tata Letak
4.klik Tambah Gadget Html/JavaScript
5.Copy & paste kan kode html mouse yang diinginkan di bawah ini
6.Terakhir Simpan

Spongebob

Mr.Crab

Bird

Mouse Pelangi

Cartoon

Fire Guitar

Love

Peace

Angel

Icon Moon

vegeta dragon ball

superman

samurai x

monkey


I love her

I love him

lihat hasilnya cursor animasi sudah ada di blogger anda

Semoga Bermanfaat Yang Belum Tahu Silahkan Komentar Entar Aku Jawab

4. cara membuat bintang berjatuhan mengikuti kursor

Login dulu ke Blogger kalian
Masuk ke dashboard.
Pilih Tata Letak => Tambahkan Gadget
Lalu Pilih HTML/JavaScript.
Masukkan Script dibawah ini:

Keterangan : Ganti tulisan Biru dengan warna sesuka kalian,,
Kemudian simpan dan Lihat hasilnya!
Jika ada pertanyaan atau masih bingung silahkan tulislah di kotak komentar!

5. cara membuat tulisan mengikuti kursor

1. Masuk ke dashbord blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Copy code berikut ke dalam box HTML/Java Script

<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(){

// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (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;

// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //

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>

Penting : Ganti tulisan yang berwarna merah dengan tulisan/teks yang sobat inginkan.

4. Simpan dan lihat hasilnya.

Bagaimana? Mudah sekali bukan? :)
kalau ada yang belum mengerti silahkan tulis di kotak komentar!

5. Kode Javascript Dan HTML Sederhana Buat Di Blog

1. Anti Klik Kanan

Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.

<body oncontextmenu="return false;">

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
alert("SELAMAT DATANG DI BLOG GAK JELAS INI");
</script>

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}
</script>

3.Onmouseover Sound

Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.

<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("SCsound").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>

<span id="SCsound"></span>

Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.

<a href="#" onmouseover="playSound('URL-FILE-MUSIK/SOUND');">
Mouseover DISINI Buat Dengerin Musik</a>

Atau

<a href="#" onclick="playSound('URL-FILE-MUSIK/SOUND');">Klik DISINI Buat Dengerin Musik</a>

Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.

Mouseover DISINI Buat Dengerin Musik

Klik DISINI Buat Dengerin Musik

5. Teks Berjalan / Marquee

Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.

<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="left" bgcolor="#FF0000">Teks, Link Atau Gambar Kalian Disini</marquee>

Buat ngerubah arahnya tinggal di ganti aja "left" sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.

<script type="text/javascript">
//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;

//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//get the textual element
var val = document.getElementById("numValue");
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+"%";
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
    setTimeout("startProgress()", 100);
//task done, enable the button and reset variables
else
{
    document.getElementById("startBtn").disabled = false;
    done = false;
    currProgress = 0;
}
}
</script>
<progress id="prog" value="0" max="100"></progress>
<br />
<input id="startBtn" onclick="startProgress()" type="button" value="start" />
<div id="numValue">
0%</div>

Standarnya progress bar ini kodenya cuma <progress value="0" max="100"></progress> gan
Sumber : http://www-kamusceriaanak.blogspot.com

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.

Biasa

<textarea rows="4" cols="50">
Teks atau Kode Disini Gan
</textarea>

Seleksi Otomatis

<textarea rows="4" cols="50" onclick="this.focus();this.select()" readonly="readonly">
Teks atau Kode Disini Gan
</textarea>

Seleksi Dengan Tombol

<form name="selectall">
<textarea name="messageBody" rows="4" cols="50">Teks atau Kode Disini Gan</textarea>
<br />
<input type="button" value="Select Text" onClick="javascript:this.form.messageBody.focus();this.form.messageBody.select();">
</form>

Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.

Biasa

Seleksi Otomatis

Teks atau Kode Disini Gan

Seleksi Dengan Tombol

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode </head> atau bisa juga paste langsung di postingan dengan linknya gan.

<script language="javascript" type="text/javascript">
function scpopup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
}
</script>

Buat kode linknya seperti di bawah ini silahkan di copy paste gan.

<a href="Target URL Pop up" onclick="return scpopup('Target URL Pop up')">Contoh Link Popup</a>

Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan. Buat contoh klik aja link di bawah ini gan.

Contoh Link Popup

Sekian dulu yang bisa gw share kali ini gan semoga kode javascript dan HTML sederhana ini bisa berguna buat di blog kalian. Kalau kalian juga punya kode-kode yang keren silahkan di share sama jangan lupa juga ninggalin komentar gan. » Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.
URL :

http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html

HTML link kode :

<a
 
href="http://seociyus.blogspot.com/2013/02/kode-javascript-dan-html-sederhana-buat-di-blog.html">Kode
 Javascript Dan HTML Sederhana Buat Di Blog</a>

» Luangin waktu 5 detik donk gan buat share postingan ini.

Sumber: http://blog-intania.blogspot.com/
Under Creative Commons License: Attribution Non-Commercial

oke Sekian, semoga bermanfaat!

Blog Intania

Rabu, 20 Mei 2015

Cara membuat blog menjadi keren!

1. Anti Klik Kanan

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Pesan Penutup

3.Onmouseover Sound

5. Teks Berjalan / Marquee

6. Downloading Progress Bar

7. Textarea

8.Link Dengan Pop Up

Mengenai Saya

Music

Popular Posts

Blogger templates

Pilih Bahasa

Archive