Cara Membuat Energy Saving Mode Di Blog Dengan CSS3

adminPosted by Noochii dateSunday, August 14, 2011

assalamualaikum sobat,
apa kabar kalian semua..mohon maaf kalo blog ini jarang di update.. :D
insya allah sekarang saya akan mengupdate nya terus, kali ini postingan saya membahas tentang blog lagi ni, yaitu Cara membuat energy saving Mode pada blog,
yang seperti tergambar pada blog saya,
energy saving mode ini di buat dengan CSS jadi tidak akan memberatkan blog sobat..


pingin blog sobat ada energy saving mode nya ??
ikutin aja langkah saya dibawah ini.. :D


  • Login ke Blog sobat.
  • Pilih menu design/Rancangan
  • lalu klik Add gadget
  • trus pilih HTML/javascript
Sekarang tinggal copy code dibawah ini


<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.80;filter: alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";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:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);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", Chiller;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:url(http://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif);border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Chiller, Chiller, 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://i1231.photobucket.com/albums/ee519/noochii/matrixt.gif) 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_Tejahtc {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'>Noochii_NC<br/>
<br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p>
<div class='noochii'>
</div></div>

Keterangan : Tulisan yang berwarna Hijau ganti dengan kata" sobat.. dan tulisan yang berwarna Merah adalah URL gambar nya. sobat ganti dengan gambar sobat sendiri.

  • Lalu di save dan lihat hasil nya di blog sobat.. :D
Terima kasih.. :D
Readmore Cara Membuat Energy Saving Mode Di Blog Dengan CSS3

Cara Agar Background Blog Full Size

adminPosted by Noochii dateWednesday, August 3, 2011

Selamat pagi sobat blogger..
selamat menjalankan ibadah puasa.. :)
pagi hari ini saya akan memposting tentang Cara Agar Background Blog Full Size, mungkin ada dari sebagian sobat blogger yang kesulitan dengan background blog nya yang tidak full size.. seperti saya ini, saya juga bingung mengatur ukuran background blog saya..akirnya saya menyerah dan tanya ke mbah Google . :P untung ada artikel dari sobat blogger,yang sangat bermanfaat buat saya,

sekarang saya akan memberikan solusi untuk sobat yang kesulitan dalam mengatur ukuran background blog nya.
okee.langsung saja mengikuti langkah" yang saya berikan dibawah ini..

yang harus sobat lakukan sekarang adalah

  1. Login Ke Akun Blogger sobat
  2. Klik Menu Design
  3. Lalu Klik Edit HTML
  4. dan jangan lupa di centang Expand Widget nya (untuk berjaga" kalau ada yang error)
  5. tambah kan code berikut Setelah URL background nya.
no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

CONTOH : 
{ background:#000 url(http://i1231.photobucket.com/albums/ee519/noochii/hulk-movie-wallpaper.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

    6. Simpan Template sobat dan lihat lah hasilnya.. :)
Semoga artikel saya bermanfaat.. selamat mencoba.. :)
Readmore Cara Agar Background Blog Full Size

Akhirnya Di Approve juga

adminPosted by Noochii dateMonday, July 18, 2011

Alhamdulillah, suatu kebanggaan buat saya., akhirnya account GA saya hari ini diterima.. setelah menunggu kurang dari 48 jam, saya mengecek gmail saya,,saya melihat ada email dari GA,ada perasaan senang dan ragu..apakah saya diterima atau ditolak lagi ?? :D sebelum nya saya juga sudah mendaftar GA berkali" .tetapi ditolak semua..hiikss..tetapi..saya tidak putus asa.. berbagai cara telah aku lakukan untuk dirimu .. loohh..kok malah nyanyi ?? :D :D

yaphh..saya sudah mencoba dengan cara"yang kebanyakan orang juga sudah menggunakan cara itu dan berhasiiiilll..tetapi nasib saya beda.. saya sudah mencoba melalui Indyarocks 
dari sebagian orang sudah berhasil mencoba mendaftar melalui Indyarocks tetapi saya tidak berhasil..padahal saya sudah mengikuti aturan mainnya..:D yang katanya harus mengupload 10 foto, huh
ada saja alasan GA menolak permintaan saya.. T.T

oiaa..saya juga sudah mencoba nya melalui Flixya hmmm..tapi disini belum sempet daftarin ke GA.. karena pas saya masukan email nya tidak bisa..katanya.email saya sudah digunakan..saya sudah tanya" ke teman"saya dan tidak ada yang tau..padahal itu email baru saja saya buat .. apa boleh buat..akhirnya saya logout deh tuh Flixya nya..dan mencoba untuk daftar GA melalui Monetize dari blog saya..

sebelum mengisi formulir nya.,.saya teliti dulu melihat blog saya..apakah sudah rapih atau belum..

okee.. blog sudah rapih, saya hanya memasang widget guestbook dan hitstat .. ;D
hmm..ternyata mendaftar GA tidak diharuskan untuk blog yang traffic nya tinggi..

langsung saja saya mengisi formulirnya dengan benar..dan teliti..
setelah itu tinggal menunggu apakah GA saya di approve apa tidakkkkk

dan akhirnya,sekarang tepat tanggal 18 juli 2011..GA saya diterima.. :)

sedikit tips buat sobat yang GA nya belum diapprove..

1.buat akun gmail yang belum pernah didaftarkan ke GA

2.kalau sobat sudah punya blog yang berbahasa indonesia, dan artikel nya hasil tulisan sendiri,sobat translate aja ke bahasa inggris,trus copy deh ke blog yang akan di daftarkan ke GA
minimal 3 artikel berbahasa inggris yang diposting, kalau bisa berupa gambar.

3.setting blog nya menggunakan bahasa inggris-inggris

4.pasang widget guestbook dan jumlah pengunjung (Histat)
kedua widget tersebut bisa sobat dapatkan disini
Guestbook Histat

 okee..saya rasa cukup segini saja,,semoga tips ini bermanfaat buat sobat yang GA nya belum di Approve, jangan mudah menyerah.. cobalah terus sampai GA sobat diterima,
mereka saja bisa..kenapa kita tidak ??
oiaa..sempet lupa.. kunjungi ini Disini ya..dan cipok GA nya .. :P
Readmore Akhirnya Di Approve juga

Cara memasang Tombol Sharing is Sexy di Blog

adminPosted by Noochii dateMonday, July 11, 2011

Assalamualaikum ..
Selamat malam sobat, Maaf sebelumnya saya baru menulis postingan lagi, karena kemarin" lagi ngga mood nulis postingan.hihihiih
entah kenapa rasa nya malas sekali,, padahal dapet banyak ilmu baru .. wuiisshh, (bukan ilmu hitam loh.) :P
pada malam hari ini saya akan memposting cara memasang tombol share is Sexy.. (wah,dari namanya aja udah fulgar nih) tapi tunggu dulu,,jangan ngeres dulu,, :P
ini Tombol share biasa..ngga ada sexy"nya..saya juga bingung itu dapet darimana namanya ?? ahahha
tapi kelebihannya..tombol share nya banyak banget..itu buat apa aja ?? paling orang"juga share nya cuma ke facebook sama twitter...ckckkckckkc
tapi kalo masalah itu bisa sobat edit sendiri kok..

oiaa..saya juga memakainya di blog saya . nih saya kasih liat SS nya,.


gimana ?? banyak kan ??
anda tertarik menggunakannya ??
okedeh langsung saja ikutin langkah"saya dibawah ini..karena saya juga sudah mulai mengantuk .. -,-

-Pertama, sobat harus login dulu ke akun blogger sobat,

-Setelah itu.klik design, edit html

-Jangan lupa dicentang expand widgetnya..

-Cari Code </head>


-Setelah Ketemu. Copy code dibawah ini dan paste code tersebut dibawah code </head>


-Kemudian. agar tombol share nya berada di bawah postingan cari code berikut <data:post.body/>
-Jika Sudah ketemu.. Copy paste code dibawah ini tepat di bawah code <data:post.body/>
(Kalau code nya ada 2.. pilih yang ada di bawah)




-Kalau Sudah semua..Klik Save Template.. dan.sobat lihat hasilnya ..:)

Untuk Merubah gambar yang berada di atas tombol..sobat cukup mengganti
tulisan yang berwarna hijau dengan code berikut.


sexy-bookmarks-bg-sexy

sexy-bookmarks-bg-enjoy

sexy-bookmarks-bg-caring-old

sexy-bookmarks-bg-love

sexy-bookmarks-bg-wealth


sexy-bookmarks-bg-caring

Lumayan panjang ya untuk postingan kali ini..huh
Selamat Mencoba nya sobat .. :)
Readmore Cara memasang Tombol Sharing is Sexy di Blog