Learn for Easiness

Sempat bingung dan heran melihat para sobat blogger khususnya yang artikelnya berisikan mengenai tutorial blog. Bingung & heran karena banyak menggunakan kode atribut CSS yg tidak perlu and tidak terpakai. Kalau variabel gaya dalam CSS mendingan jangan dipakai, biar saja si pemakai yg membuatnya sendiri. Masukan saja kode inti didalam penjelasan sebuah trik/tutorial sobat :)
Cuman kasian saja yg belum paham, dan memang belom ada waktu buat memahami atribut variabel CSS langsung comot saja tuh coded tut's-nya, bisa menambah beban loading :D lebih parah lagi error validasi :P
Penulis pribadi Beben Koben si bloglang anu ganteng kalem tea, walau menyadur dari sana-sini, tapi urusan kode di minimalisir serta memasukan style yg mudah untuk dirubah oleh si pemakai nantinya.

Kuncinya kembali lagi ke para sobat sendiri sampai mana mau membaca, mempelajari, praktek tanpa henti \m/
Dah ah malah curhat kepanjangan, nggak ngasih trik lagi nih kobennyah nanti ;;) :"> Masih ingat dengan tools bikin tulisan kebalik! Like this...

pɐǝɥ ɟo ʎƃıpoɹd ʎq ɹǝuʍo ɐǝʇ ɯǝןɐʞ ƃuǝʇuɐƃ nuɐ ƃuɐןƃoןq ıs uǝqoʞ uǝqǝq

Sekarang dengan CSS 3 cetek bikin kayak gituan sob :-" Berikut contone

Prodigy of Head

Rahasianya-moz-transform:scale(-1);
-webkit-transform:scale(-1);
-o-transform:scale(-1);Hiasi dengan variabel CSS sesuka sobat deh, tapi 3 kode itulah rahasia bisa kebolak kayak ngono. Easy right ;)
Mau lagi yg gampang dan mudah² :-/ pantengin terus yak...

Ketikan pada kotak search blog Beben ini dengan keyword "translate" Sudah banyak trik Koben beri urusan menterjemahkan bos. Nih jalan yang paling gampang tapi tidak meninggalkan urusan full stylish b-) Masukan ramuan berikut dengan tehnik Add a Gadget ► HTML/Javascript

<script type="text/javascript">
<!--
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id',
autoDisplay: false,
gaTrack: true,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
//-->
</script>

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<div style="width:200px;height:25px;text-align:center;margin:0 auto">
<div id="google_translate_element" style="display:none"></div>
<div id="translate_link">
<a href="#" onclick="document.getElementById('google_translate_element').style.display='inline';document.getElementById('translate_link').style.display='none';return false;">TRANSLATE</a>
</div>
</div>

Sok lihat deh ada apa dengan trik tersebut :D setelah terpasang. Kalau ada script/code translate bawaan, delete dolo (atut bentrok)
pageLanguage ganti & isikan dengan konten memakai bahasa apa pada blog agan :) Easy ih Easy, yes Easy ih :P
Masih mau lagi!!! Kembali mempermak postingan sesudahnya tentang Show Hide Pure use CSS for Cbox.

Sekarang dikasih sentuhan variabel CSS3, agar terlihat lebih maknyus :">

Klik buat mengambil link!

Kode CSS

#bb-sisi {
left: 0;
top: 30px;
width: 450px;
padding: 0;
cursor: pointer;
position: absolute;
margin-left: -400px;
-o-transition: all 2s ease;
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
background:transparent url("http://URL-IMAGE-HERE.png") right top no-repeat;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#bb-sisi:hover {
-o-transform: translate(400px);
-moz-transform: translate(400px);
-webkit-transform: translate(400px);
}
#bb-sisi .bb-box {
width: 375px;
padding: 5px;
height: 390px;
overflow: hidden;
background: #debe94;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 5px 1px 10px #000;
-moz-box-shadow: 5px 1px 10px #000;
-webkit-box-shadow: 5px 1px 10px #000;
}

Kode yg diberi warna monggo rubah² sesuai kebutuhan. Var. overflow disana koben pakek hidden, bisa diganti ke auto kalo mau. Kode #bb-sisi:hover itu px-nya sesuaikan dengan var. margin-left: -400px;.

Kode HTML

<div id="bb-sisi">
<div class="bb-box">

YOUR CONTENT HERE'S

</div>
</div>Syudah duyu :">
Happy blogging \m/