14 Jurus Menghias Kotak Untuk Menulis Komentar Blog

14 Jurus Menghias Kotak Untuk Menulis Komentar Blog

Menghias

Hutomo Sungkar

---

Kali ini Blog Nano Yulianto Akan berbagi cara menghias atau sedikit memberikan efek pada kotak untuk menulis komentar.

---

Penempatan Kode

Template >> Edit HTML >> Proceed

Penempatan kode berada di :

<b:skin><![CDATA[

Letakkan Kode disini

]]></b:skin>

Atau :

Ketik Ctrl+f dan masukkan kode :

<b:skin><![CDATA[

Letakkan kode di bawahnya <b:skin><![CDATA[

Kasus Lain

Jika ada kode "/*" disamping <b:skin><![CDATA[

Di Enter, turunkan kebawah :

Dan sekarang bisa letakkan kode dibawah <b:skin><![CDATA[

---

Pilih Gaya dan Kode

Untuk referensi :

Background bergambar

Macam-Macam Warna

Gaya 1

Akan terlihat transparan dan jika disentuh dengan mouse akan kembali normal.

Kode

.blogger-iframe-colorize{
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}

Gaya 2

Masih sama dengan gaya pertama, yang berbeda ini menggunakan warna background.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
opacity: 0.3;
transition: opacity 2s;
-moz-transition: opacity 2s;
-webkit-transition: opacity 2s;
-o-transition: opacity 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
}

Kode berwarna merah adalah kode untuk warna background. Anda bisa ganti sesuai selera.

Gaya 3

Ini membuat kotak komentar berganti warna jika disentuh dengan mouse.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
transition: background 2s;
-moz-transition: background 2s;
-webkit-transition: background 2s;
-o-transition: background 2s;
}
.blogger-iframe-colorize:hover{
background:#ffff00;
}

Kode warna merah untuk warna background, bisa diganti. Kode warna Atas untuk belum disentuh, dan bawah saat disentuh.

Gaya 4

Ini membuat kotak komentar melengkung dan disentuh kembali normal

Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.

Gaya 5

Ini membuat kotak komentar melengkung dengan unik.

Kode

.blogger-iframe-colorize{
background:#555555;
border-radius:200px 0 200px 0;
padding:10px 5px 5px 20px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:10px;
}

Kode berwarna merah untuk warna background.

Gaya 6

Ini bergaya MDev Template yaitu miring.

Kode

.blogger-iframe-colorize{
background:#242729;
color:#E6E3BB;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}

Kode berwarna merah untuk background, dan berwarna biru untuk warna teks. Untuk pengguna Template MDev langsung pakai saja tanpa merubah, tapi terserah anda.

Gaya 7

Ini terlihat biasa, tapi saat disentuh dia akan berputar (bilang waww sambil koprol).

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}

Kode berwarna merah untuk background.

Gaya 8

Ini berputar ekstrim

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:7px;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: transform 2s;
-moz-transition: transform 2s;
-webkit-transition: transform 2s;
-o-transition: transform 2s;
}
.blogger-iframe-colorize:hover{
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
}

Kode berwarna merah untuk background.

Gaya 9

Ini berputar di kombinasikan dengan melengkung.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:200px 15px 200px 15px;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
border-radius:15px;
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg)
}

Kode berwarna merah untuk background.

Gaya 10

Kombinasi berputar dengan transparan

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg)
}

Kode berwarna merah untuk background.

Gaya 11

Ini menarik, susah dijelaskan dengan kata-kata (coba sendiri).

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:skew(180deg, 180deg);
-moz-transform:skew(180deg, 180deg);
-webkit-transform:skew(180deg, 180deg);
-o-transform:skew(180deg, 180deg)
}

Kode berwarna merah untuk background.

Gaya 12

Lebih Ekstrim seperti diatas

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:skew(360deg, 360deg);
-moz-transform:skew(360deg, 360deg);
-webkit-transform:skew(360deg, 360deg);
-o-transform:skew(360deg, 360deg)
}

Kode berwarna merah untuk background.

Gaya 13

Ini akan membuat terbalik dan disentuh normal kembali.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transform:rotateX(0deg);
}

Kode berwarna merah untuk background.

Gaya 14

Jika disentuh akan sedikit membesar.

Kode

.blogger-iframe-colorize{
background:#555555;
padding:10px 5px 5px 20px;
border-radius:10px;
opacity:0.2;
transform:none;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.blogger-iframe-colorize:hover{
opacity:1;
transform:scale(1.1);
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
}

Kode berwarna merah untuk background.

Teknik Border-Radius Mempercantik Tampilan Gambar Blog

Teknik Border-Radius Mempercantik Tampilan Gambar Blog

Menghias

Hutomo Sungkar

Yang dimaksud disini adalah agar gambar tampil di blog terlihat tidak standar.

---

Cara Penempatan Kode

1. Template >> Edit HTML >> Proceed

   

2. Penempatan kode berada di :

   <b:skin><![CDATA[

   Letakkan Kode disini

   ]]></b:skin>

   
   

   Atau :

   Ketik Ctrl+f dan masukkan kode :

   <b:skin><![CDATA[

   

   Letakkan kode di bawahnya.




Kasus Lain

Jika ada kode "/*" disamping <b:skin><![CDATA[





Di Enter, turunkan kebawah :



Dan sekarang bisa letakkan kode dibawah <b:skin><![CDATA[

---

Pilih Gaya Dan Kode

Melengkung Semua Sisi

img{
border-radius: 55px;
}

Ukuran 55px bisa anda sesuaikan, semakin besar, semakin melengkung.

Tampil Seperti Ketupat

img{
border-radius: 85px 5px;
}

Melengkung Di Sisi Atas

img{
border-radius: 55px 55px 5px 5px;
}

Melengkung Di Sisi Bawah

img{
border-radius: 55px 55px 5px 5px;
}

---

Penjelasan

Ukuran bisa anda sesuaikan selera. Bisa dikurangi atau ditambahkan ukurannya.

---

Credit Gambar Kay Panabaker (kaypanabaker.com) dari Fanpop Kay Panabaker

8 Macam Menghias Tombol Share Blogspot

8 Macam Menghias Tombol Share Blogspot

Menghias

Hutomo Sungkar

Ini adalah trik CSS3 untuk menghias tombol share blogspot anda.

1. Template >> Edit HTML >> Proceed

   

2. Penempatan kode berada di :

   <b:skin><![CDATA[

   Kode disini

   ]]></b:skin>

   
   

   Lebih gampangnya ketik keyboard Ctrl+f dan masukkan kode :

   <b:skin><![CDATA[

   

   Nanti kodenya letakkan dibawahnya

3. Pilih satu gaya yang anda mau :

   
   

   • Gaya pergantian gambar lambat :

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background;
     }
     

   • Hover Transparan

     Transparan ke tidak transparan

     .share-button {
     opacity:0.5;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:opacity;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:opacity;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:opacity;
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:opacity;
     }
     .share-button:hover {
     opacity:1;
     }
     

     
     

     Tidak transparan ke transparan

     .share-button {
     opacity:1;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:opacity;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:opacity;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:opacity;
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:opacity;
     }
     .share-button:hover {
     opacity:0.5;
     }
     

   • Gambar menjadi besar

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:transform;
     }
     .share-button:hover {
     transform:scale(3.3);
     -moz-transform:scale(3.3);
     -ms-transform:scale(3.3);
     -o-transform:scale(3.3);
     -webkit-transform:scale(3.3);
     }
     

   • Gambar menjadi besar efek 3D

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:scale(3.3);
     -moz-transform:scale(3.3);
     -ms-transform:scale(3.3);
     -o-transform:scale(3.3);
     -webkit-transform:scale(3.3);
     }
     

   • MDev Style Template

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transform:rotate(-20deg);
     -moz-transform:rotate(-20deg);
     -ms-transform:rotate(-20deg);
     -o-transform:rotate(-20deg);
     -webkit-transform:rotate(-20deg);
     transition-property:background, transform;
     -moz-transition-property:background, transform;
     -ms-transition-property:background, transform;
     -o-transition-property:background, transform;
     -webkit-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
     -webkit-transform:rotate(0deg);
     }
     

     Bergaya miring seperti tema Template MDev (Template yang jadi trend pengenalan CSS3)

   • Terbalik

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     transform:rotate(-180deg);
     -moz-transform:rotate(-180deg);
     -ms-transform:rotate(-180deg);
     -o-transform:rotate(-180deg);
     -webkit-transform:rotate(-180deg);
     }
     .share-button:hover {
     transform:rotate(0deg);
     -moz-transform:rotate(0deg);
     -ms-transform:rotate(0deg);
     -o-transform:rotate(0deg);
     -webkit-transform:rotate(0deg);
     }
     

   • Berputar

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(-360deg);
     -moz-transform:rotate(-360deg);
     -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
     -webkit-transform:rotate(-360deg);
     }
     

   • Berputar Ekstrim

     .share-button {
     transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     transition-property:background, transform;
     -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -moz-transition-property:background, transform;
     -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -webkit-transition-property:background, transform;
     -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
     -o-transition-property:background, transform;
     }
     .share-button:hover {
     transform:rotate(-1440deg);
     -moz-transform:rotate(-1440deg);
     -ms-transform:rotate(-1440deg);
     -o-transform:rotate(-1440deg);
     -webkit-transform:rotate(-1440deg);
     }
     

4. Preview

5. Save Template

---

Link Hover Efek Opacity atau Transparan

Link Hover Efek Opacity atau Transparan

Menghias

Hutomo Sungkar

Membuat link blog menjadi transparan ketika mouse anda berada diatas link tersebut (hover). Di tambahkan sedikit animasi dengan gaya lambat.

---

• Demo
• Install

---

Demo

Sentuh link dimana saja.

Back To Menu

---

Kode

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){$("a").hover(function(){$(this).animate({opacity:"0.3"},1e3)},function(){$(this).animate({opacity:"1"},1e3)})})
</script>

*Kode berwarna merah adalah induk jQuery versi terbaru.

Back To Menu

---

Install

1. Template >> Edit HTML >> Proceed

   

2. Tekan Ctrl+f untuk cari kode: </head>

3. Masukkan kode diatas </head>

   

4. Preview

5. Save Template

Back To Menu

---

Memperindah Blog Dengan Turun Salju Plus Ketombe

Memperindah Blog Dengan Turun Salju Plus Ketombe

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Seperti yang anda lihat. Jika tidak ada hujan ketombe, coba reload lagi post ini.

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[
if  ((document.getElementById) && window.addEventListener || window.attachEvent){

//Menghias Blog Dengan Turun Salju Plus Ketombe
(function(){//http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html

var ncl="white"; // warna salju

/////////////////////////////////
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('m p(){5 e,t,n,i,s,o;7(D){7(d.8&&d.q&&c d.q.P=="j"){e=d.8.11;t=d.q.P;n=d.8.13;i=d.q.14;s=e-t;o=n-i}f{s=r.15;o=r.Q}h=s-2;w=o-2}f{h=r.16-2;w=r.u-2}}m E(e){5 t,n;7(R){t=r.S;n=r.17}f{t=r.18;n=r.19}1a e==0?t:n}m F(){5 e,t;G(i=0;i<k;i++){e=l[i];t=l[i]*4.1b(v[i]);y[i]+=e;x[i]+=t;7(x[i]>=w||y[i]>=h){y[i]=-10;x[i]=4.b(4.6()*w);l[i]=9[i]==1?4.b(2+4.6()*2):4.b(3+4.6()*2);z[i]=9[i]==1?.g+4.6()*.1:.g+4.6()*.g}A[i].T=y[i]+E(0)+H;A[i].U=x[i]+E(1)+H;v[i]+=z[i]}1c(F,V)}m I(){p();G(i=0;i<k;i++){A[i]=J.1d("W"+(K+i)).B;y[i]=4.b(4.6()*h);x[i]=4.b(4.6()*w)}F()}5 k=X;5 V=X;5 1e=1;5 y=[];5 x=[];5 l=[];5 A=[];5 9=[];5 z=[];5 v=[];5 h,w,r;5 d=J;5 H="C";5 D=c a.Q=="j";5 R=c a.S=="j";5 K=d.1f("L").1g;7(d.8.B&&c d.8.B.1h=="1i")k=12;G(i=0;i<k;i++){9[i]=4.b(1+4.6()*1);J.1j(\'<L 1k="W\'+(K+i)+\'" B="1l:1m;T:Y;U:Y;1n:\'+9[i]+"C;1o:"+9[i]+"C;1p:"+1q+";1r-1s:"+9[i]+\'C"></L>\');v[i]=0;l[i]=9[i]==1?4.b(2+4.6()*2):4.b(3+4.6()*2);z[i]=9[i]==1?.g+4.6()*.1:.g+4.6()*.g}7(D)r=a;f{7(d.8&&c d.8.u=="j"&&d.8.u!=0)r=d.8;f{7(d.M&&c d.M.u=="j")r=d.M}}7(a.N){a.N("1t",p,Z);a.N("1u",I,Z)}f 7(a.O){a.O("1v",p);a.O("1w",I)}',62,95,'||||Math|var|random|if|documentElement|sfs|window|round|typeof|||else|05|||number|num|fall|function|||winsize|defaultView||||clientWidth|currStep||||step|theFlakes|style|px|domWw|scrl|snow|for|pix|init|document|idx|div|body|addEventListener|attachEvent|scrollMaxY|innerWidth|domSy|pageYOffset|top|left|timer|ketombe|30|0px|false||offsetHeight||offsetWidth|scrollMaxX|innerHeight|clientHeight|pageXOffset|scrollTop|scrollLeft|return|cos|setTimeout|getElementById|enableinNS6|getElementsByTagName|length|MozOpacity|string|write|id|position|absolute|width|height|background|ncl|font|size|resize|load|onresize|onload'.split('|'),0,{}))})();}//]]>
</script>

*Kode berwarna merah diganti dan disesuaikan dengan background blog.

Macam-Macam Warna

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kode

   

3. Save

Back To Menu

---

Pembuat Base Script Kurt Grigg

Menghias Link Blog Jadi Genit

Menghias Link Blog Jadi Genit

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Sentuh link yang ada disini.

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[
//http://nanoyulianto.blogspot.com/2012/11/tips-trik-menghias-blog.html
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g T(e){2(6==0){6=1;2(e)7=e;c 7=C.D;i=7.j.k;l=r("p()",s)}}g U(){2(6){7.j.k=i;t(l);6=0}}g E(){2(6==0){d e=C.D;F(e.m!="A"&&e.m!="q"){e=e.V;2(e.m=="A"||e.m=="q")G}2(e.m=="A"&&e.H!=""){7=e;6=1;i=7.j.k;l=r("p()",s)}}}g I(){2(6){2(7.m=="A"){7.j.k=i;t(l);6=0}}}g J(e){2(6==0){9=e.W;F(9.n!="A"&&9.n!="q"){9=9.X;2(9.n=="A"||9.n=="q")G}2(9.n=="A"&&9.H!=""){7=9;6=1;i=9.j.k;l=r("p()",s)}}}g K(e){2(6){2(7.n=="A"){7.j.k=i;t(l);6=0}}}g p(){7.j.k=L()}g L(){2(u==0){3=o;4=o;5=o}c{a=o;b=(v-u)*o/v;f=8%w;f=(a-b)*f/w;2(8<w){3=a;5=b;4=b+f}c 2(8<Y){4=a;5=b;3=a-f}c 2(8<Z){4=a;3=b;5=b+f}c 2(8<10){5=a;3=b;4=a-f}c 2(8<11){5=a;4=b;3=b+f}c 2(8<M){3=a;4=b;5=a-f}c{3=0;4=0;5=0}}3=x.y(3).z(16);4=x.y(4).z(16);5=x.y(5).z(16);2(3.B==1)3="0"+3;2(4.B==1)4="0"+4;2(5.B==1)5="0"+5;8=8+N;2(8>=M)8=0;O"#"+3+4+5}d N=12;2(h.P)13.14=15 17("O 18");d 7;d 6=0;d 8=0;d u=19;d o=v;d i;d l;2(h.1a){h.Q=E;h.R=I}c 2(h.P){h.1b(S.1c|S.1d);h.Q=J;h.R=K}',62,76,'||if|elmR|elmG|elmB|act|objActive|elmH|obj|t1|t2|else|var||t3|function|document|clrOrg|style|color|TimerID|tagName|nodeName|elmV|ChangeColor|BODY|setInterval|100|clearInterval|elmS|255|60|Math|floor|toString||length|event|srcElement|doRainbowAnchor|while|break|href|stopRainbowAnchor|Mozilla_doRainbowAnchor|Mozilla_stopRainbowAnchor|makeColor|360|rate|return|getElementById|onmouseover|onmouseout|Event|doRainbow|stopRainbow|parentElement|target|parentNode|120|180|240|300|20|window|onerror|new||Function|true|128|all|captureEvents|MOUSEOVER|MOUSEOUT'.split('|'),0,{}))
//]]>
</script>

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kode

   

3. Save

Back To Menu

---

Pembuat Base Script Takanashi Mizuki

Mematikan Klik Kanan Tanpa Rasa dan Tanpa Bau

Mematikan Klik Kanan Tanpa Rasa dan Tanpa Bau

Menghias

Hutomo Sungkar

---

• Penjelasan
• Demo
• Kode
• Install

---

Penjelasan

Ini mematikan klik kanan pengunjung tanpa peringatan.

Back To Menu

---

Demo

Lihat di : Demo

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[

//Mematikan Klik Kanan Tanpa Pesan
//http://nanoyulianto.blogspot.com/2012/11/tips-trik-menghias-blog.html
///////////////////////////////////
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 8(){1(0.9){a;4 5}}7 6(e){1(0.b||0.f&&!0.9){1(e.c==2||e.c==3){a;4 5}}}1(0.b){0.g(h.i);0.j=6}k{0.l=6;0.d=8}0.d=m n("4 5")',24,24,'document|if|||return|false|clickNS|function|clickIE|all|message|layers|which|oncontextmenu||getElementById|captureEvents|Event|MOUSEDOWN|onmousedown|else|onmouseup|new|Function'.split('|'),0,{}))
//]]>
</script>

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kode

   

3. Save

Back To Menu

---

Mematikan atau Disable Klik Kanan Blog

Mematikan atau Disable Klik Kanan Blog

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Lihat di : Demo

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[
//http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html

var message="Klik Kanan Block"; //Isi sesuai selera

///////Stop Edit\\\\\\\\\
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 9(){1(h.i==2){4(5);6 7}}8 a(e){1(0.b||0.c&&!0.d){1(e.f==2||e.f==3){4(5);6 7}}}1(0.b){0.j(k.l);0.g=a}m 1(0.d&&!0.c){0.g=9}0.n=o p("4(5);6 7")',26,26,'document|if|||alert|message|return|false|function|clickIE4|clickNS4|layers|getElementById|all||which|onmousedown|event|button|captureEvents|Event|MOUSEDOWN|else|oncontextmenu|new|Function'.split('|'),0,{}))
//]]>
</script>

*Kode berwarna merah diganti dengan teks anda.

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kode

   

3. Save

Back To Menu

---

Mempercantik Cursor Dengan Tulisan Yang Mengikuti

Mempercantik Cursor Dengan Tulisan Yang Mengikuti

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Lihat Cursor Post ini.

Back To Menu

---

Kode

<script type='text/javascript'>
//<![CDATA[
(function(){ //Mempercantik Cursor Dengan Tulisan Yang Mengikuti
//http://nanoyulianto.blogspot.com/2012/11/tips-trik-menghias-blog.html

var msg = "Nano Yulianto"; // For Teks
var size = 24; // Font Size

var circleY = 0.75; var circleX = 3;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
////////////////////// Stop sampai sini editnya //////////////////////
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('h=h.U("");i n=h.V-1,a=6.r(D*W*.Z),j=k,7=a*E+k,8=a*F+k,y=[],x=[],Y=[],X=[],o=2.s("u"),v=2.s("u"),b=2.G&&2.G!="10"?2.11:2.l,m=9(e){e=e||3.12;7=!w(e.H)?e.H:e.13;8=!w(e.I)?e.I:e.14},J=9(){c(d.K){o.4.L=(b||2.l).16+"5";o.4.M=(b||2.l).17+"5"}j-=18;z(i e,t=n;t>-1;--t){e=2.19("N"+t).4;e.L=6.r(y[t]+a*6.1a((j+t)/O)*E-15)+"5";e.M=6.r(x[t]+a*6.1b((j+t)/O)*F)+"5"}},P=9(){y[0]=Y[0]+=(7-Y[0])*p;x[0]=X[0]+=(8-k-X[0])*p;z(i e=n;e>0;--e){y[e]=Y[e]+=(y[e-1]-Y[e])*p;x[e]=X[e]+=(x[e-1]-X[e])*p}J()},d=9(){c(!w(3.A)){7+=3.A;8+=3.Q}R d.K=1c;z(i e,t=n;t>-1;--t){e=2.s("u");e.S="N"+t;e.4.1d=e.4.1e=a+"5";e.q(2.1f(h[t]));v.q(e);y[t]=x[t]=Y[t]=X[t]=0}o.q(v);2.l.q(o);1g(P,1h)},B=9(){7+=3.A;8+=3.Q;3.1i("T",B,f)};o.S="1j";o.4.1k=D+"5";c(3.g){3.g("1l",d,f);2.g("1m",m,f);2.g("1n",m,f);c(/1o/.1p(1q.1r))3.g("T",B,f)}R c(3.C){3.C("1s",d);2.C("1t",m)}',62,92,'||document|window|style|px|Math|ymouse|xmouse|function|||if|init||false|addEventListener|msg|var|currStep|20|body|mouse|||speed|appendChild|round|createElement||div|oi|isNaN|||for|pageYOffset|ascroll|attachEvent|size|circleY|circleX|compatMode|pageY|pageX|makecircle|nopy|top|left|iemsg|letter_spacing|drag|pageXOffset|else|id|scroll|split|length|diameter|||208333|BackCompat|documentElement|event|clientY|clientX||scrollTop|scrollLeft|rotation|getElementById|sin|cos|true|height|width|createTextNode|setInterval|25|removeEventListener|outerCircleText|fontSize|load|mouseover|mousemove|Apple|test|navigator|vendor|onload|onmousemove'.split('|'),0,{}))})();
//]]>
</script>
<style type="text/css">
#outerCircleText{font-family:Trebuchet ms;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>

Kode berwarna merah diganti dengan selera anda :

1. Nano Yulianto adalah Teks yang muncul di kursor

2. 24 adalah ukuran huruf.

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kode

   

3. Save

Back To Menu

---

Pembuat Base Script : Tim Tilton

Background Dugem atau Ajeb-Ajeb

Background Dugem atau Ajeb-Ajeb

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Lihat disini

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[
//http://nanoyulianto.blogspot.com/2012/11/menghias-blog.backgrond-dugem.html
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('a 6(e,n){t[e]=i.L(n/p);o[e]=n%p;q(t[e]){5 j:t[e]="A";4;5 s:t[e]="B";4;5 u:t[e]="C";4;5 v:t[e]="D";4;5 w:t[e]="E";4;5 x:t[e]="F";4;y:4}q(o[e]){5 j:o[e]="A";4;5 s:o[e]="B";4;5 u:o[e]="C";4;5 v:o[e]="D";4;5 w:o[e]="E";4;5 x:o[e]="F";4;y:4}}a c(e,t){7((i.z()>2/3||t==0)&&t<8){t++;d[e]=2}f{7((i.z()<=1/2||t==8)&&t>0){t--;d[e]=1}f d[e]=0}G t}a h(e,t){7(d[e]==2&&t<8||t==0){t++;d[e]=2}f 7(d[e]==1&&t>0||t==8){t--;d[e]=1}7(e==3){7(d[1]==0&&d[2]==0&&d[3]==0)9=1}G t}a k(){7(9==0){r=c(1,r);g=c(2,g);b=c(3,b);6(1,r);6(2,g);6(3,b);H.I.J.K="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3];9=M}f{r=h(1,r);g=h(2,g);b=h(3,b);6(1,r);6(2,g);6(3,b);H.I.J.K="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3];9--}N("k()",j)}r=8;g=8;b=8;9=0;t=l m;o=l m;d=l m;k()',50,50,'||||break|case|hex|if|255|flag|function||ran|||else||do_it|Math|10|disco|new|Array|||16|switch||11||12|13|14|15|default|random|||||||return|document|body|style|background|floor|50|setTimeout'.split('|'),0,{}))
//]]>
</script>

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kodenya

   

3. Save

Back To Menu

---

Membuat Judul Blog Atau Post Ada Tanggal

Membuat Judul Blog Atau Post Ada Tanggal

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Bahasa Indonesia
• Bahasa English
• Install

---

Demo

Lihat judul post ini di tab browser anda.

Back To Menu

---

Kode

Bahasa Indonesia

<script type="text/javascript">
//<![CDATA[
//date in title by Randall Smith (http://members.xoom.com/u4rstunzd/)
//Update Nano Yulianto (http://nanoyulianto.blogspot.com/)
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('f 4(){0 e=""+8[1.g()]+", "+5+" "+9[1.h()]+", "+2+"";3.a=b+e}0 i;0 b=""+3.a+" - ";0 9=6 c("j","k","l","m","n","o","p","q","r","s","t","u");0 8=6 c("d","v","w","x","y","z\'A","B","d");1=6 5;2=1.C();7(2<D)2+=E;5=1.F();7(3.G)4();H 7(3.I)J.K=4',47,47,'var|today|tahun|document|setdate|Date|new|if|hari|bulan|title|actualtitle|Array|Minggu||function|getDay|getMonth|scroller|Januari|Februari|Maret|April|Mei|Juni|Juli|Agustus|September|Oktober|November|Desember|Senin|Selasa|Rabu|Kamis|Jum|at|Sabtu|getYear|1e3|1900|getDate|all|else|getElementById|window|onload'.split('|'),0,{}))
//]]>
</script>

Bahasa English

<script type="text/javascript">
//<![CDATA[
//date in title by Randall Smith (http://members.xoom.com/u4rstunzd/)
//Update Nano Yulianto (http://nanoyulianto.blogspot.com/)
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('d 4(){0 e=""+8[1.f()]+", "+5+" "+9[1.g()]+", "+2+"";3.a=b+e}0 h;0 b=""+3.a+" - ";0 9=6 c("i","j","k","l","m","n","o","p","q","r","s","t");0 8=6 c("u","v","w","x","y","z","A");1=6 5;2=1.B();7(2<C)2+=D;5=1.E();7(3.F)4();G 7(3.H)I.J=4',46,46,'var|today|Year|document|setdate|Date|new|if|isnDay|isnMonth|title|actualtitle|Array|function||getDay|getMonth|scroller|January|February|March|April|May|June|July|August|September|October|November|December|Sunday|Monday|Tuesday|Wednesday|Thursday|Friday|Saturday|getYear|1e3|1900|getDate|all|else|getElementById|window|onload'.split('|'),0,{}))
//]]>
</script>

Back To Menu

---

Install

1. Layout >> Add a Gadget >> HTML/Javascript

   

2. Masukkan Kodenya

   

3. Save

Back To Menu

---

Membuat Judul Blog atau Post Ada Jam

Membuat Judul Blog atau Post Ada Jam

Menghias

Hutomo Sungkar

---

• Demo
• Kode
• Install

---

Demo

Lihat Judul Post ini di tab browser anda.

Back To Menu

---

Kode

<script type="text/javascript">
//<![CDATA[
//This script was written
//by Mike Cullen and Nano Yulianto (http://nanoyulianto.blogspot.com/)
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('j q(){b(a=="r"){c="s k"}d b(a=="n"){a="n";c="k."}d b(a=="y"){a="1";c="k."}d b(a=="z"){a="2";c="k"}d b(a=="A"){a="3";c="s o"}d b(a=="B"){a="4";c="o"}d b(a=="C"){a="5";c="o"}d b(a=="D"){a="6";c="f"}d b(a=="E"){a="7";c="f"}d b(a=="F"){a="8";c="f"}d b(a=="G"){a="9";c="f"}d b(a=="H"){a="I";c="f"}d b(a=="J"){a="r";c="f"}d b(a=="K"){a="n";c="L f"}}j u(){b(g<="9"){g="0"+g}b(h<="9"){h="0"+h}b(a<=9){a="0"+a}}j v(){l=M N;h=l.O();a=l.P();c="Q";g=l.R()}j p(){v();q();u();i e=""+a+":"+g+":"+h+" "+c;i t=S("p()",T);m.w=x+e}i U;i c;i x=m.w+" ";b(m.V||m.W)p()',59,59,'||||||||||hr|if|pssm|else||Malam|min|sec|var|function|Siang|dt|document|12|Sore|scroll|antiMilitaryTime|11|Jelang||addZero|time|title|actualtitle|13|14|15|16|17|18|19|20|21|22|10|23|24|Tengah|new|Date|getSeconds|getHours|Pagi|getMinutes|setTimeout|1e3|scroller|all|getElementById'.split('|'),0,{}))
//]]>
</script>

Back To Menu

---

Install

1. Layout > Add a Gadget > HTML/Javascript

   

2. Masukkan Kodenya

   

3. Save

---

Menghias Blog dengan Gadget Horor dan Teror

Menghias Blog dengan Gadget Horor dan Teror

Menghias

Hutomo Sungkar

Ini akan membuat suasana blog terlihat lebih mencekam, seakan blog dari dunia lain.

---

• Contoh
• Kode
• Penjelasan Kode
• Install

---

Contoh

Back To Menu

---

Kode

<form name="ht">
<textarea name="nht" disabled="disabled" cols="40" rows="4" wrap="virtual" class="ht"></textarea>
</form>
<script type="text/javascript">
var ht= new Array(); //Menghias Blog dengan Gadget Horor dan Teror
//http://nanoyulianto.blogspot.com/2012/11/menghias-blog-dengan-gadget-horor-dan.html

//Text
ht[0] = "hai kakak";
ht[1] = "boleh kenalan...";
ht[2] = "namaku dina";
ht[3] = "umurku 5 tahun";
ht[4] = "baru saja kemarin aku ulang tahun";
ht[5] = "aku kesepian kak...!!";
ht[6] = "pas ulang tahun rumahku dirampok";
ht[7] = "ayah digantung...";
ht[8] = "aku dan ibu dibakar hidup-hidup... ";
ht[9] = "temani aku bermain ya kak...";
ht[10] = "bagaimana kalau main petak umpet...";
ht[11] = "satu...";
ht[12] = "dua...";
ht[13] = "ti...ga...";
ht[14] = "doooorrrr";
ht[15] = "aku sekarang ada dibelakang kakak... !!!";

var ttloop = 1;    // Repeat (1 = True; 0 = False)
var tspeed = 250;   // Typing speed (larger number = slower)
var tdelay = 800; // Time delay

// ------------- NO EDITING AFTER THIS LINE ------------- \\
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c k(){9=4.a-1;2=4[3];7("b()",o)}c d(){3+=1;5(3<=9){2=4[3];5(2.a!=0){f.4.g.h="";8=0;7("b()",l)}}}c b(){5(8!=1){5(6!=2.a){i="";p(m e=0;e<=6;e++)i+=2.q(e);f.4.g.h=i;6+=1;5(6!=2.a)f.4.g.h+="r"}j{6=0;8=1}5(9==3&&8!=0&&s!=0){3=0;7("d()",n)}j 7("b()",l)}j{7("d()",n)}}m 2,3=0,8=0,6=0,9;k()',29,29,'||dwAText|cnews|ht|if|cchar|setTimeout|eline|mxText|length|addChar|function|addNews||document|nht|value|nmttxt|else|doNews|tspeed|var|tdelay|1e3|for|charAt|_|ttloop'.split('|'),0,{}))
</script>
<style type="text/css">.ht{background:#ffffff;border:none;color:red;font:20px Georgia;min-width:200px;max-width:450px; min-height:150px;max-height:150px;padding:10px;margin:20px 0;}</style>

Penjelasan Kode

Kode berwarna merah untuk teks, diganti sesuai selera anda.

Teks bisa dikurangi dan ditambahkan.

• Untuk mengurangi teks yang muncul, jangan dihapus teksnya saja, tetapi harus dihapus sekaligus satu baris kode, contoh :

  ht[15] = "aku sekarang ada dibelakang kakak... !!!";
  

• Untuk menambahkan teks yang muncul, tambahkan seperti ini :

  ht[16] = "Your Text";
  

  Kode ht[16] diurutkan sesuai angka dan jangan ada angka yang sama.

Kode berwarna biru sebenarnya sudah saya jelaskan dikode atas, tetapi untuk memperjelas lagi.

• Kode untuk mengulang selamanya :

  var ttloop = 1;

  Angka 1 digunakan untu mengulang teks selamanya, jika tidak ingin diulang bisa diganti dengan nilai 0.

• Kode kecepatan ketikkan teks :

  var tspeed = 250;

  semakin besar nilainya, semakin lambat.

• Kode waktu jeda per-baris :

  var tdelay = 800;

  kode ini memberikan waktu istirahat untuk per-baris. Semakin besar nilai, semakin lambat.

Back To Menu

---

Install

1. Layout > Add a Gadget > HTML/JavaScript

   

2. Masukkan kodenya

   

3. Save

Back To Menu

---

Ini adalah artikel lama yang saya publish kembali. Agar mudah digunakan, banyak perubahan dalam Javascript, tampilan CSS, dan HTML.

Pembuat Base Script : Haitham M. Al-Beik (albeik26[at]hotmail.com)

Mempercantik Tampilan NavBar Blogspot

Mempercantik Tampilan NavBar Blogspot

Menghias

Hutomo Sungkar

Mungkin diantara anda masih ada yang mempertahankan Navbar ciptaan Blogger, dan bingung cara merenovasinya, di Tutotial Nano kali ini mudah-mudahan anda menemukan yang anda cari.

---

Langkah Pertama

Masuk ke : Layout

Pilih dengan NavBar yang Transparan.

Langkah Kedua

Masuk: Template > Edit HTML > Proceed

Tempat kodenya

dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

Untuk mudah mencari kode di Edit HTML dengan tekan Ctrl+F di keyboard komputer anda, selanjutnya masukkan kode salah satu diatas. Terserah anda, mau yang ditempatkan dibawahnya atau diatasnya.

Langkah Ketiga

Pilih kode dibawah ini sesuai kesukaan anda :

---

Mewarnai

NavBar akan berubah warna sesuai dengan warna favorit anda.

#navbar
{background:yellow;}

atau

#navbar-iframe
{background:#ffff00;}

Kode yang berwarna merah diganti sesuai selera anda, bisa dilihat disini :

Macam-Macam Warna

---

Mewarnai dan Posisi Tetap

NavBar akan berubah warna sesuai dengan warna favorit anda, dan NavBar akan berada tetap.

#navbar-iframe
{background:yellow;position:fixed;top:0;}

Masih sama kode merah diganti sesuai selera anda.

---

Mewarnai, Posisi Tetap, dan Transparan

Ini ditambahkan efek transparan.

#navbar-iframe
{background:yellow;position:fixed;top:0;opacity:0.4;filter:alpha(Opacity=40)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100)}

Masih sama kode merah diganti sesuai warna selera anda.

---

2 Warna

Masih sama seperti diatas, tapi jika kursor berada diatasnya akan berubah warna.

#navbar-iframe
{background:#ffff00;}
#navbar-iframe:hover
{background:#000000;}

Masih sama, kode warna diganti dengan warna selera anda.

---

Muncul dan Bersembunyi

NavBar terlihat akan menghilang, tapi jika kursor berada diatasnya NavBar akan muncul.

#navbar
{opacity:0.0;filter:alpha(Opacity=0)}
#navbar:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

---

Transparan

NavBar terlihat transparan, jika mouse diatasnya akan terlihat sepenuhnya.

#navbar
{opacity:0.3;filter:alpha(Opacity=30)}
#navbar:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

---

Transparan dengan warna

Transparan digabungkan dengan warna.

#navbar
{background:yellow;opacity:0.3;filter:alpha(Opacity=30)}
#navbar:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

Seperti sebelumnya, kode berwarna merah diganti dengan warna favorit anda.

---

Transparan digabungkan dengan posisi tetap

NavBar terlihat transparan, tapi digabungkan dengan posisi selalu ada dilayar.

#navbar-iframe
{position:fixed;top:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

---

Dibawah

NavBar akan berada dibawah dan digabungkan dengan posisi tetap.

#navbar-iframe
{position:fixed;bottom:0}

---

Dibawah dengan warna

NavBar akan berada dibawah dan digabungkan dengan posisi tetap.

#navbar-iframe
{background:lightpink;position:fixed;bottom:0}

kode merah diganti sesuai warna favorit anda.

---

Dibawah dengan Tranparan

Ini ditambahkan dengan efek transparan.

#navbar-iframe
{position:fixed;bottom:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

---

Dibawah, Tranparan, dan Warna

Ini ditambahkan dengan warna.

#navbar-iframe
{background:lightpink;position:fixed;bottom:0;opacity:0.3;filter:alpha(Opacity=30)}
#navbar-iframe:hover
{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

kode merah diganti sesuai warna favorit anda.

---

Sebenarnya ada banyak lagi yang Nano kembangkan, karena takut anda pusing mungkin itu saja dahulu.