Tutorial Blog for Stylish Blogger

Prefixfree Script so Amazing Banget

Wed, 16 May 2012 06:52:06 -0700

Sebenarnya Koben sudah lama membaca mengenai Prefix free, tetapi belum paham untuk apa itu teh :"> Setelah merenung karena tidak ada tujuan walking-walking in the pret, ternyata script prefixfree full stylish coy! Karya master @leaverou and membuat prefixfree.js ketika travelling ke Oslo ;))
Master mah lagi jalan² juga tetep saja bisa berkreasi, kita yang duduk terus kagak bisa-bisa belajar script :)) Baca postingan mengenai prefixfree on Smashing Magazines.
Sekarang timbul teka-teki, buat apaan c script -prefix-free itu?
Sebelum masuk ke sesi penjelasan, Koben pernah sentil², sebuah tools yang bernama cssFx.js? Tools yg memiliki fungsi menambahkan (prefixes) kode-kode teranyar dari variabel CSS3.

Misalkan kita akan membuat variabel box-shadow: 0px 0px 15px #000000; Secara otomatis dalam penulisannya kita harus mengikutsertakan kode serupa dengan dukungan ke browse lain.

Basics	Mozilla	Chrome + Friends
box-shadow: 0px 0px 15px #000000;	-moz-box-shadow:0px 0px 15px #000000;	-webkit-box-shadow:0px 0px 15px #000000;

Tools yg sangat berguna bagi nusa & bangsa :p Kembali ke urusan PrefixFree: Break free from CSS prefix hell! Ini versi scriptnya sob! Jadi kita tidak usah capai-capek menuliskan kode² dukungan untuk browse lainnya. Tinggal menuliskan kode intinya saja. Sisa kerja biarkan script prefixfree akan mengoperasikan secara otomatis, sesuai browse apa yg kalian pakai dalam melihat sebuah konten :-/
Mudeung apa ora ;)) Sikattt scriptnya prefixfree.js (only 2kb)
Biarpun telat mengertinya, yg penting jadi mengerti :) Mau bukti betapa ampuhnya script ini :-?

Buka salah satu demo keren berikut CSS3 image slider with stylized thumbnails. Lihat kotak bagian CSS, disana hanya menuliskan variable CSS3 transition: all 0.5s;, box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); and transform: scale(1.1);
Tidak membawa embel² awalan -moz-, -webkit-, -o- or -ms-
Happy prefix \m/

If you found this page useful, and you want to use short URL. Simply copy and paste the code below into your web site (Ctrl+C to Copy)

Tips & Trick By Selected Resource

Tue, 15 May 2012 12:57:44 -0700

Koben mah tidak akan banyak menerangkan seperti biasanya. Walau bahasa berbeda, selagi ada DEMO, masih bisa gue ikutin :))
Secara keseluruhan halaman masih sedikit, tetapi konten yang ada patut dibaca semua. Babad deh oleh kalian guna meningkatkan skill to app :p
Mau bahas sedikit kok perasaan sudah ada juga ;)) Makin banyak resource...makin bingung :))
Hajar brooo...

Oh iyah, kalau Koben kasih link artikel pilihan, sobat tetep rarad abis postingan yang ada. Okay!
http://css3c.com/
http://eminkura.com/
http://www.megaptery.com/2011/08/une-television-avec-du-pure-css3.html
http://www.blogduwebdesign.com/css3-ressource/css3-9-morceaux-de-code-prets-a-l-emploi/616
http://beta.rdsign.net/

Click on Image, Menghilang!

http://developerdrive.com/demo/demo/CSS_Rotate/css3_rotate.html
Bonus:
http://www.w3schools.com/cssref/pr_gen_content.asp
http://benjamind.github.com/yui3-gallery/colorpicker/examples/html5.html
http://alligator.github.com/lake.js/
http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/
Demikian seleksi resource saat ini, met jumpa lagi :-h
Happy resource \m/

If you found this page useful, and you want to use short URL. Simply copy and paste the code below into your web site (Ctrl+C to Copy)

Happy Coding Coy!!!

Mon, 14 May 2012 12:35:47 -0700

Tidak akan banyak bicara nih sob, habisnya tidak ada ide buat memosting. Trick CSS3, jQuery, HTML5, IQ Games, dan News menjadi kategori yang harus dibabat oleh kalian. Disana ada tutorial unik-unik bin full stylish. Fancy hovers effectnya sob :-bd belum lagi fancy image gallery with CSS3 Transitionnya ^:)^

Linking Style Font

Sekilas memang simple dan sederhana, pemakaian atribut letter-spacing diberi nilai -3 memberi kesan tersendiri, huruf merapat seperti menyatu. Dipadukan dengan sentuhan border, sehingga makin cuamik.

Cabak Nyenyen

Please welcome my friends

Bonus:
http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/
http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/inset_social_media_buttons.html
http://demos.sixrevisions.com/0002_css3_social_media_buttons/demos/outset_social_media_buttons.html
http://demos.sixrevisions.com/0002_css3_social_media_buttons/downloads/css3_social_media_buttons.zip
http://blog.crazyegg.com/2012/05/08/loading-spinners-css3-animation/
http://blog.crazyegg.com/demos/css_hover_transition_effects/
http://webstandard.kulando.de/static/css3-toggler-image-gallery
http://insicdesigns.com/demo/css3/exp2/index.html
http://line25.com/articles/handy-roundup-of-css3-generators-and-tools
happy coding \m/

If you found this page useful, and you want to use short URL. Simply copy and paste the code below into your web site (Ctrl+C to Copy)

Use Fixie.js for Dummies Content, so Good

Mon, 14 May 2012 04:06:24 -0700

. Para developer biasa menggunakannya untuk mengisi demo-demo (dummies content). Misalkan isi paragrap selalu terisi dengan text bergaya

. Pokoknya isi dari sebuah demo diisi dengan konten yang dianggap nyeleneh gitoh :d

Singkatan² dan istilah² tidak jarang kita selalu menemuinya juga, ex WTF, blah-bleh-bloh, etc.

Ada berapa macam coba variabel standar HTML? Banyak pasti, namun ada beberapa yg pokok. Contoh: , , -

, dll.

Pertanyaannya begini sekarang...

Bagaimana penulisan syntax standard HTML dapat berubah menjadi isi untuk dummies konten (baca dan pelajari) :) Misalkan kita mengetikan syntax h1 begini

tanpa isi apapun disana, nanti akan muncul dengan sendirinya isi title disana. Istimewanya lagi, itu akan secara random bergantian seiring kita melakukan refresh b-) Buka halaman demo biar jelas, dan lakukan pencet tombol keyboard (F5), perhatikan isi konten!

. Karena unik dan full stylish, kalian bisa lihat demonya pada blog keren aku

. Coba di Ctrl + U, apakah saya mengetikan kata-kata, membuat image dengan manual! Hohohoho...tentu capek :p

Koben sudah melakukan perubahan sedikit pada script fixie.js. Pemanggilan syntax gue pilih dari web http://lorempixum.com/

Fixie.js

<script type='text/javascript'>
/* 
* Fixie.js
* by Ryhan Hassan
* ryhanh@me.com
*
* http://ryhan.me/fixie/
*/ 
//<![CDATA[
var fixie = (
function () {var selector;
var imagePlaceHolder = "http://placehold.it/${w}x${h}";
if (typeof window.getElementsByClassName != 'function') {
document.getElementsByClassName = function (cl) {
var retnode = [];
var myclass = new RegExp('\\b' + cl + '\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
}
function fixie_handler(element) {
if (!/^\s*$/.test(element.innerHTML)){
var childs = element.children;
if(childs.length){
for(var fixie_i = 0; fixie_i < childs.length; fixie_i++){
fixie_handler(childs[fixie_i]);
}
}
return;
}
switch (element.nodeName.toLowerCase()) {
case 'b':
case 'em':
case 'strong':
case 'button':
case 'th':
case 'td':
case 'title':
case 'tr':
element.innerHTML = fixie_fetchWord();
break;
case 'header':
case 'cite':
case 'caption':
case 'mark':
case 'q':
case 's':
case 'u':
case 'small':
case 'span':
case 'code':
case 'pre':
case 'li':
case 'dt':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
element.innerHTML = fixie_fetchPhrase();
break;
case 'footer':
case 'aside':
case 'summary':
case 'blockquote':
case 'p':
element.innerHTML = fixie_fetchParagraph();
break;
case 'article':
case 'section':
element.innerHTML = fixie_fetchParagraphs()
break;
/* Special cases */
case 'a':
element.href = "HTTP://YOUR-LINK-HERE/";
element.innerHTML = "www." + fixie_fetchWord() + fixie_capitalize(fixie_fetchWord()) + ".com";
break;
case 'img':
var src = element.getAttribute('src') || element.src;
var temp = element.getAttribute('fixie-temp-img');
if(src == "" || src == null || temp == true || temp == "true"){
var width = element.getAttribute('width') || element.width || (element.width = 250);
var height = element.getAttribute('height') || element.height || (element.height = 150);
element.src = imagePlaceHolder.replace('${w}', width).replace('${h}', height);
element.setAttribute('fixie-temp-img', true);
}
break;
case 'ol':
case 'ul':
element.innerHTML = fixie_fetchList();
break;
default:
element.innerHTML = fixie_fetchSentence();
}
}
// Handle an array of elements
function fixie_handle_elements(elements){
for (var i = 0; i < elements.length; i++) {
fixie_handler(elements[i]);
}
}
// Begin generator
var fixie_wordlibrary = ["I", "8-bit", "ethical", "reprehenderit", "delectus", "non", "latte", "fixie", "mollit", "authentic", "1982", "moon", "helvetica", "dreamcatcher", "esse", "vinyl", "nulla", "Carles", "bushwick", "bronson", "clothesline", "fin", "frado", "jug", "kale", "organic", "local", "fresh", "tassel", "liberal", "art", "the", "of", "bennie", "chowder", "daisy", "gluten", "hog", "capitalism", "is", "vegan", "ut", "farm-to-table", "etsy", "incididunt", "sunt", "twee", "yr", "before", "gentrify", "whatever", "wes", "Anderson", "chillwave", "dubstep", "sriracha", "voluptate", "pour-over", "esse", "trust-fund", "Pinterest", "Instagram", "DSLR", "vintage", "dumpster", "totally", "selvage", "gluten-free", "brooklyn", "placeat", "delectus", "sint", "magna", "brony", "pony", "party", "beer", "shot", "narwhal", "salvia", "letterpress", "art", "party", "street-art", "seitan", "anime", "wayfarers", "non-ethical", "viral", "iphone", "anim", "polaroid", "gastropub", "city", 'classy', 'original', 'brew']
function fixie_capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function fixie_fetchWord() {
return fixie_wordlibrary[constrain(0, fixie_wordlibrary.length - 1 )];
}
function constrain(min, max){
return Math.round(Math.random() * (max - min) + min)
}
function fixie_fetch(min, max, func){
var fixie_length = constrain(min, max) ;
var result = [];
for (var fixie_i = 0; fixie_i < fixie_length ; fixie_i++) {
result.push(func());
}
return fixie_capitalize(result.join(' '));
}
function fixie_fetchPhrase() {
return fixie_fetch(3, 5, fixie_fetchWord);
}
function fixie_fetchSentence() {
return fixie_fetch(4, 9, fixie_fetchWord) + '.';
}
function fixie_fetchParagraph() {
return fixie_fetch(3, 7, fixie_fetchSentence);
}
function fixie_fetchParagraphs() {
var fixie_length = constrain(3, 7);
var fixie_str = "";
for (var fixie_i = 0; fixie_i < fixie_length - 1; fixie_i++) {
fixie_str += "<p>" + fixie_fetchParagraph() + "</p>";
}
return fixie_str;
}
function fixie_fetchList() {
var i, n = Math.random() * 4 + 4, list = [];
for(i = 0; i < n; i++) {
list.push(fixie_fetchPhrase());
}
return '<li>' + list.join('</li><li>') + '</li>';
}
// Handle all elements with class 'fixie'
fixie_handle_elements(document.getElementsByClassName('fixie'));
// Handle elements which match give css selectors
function init_str(selector_str) {
if (!document.querySelectorAll) {
return false;
}
try {
fixie_handle_elements(document.querySelectorAll(selector_str));
return true;
} 
catch (err) {
return false;
}
}
return {
/* returns true if successful, false otherwise */
'init': function() {
if (selector) {
init_str(selector);
} else {
fixie_handle_elements(document.getElementsByClassName('fixie'));
}
},
'setImagePlaceholder': function(pl) {
imagePlaceHolder = pl;
return this;
},
'setSelector': function(sl){
if (typeof sl === "object") {
selector = sl.join(",");
} else if (sl){
selector = sl;
} 
return this;
}
};
})();
// Changes default image source to Flickr
fixie.setImagePlaceholder('http://lorempixum.com/${w}/${h}/').init();
//]]>
</script>

Simpan script tepat diatas tag </body>
Hal yang perlu dilakukan:

Selalu pakek atribut class="fixie" dalam pemakaian.
HTTP://YOUR-LINK-HERE/
Gantikan dengan link tujuan. Setiap melakukan penulisan syntax <a class="fixie"></a> akan muncul secara random nama-nama web aneh, tapi tujuan link sama, yaitu ke blog kita ;))

Begitulah sodara-sodara. Good luck :)
Happy fixie \m/

Add Button Pinterest, Automatic for Image Blogger

Fri, 11 May 2012 13:25:48 -0700

Sebenarnya lagi empet mosting. Mati lampu, bahan buat memosting hilang semua belum tersimpan :( Sial banget bin sue apes! Ternyata tidak enak juga kalau cuma jadi penerima itu ;) Tidak tahu alasan apa Beben Koben si bloglang anu ganteng kalem tea ingin berbagi trick snippet jQuery, cara bagaimana memasang tombol pinterest otomatis untuk gambar. Kalau kebanyakan membahas adding pinterest pin it button, Koben mah pasang tombol pin-it automatic for image! Setelah melakukan blog walking in the pret, paling sederhana gue nemuin pinterest buttons on every image in a Blogger/Blogspot post using jquery (may be)
Bila kepengen memakai yg itu, sobat-sabit tinggal melakukan perubahan (menyesuaikan) UNIQ-ID '.entry-content img' dengan unik ID bagian postingan blog kalian. Biasanya sih .post, .post-body,...etc.

Sederhana memang, namun kekurangan trik ini adanya keikutsertaan pemanggilan //assets.pinterest.com/js/pinit.js dan tata letak tombol yg keberadaannya kurang sreg (harus diatur sendiri/manual, kalo ngerti itu jg) ;)) Terlebih-lebih hasil akhir yang merubah tombol menjadi sebuah iframe mode :p Karena JavaScript itu tadi tuh kayaknya ;)) Melongo & melihat ke Pinterest Web memang image kebanyakan yang di sharing!
Bagaimana versi aku...:">
Terinspirasi dari situs www.maf.org setelah melihat image disana kok ada yg terasa unik. Kok ada tombol pin-it di gambarnya yach? kata seorang pengunjung bertanya...Gimana cara buatnya dong Om, tunjukin kemari yah :))
Screenshot setelah melakukan uji coba!

Langkah pertama, pastikan template anda memiliki script jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Jika sudah ada, lanjutkan memasukan plugin jQuery berikut. Penempatan boleh dibawah script jQuery inti, atau dapat dicoba tempatkan sebelum tag </body> (Recommended)

<script type='text/javascript'>
//<![CDATA[
// surround each image with div class='pinned'
$('.post img').each(function() {
if ( ($(this).height() > 105) && ($(this).width() > 205) ) {
$(this).wrap("<div class='pinned' />");
}
});
// grab each image div with class of .pinned
var each_image = $('div.pinned');
// iterate through all divs
each_image.each(function() {
var pinned_height = $(this).find('img').height();
if ($(this).find('img').hasClass("imageLeft") == 'true') {
$(this).addClass('imageLeft');
}
if ($(this).find('img').hasClass("imageRight") == 'true') {
$(this).addClass('floatRight');
}
//if (pinned_width > 205 && pinned_height > 105) {
// dynamically add span and empty pin button
$(this).append('<span class="pin"><a href="" target="_blank" class="pin-it-button" count-layout="vertical" title="Pin it On Pinterest"><img src="http://1.bp.blogspot.com/-d-a06QQgOI0/T60PXEVtr6I/AAAAAAAAFNA/C8Csz68aAX8/s1600/pinterest.png" /></a></span>');
$(this).find('.pin').css('marginRight', '2px');
$(this).find('.pin').css('marginTop', pinned_height - 22);
// cache variables
var $this = $(this),
// cache this
image_source = $this.find('img').attr('src'),
// grab image src
web_title = $(location).attr('href'),
image_height = $this.find('.pinned').height(),
// grab current page title
description = $this.find('img').attr('alt'),
// grab img alt text
slug = $this.find('a.pin-it-button');
// find the Pinterest link
// modify Pinterest href with new image details
if (image_source.indexOf(".com") == -1) {
image_source = window.location.protocol + "//" + window.location.host + image_source;
}  
slug.attr('href', 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '');
//};
});
//]]>
</script>

Perhatian:

$('.post img').post img = Unique ID.
.height() > 105)105 = minimal tinggi image yg dapat ditampilkan button pinterest.
.width() > 205)205 = minimal lebar image yg dapat ditampilkan button pinterest.

Cari kode </b:skin> sisipin CSS berikut

.pinned .pin {
opacity: .7;
position: absolute;
margin-left: -45px;
}
.pinned .pin:hover {
opacity: 1;
}

SAVE mas brooo.
Saya tidak paham mengenai script²an, kalau ada yg salah tolong koreksi. Modal JS Bin and praktek doang gue mah, berhasil tapi :d Jangan lupa mengisikan atribut ALT pada image, karena itu akan terphrase menjadi TITLE ke pinterest web! Good luck :)

Demo

Perhatikan pojok kanan bawah pada image!
Happy pinterest button \m/

If you found this page useful, and you want to use short URL. Simply copy and paste the code below into your web site (Ctrl+C to Copy)