Blogger Stylish Trick

Sobat mungkin merasa takjub kala melihat sebuah blog/web dengan tampilan, design, theme or anything else begitu indah & menawan! Dibalik semuanya itu terdapat apa yang dinamakan bahasa HTML. Satu kesatuan bahasa dari CSS, Script, dan lain-lainnya menjadi web/blog full stylish b-) Pesan Beben Koben si bloglang anu ganteng kalem tea, jangan mencoba-coba tanpa ada dasar sama sekali. Karena jika salah sedikit dalam penerapan kode bisa fatal error :P
Kalau sudah error baru deh kelimpungan kesana kemari guna membetulkannya #-o kayak Beben kalo dah hang...zzz...bang head bro :)) Sekarang bagaimana cara agar kita yang minim pengetahuan bahasa web, tapi bisa mengutak-ngatik blog/web yang indah & menawan tersebut ;)) :-/

Contoh sederhana javascript berikut yang sudah umum kita kenal guna mengedit dengan hanya mengkopi paste ke address bar browsingan!javascript: document.body.contentEditable='true'; document.designMode='on';void 0Sok hapusin semua, acak-acak enggak bakalan rusak, yang ada malah seruuu :))
Setali tiga uang, bagi pecinta mozilla pasti kenal dengan yang namanya Firebug? That's right script add-on or eksternal yang memang berguna sekali bagi para developer² :-B Try thisjavascript: (function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return; E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');Bisa melihat daleman HTML orang >:) Mengenai bugzilla lebih jauh bisa ditengok Firebug is Bugzilla Feature by Mozilla. Semakin tertarik agan-agin mempelajari HTML language?

Buka halaman berikut Live.js, eksplore kemampuan sobat disana. Secara langsung bisa terlihat apa-apa saja yang dirubah. Kembangkan skill sampe jadi master :-bd
Melihat tampilan depan web Live.js ada trik yang mirip pernah Koben bahas ;)) trik pojok preview. Bedanya yang Koben statis abis, yang di Live.js pas dihover cursor ada efek dikit ;)) Semoga berhasil demonya, lihat dipojok kanan ya :D

Klik buat mengambil link demo!

Kode CSS

<style>
#banner {
  position: absolute;
  right: 0; 
top: 0;
  width: 200px; 
height: 155px;
  overflow: hidden;
}
#demo {
  display: block;
  position: absolute;
  width: 500px;
  top: 80px; 
  right: -250px;
  background: #411;    
  padding: 2px 0;
  -webkit-transform: matrix (0.77, 0.65, -0.65, 0.77, 0, 0);
  -moz-transform: matrix (0.77, 0.65, -0.65, 0.77, 0, 0);
  box-shadow: 0 3px 3px #999;  
}
#demo a {
  display: block;
  font: 30px/40px 'Comic Sans MS';
  color: #fff;
  border: dotted #E7ADAD 2px;
  text-decoration: none;
}
#demo:hover {
  background: #AA0000;
  top: -20px; 
  right: -130px;
}
#demo, #demo:hover {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
</style>

Kode HTML

<div id="banner">
<p id="demo"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YOUR-TITLE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; YOUR-TITLE </a></p>
</div>Masukin semua kode via Add a Gadget HTML/Javascript!
Bye and see you \m/