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

21 Februari 2015

UNTITLED

21 Februari 2015

2 Komentar WTF
Aa Koben menemukan 1 halaman menarik kumpulan code di www.filamentgroup.com/code. Selain itu juga link dengan tag lab (Articles in title) keren-keren, don't miss that dibaca :P Saya akan mengambil satu tutorial dari sana dengan judul X-rayHTML (Generate HTML snippets from live code for documentation) Source & demo github.com/filamentgroup/X-rayHTML
Penjelasan singkat versi GUE begini bro...
X-rayHTML adalah script jQuery plugin untuk membangun halaman kode dokumentasi kecil dari potongan HTML. Membuat dokumen dengan live code live preview dengan gaya (CSS) FLIP Animation. Tampak depan akan terlihat demo dari potongon kode HTML, dan tampak belakang adalah source code (kodenya) Gue harap elo pada mengerti dah ;;)

In your page:<script src="jquery.js"></script>
<script src="X-rayHTML.min.js"></script>

/*
* View Source
* Generates copy/pastable markup from actual rendered markup.
*
* Copyright (c) 2012 Filament Group, Inc.
* Licensed under the MIT, GPL licenses.
*/
!function(e){var t="xrayhtml",n={text:{open:"View Source",close:"View Demo"},classes:{button:"btn btn-small",open:"view-source",sourcepanel:"source-panel"},initSelector:"[data-"+t+"]",defaultReveal:"inline"},a={_create:function(){return e(this).each(function(){var n=e(this).data("init."+t);return n?!1:void e(this).data("init."+t,!0)[t]("_init").trigger("create."+t)})},_init:function(){var a=e(this).data(t)||n.defaultReveal;"flip"===a&&e(this)[t]("_createButton"),e(this).addClass(t+" method-"+a)[t]("_createSource")},_createButton:function(){var t=document.createElement("a"),a=document.createTextNode(n.text.open),i=e(this);t.setAttribute("class",n.classes.button),t.href="#",t.appendChild(a),e(t).bind("click",function(e){var a=i.attr("class").indexOf(n.classes.open)>-1;i[a?"removeClass":"addClass"](n.classes.open),t.innerHTML=a?n.text.open:n.text.close,e.preventDefault()}).insertBefore(i)},_createSource:function(){var t=this,a=document.createElement("pre"),i=document.createElement("code"),c=document.createElement("div"),r=document.createElement("div"),s=t.innerHTML,o=document.createTextNode(s);c.setAttribute("class","snippet"),e(t).wrapInner(c),i.appendChild(o),a.appendChild(i),r.setAttribute("class",n.classes.sourcepanel),r.appendChild(a),this.appendChild(r)}};e.fn[t]=function(n,a,i,c){return this.each(function(){return n&&"string"==typeof n?e.fn[t].prototype[n].call(this,a,i,c):e(this).data(t+"data")?e(this):(e(this).data(t+"active",!0),void e.fn[t].prototype._create.call(this))})},e.extend(e.fn[t].prototype,a),e(function(){e(n.initSelector)[t]()})}(jQuery);
andX-rayHTML.css
.xrayhtml {
position: relative !important;
margin: 10px 0;
}
.source {
position: relative;
}
.source-panel {
tab-size: 3;
}
.source-panel pre {
margin: 0;
background: #fefefe;
}
.source-panel code {
white-space: pre-wrap;
}

/* Flip Animation */

.method-flip {
-webkit-perspective: 2500px;
-moz-perspective: 2500px;
perspective: 2500px;
}
.method-flip .snippet {
padding: 0;
margin: 0;
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.method-flip .source-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
overflow: auto;
}
.method-flip .snippet {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .4s ease-in-out;
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-moz-transition: -moz-transform .4s ease-in-out;
}
.method-flip.view-source .snippet {
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.method-flip .source-panel {
-webkit-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-moz-transition: all .4s ease-in-out;
}
.method-flip.view-source .source-panel {
z-index: 2;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}

/* Button */

.btn {
background-color: #fefefe;
background-image: -webkit-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: -moz-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
border: 1px solid #ccc;
border-radius: .4em;
color: #308bd3;
cursor: pointer;
display: block;
font: bold 14px/1 sans-serif;
padding: .6em 0 .5em 0;
position: relative;
text-align: center;
text-transform: capitalize;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-small {
display: block;
font-size: .8em;
padding: 9px 0;
margin: .6em 0;
width: 125px;
}
Pasangkan kedua bumbu tersebut ke dalam template.
Planning HTML<div data-xrayhtml="flip">

------------ Kode Potongan HTML ------------

</div>

NB:
Pada script X-rayHTML.min.js perhatikan baris kode berikut
classes: {
 button: "btn btn-small",
 open: "view-source",
 sourcepanel: "source-panel"
},
Fokus ke btn btn-small Setahu saya unik id tersebut sama dengan kode CSS bootstrap, atau bisa jadi sama dengan kode button kepunyaan sobat? Jadi jika dirasakan sama dengan hal itu, gantikan saja agar tidak bentrok ;)
Kalau mau lebih full stylish sobat bisa datangi web source dimana X-rayHTML dikombinasikan dengan script Prism.js and ZeroClipboard!

Happy X-Ray \m/

0 Komentar WTF
Artikel ringan AA Koben mau berbagi resources pilihan dari Coder's Block Blog. Mau membaca dari awal, bisa langsung di satroni codersblock.com/blog Berawal dari postingan dengan judul crazy meta CSS hack, trik untuk menampilkan kode dalam (view source) hanya menggunakan kode CSS. Saya melihat code display ditampilkan dengan begitu elegan ;)) Gue comot dah itu :))Crazy-Meta-CSS-HackDengan penanaman variabel CSS after and before, sehingga menimbulkan kata di pojok sisi kiri atas dan kanan bawah. Gue sudah buatkan 3 tampilan sama untuk CSS, HTML n JavaScript.
.css, .html, .script {
color: #fff;
margin: 10px;
padding: 10px;
display: block;
border: 2px dashed #bbb;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 17px;
font-family: "Courier New",Courier,monospace;
background-color: #40484f;
white-space: pre-wrap;
}
.css::before,.html::before,.script::before,.css::after,.html::after,.script::after {
display: block;
color: #bbb;
font: 25px/1.2 'Inconsolata', monospace;
}
.css::before,.html::before,.script::before {
margin-left: 10px;
}
.css::after,.html::after,.script::after {
margin-right: 10px;
text-align: right;
}
.css::before { content: '<CSS>'; }
.css::after { content: '</CSS>'; }
.html::before { content: '<HTML>'; }
.html::after { content: '</HTML>'; }
.script::before { content: '<Script>'; }
.script::after { content: '</Script>'; }
Markup HTML<div class="css">

-------- YOUR PHRASE CODED HERE --------

</div>

<div class="html">

-------- YOUR PHRASE CODED HERE --------

</div>

<div class="script">

-------- YOUR PHRASE CODED HERE --------

</div>
Lanjut bro...
Berikut beberapa kreasi pilihan lain agar tampilan kode di area postingan terlihat menarik
  1. Make Code Preview on Post Area pre & code.
  2. Make Code View on Blog Post using lang Attribute.
  3. Make Box For Display Post Code Browser Theme.
  4. Writing a Professional Code in Blog Post Area
  5. .

Sebenarnya sudah pernah saya berkunjung, tetapi via codepennya! Berikut trik dari master Will tentang spoiler with waiting time. Satu lagi trik yg banyak orang membahas yaitu tentang accordion Trik akordion kali ini agak berbeda, karena syntax HTML menggunakan element <hr> (Accordion Effect with Horizontal Rules)

.hr {
height: auto;
margin: 0;
padding: 10px;
border: none;
border-bottom: solid 1px rgba(0, 0, 0, .2);
counter-increment: part;
transition: border-bottom-color .2s ease-out;
}
.hr::first {
border-top: solid 1px rgba(0, 0, 0, .2);
}
.hr::before {
content: 'Accord ' counter(part, lower-roman);
display: block;
color: #333;
font-size: 1.1em;
font-variant: small-caps;
letter-spacing: .05em;
}
.hr:hover, hr:focus {
border-bottom-color: rgba(0, 0, 0, .7);
outline: none;
}
.hr:not(:focus) {
cursor: pointer;
}
.hr ~ p {
text-align: justify;
overflow: hidden;
transition: transform .5s ease-out, opacity 1s ease-out;
}
.hr:focus ~ p {
height: auto;
margin: 0;
padding: 5px 10px;
background-color: #f7f7f7;
opacity: 1;
transform: translateY(0);
}
.hr ~ p, .hr:focus ~ .hr ~ p {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
transform: translateY(-15px);
}
Planning HTML<hr tabindex="1" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="2" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="3" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="4" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
DEMO

------- BLAH BLEH BLOH HERE -------


------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------


------- BLAH BLEH BLOH HERE -------


------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------

Source: codepen.io/lonekorean/pen/GneCq - codepen.io/lonekorean/pen/kocrl - codepen.io/lonekorean/pen/brdCk
Ada template keren-keren nih, 45 Best Free Blogger Templates 2015 webdesignlike.com/2015/best-free-blogger-templates
Jangan lupa kunjungi dan acak-acak baca codersblock!

Bye :-h

0 Komentar WTF
Benar-benar susah BRO mendapatkan ide postingan belakangan ini #:-S Tahu sendiri, briliant, menarik, berbeda dari yg lain tentunya full stylish merupakan faktor gue dalam menulis artikel. Karena sulit ide, jadi postingan sekarang akan membahas salah satu property CSS3 yaitu transforms! Lebih spesifik CSS3 transformation matrix yg suka di buat untuk menimbulkan efek 2D atau 3D. Penjelasan secara terperinci silahkan sobat-sabit baca pada web direktori. Karena kalau dijelaskan sama saya pasti jadi bingung ;))
Untuk mengurangi kebingungan mari kita tengok contoh sederhana berikut ini:

Lihat efek miring-miring tersebut? Jika mau contoh extreme please look at here CSS transforms by Keith Clark Dulu gue sudah pernah mosting basic dari CSS transform, bacalah dah download apps CSS3 transforms playground basic. Supaya lebih gereget mempelajari si transform matrix ini, AA Koben sudah buatkan tools lanjutan buat anda sekalian.

>> The CSS3 Matrix Construction Set unduh via 4shared
www.4shared.com/zip/nDKMvZjLce/The_CSS3_Matrix_Construction_S.html
>> Download The CSS3 Matrix Construction-Set.zip in Ziddu
downloads.ziddu.com/download/24375695/The-CSS3-Matrix-Construction-Set.zip.html

All file under licensed, please read be careful!!!
Resources:
  • Computing CSS matrix3d transforms
  • franklinta.com/2014/09/08/computing-css-matrix3d-transforms
  • Calculating element vertex data from CSS transforms
  • keithclark.co.uk/articles/calculating-element-vertex-data-from-css-transforms
  • The Matrix Resolutions
  • meyerweb.com/eric/tools/matrix
  • CSS3 Transform to Matrix Filter converter
  • www.useragentman.com/IETransformsTranslator
  • Matrix3d transform CSS3 Generator
  • ds-overdesign.com/transform/matrix3d.html
  • CSS 2D Transform Matrix Generator
  • codepen.io/Tinricon/details/ptAho
  • The CSS3 matrix Transform for the Mathematically Challenged
  • www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged
  • Matrix Themed Keypad
  • codepen.io/FlyingEmu/pen/AxpdK
Pass ZIP CSS3 Transforms-Matrix

Bye :-h

3 Komentar WTF
GitHub adalah salah satu tempat terbaik untuk berbagi kode dengan teman-teman, rekan kerja, dan orang lain. Sudah ada lebih dari delapan juta orang menggunakan GitHub untuk membangun hal-hal yang menakjubkan bersama-sama. Dengan adanya fitur kolaboratif GitHub.com, aplikasi desktop, dan GitHub Enterprise, menjadikan pekerjaan menjadi lebih mudah secara individu atau tim untuk menulis kode yang lebih baik, lebih cepat.
Awalnya didirikan oleh Tom Preston-Werner, Chris Wanstrath, dan PJ Hyett untuk menyederhanakan kode berbagi, GitHub telah tumbuh menjadi code host terbesar di dunia! AA Koben akan berbagi beberapa info untuk kalian para member github? Walau tidak banyak, mungkin bisa mewakili ;))

Informasi pertama datang dari web TechSlides berbicara tentang Create Repositories with GitHub API and HTML5 techslides.com/create-repositories-with-github-api-and-html5 Cara cepat mengkonversi folder pada hard drive anda ke GitHub Repository? Bentuk HTML5 ini akan mengotentikasi, membuat repo, dan meng-upload folder ke repositori dengan JavaScript dan Github API. You can try here techslides.com/demos/github
Master Joel Sutherland berkreasi dengan membuat GitHub jQuery Repo Widget Dengan integrasi jQuery script dan jquery.githubRepoWidget.js sobat dapat good looking repo widget to add to your website.
Ex:

Contoh HTML-Editor itu saya buat dengan teknik Create Repositories with GitHub API and HTML! Mau yang lebih full stylish juga ada...

You can try it github cards Sebenarnya masih banyak aplikasi-aplikasi pendukung hasil karya pada pengembang untuk web github ini. Mungkin segini saja dulu, nanti kalau ketemu yg lain lagi saya update :D Github Pulse, github globe, Gisto Bagi sobat yang punya referensi lain...?

Happy GIthub \m/

al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE