Membuat Template Matrix

• Login ke blog sobat.
• Klik "Design" kemudian klik "Edit HTML".
  
  
  
• Cari kode </Head> kemudian copy-paste kode CSS di bawah ini diatas </Head>.
  
  
  <style type="text/css">
  body{
  background:url(http://i1244.photobucket.com/albums/gg577/hackers7/PointBlank.jpg) repeat center center fixed black;
  }
  </style>
• Ganti kode yang berwarna merah pada baris kode atas dengan URL gambar animasi matrix yang sobat inginkan.
• Klik "Save" dan lihat hasilnya...

Animasi Gambar Matrix

• 0-1-1 Matrix
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivKzXQLekS7gwEXRg0YsBN3Ab83JQm_zBERwcwIFE2MwbaiMVk_R6S8MgygBTTXfGQHnjizRxhdhLcyJwsFg6KOkzgIV2N9Yq8zNRc7JnVtRX_0iN6Zrscp04VyrTDj8YFPs-wjxLjwQY/s1600/0_1_1.gif
• Black Red Matrix
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcf1NDrtMFYCpwmJAGuQa-HKQoTYxvo5V_PVdLFvxa9A_X0zdP3zAxESaKw59tj242YLWOcjdzOxr22j5QOEUE9x2O5RdeYWq8RSj1JCEWcmt-mpdjrQkp7NXwFzUgbxtqxlmNil2_Ef-b/s800/black_red_matrix.gif
• Blue Matrix 1
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTyjfnGAY6UxuwTKChp9RcSksZdSw344l6zKeoq_k2KrzxbbcioFs7gwLshdy0keROOkY0KLxGiiuUYbbjyhHoSbq1qLjjhtmhj9jQsZvEqhTzPf1aoqlYlb0jsXJAXHzFFxSgooBdQR_/s800/bluematrix.gif
• Blue Matrix 2
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDMq8pbvksKMje63aBry4GTg2cjXog2xSxUNJLqcy27iDWLvuFA2YaYq_KAlyQL3MOcequaE8BuFcpMFUt46qp46dS2_L4QDT1IOOk1L0-GZPREajANGpxA5MLXK3KAkiGQP0wJSSjvhu/s800/bluematrix2.gif
• Green Matrix
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj298UKNCAn9XrBO89DAGAeLIIFkJ4-LNm2wuPN_aBUS8KC7kg2VMi_eeVAtLcZWblwH7XubAZ-Xpq1GqEkCYFH7cfywJ-PQkagRhn8CHndDdg52e34AXyI87Amzsj9dFMyQT_3fT1vC6WS/s800/matrix.gif
• Port Listener
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uxBoF67YrZ8SPPcH_UT52DNf3PTO7sKCv1iTPvm4_5fg1Z6I7ytEja-LsOZts1vdvjkALaPTZoCwquRT7YQ57UltTWOd4hLQCwZuCjFXjzvLVVOYT4TpTHbX3KSfLQj-mptnXpHckXKT/s800/port_listener.gif
• Red Matrix
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWk2ff8Azbq0Du0Ci0pxJ747LpTzxV0bYCv6e44l4ldgfSLi_YEFK3BB1xAw99lijHrZN5mizD8_1B8YcfSK5TWlAvsbODdV3DtWWpIxEve6n-4SVVWZpI1cQxysGWl7Zp5m35bj2kptm/s800/monozcore_blogspot_com_redmatrix.gif
• Blue Matrix
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRQplQoLfu-2dyBjXTDsHTbyNAYN7dO5m5w-mwyODSa32WlGTzzSSDl_TeAnf2phy0a5nNkU_MjzDeww77-Dpkkcvh22FzixabxrvwEyLRwk_33Mw3rwbkhHBnda65SoMMj23K9Z61DRM/s800/matrix.gif

Baca Selengkapnya Di: http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz1uQiOuQ9e

Cara Pasang Buku Tamu Di Blog

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.



Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVdaEtB9uIzi0Flfa_sth4kVnV0mV7yN3XiAHuX_Me3CVmGDOQV0Jgp14XTIFAWBZHkQMNQnl6Sg1eEG5lWipP3t3Cora5XZrxEBCOLPnQmftXlsPOtWF2dX_n9AcO4s6pIs66B5FeN7Z/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqC56pQBySLUDvFHgxAJnEt3ENeU8mJjo5jhmKhXsP-IRra4Y0QSWn9L9oV_UF1BIYirIEkZtPnlrmORRhDGA-eX_O2aEyMqaPguf_3h3hn59u6oHOUHCiKR3Odx_sLX8mpNhRqOsZ3Se/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Baca Selengkapnya Di: http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz1uQiOuQ9e

Cara Membuat Background Berubah-Ubah

Siapa pun senang jika mempunyai blog yang keren dan tampil elegan, kali ini saya akan berbagi tentang background yang bisa berubah-ubah sesuai minat pengunjung nya, keren kan!! awalnya saya menemukan ini ketika saya memodif script lazyload, akhirnya lazyload yg saya modif itu gak berfungsi, script asli nya saya uda gak nyimpan,
dan saya mencoba browsing di google untuk menemukan lazyload
yang ingin pasang Widget Naruto fight  di blog nya klik disini Cara Membuat Widget Naruto Fight atau mo pasang Cara Membuat Tombol Share Melayang Di Blog atau Cara membuat tombol panah back top .   
ya langsung aja deh....

1. Login ke blogger > rancangan template > tambah widget baru > pilih HTML/Javascript
2. Copy paste kode di bawah ini dan taruh di HTML/Javascript tadi


<div class="widget-content">
<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br />

<center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">
<option value="url() repeat center center fixed" />None
<option value="url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) repeat center center fixed" />Red Matrix
<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan
<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2k6Qzk32gJ9ue5IzSTkohgXrQQUGmD64fAFsSDmQ0g4vUlf28FD5SrhqR57udNmdesVWrMmfuAWWXDFZ6nPeHI2GxBKCBNQuqFddd3d6TZMNC0h2sqN0VRVs_vP7nWdB2OJptEQopjO4N/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1
<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru

<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix
<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix
</select></center></center>
</div><br/><center></center>
</div><br/><center><a href="http://killer-qwertyu.blogspot.com/2012/05/cara-membuat-background-berubah-ubah.html" target="_blank">Pasang Seperti Ini</a></center>







3. Simpan dan lihat hasilnya

Mudah sekali bukan? nah semoga tips ini bermanfaat saya tunggu komentarnya..:)

Baca Selengkapnya Di: http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz1uQiOuQ9e

Cara Membuat Template Blog Jadi Transparent

Untuk membuat Template Blog Transparent tanpa sibuk-sibuk mencari Template yang Transparant, jika yang kita cari itu dapat memang menyenangkan tetapi kadang yang dapat itu tidak sesuai dengan hati / selera kita macam mana pula ???? nah dari itu coba ikuti cara-cara berikut ini, langsung aja seperti biasa, ayo kita coba....
caranya :


1. Seperti biasa login ke blog sobat
2. Dashboard/dasbor
3. Layout/tataletak
4. Edit HTML, centang "EXPAND TEMPLATE WIDGET" dan download lengkap template buat berjaga-jaga jika terjadi kesalahan.


Terus cari setiap kata :


background

contoh :

background: #000000;

Lalu ganti kode (#000000;) menjadi transparent, atau kurang lebi seperti ini

background: transparent;

atau sobat bisa juga melakukan dengan cara kedua yaitu buang saja value #000000; yang ada sehingga menjadi seperti ini :

background: ;

Cari di setiap posisi dimana sobat ingin posisi tsb terlihat bening/Transparan.
Contoh bagian Header, body, side bar, post footer, lower dll.
Nah mudah bukan ? setelah itu klik Save/simpan perubahan, dan lihat hasilnya....
Semoga tip's ringan ini bermanfaat bagi para sobat semua !!

Selamat mencoba tampil dengan Template yang transparan ......, Saya sendiri tadinya mencari template transparan yang bagus, tetapi jarang sekali. ternyata mudah sekali buatnya.

Baca Selengkapnya Di: http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz1uQiOuQ9e

Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring

Heloo sobat Blogger, sesuai dengan permintaan teman Saya, kali ini Saya akan memberikan Tips yaitu "Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring". Jadi kita akan membuat Judul Blog, Judul Postingan, dan Judul Widget menjadi miring-miring. Sebagai Demo, Kalian bisa lihat pada Blog Saya ini, Judul Blog, Judul Postingan, dan Judul Widget-nya kan miring, nah.. kita akan membuat yang seperti itu. OK, kita langsung ke langkah-langkahnya.

[1]. Pertama, Login dulu ke Blog Kalian.

[2]. Dari Dasbor, cari Rancangan --> Edit HTML.

A. Judul Blog Miring.

Cari Code /* Header. Selengkapnya kira-kira sperti di bawah.

/* Header
----------------------------------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

* Setiap Template pasti Codenya berbeda-beda.

Kalau sudah ketemu, sekarang HAPUS Code di bawah Code Pertama. Kalau kurang jelas, HAPUS Code seperti di bawah.

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

Kalau sudah di HAPUS, sekarang Copy dan Paste-kan Code berikut tepat di bawah Code,

Code Yang Di Cari.

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

Code Yang Di Tambahkan.

 #header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}

Hingga Menjadi Seperti Di Bawah.

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

#header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}

Kalau sudah, terakhir tinggal di SAVE.

B. JUDUL POSTINGAN MIRING.

Cari Code ]]></b:skin>.

Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.

.post-title{ opacity: 0.7; background:transparent; border:1px solid #ccc;-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; font-family:'Molengo',Trebuchet MS,Serif; font-size:22px; margin-bottom:2px; padding:5px 10px 10px 10px; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.2em}
.post-title:hover{transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
.post-title a, .post-title a:visited, .post-title strong{display:block; color:#ccc}
.post-title strong, .post-title a:hover{color:#fff}

KETERANGAN :

* Tulisan yang berwarna Biru, ganti dengan Warna yang Kalian inginkan. Code Warna HTML...? Klik di SINI.

Kalau sudah, sekarang SAVE.

C. JUDUL WIDGET MIRING.

Cari Code ]]></b:skin>.

Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.

.sidebar h2{background-color:transparent; border:1px solid #ccc; -moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; margin-bottom:2px; padding:8px 10px 10px 10px; color:#FFA500; font-family:'Molengo',Trebuchet MS,Serif; font-size:20px; transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg); font-weight:bold}
.sidebar h2:hover{opacity:0.7;transform:rotate(-3deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}

KETERANGAN :

* Tulisan yang berwarna Biru, ganti dengan Warna yang Kalian inginkan. Code Warna HTML...? Klik di SINI.

Kalau sudah, sekarang SAVE.

Sekian dulu Tips kali ini, kalau ada pertanyaan, silahkan Kalian isi Kotak Komentar di bawah. Semoga Tips kali ini bermanfaat buat Kalian semua.

Salam Blogger Indonesia.

Baca Selengkapnya Di: http://indonesianblog-jmk.blogspot.com/2012/03/cara-memasang-tombol-berbagi-share-di.html#ixzz1uQiOuQ9e