Sabtu, 18 Februari 2012

Cara Membuat Header Blog Transparan Dan Memberi Effect Perbatasan Radius

Sesuai permintaan Sobat Blogger, kali ini Saya akan memberikan Tips Cara Membuat Header Transparan Dan Memberi Effect Perbatasan Radius, seperti yang Kalian lihat pada Header Blog Saya ini. Bagaimana Kalian tertarik...??? kalau Kalian tertarik, silahkan ikuti langkah-langkah berikut.

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Kalau sudah, cari Code #header-wrapper (Agar mempermudah pencarian, tekan CTRL + F atau F3 pada Keyboard.)
  • Kira2 Codenya seperti Gambar di bawah. Dan tidak sumua Template itu sama Codenya, tapi yang penting di bawah Code #header-wrapper, pasti ada Code Gambar juga. Seperti ini Code gambarnya [background-image: url(URL Gambar);], dan apabila tidah ada Code Gambar pasti ada Code Warna seperti berikut [background:#0d0d0d;].

[4]. Nah kalau sudah ketemu, sekarang ganti Code tersebut dengan Code di bawah ini.
#header-wrapper{ background:#0d0d0d; -moz-opacity: 1.0; opacity: 0.8; -khtml-opacity: 0.0; -moz-border-radius-bottomleft:30px; -moz-border-radius-bottomright:30px; border:1px solid #ccc; width:980px; height:120px; margin:0 auto 10px; padding:0px;}
KETERANGAN :
* Jika Kalian ingin mengganti Warna Headernya, Kalian tinggal ganti saja Code Warna HTML-nya yang berwarna Merah. Dan apabila Kalian tidak punya Code Warna HTML, tenang saja Say sudah mempersiapkannya, klik saja di SINI.

Maka hasilnya seperti terlihat pada Gambar di bawah.


[5]. Nah kalau sudah seperti itu, tinggal di SAVE saja, dan lihat hasilnya.

Selamat Mencoba dan Semoga Berhasil...!!!

Jumat, 17 Februari 2012

Cara Membuat Screensaver Pada Blog


Kalian pasti sudah tahu-kan apa itu Screen Saver...?, kalo Screen Saver pada Blog, juga pasti sudah tahu dong...?, itu lo pada saat kita meninggalkan Blog kita terlalu lama, dan kita kembali lagi ke Blog kita,  maka Screensavernya akan keluar. OK, kalo sudah tahu, mari kita praktekan cara membuatnya. Silahkan ikuti langkah-langkah berikut ini :

[1]. Pertama pastinya Login dulu ke Blog Kalian
[2]. Trus cari Rancangan --> Elemen Laman --> Tambahkan Gadget
[3]. Copy dan Paste-kan Code di bawah ini ke dalamnya.
<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 : Copyright Tanpa Nama {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 : Copyright Tanpa Nama 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'>??[�_J�__.�_m�___.�_K�_]�<br/>
<br/><br/>
<span class='esm3'><blink>Gerakkan Mouse Kalian dan Silahkan Surfing Kembali...!!!</blink></span></p></div>
KETERANGAN :
* Tulisan yang berwarna Merah, ganti dengan Nama Blog atau Nama Kalian sendiri.

* Dan tulisan yang berwarna Biru, ganti dengan Pesan yang Kalian inginkan.

[4]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Bermanfaat...!!!

Cara Membuat Effeck Balon Gelembung Di Blog


Mungkin Tips ini tidak asing buat Kalian, dan mungkin Tips ini sudah di Posting-kan oleh Sobar2 Blogger yang lain. Dan Saya hanya mengenalkannya kembali. OK, kita langsung ke langkah-langkahnya saja :

[1]. Pertama tidak lain dan tidak bukan, Login dulu ke Blog Kalian
[2]. Trus cari Rancangan --> Edit HTML
[3]. Lalu cari Code </body> (agar lebih mudah mencari tekan CTRL + F atau F3 pada Keyboard)
[4]. Copy dan Paste-kan Code di bawah ini tepat di bawah Code tadi
<script src=
"http://jmk-js.googlecode.com/files/Bubble%20JmK.js">
</script>
[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Bermanfaat...!!!

Cara Membuat Kursor Bertabur Bindang Pada Blog V.02


Sebelunya Saya sudah pernah singgung tentang Cara Membuat Kursor Bertabur Bintang v.01, dan kali ini Saya akan bahas v.02-nya. Seperti yang Kalian lihat pada Blog ini, pada saat Kalian gerakan Mouse pasti akan ada Efect Bintangnya-kan. Kalo Kalian tertarik membuatnya, silahkan ikuti langkah-langkah berikut ini :

[1]. Seperti biasa login dulu ke Blog Kalian
[2]. Cari Rancangan --> Elemen Laman
[3]. Klik "Tambahkan Gadget" --> "JavaScript/HTML"
[4]. Pilih salah satu Bintang di bawah ini. trus Copy dan Paste-kan Code di bawah, kedalamnya.

Bintang Merah :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Merah%20JmK.js" type="text/javascript"></script>
Bintang Biru :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Biru%20JmK.js" type="text/javascript"></script>
Bintang Hijau :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Hijau%20JmK.js" type="text/javascript"></script>
Bintang Ungu :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Ungu%20JmK.js" type="text/javascript"></script>
Bintang Silver :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Silver%20JmK.js" type="text/javascript"></script>
Bintang Kuning :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Kuning%20JmK.js" type="text/javascript"></script>
Bintang Hitam :
<script src="http://jmkjs.googlecode.com/files/Bintang%20Hitam%20JmK.js" type="text/javascript"></script>
[5]. Simpan dan lihat hasilnya.

Happy Blogging...!!!

Kamis, 16 Februari 2012

Cara Mengganti Kursor Di Blog


Kalian pasti pernah merasa bosan dengan tampilan Kursor Blog Kalian yang masih Standar, dan ingin menggantinya dengan Kursor yang Kalian suka. Mengganti Kursor di Blog Sangatlah Mudah, Kalian Tinggan Simak Langkah-Langkah Berikut Ini :

[1]. Seperti Biasa Login Dulu Ke Blog Kalian
[2]. Trus Cari Rancangan --> Trus Klik Tambahkan Ganget
[3]. Copy dan Paste-kan Code Di Bawah Ini 
<style type="text/css">body {cursor:url("http://img90.imageshack.us/img90/5195/cursorbc.png"),default}</style>
[4]. Simpan dan Lihat Hasilnya.

KETERANGAN :
* Tulisan yang berwarna merah ganti dengan button Kursor yang kalian suka...

Semoga Berhasil...^_^

Cara Membuat Link Bergerak

Kalian pasti sudah tahukan, apa itu link bergerak, tu tuh kalo kita sorot kursor ke link blog kita, maka linknya akan bergerak. Ok, pasti Kalian sudah tahukan, langsung saja ke materi.

Ikuti langkah-langkah berikut ini :

[1]. Seperti biasa Login dulu ke Blog Kalian Masing2
[2]. Trus cari Rancangan --> Edit HTML
[3]. Cari Code </head>, trus Copy dan Paste-kan Code di bawah ini, tepat di atas Code </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>         
$(document).ready(function()  {          
$(&#39;a&#39;).hover(function() {  //mouse in          
$(this).animate({ marginLeft:  &#39;12px&#39; }, 400);          
}, function() { //mouse out           
$(this).animate({ marginLeft: 0 }, 400);          
});           
});</script>
[4]. Simpan dan lihat hasilnya.

Semoga Berhasil...!!!

Rabu, 15 Februari 2012

Cara Menghilangkan Tulisan Diberdayakan Oleh Blog

Bagi Kalian yang menggunakan Template yang di sediakan oleh Blog, pasti di bawah Template ada tulisan Di Berdayakan Oleh Blog. Nah kalo Kalian merasa terganggu dengan tulisan tersebut, dan ingin menghilangkannya, maka Saya punya solusinya. Tinggal ikuti langkah-langkah berikut ini :

[1]. Seperti Biasa Kalian Login Dulu Ke Blog Kalian Masing-Masing
[2]. Kemudian Cari Tata Letak --> Edit HTML
[3]. Trus cari Code Berikut Ini ]]></b:skin>
[4]. Copy dan Paste-kan Code Di Bawah Ini Tepat Di Atas Code Tadi.
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
[5]. Kemudian Save dan Lihat Hasilnya

Semoga Berhasil...!!!