Tutorial Blog for Stylish Blogger: Juli 2011

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN_TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

Blogger Stylish Trick

5 Komentar

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 , 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 ;)) . 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

7 Komentar

▼ ▲

Make Tabbed Interface with jQuery

3 Komentar

...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 lalu disadur kembali oleh sobat kita blog . Kunjungi blog amatullah83 banyak artikel menarik disana ya :)
Beben juga pernah comot dari queness web 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 .

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.
Script tag dengan tulisan color biru.
CSS style warna hijau tua.

<style>

</style>

Kode HTML tag font color ungu.
Warna putih.
Save.

Semoga berhasil :)
Happy blogging \m/

▼ ▲

ecek-ecek 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 HereBagus kan tuh :"> mirip dengan ! 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>



</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!!!

2 Komentar

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 ;)) :">

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

3 Komentar

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/

▼ ▲

ZeroClipboard Test With Embed

0 Komentar

▼ ▲

The Interest Javascript Collected

4 Komentar

mistonline.in 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.

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 ;)

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

Gantilah tulisan yg diberi warna sesuai kebutuhan.

Pilihan berikutnya jatuh pada welcome message with jQuery.

Klik buat mengambil link demo!
Structure

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 .
Dah ah capek, sok diacak-acak saja sumbernya ama agan <--- lagi ultah webnyah <:-P
Happy blogging \m/

▼ ▲

Simple Lightbox with CSS and jQuery by Webdesigntuts+

2 Komentar

▼ ▲

Lightbox Effect Pure use CSS for Blogger

5 Komentar

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

8 Komentar

▼ ▲

Hover Post for Blogger with jQuery

7 Komentar

▼ ▲

Search Box Blogger Smoke Theme with CSS

2 Komentar

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

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

6 Komentar

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 ;)) . Semoga bermanfaat :)
Happy blogging \m/

▼ ▲

Learn for Easiness

2 Komentar

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 :) :P
Masih mau lagi!!! Kembali mempermak postingan sesudahnya tentang .

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/

Tutorial blog for full stylish blogger - Freedom of expressions and system of brains.

RESOURCE

GRAPHICS STATUS

Kode CSS

Kode HTML

jQuery plug-in for Lens Effect Image Zooming

Hover Your Mouse Below ☻

Ramuannya

Rotate message with JavaScript

Splash Page with JavaScript

Kode CSS Lightbox

jQuery Snippet Hover on Post for Blogger

Kode CSS

Kode HTML

DEMO

Kode CSS

Kode HTML

Laman

My ETC

TRANSLATE

KATEGORI

JOINT WITH ME ON g+ PAGE

ARSIP

RECENTLY

FACEBOOK PAGE