Screen Saver Blog dengan Css328

Screen Saver Blog dengan Css3

hallo sobat evanzip mgn kabar nya???? wah dah lama juga ne nga update postingan maklum sob sibuk...:D

baik sobat evanzip sebelumnya evanzip sudah menjelaskan cara update status FB via BlackBerry dan untuk Tutorial kali ini evanzip akan membuat postingan cara membuat Screen saver css3.Screen saver Css3 akan muncul /tampil pada blog pada saat Mouse kita diamkan dan pada saat mouse kita gerakkan maka kita akan kembali  lagi pada halaman yang tadi.

penasaran kan sobat, silahkan lihat  dulu demonya :

DEMO

 

 

nah gimana sobat evanzip tertarik mau buat screnn saver css3 di blog sobat silahkan ikuti langkah berikut ini:

1. Login Ke Akun Blog Sobat
2. Pada Dasbor Klik Rancangan=>> Kemudian Tambah Gadget Dan Pilih HTML Java/Script
3. Pastekan Kode di bawah ini Tepat Didalamnya

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter: alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background: #0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background: #000;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_evanzip{margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_Tejahtc span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class='saving'>

<p class='esm1'>Evano Saputra<br/>

<br/><div class='by_evanzip'>Original design by: <span class='esm4'> Evanzip.blogspot.com - Evanzip.blogspot.com</span> -  2011</div>

</p>

<center><span class='esm3'>Move your mouse to go back to the page!<br/><blink>Hey...jangan pergi dulu gerakin aja lagi mousenya,nah gitu dong!</blink></span>

</center></div>

4.Ubah nama warna kuning dengan nama sobat

5.Simpan

SELAMAT MENCOBA SEMOGA BERHASIL

Kritik Dan Saran Sangat Membantu evanzip Dalam Menulis Artikel Pada Tutorial Berikutnya

Baca Selanjutnya...

Cara Update Status FB via BlackBerry9

 Cara Update Status FB via BlackBerry

Halo sobat evanzip jumpa lagi kita gimana kabar pada sehat kan???

Oke sobat evanzip sebelumnya evanzip sudah berbagi  cara membuat kursor mouse di ikuti teks   dan Tutorial kali ini evanzip ingin berbagi cara Trik sedkit buat sobat evanzip yang mania Facebook dan ingin status sobat seperti temen sobat yang punya BB tapi sobat belum punya....jangan resah sobat evanzip akan berbagi  cara update status via BB atau Android bahkan sobat bisa lebih GOKIL dengan update status melalui calculator,komputer bekas,Dukun de el el...ada yang mau...????

silahkan ikuti petunjuk arah evanzip ini ya...

BlackBerry

Android

Setelah sobat berada di halaman Update status silahkan sobat klik terlebih dahulu dari mana sobat mau update statusnya mau dari BlackBerry atau Android

• isi kata kata sobat pada kolom Type your new status on the form below: 
• setelah selesai tinggal klik Update status 
• silahkan sobat lihat di beranda Facebook sobat

hehehe....sobat punya BlackBery kan...

Gimana sob mau mencobanya silahkan sobat      KLIK DI SINI

Selamat Mencoba

  Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...

Cara Membuat kursor mouse Diikuti Teks15

Cara Membuat kursor mouse Diikuti Teks

Halo Sobat evanzip Masih setiakan nongkrong di sini....:D,kali ini evanzip mau berbagi trik cara membuat kursor mouse di ikuti teks kemana saja mouse itu di gerakkan.kalau sobat gerakkan ke warung maka teksnya akan ikut ke warung juga hmmm...Just Kidding biar nga terlalu BT sob

Baik Sobat berikut Scripnya :

<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 = "Nama  sobat";

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

Silahkan Sobat Ikuti Langkah Langkah Berikut:
1.Masuk ke akun blog Sobat
2.Pilih Tata Letak/Rancangan =>Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna KUNING sesuai keinginan sobat
5.Simpan
Dan Lihat Hasilnya
 

Selamat Mencoba Semoga Berhasil

    Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...

Cara Membuat Widget Twitter Conversation Di Blog10

Cara Membuat Widget Twitter Conversation di Blog

Halo sobat evanzip sbelumnya evanzip sudah menjelaskan Cara Pasang LinkWithin Di Blog  

maka Tutorial berikut ini evanzip akan menjelaskan Cara Membuat Widget Twitter Conversation di Blog. kalau sobat Blogger suka bermain twitter nga ada salahnya sobat coba pasang widget Twitter Conversation di blog sobat.

Contoh Widget Twitter Conversation :

kalau sobat ingin membuat seperti punya evanzip silahkan sobat ikuti langkah langkah berikut ini :

1. Pilih My Website
2.  Kemudian pilih Propil Widget
3. Silahkan sobat atur warna,tinggi,lebar sesuai keinginan sobat kalau sudah selesai klik FINISH & GRABE CODE.
4. Maka akan muncul kode Scrip seperti ini : 

5. Silahkan sobat masuk ke akun Twitter sobat atau sobat klik DI SINI 
6.Silahkan sobat copy scrip yang tampil tersebut dan pastekan pada blog sobat
Pilih Tata Letak/Rancangan--->Kemudian Pilih HTML/Java Script  atau sobat klik Add to Blogger lalu simpan dan lihat hasilnya.

Selamat Mencoba Semoga Berhasil

 Kritik Dan Saran sobat Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...

Cara Pasang LinkWithin Di Blog10

Cara Pasang LinkWithin Di Blog

Halo  sobat evanzip Tutorial kali ini  evanzip akan membahas Cara Pasang LinkWithin Di Blog pada Tutorial sebelumnya evanzip sudah menjelasakan  Cara Mengganti Emoticon Keren Cbox  oke sobat evanzip LinkWithin sangat berguna untuk Blog di mana LinkWithin adalah salah satu untuk mempromosikan artikel-artikel kita yang lain.sebetul nya LinkWithin hampir sama dengan tampilan recent post slide yang bergerak bergantian...sobat evanzip juga mau tampilan recent post slide silahkan lihat Tutorialnya DI SINI oke sobat, semua terserah sobat mau pasang yang mana????mau dua2 nya juga it's oke.

contoh LinkWithin:

Baik Sobat kita langsung masuk ke Tutorial nya.

1. Silahkan sobat menuju Ke http://www.linkwithin.com/ atau klik  DI SINI

2. Silahkan isi kolom yang sudah di sediakan

    

3.  Kolom pertama "Email" Isi dengan  Alamat Email Sobat.

4.  Kolom ke dua "Blog link" isi dengan Alamat Blog/situs  Sobat.

5.  Kolom ke tiga "Platfrom" Pilih Platfrom  Sobat, (blogspot, wordpress, TypePad, dan Other).

6.  Kolom ke tiga "Width", Isilah jumlah LinkWithin yang akan di tampilkan pada Blog/situs Sobat

7.  Centang pada "My blog has light text on a dark background".

8.  Klink GET WIDGET!

9.  Klik Install Widget maka Widget secara Otomatis terpasang di Blog Sobat

10.Simpan dan lihat hasilnya

   Mudah kan sob.... 

Selamat Mencoba

Kritik Dan Saran Anda Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...

Cara Mengganti Emoticon Keren Cbox18

 Cara Mengganti Emoticon Keren Cbox

Pada Tutorial sebelumnya evanzip sudah menjelaskan cara membuat Cbox /Buku Tamu,dan Tutorila berikut ini evanzip akan menjawab salah satu pertanyan dari sobat Blogger cara pasang bendera indonesia di Cbox,nga cuma bendera indonesia lo motor,mobil juga bisa sobat masukin di icon cbox hehehe....langsung aja deh gan kelamaan

1 .login ke cbox sobat kalu belum punya silahkan buat dulu lah disini

2. Setting CBoX sobat sesuai dengan keingin sobat

3. Lalu masuk ke bagian Option-->> Smile . Untuk memasukan emoticonnya .

4. Kemudian masukkan Code dan URL emoticon sobat, lihat contoh gambar di bawah  ini 

Kalau sobat belum punya URL emoticon nga usah bingung langsung evanzip kasih lengkap

silahkan sobat ganti URL di cbox sobat dengan URL emoticon di bawah ini

5. Save ! dan Selesai...kini cbox/Buku Tamu sobat bisa tampil BEDA...

Kalau Tutorial ini bermanfaat silahkan tinggalkan komentar sobat di bawah ini

Selamat mencoba semoga berhasil

Kritik Dan Saran Anda Sangat Membantu evanzip Dalam Menulis Artikel pada Tutorial berikutnya.

Baca Selanjutnya...