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 ☺

Resources

1 2 3 4 5 6 7 8
18 Februari 2014

GRAPHICS STATUS

27 Juli 2011

0 Komentar WTF  X
AA Koben akan berbagi source pilihan dari web codepen.io Murni kode CSS-an, simpel dan tentunya full stylish! Sebenarnya tut's lawas, akan tetapi penulisan code CSS yang sudah diperbaharui. Pertama-tama tutorial seputaran hover effect by Sergio, he's talk about bubble active navigation codepen.io/Sergioandrade/pen/hxJpa Berikut bumbu-bumbu yg mesti sobat tambahkan pada style link...a {
BLAH
BLEH
BLOH
}
a {
padding-top: 20px;
position: relative;
}
a:after {
content: "";
position: absolute;
right: 35%;
top: 0;
width: 16px;
height: 16px;
background: #0066FF;
border-radius: 50%;
opacity: 0;
}
a:before {
content: "";
position: absolute;
right: 45%;
top: 0;
width: 8px;
height: 8px;
background: #0099FF;
border-radius: 50%;
opacity: 0;
}
a:hover:before {
animation: bubbles infinite 1s linear;
}
a:hover:after {
animation: bubbles infinite 2s linear;
}
@keyframes bubbles{
from {
opacity: 0;
top: 40px;
}
20% {
opacity: 0.5;
top: 20px;
}
70% {
opacity: 1;
top: 0px;
}
90% {
opacity: 0;
top: -10px;
}
100%{
opacity: 0;
top: -20px;
}
}
SAVE.

Info kedua cara membuat search box dengan gaya click to expand. Master Sam D bercerita tentang expanding text box/button codepen.io/llamaswill/pen/rmqfB

.search-box {
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
background: #ebebeb;
-webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
}
.search-box + label .search-icon {
color: black;
}
.search-box:hover {
color: white;
background: #c8c8c8;
box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .search-icon {
color: white;
}
.search-box:focus {
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 300px;
border-radius: auto;
background: #ebebeb;
color: black;
-webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
}
.search-box:focus + label .search-icon {
color: black;
}
.search-box:not(:focus) {
text-indent: -5000px;
}
#search-submit {
position: relative;
left: -5000px;
}
.search-icon {
position: relative;
left: -33px;
top: 6px;
color: white;
cursor: pointer;
}
Planing HTML<form class="search-container" action="http://YOUR-BLOG.blogspot.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><img src="http://2.bp.blogspot.com/-tfXR_yZouDw/UBneiG7l8VI/AAAAAAAABHU/tRowBBJOBAg/s1600/search.png" alt="" class="search-icon" /></label>
<input type="submit" id="search-submit" />
</form>
Info ketiga gue sharing mengenai focus style by Hugo Giraudel codepen.io/HugoGiraudel/pen/FJuBb Pada sumber konten dibuatkan kotak login/register, tetapi di sini AA ganti dengan kotak berlangganan saja yah :D
#langgan {
border: 0.5em solid #99e5ff;
border-radius: .2em;
max-width: 400px;
margin: 1em auto;
padding: 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#langgan h1 {
font-size: 2em;
margin-top: 0;
text-align: center;
}
#langgan label {
display: block;
margin-bottom: .5em;
cursor: pointer;
}
#langgan input[type="text"] {
display: block;
width: 100%;
padding: .5em;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
-o-transition: .5s ease-out;
-ms-transition: .5s ease-out;
transition: .5s ease-out;
}
#langgan input[type="text"]:focus {
-moz-transform: scale(1.75);
-webkit-transform: scale(1.75);
-o-transform: scale(1.75);
-ms-transform: scale(1.75);
transform: scale(1.75);
outline: 100em solid rgba(0, 0, 0, 0.75);
}
#langgan button {
display: block;
border: none;
padding: 1em;
width: 100%;
font-weight: bold;
color: white;
background: deepskyblue;
text-transform: uppercase;
font-size: .8em;
}
#langgan button:hover {
background: #888;
}
#langgan p {
margin-bottom: 0;
}
<form id="langgan" action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ACCOUNT", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
    <h1>Langganan</h1>
    <p>
        <label for="login">Your Email</label>
        <input type="text" name="email" id="email" placeholder="Your.Email@email.com" autocomplete="off" required>
    </p>
     <p>
      <button type="submit">Subscribe</button>
<input name='uri' type='hidden' value='YOUR-ACCOUNT'/>
<input name='loc' type='hidden' value='id_ID'/>
    </p>       
</form>
Terakhir membuat tab murni pakai CSS CSS tab Pure CSS tabs by Pure CSS Tabs codepen.io/andornagy/pen/CFekj
.tabs input[type=radio] {
display:none;
}
.tabs {
width: 98%;
float: none;
list-style: none;
position: relative;
padding: 0;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 5px 10px;
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
background: #2c3e50;
cursor: pointer;
position: relative;
}
.tabs label:hover {
background: #3498db;
}
.tab-content {
z-index: 2;
display: none;
left: 0;
width: 100%;
font-size: 20px;
padding: 10px;
position: absolute;
box-sizing: border-box;
border-top: 5px solid #08C;
background-color:#ffffff;
}
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
<ul class="tabs">
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">tab 1</label>
        <div id="tab-content1" class="tab-content">
            Content tab 1
            <!-- Your content goes here -->
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">tab 2</label>
        <div id="tab-content2" class="tab-content">
            Content tab 2
            <!-- Your content goes here -->
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">tab 3</label>
        <div id="tab-content3" class="tab-content">
            Content tab 3
            <!-- Your content goes here -->   
        </div>
    </li>
</ul>
Bonus for inspiration...;)
  • codepen.io/gpyne/pen/gItif
  • codepen.io/xmark/pen/bEAys
  • codepen.io/cleric/pen/dIuFj
  • codepen.io/gumetis/pen/gzHDs
  • codepen.io/robooneus/pen/BLKIa
  • codepen.io/chuckneely/pen/ronfx
  • codepen.io/chriscoyier/pen/AdaKr
  • codepen.io/nickmoreton/pen/fstrx
  • codepen.io/samsurysites/pen/zukFj
  • codepen.io/commander-clifford/pen/vmDEh
See you :-h

0 Komentar WTF  X
Mau ora geuleum gue akan berbagi trik jQuery plugin. Salah satu tema post yang habisnya rada susah. Selalu saja ada yg baru dan menggemaskan 8-X Coba sobat kunjungi artikel lawas berikut end of page slide out box dan slide out serelek geleser! Kedua trick tersebut memiliki fungsi yg hampir mirip. Ketika melakukan scroll-down pada satu halaman, maka akan terbuka sebuah kotak dengan gaya serelek jebret ;)) Sekarang AA Koben akan berbagi hal serupa dengan hal itu, namun ada penambahan gaya yakni selain fitur close akan ditambahkan juga feature minimize pada kotak! Pokok'e begitu...

#sticky {
background: #f9f9f9;
border-radius: 3px;
width: 350px;
height: 200px;
position: fixed;
overflow: hidden;
border: none;
right: -350px;
z-index: 9999;
text-align: left !important;
box-shadow: 0 0 1px rgba(0,0,0,.5);
transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
}
.sticky-title {
background: #333;
color: #fff;
display: block;
height: 40px;
width: 100%;
font-size: 14px;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.sticky-title span a {
border-left: 1px solid #555;
float: right;
height: 40px;
width: 40px;
}
.sticky-title span a:hover {
background: rgba(0,0,0,.2);
}
.sticky-title span a img {
margin: 12px;
}
.sticky-container {
border: none;
float: left;
width: 100%;
height: auto;
margin: 3px;
}
.sticky-container > div {
border: none;
height: 40px;
margin: 3px;
padding: 3px;
}
.sticky-container > div > span {
font-size: 14px;
}
.sticky-container img {
float: left;
margin: 3px 5px;
width: 40px;
}
.show {
bottom: 35px;
}
.hide {
bottom: -160px;
}

Kalau mau di edit perhatikan nominal height and width (tinggi dan panjang), karena akan berpengaruh kepada hide/show content :D

<div class='show' id='sticky'>
<div class='sticky-title'>
<span style='float: left;margin: 12px 0 0 15px;'>
YOUR TITTLE!!!
</span>
<span>
<a href='javascript:void;' id='sticky-close' title='Tutup'>
<img alt='x' class='a' src='http://1.bp.blogspot.com/-Ao1pq3WWP80/UYkTi_lThZI/AAAAAAAAYYs/MAnvRxtxcoc/s1600/close.png' title='close'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-minimize' title='Minimize'>
<img alt='-' src='http://1.bp.blogspot.com/-GOrrILFH09c/UYkVuWmzk0I/AAAAAAAAYY8/v3FimwutPv0/s1600/minimize.png' title='minimize'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-maximize' title='Maximize'>
<img alt='+' src='http://1.bp.blogspot.com/-bJ8cWb-cIn0/UYkV99a2VwI/AAAAAAAAYZE/buv0P0KyM6I/s1600/maximize.png' title='maximize'/>
</a>
</span>
</div>
<div class='sticky-container'>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
<div>
---------- ADD CONTENT HERE ----------
</div>
</div>
</div>

<script type='text/javascript'>
$(window).scroll(function(){
  if ($(this).scrollTop() > 350) {
    $('#sticky').css({'right':'0px'});
  } else {
    $('#sticky').css({'right':'-350px'});
  }
});
$(document).ready(function(){
    var sticky = $('#sticky');
    var closed  = $('#sticky-close');
    var minimize = $('#sticky-minimize');
    var maximize = $('#sticky-maximize');
        maximize.hide();
            closed.click(function(){
              sticky.css({'right':'-350px'});
                          sticky.fadeOut('slow');
  })
        minimize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        maximize.show();
})
        maximize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        minimize.show();
})
});
</script>
350 : batas tinggi kemunculan ketika scroll.
DEMO

jsfiddle.net/bebenkoben/v3bhqq9r/show

Happy jQuery \m/

0 Komentar WTF  X
Terkadang kita sebagai pemakai kode yang sudah ada, selalu terpaku pada contoh yg sudah jadi! Seperti contoh pada tutorial trick effect hover pada kasus hover zoome make hover zoom effect use CSS. Kebanyakan dalam hal ini, para kreator CSS zoom selalu mencontohkan efek zoom dengan gambar, padahal kalau kita kreasikan kepada hal lain bisa jadi oke juga ;)
Tuh kan oke :P
AA Koben akan kembali sharing is caring tut lawas seputaran issue CSS 3D cube! Lumayan banyak juga para developer yg berkreasi dengan trik tersebut. Selain full stylish tentunya, terlihat elegan dan dinamis 8-> Berikut link sources keren punya:
    20 Stunning Examples Of CSS 3D Transforms
  • www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759
  • Creating a 3D Cube Image Gallery
  • css-tricks.com/creating-a-3d-cube-image-gallery
  • techglimpse.com/css-3d-photo-cube-image-gallery-demo
  • Simple 3D Photo Cube Image Gallery using CSS
Source terakhir itu yg akan AA kupas dengan edit coded comot sana-sini :">
DEMO

codepen.io/beben-koben/full/EyACg

Code

codepen.io/beben-koben/share/zip/EyACg

Sebagai bonus, source pilihan dari codepen siapa tauk jadi inspirasi bahan postingan :)
  • 3D Cube Rotating Menu
  • codepen.io/designcouch/pen/fFpCq
  • Coverflow Animation
  • codepen.io/mikefowler/pen/ujgqr
  • Slide Horizontal CSS-only Nav Menu
  • codepen.io/rickzanutta/pen/bBHAz
  • On link :focus preview url (CSS only)
  • codepen.io/jelmerdemaat/pen/aHuEw
  • Simpel javascript HTML Encoding
  • codepen.io/netsi1964/pen/joGre
  • Simple Cool popup
  • codepen.io/wifeo/pen/binaE
  • Share Button
  • codepen.io/onediv/pen/dkFco
Bye :-h

0 Komentar WTF  X
Tidak ada bahan post, mentok ide nih bro :-< Koben terpaksa melakukan repost! Post ulangan kali ini akan bercerita tentang syntax and conditional tag khusus dari web Emmet Kalau sobat perhatikan home page emmet, maka akan tampak konten Watch demo! Gue akan berikan itu untuk kalian. Sebelum menjadi emmet, yang saya ketahui dulu masih bernama jQuery zen.
Jadi singkat cerita, AA Beben Koben akan memberikan kepada kalian 2 editor sekaligus yaitu text editor emmet dan jQuery zen. Berikut screenshot ke-2 editor tersebut.emmet-jquery-zenMemang nggak bagus² amat sih, tetapi fungsinya itu loh =P~ Bagi yg berminat silahkan di download, free alias gratis :D
Via ziddu: downloads.ziddu.com/download/24015246/Emmet.zip.html
Via 4shared: www.4shared.com/zip/EuoJkg5xce/Emmet.html

Dont forget to read HTML editor live preview source by emmet & codemirror.

Source jQuery zen by: jsdo.it/eller86/fUtsW

Bye :-h
al-Quran

MISC

blank

BLANK

FACEBOOK PAGE