SKRIPSI-PTK-RPP: Maret 2013

Sabtu, 16 Maret 2013

Cara Membuat Button/Tombol Efek Animasi Bubble dengan Menggunakan CSS3 - Pastinya sobat blogger sudah pernah melihat di blog lain ada dipasang button/tombol dengan animasi bubble atau seperti ada gelembung-gelembung balon didalam button/tombol tersebut. Button/tombol biasanya dibuat untuk meletakkan link download atau link lain tergantung kemauan si pengguna atau si pemasang tombol. Pada tips blogging ini saya mau berbagi mengenaicara membuat button/tombol dengan efek animasi bubble menggunakan CSS3. Namun sebelumnya silahkan dilihat dulu preview dari button animated bubble yang dibuat menggunakan CSS3 dibawah ini.

Demo BIG Demo MEDIUM Demo SMALL

Button/tombol yang dibuat terdiri dari 3 size atau ukuran yaitu besar, sedang dan kecil. Untuk kode button/tombolnya seperti yang saya tuliskan dibawah ini yang terbagi dalam 4 warna pilihan, sobat tinggal pilih ukuran dan warna yang sesuai yang diinginkan.

Kode button/tombol besar :

<a class="button big blue" href="LINK">LINKNAME</a>

<a class="button big green" href="LINK">LINKNAME</a>

<a class="button big orange" href="LINK">LINKNAME</a>

<a class="button big gray" href="LINK">LINKNAME</a>

Kode button/tombol sedang :

<a class="button blue medium" href="LINK">LINKNAME</a>

<a class="button green medium" href="LINK">LINKNAME</a>

<a class="button orange medium" href="LINK">LINKNAME</a>

<a class="button gray medium" href="LINK">LINKNAME</a>

Kode button/tombol kecil :

<a class="button small blue" href="LINK">LINKNAME</a>

<a class="button small green" href="LINK">LINKNAME</a>

<a class="button small orange" href="LINK">LINKNAME</a>

<a class="button small gray" href="LINK">LINKNAME</a>

Ganti tulisan Link dengan link referensi tujuan jika button/tombol animasi bubble tersebut diklik, kemudian ganti juga tulisan Link-Name dengan nama button atau tulisan yang akan terlihat didalam button. Untuk penempatan kodenya bisa ditempatkan didalam postingan atau kalo mau meletakkannya didalam template maka letakkan dimana saja atau diantara kode <body> dan kode </body> pada template anda. Eeiiitt…sabar jangan di save dulu templatenya karena masih ada kode CSS yang harus sobat masukkan pada template agar button/tombol dengan efek animasi bubble tadi berfungsi dengan baik.

Copy kode CSS diatas kemudian paste tepat diatas kode ]]></b:skin> pada template anda. Nah sekarang barulah SAVE template anda dan coba lihat hasilnya. Dengan menggunakan button/tombol efek animasi bubble ini pastinya button yang dibuat jadi

cara ganti nama fb

Cara Mengganti Nama di Facebook Terbaru - Postingan kali ini akan mengulas tentang tips dan trik facebook terbaru. Mungkin para pembaca sekalian pernah mengalami masalah dalam penggantian nama di facebook. Dan kalian tidak tahu bagaimana dan kenapa bisa situs sebesar facebook tidak bisa berganti nama dalam akun membernya. Perlu kalian ketahui di facebook ada limit penggantian nama. Jika kita sudah melewati batas penggantian nama jelas kita akan susah dalam mengganti nama akun facebook kita.

Untuk itu saya akan sedikit memberikan solusi bagi kalian para faceboker yang tidak bisa menganti nama akun facebooknya entah itu karena limit atau karena sesuatu yang lain. Berikut caranya:

1. Masuk atau Login ke Facebook.
2. Masuk ke Pengaturan Akun / Account Setting

3. Ganti Nama Awal Kalian (nama yang kalian gunakan saat mendaftar ke facebook)

4. Setelah ganti nama, masuk ke sini

5. Tunggu tulisan pojok kanan atas menjadi SKIPS ADS, baru di klik SKIP ADS nya...
6. Lalu Klik Amankan Akun. ikuti langkah-langkahnya. Kita akan diminta memasukkan password baru, Kenapa password baru? karena untuk pemulihan seolah-olah akun Facebook kita dicoba disusupi (hack), jadi wajib merubah password

7. Nanti saat kalian sudah masuk Step 3 / Review Changes, ada pilihan Tinjau dan Perbaiki Nama kalian. Dan disinilah kenapa kita hrus ganti nama kita sebelumnya. Seolah-olah Nama Facebook kita diganti oleh orang lain yang mana kita akan diberikan pilihan untuk perubahan nama.

8. Lanjutkan sampai proses selesai dan aktikan akun kalian.

**) Jangan lakukan berulang-ulang nanti ke banned akun fb kalian...

UJIAN PRAKTEK SMP 7 BULUKUMBA

Make a descriptive text about your "Family"

Your name and all about you..(hobby,age,job,favorite food and drink. and physical appearance)
parents name,hobby,age,job,favorite food and drink. and physical appearance
sister and brother (name,hobby,age,job,favorite food and drink. and physical appearance)

Minggu, 10 Maret 2013

Membuat Teks Pada Kursor – Jumpa lagi sobat blogger !! Sory banget kalau saya lama ngga bikin posting karena lagi banyak kesibukan offline di akhir tahun 2011 kemarin. Mengawali tahun 2012 ini saya mau share tentang membuat teks pada kursor. Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog. Buat yang sudah bosan dengan trik mengganti gambar pada kursor, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.

Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Selamat mencoba Cara Membuat Teks Pada Kursor ini dan Selamat Tahun Baru 2012 buat sahabat blogger semuanya !!

Cara Mengganti Gambar Kursor di Blog - Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar inihttp://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

URL :http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL :http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL :http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL :http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL :http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

Cara mengganti gambar kursor di blog :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Carilah kode </head> pada template anda dengan menggunakan Ctrl F.

4. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .

<style type='text/css'> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"), auto;} </style>

5. Simpan template anda dan lihat perubahan pada gambar kursor

6. Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/.

Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat mencoba ya !

test pasang tanda tangan di blog

mempercantik blog dulu baru nge post hal penting

SKRIPSI-PTK-RPP

Sabtu, 16 Maret 2013

cara ganti nama fb

UJIAN PRAKTEK SMP 7 BULUKUMBA

Minggu, 10 Maret 2013

Mengenai Saya

Arsip Blog