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
Apakah sobat masin ingat dengan master Maxime Euzière! Pembuat HTML editor dengan kode yang cukup sedikit, original tool di kenal dengan nama MiniCodeEditor xem.github.io/miniCodeEditor? Bisa jadi xem itu adalah nicknya :D Lama nggak jali-jali, gue tengok sudah ada 2 buah tool baru pada halaman projects / experiments sang master. EscApe and Charsets. EscApe is convert any unicode string in 33 different formats used on the Web. Charsets is a few experiments based on unicode and character encodings on the Web. Bermanfaat sekali pokoknya tools ini bro buat user yg sering bermain dengan format unicode. Selaraskan tulisan dengan format bahasa apa yg digunakan, maka tampilan tulisan akan muncul sesuai.

Buka halaman berikut xem.github.io/escape klik banner github pojok kanan atas, cari tombol Download ZIP. Sebagai alternatif dulu saya memakai ini juga rishida.net/tools/conversion (acak-acak kategori apps, tengok tools keren punya di sana)
Untuk bagian charsets harap hati-hati dalam membuka link, karena hasil generate akan memakan waktu loading browser sodara-sodara!!! Ketika saya men-download file charsets, ternyata ada satu link JavaScript (fromcodepoint.js) yg masih terhubung dengan hostingan rawgit.com. Jadi online nggak offline. Mungkin karena masih eksperimen dan dalam perkembangan, script tersebut belum di pisah (nggak tauk kalo lupa) ;))

Oleh karena itu AA Koben sebagai bloglang baik hati sejagat alam, sudah membungkuskan paket xem menjadi 1 bundel dan beroperasi secara offline tentunya :-" Tadi mau fork via github, pas buka tidak bisa mengoperasikan github :D :))
  • Download XEM Experiments.zip in 4shared.
  • www.4shared.com/zip/_GZ_mbBhce/XEM_Experiments.html
  • Download XEM-Experiments.zip in Ziddu.
  • downloads.ziddu.com/download/24076731/XEM-Experiments.zip.html
Demikian informasi singkat, kurang dan lebihnya tolong beri komentar :P

Happy blogging \m/

0 Komentar WTF  X
Melongok ke web dynamic drive CSS library ada yang unyu-unyu. Telah update beberapa trik di sana, yang mana di dominasi dengan kode CSS3. Dengan semakin maju browser engine gaya penulisan terhadap kode CSS juga tidak bisa dielakan mengalami perubahan yg cukup signifikan. Tentu hal ini berimbas pada kita sebagai user untuk lebih giat belajar agar tidak OON :))
Saya akan sosor, sharing kepada kalian artikel dengan judul pop up form labels! Kotak feedback dengan gaya label akan keluar popup ketika mengklik di area kotak. Begitu kira-kira ;))

.form div.dynamiclabel {
display: block;
margin: 40px 0;
font: 16px;
position: relative;
}
.form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea {
width: 100%;
padding: 10px;
border: 1px solid #c3c3c3;
border-radius: 5px;
}
.form div.dynamiclabel textarea {
height: 200px;
}
.form div.dynamiclabel label {
left: 0;
top: 10px;
color: white;
background: #aaa;
position: absolute;
padding: 3px 10px;
border-radius: 2px;
font-weight: bold;
border: 1px solid black;
opacity: 0;
z-index: -1;
box-shadow: 4px 1px 5px black;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form div.dynamiclabel > *:focus {
border: 1px solid #000;
box-shadow: 0 0 8px 2px #000;
}
.form div.dynamiclabel > *:focus + label {
opacity: 1;
z-index:100;
top: -35px;
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}

<form class="form">
<div class="dynamiclabel">
<input id="name" placeholder="Name..." type="text">
<label for="name">Name</label>
</div>
<div class="dynamiclabel">
<input id="email" placeholder="Email Address" type="text">
<label for="email">Email Address</label>
</div>
<div class="dynamiclabel">
<textarea id="feedback" placeholder="Feedback!!!"></textarea>
<label for="feedback">Add your feedback</label>
</div>
</form>

Demo (set focus on each form field):

Source and selected resource + Bonus...
    Pop up form labels
  • www.dynamicdrive.com/style/csslibrary/item/pop_up_form_labels
  • 3D Flip Menu
  • www.dynamicdrive.com/style/csslibrary/item/3d_flip_menu
  • Responsive Iconic Menu
  • www.dynamicdrive.com/style/csslibrary/item/responsive_iconic_menu
  • Grayscale Image Gallery
  • www.dynamicdrive.com/style/csslibrary/item/grayscale_image_gallery
  • Flat flipping menu buttons
  • www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons
  • CSS3 oval switch checkboxes
  • www.dynamicdrive.com/style/csslibrary/item/css3_oval_switch_checkboxes
  • 45+ Best Free Responsive Blogger Templates
  • thedesignpixel.com/best-free-responsive-blogger-templates.html
  • Animated drop-down menu using only CSS3
  • basicuse.net/articles/pl/textile/html_css/how_to_create_animated_drop_down_menu_using_only_css3
  • Dynamic backgrounds on forms
  • codepen.io/rlacorne/pen/wnLJH
Bye :-h

0 Komentar WTF  X
Saatnya acara bagi-bagi tool :D Sebenarnya tool berikut sudah pernah saya share beberapa diantaranya, simak bray get free apps color palettes page HTML. Artikel master Moncho Varela dengan judul get color on click codepen.io/nakome/pen/nBKiF is mendapatkan kode warna dari sebuah gambar. Kekurangan dari tool palette tersebut tidak mengikutsertakan load file image? Jadi hanya image yg sudah tertanam pada page .html saja kita bisa dapatkan warna :-??
Beben Koben sebagai bloglang super nekat mencoba menambahkan script how to store and retrieve image to localstorage dan ternyata berjalan mulus. Walau ada kekurangan sedikit, tidak fokus (ora ngerti script) :Dget color on clickTool yg kedua dengan judul post take poster of video by Moncho Varela codepen.io/nakome/pen/Kpkgm Berjalan baik pada google chrome! Mengambil satu image pada sebuah video, gue rasa image yg tercipta bagian depan video? Untuk tool ini, AA punya referensi yg lebih full stylish b-) Nanti pada akhir postingan akan gue bagi bersama link download file ke dua tool tersebut, plus bonus links resource keren punya :))take poster of videoGambar blur bukan kesalahan mata sodara-sodara, tapi gambar terlalu seksih :"> Aslinya mah bening atuh :P

Sikat bro...

  • Via Ziddu
  • downloads.ziddu.com/download/24059002/2-Tool.zip.html
  • Via 4shared
  • www.4shared.com/zip/DIYmbT9eba/2_Tool.html
Seperti pada awal saya menjanjikan link source keren dari web cool!
  • techslides.com/amazing-css-demos
  • techslides.com/demos/youtube-advanced-search.html
  • techslides.com/30-code-playgrounds-and-sharing-tools
  • techslides.com/demos/video/generate-animated-gif.html
  • techslides.com/make-animated-gifs-from-videos-with-html5
  • techslides.com/web-performance-resources-and-optimization-tools
Cuma pilihan saya saja, ubek-ubek semua artikel kelas master punya :-bd

Bonus...

codepen.io/hugo/pen/AzeDs - codepen.io/TaniaLD/pen/oKxep - codepen.io/zahinize/pen/DlFkm - codepen.io/intuitive/pen/vlcgf - codepen.io/bradenhamm/pen/Lliua - codepen.io/nakome/pen/ACirt - codepen.io/heydon/pen/buknq - codepen.io/jackrugile/pen/Gaqpo - codepen.io/Martin-Duran/pen/vsrhg - codepen.io/hugo/pen/yAtbx - codepen.io/ryanboylett/pen/AcLrw - codepen.io/timseverien/pen/mxFDo - codepen.io/mdcrtv/pen/pmyGg - codepen.io/lo-th/pen/rHLwi - codepen.io/Syst3mNZ/pen/uHchE - codepen.io/joshfry/pen/DeACs - codepen.io/terorama/pen/rtmyJ - codepen.io/oknoblich/pen/nugeB

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
al-Quran

MISC

blank

BLANK

FACEBOOK PAGE