Lorem Ipsum Bahasa Aneh!

Pernah memperhatikan tulisan panjang tapi bahasanya aneh! Biasanya terdapat pada para pengembang template guna mengisi kolom postingan. Benar sekali sobat, bahasa Lorem Ipsum yang sering kita lihat dan baca itu ;)) Terlihat selengean ternyata mengandung arti juga bahasa model gito :))
Banyak tools generate guna memperoleh layanan satu ini. Mau yang simpel sampai yang rumit sekalipun. Disini Beben Koben si Bloglang anu ganteng kalem tea akan berbagi yang sederhana saja namun efektif ;) Makan kuaci sampahnya banyak, berikut ini contoh lorem ipsumnya :D

Lorem ipsum dolor sit amet, consectetur adipisicing elit, eos, tenetur officia at mollit, earum, necessitatibus id placeat tempor. et, consequatur elit quaerat nam aut laborum ullamco odio provident distinctio sunt vero praesentium impedit ullam vel voluptate libero. sapiente corporis optio provident distinctio voluptates sint recusandae cupidatat, non corrupti ex, praesentium expedita suscipit cupiditate aliquam nostrum cupidatat. praesentium qui ducimus, autem temporibus fugiat do.

Cillum commodi molestias eiusmod atque vero atque dolorum dolor. Duis laboriosam sunt modi debitis excepteur atque tempor perferendis minus maiores. Nostrud at excepteur dolor nihil, facilis voluptate facere soluta asperiores anim ullam ullamco. Incidunt quod soluta ea do incidunt optio, saepe aliquip fuga.

Quo consequat et perferendis anim temporibus hic harum placeat nobis labore enim incididunt voluptatem illum. Cupiditate omnis enim placeat id quod molestiae pariatur. Elit do asperiores eum, obcaecati.

Vero minus eiusmod perferendis perferendis tenetur vero perferendis voluptas vero tempor eiusmod mollitia expedita cumque. Proident voluptate repellendus officia voluptatem ex cillum libero repellat do molestias proident laboris dolorem hic tenetur minima. Eu distinctio excepteur consectetur aute quo eveniet voluptatibus accusamus commodi facilis hic facilis labore maxime assumenda. Numquam aliquid assumenda similique sint eligendi corporis repudiandae delectus vel quia occaecat mollitia excepturi. Placeat laboris non laboris deserunt temporibus vero libero. Tempore at exercitationem voluptates quis deserunt doloribus eos eos suscipit dolores exercitationem officiis nostrum tempor. Dolores tempor eiusmod nulla assumenda, repellat eiusmod.

Laboris doloribus, recusandae provident, iure deleniti. Cum commodo molestias nulla incididunt id culpa tempor aliquam. Praesentium deserunt asperiores hic, iusto repellat temporibus aute veniam vero cum recusandae maiores, provident, commodi.

Minima suscipit placeat quo placeat nisi incidunt sed a repellendus. Sint sapiente doloribus sapiente eius tempore deleniti sint. Cumque omnis temporibus minima perferendis recusandae dolorum enim placeat reiciendis minus a repellendus. Pariatur nulla esse exercitationem doloribus voluptates facilis laborum occaecat similique dignissimos vel incididunt facilis vero maiores molestiae accusamus.

Nobis cupidatat earum aliquip autem incidunt, necessitatibus culpa saepe minus in occaecat ullamco cupidatat voluptate accusamus. Aliquid dolorem debitis, possimus distinctio distinctio, dolore atque. Ad voluptatem adipisicing recusandae earum reiciendis eum harum ad ullam reprehenderit iusto adipisicing mollitia. Eiusmod excepturi nihil saepe fugiat. Corrupti anim modi animi id soluta. Fugiat quia ut aute laborum incididunt quas eiusmod quis aliqua omnis praesentium. Nostrum atque suscipit maiores quo, debitis in quos aliquip cumque sint.

Kebayang bikin kalimat model gitu harus make acara mikir :-/ =)) Dijamin kalimat enggak jadi², kepala serasa mau pecah... Makanya pake yang ginian biar cepet.

Buka halaman web berikut Lorem Ipsum Me. Setiap kali kita refresh (F5) halaman tersebut, maka akan otomatis berganti juga kalimat yang ada disana ;) Tersedia tombol Copy to Clipboard memudahkan agan mencomot kalimat yang sudah terpilih. Jika dirasa terlalu panjang kalimatnya, coba cara ini saja

• Lorem ipsum type text
• Lorem ipsum type blog
• Lorem ipsum type essay

Refresh terus sampai didapatkan tulisan yang paling aneh :)) =))
Semoga bermanfaat :)
Happy Lorem Ipsum \m/

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/

Rubah Script Google +1 biar Lebih Cepat

Sebelumnya telah diketahui bersama google meluncurkan project teranyarnya yaitu google plus guna menyaingi popularitas keberadaan facebook ;)) Ramai berita berkumandang di seantero jagat bagaimana cara memasang tombol google +1 ini :D
Selang tidak lama ternyata pihak google telah membuat sedikit perombakan dalam cara menulis kode/script tombol plus tersebut agar lebih cepat kinerjanya. Sedikit saja kok sob perubahan yang terjadi, dan tidak membingungkan :p Sobat blogger cuma perlu menggantikan penulisan scriptnya doang. Dahulu kan scriptnya kayak gini<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>Rubahlah menjadi demikian<script type="text/javascript">
window.___gcfg = {lang: 'id'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>Letakan sebelum tag </body> Beres deh :D


Kalau bingung dapet tombolnya dimana! silahkan buka halaman get plusone button.
Source by: google plus button now faster.
Semoga bermanfaat :)

Make Tabbed Interface with jQuery

...Amatullah, seorang wanita muslimah biasa, yang hobi membaca, menulis walau corat coret doang, minat pada banyak hal: IT, Web Design, Interior dan Eksterior Design, Drawing, Sastra Sampai Kuliner...

Sebenarnya postingan kali ini sudah usang juga sob. Tapi karena tampilannya yang memukau diangkat juga sama Beben Koben si Bloglang anu ganteng kalem tea ;)) Original "jQuery Tabbed Interface / Structure Menu Tutorial" diambil dari web queness lalu disadur kembali oleh sobat kita blog Indahnya Berbagi. Kunjungi blog amatullah83 banyak artikel menarik disana ya :)
Beben juga pernah comot dari queness web trik menampilkan awan melayang itu :P Pokoknya kalau bisa sempatkan datang guna melihat artikel teranyarnya dari web n'tuh yah sob :) Penggila CSS mau tab menu sudah bisa kok, nih pure CSS tab menu.

Back to how make tabbed interface with jQuery!

demo
Bagus nyak ;)) :"> Lucu gitooo brooo =)) Untuk mendapatkannya sobat harus menghosting beberapa gambar, image silahkan sikat dulu dimari ya download image. Setelah itu baru deh masuk²in gambar & ramuan lain ke struktur kode berikut...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#tabMenu > li').click(function() {
if (!$(this).hasClass('selected')) {
$('#tabMenu > li').removeClass('selected');
$(this).addClass('selected');
$('.boxBody div').slideUp('1500');
$('.boxBody div:eq(' + $('#tabMenu > li').index (this) + ')').slideDown('1500');
}
}).mouseover(function() {
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
$('.boxBody #category li').click(function() {
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor', '#555');
$(this).children().animate({
paddingLeft: "20px"
}, {
queue: false,
duration: 300
});
}).mouseout(function() {
$(this).css('backgroundColor', '');
$(this).children().animate({
paddingLeft: "0"
}, {
queue: false,
duration: 300
});
});
$('#.boxBody li').click(function() {
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor', '#555');
}).mouseout(function() {
$(this).css('backgroundColor', '');
});
});
//]]>
</script>

<style>
#tabMenu {
list-style: none;
margin: 0;
padding: 0 0 0 15px;
}
#tabMenu li {
float: left;
height: 32px;
width: 39px;
cursor: pointer;
}
li.comments {
background: url(.../tabComment.png) no-repeat 0 -32px;
}
li.posts {
background: url(.../tabstar.png) no-repeat 0 -32px;
}
li.category {
background: url(.../tabFolder.png) no-repeat 0 -32px;
}
li.famous {
background: url(.../tabHeart.png) no-repeat 0 -32px;
}
li.random {
background: url(.../tabRandom.png) no-repeat 0 -32px;
}
li.mouseout {
background-position: 0 -32px;
}
.box {
width: 227px;
margin: 0 auto;
}
.boxTop {
background: url(.../boxTop.png) no-repeat;
height: 11px;
clear: both;
}
.boxBody {
background-color: #282828;
}
.boxBottom {
background: url(.../boxBottom.png) no-repeat;
height: 11px;
}
.boxBody div {
display: none;
}
.boxBody div.show,#category a {
display: block;
}
.boxBody div ul {
width: 190px;
list-style-image: url(.../arrow.gif);
margin: 0 10px 0 25px;
padding: 0;
}
.boxBody div li {
border-bottom: 1px dotted #8e8e8e;
cursor: pointer;
font-size: 13px;
color: #eee;
padding: 4px 0;
}
.boxBody div ul li.last {
border-bottom: none;
}
li.mouseover,li.selected {
background-position: 0 0;
}
</style>

<div class="box">
<ul id="tabMenu">
<li class="posts selected">
</li>
<li class="comments">
</li>
<li class="category">
</li>
<li class="famous">
</li>
<li class="random">
</li>
</ul>
<div class="boxTop">
</div>
<div class="boxBody">
<div id="posts" class="show">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li class="last">
Link 3
</li>
</ul>
</div>
<div id="comments">
<ul>
<li>
Link 4
</li>
<li>
Link 5
</li>
<li class="last">
Link 6
</li>
</ul>
</div>
<div id="category">
<ul>
<li>
Link 7
</li>
<li>
Link 8
</li>
<li class="last">
Link 9
</li>
</ul>
</div>
<div id="famous">
<ul>
<li>
Link 10
</li>
<li>
Link 11
</li>
<li class="last">
Link 12
</li>
</ul>
</div>
<div id="random">
<ul>
<li>
Link 13
</li>
<li>
Link 14
</li>
<li class="last">
Link 15
</li>
</ul>
</div>
</div>
<div class="boxBottom">
</div>
</div>

Keterangan:

• Tulisan warna merah pucat.
jQuery inti, jika sudah ada jangan dipasang lagi.
• Script tag dengan tulisan color biru.
Letakan diatas tag </body>
• CSS style warna hijau tua.
Masa masih dibilangin juga, masukan diatas kode </b:skin> tapi jangan dibawa tag <style> and </style> NYA!!!
• Kode HTML tag font color ungu.
Add via Add a Gadget/Javascript :P
• Warna putih.
Hostingkan gambar yg didownload tadi ;)
• Save.

Semoga berhasil :)
Happy blogging \m/

Mobile Theme for by Blogger Blogspot

Blogger blogspot awal mengumandangkan mobile templates ready to use, ternyata memang benar teraplikasikan. Selain default bawaan dari blogger sendiri, ada beberapa cara untuk membuat blog kita menjadi versi mobile! Diantaranya 3 Step Easy Making Blog Mobile Versi, mobile platform by mobstac bahkan syntax mobile default bisa ditanamkan kedalam template syntax mobile link on template.
Panjang lebar berbicara mengenai form mobile, apakah sobat sudah mengeksplore bagian tersebut :-/ Try open this Prodigy of Head. Themenya warna pink kan! warna kecukaan para ladies in the world :)) Sobat dapat menyeting theme for mobile template sobat jika agan respek mengacak-ngacak bagian look around new feature blogspot in draft mode ;)

Terdapat 7 pilihan theme yang bisa dipilih.

• Default
• Simple
Terdapat tujuh theme bisa disikat.
• Picture Window
Tiga biji theme bergaya window.
• Awesome Inc.
Enam macam siap dipakai.
• Watermark
Empat theme oke punya.
• Ethereal
Tiga jenis bro.
• Travel
4 styler theme.

Berikut screenshot of simple theme:

Yang lainnya mah silahkan acak² sendiri ;)) Nggak tauk caranya :-O #-o

Buka blogger in draft lalu klik icon gambar rumah ► Pilih Template (klik) ► cari Mobile, klik lalu pilih² deh dan disave :D
Selamat menikmati mobile theme by blogger blogspot, semoga bermanfaat :)
Happy blogging \m/

Amazing Oh Amazing

Apakah postingan sebelum²nya sudah membuat sobat tercengang! Sangkin kaget dengan feature CSS 3 dapat membuat sebuah karya kreasi mengagumkan, jadi pusing juga ngikutin perkembangannya yah bos ;)) Biar semakin haus akan variabel CSS3, Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali the great awesome CSS 3 trick of developer maker :D
Kreasi trik yang dibuat menggunakan CSS dan ada juga yang dikombinasikan sama Javascript! Resource kali ini pasti akan membuat para moziller (penggila mozilla browse) dimanjakan atas perkembangan kemajuan browse mozilla itu sendiri :) You can tell how make it can be with CSS attribute...

Hehehehe...so good right my bro :P Bisa muteul² (rotate), ada unsur transparansi (opacity)...

Inti dari membuat efek bayangan pada image dengan CSS, yaitu gambar yg disamarkan dengan teknik opacity. Dibatasi tinggi area dengan posisi absolute.Beben Koben

Ingat satu hal, untuk melihat efek berfungsi atau tidaknya browse sobat harus update serta melihat support atau tidak efek tersebut pada browse yg sobat miliki. Cek and ricek can be found here CSS3 Browser Support Reference by w3schools.

Kepengen 87 Demos lainnya, monggo satroni ama agan dimari Demo Studio b-) :-bd Selamat bereksplore ria :))
Happy blogging \m/

Make Effect Shadow with CSS 3 Reflection

Melatih skill agar menjadi amazing kemarin sudah Beben Koben kasih resource gaya punya! Kalau dirasa kurang and kepengen lebih mengagumkan lagi cek gi dot deh 30 amazing CSS 3 tutorials and experiments :-"
Satu dari sekian banyak trick menggunakan variabel CSS3, ternyata masih ada yang kurang yaitu membuat efek reflection (shadow / bayangan) dengan CSS to'k. Kalo pake script mah disini juga sudah terpasang kayak ngene nih (lihat bagian bawah image terdapat effect shadow!)


Ternyata sekarang bisa hanya dengan menggunakan css doang kepengen ada bayangan pada gambar mah sob ;)) Contoh:

Klik buat mengambil link Demo!
Kekekekkk...terlihat dibawah image ada shadow-shadow!

Silahkan dipelajari make reflection effect using CSS3 :-bd Semoga bermanfaat, see you :-h
Happy CSS 2+1 \m/

Make Your Brain With AmazingThings

Tidak akan banyak bicara mengenai CSS 3, sudah buanyak Beben Koben bagi buat kalian para Kobener diseluruh dunia trik mengenai CSS3. Tinggal ubek dah sok. Dari full stylish saatnya membuat skill sobat menjadi AMAZING!!!
Rajin praktek pantang menyerah, membaca dari para developer and kreatifitas ;) Berikut beberapa trick yang Beben Koben si bloglang anu ganteng kalem tea comot guna menggelitik skill para sobat dari blog salah satu sobat kita :) Masih berkelut sekitaran efek shadow pada huruf...

Prodigy of Head

PRODIGY OF HEAD

Press this!

NYOOOHHH!!! Arahkan mouse pada tulisan "Where are the Trees"

Lanjut gan biar encer makin enjoy :P

Demo Link Animation Effect with CSS 3
Biar makin encer, sikaaattt )))

jQuery plug-in for Lens Effect Image Zooming

Hover Your Mouse Below ☻

Please welcome, and visit the great blog then acak-acak article yang ada disono ;))

http://www.amazingthings.in/

See you in monday ;)
Happy blogging \m/

Ecek Ecek Ra Nggenah!!!

Kita kupas abis JavaScript saat ini. hasil ngubeuk² blog dari salah satu sobat blogger kita :D Sebenarnya terdapat kategori yang disukai juga sama Master Ocim yaitu mengenai script PHP ;)) Mari kita coba iming-iming master Ocim dengan yang kek ginian...php script shortURL expander (LongURL), script IDWS direct link generator, Download 4shared premium, source code Facebook video downloader, php daftar judul blog terbaru pakek image or etc. Pasti Ocim mau tuh yang kayak begituan :-"
Karena вἔвἔᾗ ќὄвἔᾗ ṩἷ вłὄʛłᾄᾗʛ ᾄᾗὗ ʛᾄᾗҭἔᾗʛ ќᾄłἔм ҭἔᾄ tidak paham mengenai PHP, maka JavaScript saja yang dicomot (tinggal pake biasa) :))
Berikut contoh penggunaan javascript dengan atribut onclick event
Open Here

Beben Koben Si Bloglang anu Ganteng Kalem

Close

Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Li mesto esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem.

Bagus kan tuh :"> mirip dengan spoiler! Click to expand and get code

<span style="cursor: pointer" onclick="document.getElementById('Unique-ID').style.display='block'"><center>TITLE HERE</center></span>

<div id="Unique-ID" style="padding:10px;display:none;border:1px solid #333;">
<table>
<tr>
<td width="100%">
<strong>YOUR TITLE</strong>
</td>
<td>
<span style="cursor: pointer;border:1px solid blue;background:#555;color:#fff;padding:5px" onclick="document.getElementById('Unique-ID').style.display='none'"><b>Close</b>
</span>
</td>
</tr>
</table>
<p>

<!-- YOUR CONTENT HERE -->

</p>
</div>

Lanjut gan...

Sekarang dikombinasikan dengan variabel button and textarea.


<button onclick="javascript:document.getElementById('Unique-ID').rows='25';"><br />Tinggi<br /></button><br /><button onclick="javascript:document.getElementById('Unique-ID').rows='4';"><br />Rendah<br /></button><br /><br /><br /><textarea id="Unique-ID" cols="75" rows="4"><br />ISI TEXT AREA<br /></textarea>
Kodenya yag didalem textarea itu, monggo divariasikan sendiri :P
Yuk lanjut membuat URL Encode simpel banget, contoh Url encode http%3A//beben-koben.blogspot.com/ ada lambang persen² & angka² (%3) tuh!!!

Ramuannya

<textarea id="area" cols="30" rows="5"></textarea>
<br>
<button onclick="document.getElementById('hasil').innerHTML =(escape(document.getElementById('area').value));document.getElementById('hasil').style.display='inline'">URL Encode
</button>
<br>
<textarea id="hasil" cols="30" style="display:none" readonly="readonly" onclick="this.focus();this.select()">
</textarea>

Karena keterbatasan tidak bisa memasukin script pada sesi postingan, langsung saja deh acak-acak sumbernya
Bye bye \m/

Belajar Mudah Yuk!!!

Kembali menambahkan mengenai Learn for Easiness, belajar optimalisasi dengan kode² mudah :D Teringat kembali nih sob dengan Placeholder atribut. Ternyata dalam penerapannya banyak juga bisa diaplikasikan ke dalam berbagai bentuk. Sebelumnya kan cuman input area, jalan² ke web snippet script, HTML, CSS, JavaScript and etc eh ternyata bisa dilain tempat juga :P
Berikut beberapa sample yang Beben Koben si bloglang anu ganteng kalem tea comot ;)) :">

Create a Username:

Sobat diharuskan memasukan deretan huruf minimal 3 huruf dan tidak boleh lebih dari 10 huruf! Berikut kode²nya...
<form action="#" method="post">
<label for="username">Your Title here: </label>
<input type="text" name="username" id="" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Search</button>
</form>

Membuat tulisan email dengan variabel placeholder

<input name="email" type="email" placeholder="YourAccount@YourEmail.com" size="27" />
Konon menurut issue HTML5, embed video YouTube bisa menggunakan variabel iframe! Contohnya...

<iframe type="text/html" width="100%" height="385" src="http://www.youtube.com/embed/qvgVMecNp0c" frameborder="0"></iframe>
Sobat hanya perlu menggantikan deretan code yg diberi warna ;) Dan YouTube sekarang sudah menggunakan link share dengan short Url teranyar, yaitu http://youtu.be/qvgVMecNp0c

Klik buat mengambil link bonus!
Semoga bermanfaat :)
Happy blogging \m/

Funky Hover on Link

Jangan yang berat-berat terus ah postingannya, nanti sobat pada mabok ngikutinnya. Rehat sejenak dari artikel para master blog, kita seling dengan postingan simple dan hangat hasil merenung 2500 tahun :D
Jika ada dari kalian para sobat memperhatikan pada single post (halaman post full) pada blog aneh ini, akan terlihat hover bertuliskan #Bloglang™ di sisi kanan title posted satu lagi dibagian komentar dengan judul #comments-count :P Kali ini bukan mau nerangin cara buat yang kayak 'ntuh, more extreme buat link jika disorot akan nampak link tujuannya! Keterangan membingungkan pastinya, abis Beben juga puyeung mau neranginnya gimana :D Demo saja deh, perhatikan link & sorot ama sobat ;)

Klik buat mengambil link demo!
Pasti sudah terbayang what i'm talking about funky hover on link b-) Caranya juga cukup gampang, lihat and perhatikan unique ID bagian post template kalian masing²
Biasanya .post-body, .post-wrap, .post-crot or else. Sisipkan didalam variabel unique ID post sobat dengan variabel berikut. Berikut susunan kode-kode...

#uniqueID-post a:hover:after {
content: " Page: (" attr(href) ") ";
color: #b50010;
background: #f4f4f4;
margin: 0 5px;
text-decoration: underline;
}
#uniqueID-post a:active {
background: #FFFFFF;
color: #000;
}

#uniqueID-post bisa juga .uniqueID-post (# .) <=- ID or class that's mean! Tidak masalah yang penting variabel masuk semuanya ;))

Menuliskan link seperti biasa maka nanti akan langsung terlihat efek seperti di demo. Semoga bermanfaat :)
Happy blogging \m/

Tested Tutorial on Blogger

Just tested zeroclipboard using embed varibel to copy on your board.

Learn here ZeroClipBoard Google Project Hosting.

The Interest Javascript Collected

Kemarin sudah berbagi blogger dengan postingan edan eling. Sekarang merambah sharing web dengan article sarap punya. Adapun kategori yang diceritakan pada web tersebut meliputi: Ajax, Apache, Css, htaccess, Html, JavaScripts, Mysql, perl, and PHP.
Silahkan dipilih category diatas jika memang mencari hal yg ada sangkut pautnya dengan 'ntuh :) Kalau Beben Koben si Bloglang anu ganteng kalem tea baca yg ngertinya saja sob :D Abisnya tidak mengerti semuanya ;)) Coba tengok sama agan sekalian kategori Javascript di web tersebut! Nama webnya...eit nanti dulu atuh ah, kepengen buru-buru saja :-" Contoh artikel maknyus mengenai "Visitor counter using cookies and javascript"

Biasanya para blogger menggunakan jasa online counter guna mendapatkan fitur berapa kali artikel pada satu blog/web dibaca. Dengan javascript ternyata bisa juga, dan enaknya lagi bisa direset juga cookiesnya :D Struktur javascript create cookies like this

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

function GetCookie(name) {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
     var j = i + alen;
     if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
     i = document.cookie.indexOf(" ", i) + 1;
     if (i == 0) break;
 }
 return null;
}

function SetCookie(name, value) {
 var argv = SetCookie.arguments;
 var argc = SetCookie.arguments.length;
 var expires = (argc > 2) ? argv[2] : null;
 var path = (argc > 3) ? argv[3] : null;
 var domain = (argc > 4) ? argv[4] : null;
 var secure = (argc > 5) ? argv[5] : false;
 document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}

function DeleteCookie(name) {
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = GetCookie(name);
 document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays * 24 * 60 * 60 * 1000));

function amt() {
 var count = GetCookie('count')
 if (count == null) {
     SetCookie('count', '1')
     return 1
 } else {
     var newcount = parseInt(count) + 1;
     DeleteCookie('count')
     SetCookie('count', newcount, exp)
     return count
 }
}

function getCookieVal(offset) {
 var endstr = document.cookie.indexOf(";", offset);
 if (endstr == -1) endstr = document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
}
//]]>
</script>

Letakin script diatas tag </head> Script pemanggil (warna biru) dibawah ini disimpan dalam tag body template sobat.
<script type='text/javascript'>
<!-- Begin
document.write("Halaman ini sudah dibaca <b>" + amt() + " kali.")
// End -->
</script>

<a href="#" onclick="DeleteCookie('count')" value="Reset Cookies">Reset Cookies</a>
Kode warna merah buat ngereset. Kalo bisa jangan dipasang atau sembunyikan saja penempatannya supaya gak direset-reset :P Satu artikel maknyus punya sudah Koben sharing. Mau lagi!!!

Bagi sobat yang background blognya default (tanpa warna = putih) script simple ini mungkin bisa menambah gaya dalam menggantikan warna latar belakang blog kalian.

<script language="javascript">
function chngebg (id)
{
switch (id)
{
case 'b1':
document.body.bgColor = "red";
break;

case 'b2':
document.body.bgColor = "yellow";
break;

case 'b3':
document.body.bgColor = "green";
break;

case 'b4':
document.body.bgColor = "blue";
break;
}
}
</script>
<input type="button" id="b1" onclick="chngebg(this.id)" value="1"/>
<input type="button" id="b2" onclick="chngebg(this.id)" value="2"/>
<input type="button" id="b3" onclick="chngebg(this.id)" value="3"/>
<input type="button" id="b4" onclick="chngebg(this.id)" value="4"/>

Masukin bumbu dengan tehnik Add a Gadget ► HTML/Javascript :D Ganti dah warna dengan selera masing² Atribut value bisa diganti dengan judul bebas. Kalau masih mau disini juga ada change background color for blogger ;)

Rotate message with JavaScript

Klik buat mengambil link demo!
Ramuan masukin dengan cara Add a Gadget ► HTML/Javascript

<form name="slideshow"><div align="center"><center><b>Update</b><br /><textarea rows="1" name="S1" cols="50" wrap="virtual" readonly style="border-style:solid;border-color:red green blue black;border-width:3px"></textarea><br /><input type="button" value="GoTo That Link" name="B1" onClick="window.location=messagelinks[curmsg]"/></center></div></form>

<script type="text/javascript">
//<![CDATA[
var curmsg=-1
var messages=new Array()
messages[0]="Script keren-keren punya, yang hanya ada disini!"
messages[1]="Template pilihan edan eling, sampe capek ngubek2nya!"
messages[2]="Trik dan tips seleksi high class dan full stylish!"
//add more messages as desired

var messagelinks=new Array()
messagelinks[0]="http://beben-koben.blogspot.com/search/label/Javascript"
messagelinks[1]="http://beben-koben.blogspot.com/search/label/Template"
messagelinks[2]="http://beben-koben.blogspot.com/search/label/Trik%20dan%20Tips"
//add more links as indicated by the number of messages

function slidemessage(){
if (curmsg<messages .length-1)
curmsg++
else
curmsg=0
document.slideshow[0].value=messages[curmsg]
setTimeout("slidemessage()",3000)
}
slidemessage()
//]]>
</script>

Tulisan berwarna silahkan ganti sesuai kebutuhan :)

Splash Page with JavaScript

Klik buat mengambil link demo!
Bumbu-bumbunya

<script type="text/javascript">
<!-- Begin
var background = "black";
var text = "white";
var URL = "http://LINK-TUJUAN-KALIAN.com";
var speed = 3000; // time in milliseconds (4000 = 4 secs)
var msgcount = 5;
var i = 1;
var blank = " ";
function StringArray (n) {
this.length = n;
for (var x = 1; x <= n; x++) {
this[x] = ' ';
}
}
message = new StringArray(msgcount);
message[1] = "YOUR MESSAGE 1 HERE!";
message[2] = "YOUR MESSAGE 2 HERE...";
message[3] = "YOUR MESSAGE 3 HERE.";
message[4] = "YOUR MESSAGE 4 HERE?";
message[5] = "YOUR MESSAGE 5 HERE!";

function SplashPage() {
SplashPagepage = '<body bgcolor='+background+'>'
+ '<center><table border=0 '
+ 'height=100%><tr><td><center><b><font '
+ 'color='+text+' size=6>'+message[i]+'</font></b>'
+ '</center></td></tr></table></center><font size=1 color="white">'
+ '<div style="position: absolute; right: 10px; bottom: 10px;" id=copy>Script From Mistonline.in</div></font></body>';

if (i == message.length + 1) parent.location = URL;

if (i < message.length + 1) {
frames['SplashPageshow'].location = "javascript:parent.SplashPagepage";
i++;
setTimeout("SplashPage()",speed);
}
}
// End -->
</script>
<iframe width="100%" height="96%" name="SplashPageshow" src="javascript:parent.blank"></iframe>
<script type="text/javascript">SplashPage();</script>

Gantilah tulisan yg diberi warna sesuai kebutuhan.

Pilihan berikutnya jatuh pada welcome message with jQuery.

Klik buat mengambil link demo!
Structure

<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #FBE5F8;
background-image: url('http://LINK-YOUR-IMAGE-RESOLUTION-32x32.png');
}
</style>

<!-- Dont Delete This Notice, This code is from http://mistonline.in, the one stop reference for all web developers.
Please keep this above notice for our promotion purpose.Thank you very much -->

<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>

<div id="info">
<a class="close" href="#" style="float: right;"><img border="0" src="http://LINK-YOUR-IMAGE-RESOLUTION-12x12.png" alt="X" /></a>

!!! YOUR MESSAGE HERE !!!

</div>

Flip The Page Simple with jQuery

Klik buat mengambil link demo!
Bumbu-bumbune

<style>
/* flip */
img { behavior: url(iepngfix.htc) }
#flipthepage {
 position: relative;
 right: 0; top: 0;
 float: right;
 border:0px;
}
#flipthepage img {
 border:0px;
 width: 50px; height: 52px;
 z-index: 99;
 position: absolute;
 right: 0; top: 0;
 -ms-interpolation-mode: bicubic;

}
#flipthepage .msg_block {
 width: 50px; height: 50px;
 overflow: hidden;
 position: absolute;
 right: 0; top: 0;
 background: url(http://YOUR-LINK-IMAGE-SUBSCRIBES.png) no-repeat right top;
}
</style>

<div id="flipthepage">

<a href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT">
<img src="http://YOUR-LINK-IMAGE-RSS.png" alt="" />
</a>
<div class="msg_block"></div>

</div>

<script type="text/javascript">
$(document).ready(function(){

//Page Flip on hover
 $("#flipthepage").hover(function() {
  $("#flipthepage img , .msg_block").stop()
   .animate({
    width: '307px',
    height: '319px'
   }, 500);
  } , function() {
  $("#flipthepage img").stop()
   .animate({
    width: '50px',
    height: '52px'
   }, 220);
  $(".msg_block").stop()
   .animate({
    width: '50px',
    height: '50px'
   }, 200);
 }); 
});
</script>

Disana ada 2 buah image, sikat terlebih dahulu imagenya Image Flip Page.
Dah ah capek, sok diacak-acak saja sumbernya ama agan MistonLine <--- lagi ultah webnyah <:-P
Happy blogging \m/

Simple Lightbox with CSS and jQuery by Webdesigntuts+

Sebelumnya memosting Lightbox Effect Pure use CSS for Blogger, eh tidak lama datang lagi sob, artikel dari web developer terkemuka di jagat alam maya mengeluarkan trick "Super Simple Lightbox with CSS and jQuery"
Benar-benar simple script & kode yang dipakai dalam pemakaiannya :) Tapi trik tersebut memakai jQuery script alias plugin :P Jadi semakin tidak terhitung ada berapa trik macam ginih di blog akuh :"> Makin banyak pilihan, makin asoooyyy :x Kalo mau menengok variasi lightbox ada dicinih nih jQuery Lightbox Variety :D

Penjelasan Beben rasa sudah cukup jelas di web sumber. Disini Beben Koben si bloglang anu ganteng kalem tea hanya menambahkan variabel CSS 3 cedikit ;)) bial pull stylish :"> Look Pict with Lightbox Technique

Gantikan semua variabel CSS yg ada dengan ciptaankuh :))

#lightbox {
position: fixed;
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: #000; 
text-align: center;
opacity: 0.9;
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
#lightbox p {
text-align: right; 
color: #fff; 
margin-right: 20px; 
font-size: 13px; 
}
#lightbox img {
margin-top: 15%;
box-shadow: 0 0 25px #FFF;
-webkit-box-shadow: 0 0 25px #FFF;
-moz-box-shadow: 0 0 25px #FFF;
}

Wassalam :)
Happy lightbox...again \m/

Lightbox Effect Pure use CSS for Blogger

Siapkan diri sobat dengan kejutan artikel spektakuler kali ini mengenai Lightbox Image Technique Use 100% CSS. Sebelum masuk ke acara inti, adakalanya sobat mengetahui yang dimaksud dengan lightbox! Lightbox yg Beben Koben si Bloglang anu ganteng kalem tea maksudkan disini yaitu mirip kinerja modal windows ;) Gambar kecil pas diklik bisa menjadi guede, seperti itu kira² penjelasannya :D
Perhatikan deretan category berikut: FancyBox, Multibox, Pirobox, Cloud Zoom, PicBox, SlimBox, PrettyPhoto, ImageBox, DivBox, LightBox Plus, Awesome box, Bumpbox, Thickbox, Zoomy, Floatbox, ImageZoom, Easy Zoom, Shadowbox, Litebox, Milkbox, Lightbox 2, CeeBox, Foxibox, ImgBox, ColorBox, LightWindow, TripTracker Slideshow, mediaBox Advanced, AnythingZoomer, PieceMaker 2, jCarousel, SlideWindow, TopUp, LyteBox, TinyBox2, Featured Image Zoomer, Gzoom, NivoZoom, iBox, FaceBox, SexyLightBox, FacyBox, HighSlide JS, SuperBox, NyroModal, MopBox, FancyZoom, QuickBox, ReMooz, SqueezeBox, Jparallax, VideoBox, ZoomBox, PhotoViewer, JqZoom, JsImageBox, YUI LightBox, Fullsize, PhotoShoot, PhotoZoom, imgZoom, Jquery Panel Gallery 2.0, Slides, Cerabox, ZoomIt, tinylightBox, Control.Window.

Jika diantara sobat mencari trik yg termasuk kategori diatas, jangan capek² karena trick dengan judul asli "Implementing CSS Lightbox in Blogger" Beben dapatkan dari salah satu sobat blogger yg postingannya berisi edan eling punya (high class) b-)
Bisa jadi setelah membaca artikel dari blogger 'ntuh, agan² bisa jadi master cemuanyah =D>

demo
Original article can you find here Implementing CSS Lightbox in Blogger.

Kalau pada postingan aslinya, CSS yang digunakan meliputi buat browse I E juga, ternyata pas dites sama juga amburadul. Jadi Dicinih ma Beben CSSnya diminimalis & dimodif lagi sesuai dengan kebutuhan :-"

Kode CSS Lightbox

/***********************************************

this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome

Modify by: http://beben-koben.blogspot.com/

tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome

***********************************************/
html { -webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
p{font-size:13px;line-height:18px;color:#234;}
#lightbox{display:inline-block;margin:0 auto;height:auto;vertical-align:middle;padding:0;text-align:center}
div.holder{position:fixed;width:100%;height:100%;display:table;text-align:center;left:-9999px;top:0;z-index:100;}
div.holder p.instructions{font:bold 11px/15px verdana,arial,sans-serif;color:#ccc;margin:0;opacity:0;filter:alpha(opacity=0);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-transition:opacity 0.25s linear 0s;
-ms-transition:opacity 0.25s linear 0s;
-o-transition:opacity 0.25s linear 0s;
-webkit-transition:opacity 0.25s linear 0s;
transition:opacity 0.25s linear 0s;
}
div.backdrop{position:fixed;left:-9999px;top:0;width:100%;height:100%;background:#000;opacity:0.8;filter:alpha(opacity=80);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);z-index:-1;}
div.frame{display:table-cell;vertical-align:middle;}
div.y1{display:inline-block;background:#fff;padding:10px;
-webkit-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow:2px 2px 4px rgba(0,0, 0, 0.3);
-moz-transform:scaleY(0.1);
-ms-transform:scaleY(0.1);
-o-transform:scaleY(0.1);
-webkit-transform:scaleY(0.1);
transform:scaleY(0.1);
-moz-transition:-moz-transform 0.5s linear 0s;
-ms-transition:-ms-transform 0.5s linear 0s;
-o-transition: -o-transform 0.5s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s;
transition:transform 0.5s linear 0s;
}
div.y1{*display:inline;*margin-top:50px;}
div.x1{display:inline-block;overflow:hidden;position:relative;
-moz-transform: scaleX (0.1);
-ms-transform: scaleX (0.1);
-o-transform: scaleX (0.1);
-webkit-transform: scaleX (0.1);
transform: scaleX (0.1);
-moz-transition:-moz-transform 0.5s linear 0.5s;
-ms-transition:-ms-transform 0.5s linear 0.5s;
-o-transition: -o-transform 0.5s linear 0.5s;
-webkit-transition: -webkit-transform 0.5s linear 0.5s;
transition:transform 0.5s linear 0.5s;
}
div.x1{*display:inline;}
div.x1 img.pic{opacity:0;display:block;position:relative;z-index:10;margin:0 auto;
-moz-transition:opacity 0.25s linear 0s;
-ms-transition:opacity 0.25s linear 0s;
-o-transition:opacity 0.25s linear 0s;
-webkit-transition:opacity 0.25s linear 0s;
transition:opacity 0.25s linear 0s;
}
div.x1 p{font:bold 12px/18px verdana,arial,sans-serif;color:#444;margin:0;height:40px;padding:10px 0 0 0;margin-top:-50px;z-index:5;opacity:0;text-align: left;clear: left;width:100%;
-moz-transition:0.25s linear 0s;
-ms-transition:0.25s linear 0s;
-o-transition:0.25s linear 0s;
-webkit-transition:0.25s linear 0s;
transition:0.25s linear 0s;
}
div.x1 p.close{text-align:right;font-size:14px;position:absolute;right:10px;bottom:-13px;cursor: pointer;color:#888;}
.thumb{outline:0;}
.thumb img{height:110px;border:0;width:150px;}

/* non IE browsers */

.b1:focus ~ div.p1 {left:0;}
.b2:focus ~ div.p2 {left:0;}
.b3:focus ~ div.p3 {left:0;}
.b4:focus ~ div.p4 {left:0;}
.b5:focus ~ div.p5 {left:0;}
.b1:focus ~ div.p1 div.backdrop {left:0;}
.b2:focus ~ div.p2 div.backdrop {left:0;}
.b3:focus ~ div.p3 div.backdrop {left:0;}
.b4:focus ~ div.p4 div.backdrop {left:0;}
.b5:focus ~ div.p5 div.backdrop {left:0;}
.b1:focus ~ div.p1 div.frame p.instructions,
.b2:focus ~ div.p2 div.frame p.instructions,
.b3:focus ~ div.p3 div.frame p.instructions,
.b4:focus ~ div.p4 div.frame p.instructions,
.b5:focus ~ div.p5 div.frame p.instructions{opacity:1;filter:alpha(opacity=100);filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-transition:opacity 0.5s linear 2s;
-ms-transition:opacity 0.5s linear 2s;
-o-transition:opacity 0.5s linear 2s;
-webkit-transition:opacity 0.5s linear 2s;
transition:opacity 0.5s linear 2s;
}
.b1:focus ~ div.p1 div.frame div.x1,
.b2:focus ~ div.p2 div.frame div.x1,
.b3:focus ~ div.p3 div.frame div.x1,
.b4:focus ~ div.p4 div.frame div.x1,
.b5:focus ~ div.p5 div.frame div.x1 {
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
-o-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
.b1:focus ~ div.p1 div.frame div.x1 > div.y1,
.b2:focus ~ div.p2 div.frame div.x1 > div.y1,
.b3:focus ~ div.p3 div.frame div.x1 > div.y1,
.b4:focus ~ div.p4 div.frame div.x1 > div.y1,
.b5:focus ~ div.p5 div.frame div.x1 > div.y1 {
-moz-transform:scale(1, 1);
-ms-transform:scale(1, 1);
-o-transform:scale(1, 1);
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
.b1:focus ~ div.p1 div.frame div.x1 img.pic,
.b2:focus ~ div.p2 div.frame div.x1 img.pic,
.b3:focus ~ div.p3 div.frame div.x1 img.pic,
.b4:focus ~ div.p4 div.frame div.x1 img.pic,
.b5:focus ~ div.p5 div.frame div.x1 img.pic{opacity:1;
-moz-transition:opacity 0.5s linear 1s;
-ms-transition:opacity 0.5s linear 1s;
-o-transition:opacity 0.5s linear 1s;
-webkit-transition:opacity 0.5s linear 1s;
transition:opacity 0.5s linear 1s;
}
.b1:focus ~ div.p1 div.frame div.x1 p,
.b2:focus ~ div.p2 div.frame div.x1 p,
.b3:focus ~ div.p3 div.frame div.x1 p,
.b4:focus ~ div.p4 div.frame div.x1 p,
.b5:focus ~ div.p5 div.frame div.x1 p{margin-top:0;opacity:1;
-moz-transition:0.25s linear 2.5s;
-ms-transition:0.25s linear 2.5s;
-o-transition:0.25s linear 2.5s;
-webkit-transition:0.25s linear 2.5s;
transition:0.25s linear 2.5s;
}

Sedikit kan sob :D Kalau ukuran tinggi dan lebar gambar dirasa kurang, rubah saja kode yg diberi warna yah (tinggi & lebar image yg akan tampil) :) Kalau upload imagenya mah gede resolusinya. Masa nanti pas diklik gambar yg keluarnya segede kutil =)) Nah sekarang pemakaiaannya nih. Karena murni menggunakan CSS, maka dalam penulisan sedikit banyak menggunakan tag ;)) Taging utama/single image dalam pemakaian kayak ngono

<div id="lightbox">

<a class="thumb b1" href="#" tabindex="1">
<img alt="" src="http://YOUR-LINK-IMAGE.jpg" />
</a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://YOUR-LINK-IMAGE.jpg" alt="" />
<p>Image 1 of 4
A line for descriptive text</p>
<p class="close">CLOSE X</p>
</div>
</div>
<p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

</div>
Coded warna biru, semua harus didalam tag tersebut. Code warna merah, disitu tempat image gede nanti keluar pas diklik. Maka kalau mau pakai banyak tinggal tambah saja kode warna merah itu. Contoh pemakaian banyak image...

<div id="lightbox">

<a class="thumb b1" href="#" tabindex="1">
<img alt="" src="http://YOUR-LINK-IMAGE.png" />
</a>
<a class="thumb b2" href="#" tabindex="2">
<img alt="" src="http://YOUR-LINK-IMAGE.png" />
</a>
<a class="thumb b3" href="#" tabindex="3">
<img alt="" src="http://YOUR-LINK-IMAGE.png" />
</a>
<a class="thumb b4" href="#" tabindex="4">
<img alt="" src="http://YOUR-LINK-IMAGE.png" />
</a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" />
<p>Image 1 of 4
A line for descriptive text</p>
<p class="close">CLOSE X</p>
</div>
</div>
<p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p2">
<div class="backdrop"></div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" />
<p>Image 2 of 4
A line for descriptive text</p>
<p class="close">CLOSE X</p>
</div>
</div>

<p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p3">
<div class="backdrop"></div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" />
<p>Image 3 of 4
A line for descriptive text</p>
<p class="close">CLOSE X</p>
</div>
</div>
<p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p4">
<div class="backdrop"></div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://YOUR-LINK-IMAGE.png" alt="" />
<p>Image 4 of 4
A line for descriptive text</p>
<p class="close">CLOSE X</p>
</div>
</div>
<p class="instructions">IE9+ and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

</div>
Perhatikan kode holder p4!!!
Itu tambahkan saja jika dalam 1 postingan mau menampilkan effect lightbox-nya lebih dari 10 :)) Please come and visit to look the great article by Stylify Your Blog.

Trik css3 lightbox hadir kembali dan kali ini datang dari web top markotop. Dengan sentuhan hover indah menawarkan kepada para pengguna lebih variatif ;) CSS3 Lightbox created by: Codrops
Capeeeekkk deuh :P
Happy CSS lightbox aja deh \m/

Going To Modern Browse Blogger

Tidak akan banyak basa-basi ah. Beben Koben si bloglang anu ganteng kalem tea sudah menekankan, bahwasannya fitur² yang sekarang lagi dikembangkan oleh para developer tidak lain harus ditunjang dengan browsingan yang sobat miliki. Finalnya pihak blogger sendiri telah mengumandangkan, nanti mulai tanggal 1 Agustus Blogger.Com akan mengedepankan browser modern (update)
Sehingga akan menghentikan beberapa browser terdahulu seperti: Firefox 3.5, Internet Explorer 7, dan Safari 3. Dalam browser lama sobat mungkin mengalami kesulitan menggunakan fitur tertentu di Blogger & lainnya Google Apps seperti Gmail, Google Calendar, Google Talk, Google Docs dan Google Sites. Jadi, jika itu sudah lama sejak update terakhir browse machine kita, segeralah untuk mengambil keuntungan dari peningkatan kinerja dan keamanan pada browser versi modern. Banyak tawaran, diantaranya

1. Google Chrome
Get Google Chrome Now.
2. Mozilla Firefox
Get More From Your Firefox here.
3. Internet Explorer
Download Internet Explorer by Microsoft Windows.
4. Safari
Download the world's most innovative browser with Safari by Apple.

Tidak lain dan tidak bukan blogspot ingin meningkatkan kinerja, kemampuan browser canggih yang mendukung HTML5 buat kita :x
Read Update on Browser Support source by BUZZ. Daripada itu sobat perlu juga meningkatkan skill guna mengikuti perkembangan yg ada sekarang ini :) Bisa membuat kayak gini dengan CSS...

Nih sikat ramuannya

CSS3 Simple Shapes Cheat Sheet
Sikat juga yang lainnya disini http://www.land-of-web.com/
Semoga bermanfaat :)
Koben cab's \m/

Hover Post for Blogger with jQuery

Memang kalau script sudah bermain, mau apa saja bisa sob ;)) Contoh jika kita memakai jQuery script, wooo...sudah tidak terhitung para developer menciptakan karyanya dengan sentuhan jQuery. Walau baru sedikit mengumpulkan The Great jQuery Webs mau menambahkan lagi, sangkin banyaknya jadi puyeung :P
Sobat mungkin sudah tidak asing membuat hover pada image dengan jQuery tentunya! Kalau mau menggunakan CSS3 tinggal baca ini saja CSS3 Hover Image for Blogger ini kalau kurang Thumbnail Hover Image File Blogger. Bagaimana sekarang efek hover itu kita masukan di bagian postingan dalam blog? Waktu cursor menyorot bagian postingan, akan membesar tulisannya sob ;))

Langkah awal, cari unique ID/Class pada template kalian masing² yang mentag bag. post! Umumnya template pada basic blogspot menggunakan unik ID

.post

Kalau unik ID sama dengan yg diatas, tinggal masukin bumbu jQuery snippet berikut diatas tag </body> Eit demo dolo ah...

demo

jQuery Snippet Hover on Post for Blogger

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var oldSize = parseFloat($(".post").css('font-size'));
var newSize = oldSize  * 1.20;
$(".post").hover(
  function() {
   $(".post").animate({ fontSize: newSize}, 300);
  },
  function() {
  $(".post").animate({ fontSize: oldSize}, 300);
 }
);
});
//]]>
</script>
</b:if>

Jika besar hover dirasa kurang, tinggal rubah saja nominal yg scriptnya diberi warna (kedip²). Kalo unique ID berbeda, tinggal ganti saja .post berjumlah 3 biji entuh :D dengan unik ID yg ada pada template sobat :)
Artikel ini Beben Koben si bloglang anu ganteng kalem tea comot dari sobat blogger kita yang suka nerangin trick menggunakan jQuery script. Please visit and look jQuery By Example, that's great blog :-bd
See you \m/

Search Box Blogger Smoke Theme with CSS

Bermain kembali dengan kotak search nich sobat² karena tidak ada gawean. Pernah memosting Search Gaya Full Stylish. Kotak search dengan efek hover kala cursor didekatkan :D Sobat kepengen ini mungkin Search Engine Custome for Blogger! Bahkan yang ekstrim sekalipun pernah Beben Koben si bloglang anu ganteng kalem tea sharing Custome Search Google API Key jQuery Ekstrim.
Banyak sekali dengan variable search kita bisa berkreasi loh bos. Di blog Ben Tools juga banyak menerapkan trick search dalam mengkoleksi tools online :)) Contoh search via google & blog secara sederhana search side korek-korek style :D

Kesempatan sekarang koben mau berbagi membuat kotak search bergaya tampilan smoke or rokok :P Cuman pakek CSS doang kok bos, enggak pakai gambar ;) Screenshot gan

Bagus kan tuh sob :">

Kode CSS

#SearchForm {
top: 5px;
right: 5px;
height: 31px;
width: 275px;
background: #FFFFFF;
border: 1px solid #555;
}

#SearchBox {
width: 10px;
height: 31px;
background: #FF0000;
border-right: 1px solid #333;
}

#submitButton {
float: right;
width: 65px;
height: 31px;
border: none;
cursor: pointer;
color: #555555;
background: #FFCC80;
border-left: 3px double #999;
}

#submitButton:hover {
color: #FFFFFF;
background: #FF6600;
}

#SearchInput {
color: #555;
border: none;
width: 210px;
font-size: 13px;
background: none;
padding: 7px 0 0 20px;
text-shadow: 1px 0 0 #111;
font-family: Arial,Helvetica,sans-serif;
}

#SearchInput,.DefaultText {
color: #aaa;
}

#SearchForm,#SearchBox {
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}

Kode HTML

<div id="SearchForm">
<form action="http://YOUR-URL-BLOG.blogspot.com/search" method="get">
<input id="submitButton" value="Submit" type="submit"/>
<div id="SearchBox">
<input class="DefaultText" name="q" id="SearchInput" placeholder="Search the site..." type="search"/>
</div>
</form>
</div>

Gantikan URL dengan link blog sobat, width yg diberi warna yaitu panjang secara keseluruhan. Jadi kalau panjangnya kepanjangan itu saja dulu yg dirubah ;) See you :-h
Happy search \m/

Variabel Stretch So Interesting

Mau murni pake CSS, dengan script atau apapun triknya itu terserah kepada masing² individu. Segala bisa disiasati asal mau b e l a j a r ► berusaha ► kemauan (tekad niat membara)
Kembali menemukan satu variabel CSS yang bisa membuat kita tercengang dengan hasil var. tersebut ;) Nama variablenya yaitu stretch. Awal menemukan si stretch waktu Beben Koben si Bloglang anu ganteng kalem tea berkunjung ke salah satu forum. Seorang bertanya bagaimana membuat satu image/gambar menjadi Full Auto Resizable Background. Cek get dot for demo Click to get demo link!This is structure CSS & HTML for Full Auto Resizable coded<style>
#background {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 0;
position: absolute;
}
.stretch {
width:100%;
height:100%;
}
</style>

<div id="background">

<img src="http://YOUR-LINK-IMAGE.jpg" class="stretch" alt="" />

</div>Setelah itu lama tidak berkunjung ke web developer full stylish, ternyata mengeluarkan trik dengan var. stretch juga bos :D Inti trick berikut yaitu perpaduan antara variable border-width, border-image and stretch menjadi karya "Image Frames using CSS3 Border Image"

DEMO

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum...

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso

Sebenarnya untuk image juga bisa sob, tapi gak bisa inline CSS...gak terlihat efeknya karena bentrok dengan kode img bawaan template :P Demo for image can you look in here
Klik buat mengambil link demo!

Masuk kesini buat mendapatkan tutorialnya yah ;)) Dynamic Drive CSS Library. Semoga bermanfaat :)
Happy blogging \m/