Tutorial Blog for Stylish Blogger

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.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

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

Sebelumnya telah diketahui bersama google meluncurkan project teranyarnya yaitu guna menyaingi popularitas keberadaan ;)) Ramai berita berkumandang di seantero jagat bagaimana 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 .
Source by: .
Semoga bermanfaat :)

▼ ▲

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/

▼ ▲

Kita kupas abis JavaScript saat ini. hasil ngubeuk² blog dari salah satu sobat blogger kita :D Sebenarnya terdapat kategori yang disukai juga sama 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 , belajar optimalisasi dengan kode² mudah :D Teringat kembali nih sob dengan 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/

▼ ▲

Tested Tutorial on Blogger

0 Komentar

▼ ▲

The Interest Javascript Collected

4 Komentar

Kemarin sudah berbagi 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 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

7 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 . Kotak search dengan efek hover kala cursor didekatkan :D Sobat kepengen ini mungkin ! Bahkan yang ekstrim sekalipun pernah Beben Koben si bloglang anu ganteng kalem tea sharing .
Banyak sekali dengan variable search kita bisa berkreasi loh bos. Di blog 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

search-smoke 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

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

Juli 2011