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

UNTITLED

BLANK
28 Oktober 2014

0 Komentar WTF
Apakah sobat pernah memencet tombol yang bertuliskan complain? Ketika login dan masuk ke dashboard blog, silahkan lihat pojok kanan bawah! Maka akan muncul kotak Google Feedback dengan gaya popup Kesempatan kali sekarang, AA Koben mau berbagi cara membuat CSS3 HTML5 awesome popup contact or feedback form created by Md Ashraf Malik. Sebelum itu tengok dahulu source alakadar seputar feed-back:feedback

Bumbu CSS

.f-button {
height: 35px;
border: solid 3px #444;
background: #F9760B;
width: 100px;
line-height: 32px;
font-weight: 600;
color: white;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
text-align: center;
font-size: 17px;
position: fixed;
right: -40px;
top: 45%;
font-family: Arial, Helvetica, sans-serif;
z-index: 999;
}
.f-button:hover {
background: #EB5200;
}
#form-area {
height: 100%;
width: 100%;
position: fixed;
top: -100%;
left: 0;
background: rgba(0, 0, 0, 0.90);
opacity: .9;
}
#open:checked ~ #form-area {
top: 0;
}
#open:checked ~ #form-area .form-in {
margin-top: 150px;
transition: all .5s .4s;
}
input[type="radio"] {
display: none;
}
label {
cursor: pointer;
padding: 8px 0;
}
.form-in {
height: auto;
width: 20%;
padding: 2% 4%;
border-radius: 5px;
background: #FFF;
margin-left: 36%;
margin-top: -400px;
}
.in, .text {
width: 90%;
margin: 5px;
transition: all .4s .1s;
padding: 9px 7px;
outline: none;
border-radius: 4px;
border: solid 2px #999999;
}
.in:focus:invalid, .text:focus:invalid {
border-color: #930;
}
.in:focus:valid, .text:focus:valid {
border-color: #063;
}
.text {
height: 70px;
}
.sb {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
border: none;
background: #999;
color: white;
font-size: 16px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.sb:hover {
background: #555;
}
.close {
height: 25px;
width: 35px;
top: -35px;
color: #900;
position: relative;
text-align: center;
margin-left: 99%;
font-weight: bold;
font-size: 25px;
background: #fff;
border-radius: 4px 4px 0 0;
}

Planing HTML

<input type="radio" name="r" id="open" />
<input type="radio" name="r" id="close" />
<div class="f-button"><label for="open">Feedback</label></div>
 <div id="form-area">
  <div class="form-in">
   <div class="close"><label for="close">x</label></div>
 <form action="LINK-TARGET-ADD-HERE" method="get">
  <input type="text" required placeholder="Input Your Name" class="in" /><br />
  <input type="email" required placeholder="Input Your Email" class="in" /><br />
   <textarea placeholder="Your Comment" required class="text"></textarea><br />
  <input type="submit" value="Submit" class="sb" />
 </form>
  </div>
 </div>
Change it LINK-TARGET-ADD-HERE
Untuk beberapa kasus, taging form HTML pada variabel input harus disesuaikan id/class dengan source link target.
Source: developer.mozilla.org/en-US/demos/detail/css3-html5-awesome-popup-contact-or-feedback-form

0 Komentar WTF
Makin hari semakin susah saja mau membuat artikel. Selain bahan yang sudah jarang, ide mentok dan sejelubet faktor-x ikut melanda :D AA Koben akan share 2 buah tool untuk kalian. Tools sederhana, mungkin banyak yg lebih keren tetapi mau di kata apa lagi gue dapet yg ini! Mungkin di antara kalian sudah ada yg pernah mendengar tentang to do list? Kalau versi browser, gue sering mendapatkan kegunaan dari to-do-list yaitu, menuliskan apa-apa kemudian akan tersimpan secara cache pada browser engine (begitu kira-kira) ;))

By master Richard Feldman he's created dreamwriter github.com/rtfeldman/dreamwriter Demo dreamwriter.io Silahkan dipelajari dan coba-coba sendiri :D
Tools ke dua mengenai image editing program by master han.kuro jsdo.it/han.kuro/omkl Di buat dengan berpacu pada HTML5 sederhana tetapi usefully. Adapun editing gambar meliputi copy, paste, merubah tinggi & lebar, move x/y, rotation, mirror reversal, and filter (brightness, color tuning, mosaic & gradation)

Silahkan download...
  • Two Tool unduh di 4shared.
  • www.4shared.com/zip/QE8-eCVZce/Two_Tool.html
  • Download Two-Tool.zip from Ziddu.com
  • downloads.ziddu.com/download/24197305/Two-Tool.zip.html
Sebagai bonus++ selected links resource by me from you:

codepen.io/ogzhncrt/pen/yajlz - codepen.io/arnoldsandoval/pen/ulkgz - codepen.io/yoksel/pen/JnALF - codepen.io/jjmartucci/pen/sEFta - codepen.io/jvaill/pen/bauzD - codepen.io/andreas_pr/pen/GFBfd - codepen.io/hmdmweb/pen/GoEna - codepen.io/hmdmweb/pen/zfhrd - codepen.io/thirdtiu/pen/fjnxd - codepen.io/dgerritsen/pen/Esydu - codepen.io/happelation/pen/Frkhm - codepen.io/eMaj/pen/xJFny - codepen.io/sirnightowl/pen/vCqxG - codepen.io/ZonFire99/pen/njdls - codepen.io/torresandres/pen/EaxWXE - codepen.io/dudleystorey/pen/YPzqgZ - codepen.io/kieranfivestars/pen/gbOWbM - codepen.io/thirdtiu/pen/MYWwOZ - codepen.io/sooba/pen/EaxKOx - codepen.io/bennettfeely/pen/OPJyYY - codepen.io/chrisota/pen/ByaZME - codepen.io/jaydropout/pen/pvowNX - codepen.io/joe-watkins/pen/qEBjPm - codepen.io/alistairtweedie/pen/GgROmd - codepen.io/lonekorean/pen/EaxGXo - codepen.io/SamMarkiewicz/pen/pvoKNL - codepen.io/andytran/pen/PwoQgO - codepen.io/nicholas-kebbas/pen/GgRxvd

cssdeck.com/labs/css3-color-fill - cssdeck.com/labs/galaxy-s3 -

designdazzling.com/css-shapes-web-designs - www.siteforinfotech.com/2014/11/fade-effect-image-slideshow-using-css.html - designdazzling.com/productive-css-tips-web-developers-designers - creativecrunk.com/responsive-css3-forms - alistapart.com/article/responsive-images-in-practice - developer.mozilla.org/en-US/demos/detail/html5-css3-hover-slide-out-tutorial-with-demo - developer.mozilla.org/en-US/demos/detail/jtop-desktop-interface - developer.mozilla.org/en-US/demos/detail/a-trick-to-make-header-or-nav-fix-on-scrolling-usi/launch - wpthemess.net/15-free-responsive-blogger-templates-for-2014

Jangan tidak didatangi links tersebut yaaa ;)

2 Komentar WTF
Tidak dapat bahan postingan aneh, jika begini keadaan maka harus melakukan update post dengan topic yang sudah pernah di buat :D Sobat masih ingat dengan hello bar widget for blogger? In arsip and you can get here make sticky bar in blogger like as hello bar. Masih sedikit membawa embel-embel JavaScript pada markup HTML. Sekarang 100% akan Koben sharing bagaimana cara membuat CSS3 notifications ala hello bar created by master Acidmartin.
Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar

Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut

<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
    <input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
        <label for="aspal-hellobar-switcher">
            <span>&#8679;</span>
            <span>&#8681;</span>
        </label>
<div>
 <div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div>
Save.
Satu updetan beres, lanjut bro...

Ooops ada kelupaan, jika sobat memasang kode CSS dari web sumber, tengok pada bagian kode
.aspal-hellobar.aspal-hellobar-e34c26 > div,.aspal-hellobar.aspal-hellobar-e34c26 label span {
background: #e34c26;
}
Itu merupakan jenis gaya yg ada, terdapat 5 gaya varian warna, sobat pilih salah satu, dan rubah juga code pada markup HTML<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.

Kotak pencarian atau search box merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB

.search {
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}
<form action="http://YOUR-ADDRESS-BLOG.blogspot.com/search" class="search">
    <div class="field">
      <input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
      <label for="input-search">Search here...</label>
    </div> 
</form>
Change YOUR-ADDRESS-BLOG with your address blog.

Update terakhir yg ketiga tentang markdown Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable

Happy update \m/

0 Komentar WTF
Apa yang mau di posting? Mari kita bermain-main dengan CSS3 gradient Jenis CSS gradients bisa di bagi menjadi dua: Linear Gradient (turun/naik/kiri/kanan/diagonal) dan Gradient radial (pusat/center) AA Koben akan berbagi bagaimana cara membuat effect reflection menggunakan CSS linear-gradient Efek seperti memantulkan bayangan dengan permainan warna latar belakang and linear gradients property.

Demo & resource: cssdeck.com/labs/full/iesvlset

Gue modif kode yg sudah ada dengan menyisipkan variasi gambar!

.icon-r {
top: 0;
color: #fff;
width: 65px;
height: 65px;
line-height: 65px;
font-size: 40px;
cursor: pointer;
border-radius: 5%;
text-align: center;
position: relative;
display: inline-block;
-webkit-transition: top 250ms;
-moz-transition: top 250ms;
-o-transition: top 250ms;
transition: top 250ms;
background: -moz-linear-gradient(#000,#555);
background: -o-linear-gradient(#000,#555);
background: linear-gradient(#000,#555);
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#000),color-stop(100%,#555));
background: -webkit-linear-gradient(#000,#555);
}
.icon-r span {
opacity:.8;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
-o-transition: opacity 250ms;
transition: opacity 250ms;
}
.icon-r span img {
margin: 0;
padding: 0;
border-radius: 5%;
vertical-align: middle;
}
.icon-r:hover {
top: -5px;
}
.icon-r:hover span {
opacity: 1;
}
.icon-r:hover:after {
bottom: -62px;
}
.icon-r:after {
content:'';
left: 0;
width: 65px;
height: 50px;
bottom: -50px;
position: absolute;
border-radius: 5%;
opacity: .5;
-webkit-transition: bottom 250ms;
-moz-transition: bottom 250ms;
-o-transition: bottom 250ms;
transition: bottom 250ms;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#fff),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(#fff,rgba(255,255,255,0));
background: -moz-linear-gradient(#fff,rgba(255,255,255,0));
background: -o-linear-gradient(#fff,rgba(255,255,255,0));
background: linear-gradient(#fff,rgba(255,255,255,0));
}

<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-dJzGsy51O_E/UQBGTp-p8vI/AAAAAAAAA64/AqqyU4NdKvE/s1600/twitter.png" alt="Tweet" /></span>
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-z4lRtTukgo0/UQBGMkSRRKI/AAAAAAAAA6s/Q_DmGd2ehv0/s1600/facebook.jpg" alt="FB" /></span>  
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-MkHfO5ZdM7o/UQBGZDHwsUI/AAAAAAAAA7E/JpTVTAi9PTg/s1600/facebook.jpg" alt="YouTube" /></span>
</div>
Warna reflection cocok untuk area dengan warna latar gelap. Kalau untuk area dengan warna terang, sobat tinggal ganti saja kode background pada icon-r:after
Bye :-h
al-Quran

MISC

BLANK

FACEBOOK PAGE