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

0 Komentar WTF
Pemilik yusugomori.com sudah membuat sebuah project yang diberi nama CSS SANS Font Kit. Deretan alphabet ditampilkan dengan menggunakan properties CSS! Sobat bisa datang untuk download dan mempelajari sendiri di alamat yusugomori.com/projects/css-sans/fonts AA Koben juga dapatkan satu tools generator fonts dengan nama localFont. Generator local storage yang mendukung 3 jenis format font .woff, .woff2 or .ttf agar kita bisa menghemat waktu ;)) Check and get in here jaicab.com/localFont
Untuk mempelajari bagaimana font agar responsive you can read it madebymike.com.au/writing/precise-control-responsive-typography Sebagai bonus informasi dari dunia seputar huruf (fonts) gue beri graphicdesignjunction.com/2015/03/new-text-effects-tutorials-2015 & www.designzzz.com/50-hd-quotes-and-typography-wallpapers

Apakah dari kalian ingin membuat tampilan design dengan gaya full stylish? Tidak lain kalian harus memiliki material design yg mumpuni. Paman kita google sudah membuatkan itu semua www.google.com/design/spec/material-design/introduction.html Kalau susah sobat bisa langsung sikat karya basic material-design google by Daemonite on github github.com/daemonite/material.

This is selection resources from codepen and cssdeck!

codepen.io/iign/pen/GgdbXx - codepen.io/team/webflow/pen/pvydKd - codepen.io/jcoulterdesign/pen/GgGrQO - codepen.io/davidicus/pen/ZYjoVO - codepen.io/ashmind/pen/ogMPQp - codepen.io/JTParrett/pen/fnCKE - codepen.io/fbrz/pen/Guysm - codepen.io/mfritsch/pen/dPqjdy - codepen.io/Himateja/pen/wBYJdm - codepen.io/lakotuts/pen/gbdjzL - codepen.io/TimRuby/pen/ykKEf - codepen.io/jbeason/pen/Wbaedb - codepen.io/alanizdesign/pen/gbBORP - codepen.io/vavik96/pen/gbBbpR - codepen.io/claarman/pen/gbBXyL - codepen.io/kenny-hibino/pen/MYPVqV - codepen.io/mostlymatthew/pen/bNmgbE - codepen.io/sturobson/pen/Wbazbw - codepen.io/MichaelArestad/pen/ohLIa - codepen.io/enxaneta/pen/zxJwap - codepen.io/iPawan/pen/zxmapZ - codepen.io/xaddict/pen/OPBEdK - codepen.io/kyleledbetter/pen/gbQOaV - codepen.io/XavaSoft/pen/OPayeb - codepen.io/balapa/pen/gbQbXR

codepen.io/chriswrightdesign/pen/GwfEq - codepen.io/lbebber/pen/XJRdrV - codepen.io/TimGThomas/pen/VYENyK - codepen.io/ge1doot/pen/EaOxvR - codepen.io/jaysalvat/pen/OPBZrZ - codepen.io/vasim/pen/VYERpN - codepen.io/toolmantim/pen/xbQRaL - codepen.io/ronniechong/pen/LEXWVw - codepen.io/waynedunkley/pen/bNQoXb - codepen.io/mattiabericchia/pen/xbQjew - codepen.io/donovanh/pen/QwzWrK - codepen.io/SachaG/pen/HKnkG - codepen.io/torbencolding/pen/VYqpEe - codepen.io/jonnymclaughlin/pen/qEyYwp - codepen.io/vineethtr/pen/EaGbxW - codepen.io/chrisdothtml/pen/azPYqq - codepen.io/that-beanbag/pen/xbmXQg - codepen.io/claarman/pen/bNOLNv - codepen.io/zapplebee/pen/bNORWG - codepen.io/pixelass/pen/zxaeVy - codepen.io/webcre8/pen/LEqOQQ - cssdeck.com/labs/direction-aware-hover-effect - cssdeck.com/labs/stack-of-cards - cssdeck.com/labs/esbtmdeg - cssdeck.com/labs/tgfbfe6x - cssdeck.com/labs/2jcy8mhl

See you :-h

6 Komentar WTF
Tidak bisa dipungkiri keberadaan web jejaring sosial saat ini meraja-lela dalam menyebarkan berita-berita. Kecepatan kebutuhan manusia sekarang akan update berita sudah melebihi dari perkiraan. Twitter adalah salah satu web-jejaring yg sekarang merajai dunia secara global. Konon negara Indonesia merupakan salah satu terbesar di dunia sebagai pemakai aktif si twitter :-O
Adapun salah satu proses kinerja dari twitter-web yaitu dengan melakukan pengiriman link! Sekarang AA Koben akan berbagi satu tutorial cara grab kata/kalimat yg berada pada artikel post, kemudian akan dilanjutkan ke web twitter. Cara grab disini bukan seperti biasanya, melainkan dengan melakukan HTML <a> tag terhadap kalimat/kata tujuan.

Source & demo:

codepen.io/SachaG/full/NPePzX
Bahan-bahan membuat inline Quote tweets.
a[href~="#twitter"], .twitter-link {
background-color: #fff;
padding: 2px;
font-size: initial;
position: relative;
transition: background-color 300ms;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a[href~="#twitter"]:after, .twitter-link:after {
width: 0px;
height: 23px;
position: relative;
right: -8px;
top: 2px;
vertical-align: text-bottom;
transition: width 300ms;
content: " ";
display: inline-block;
background: #fff url("https://abs.twimg.com/favicons/favicon.ico") right 6px center no-repeat;
background-size: 18px 18px;
}
a[href~="#twitter"]:hover, .twitter-link:hover {
background-color: #55ACEE;color: #fff
}
a[href~="#twitter"]:hover:after, .twitter-link:hover:after {
width: 32px;
}
Trik ini memakai jQuery, jadi harus sudah tertanam script<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    var capitaliseFirstLetter = function (string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    // take a text and a link, and build the twitter link
    var buildTwitterLink = function (text, url) {
        var encodedUrl = encodeURIComponent(url);
        var referrer = encodeURIComponent("http://www.YOUR-ADDRESS.com");
        return "https://twitter.com/intent/tweet?original_referer=" + referrer + "&url=" + encodedUrl + "&text=" + encodeURIComponent(text) + "&via=yourTwitterUsername";
    }
    $('[href="#twitter"]').each(function () {

        var $link = $(this);
        var text = "“" + capitaliseFirstLetter($link.text()) + "”";
        var url = "http://www.YOUR-ADDRESS.com" + window.location.pathname;
        var twitterLink = buildTwitterLink(text, url);

        $link.addClass('twitter-link').attr('href', twitterLink).attr('target', '_blank');
    });
});
//]]></script>
NB:
Gantikan http://www.YOUR-ADDRESS.com dengan alamat blog anda!
Cara pemakaian, ketika sobat akan melakukan posting sama halnya dengan mebuat tag <a>
Ex:



<p>Retro lo-fi raw denim est excepteur dreamcatcher. <a href="#twitter">Nullam malesuada erat ut turpis. Suspendisse urna nibh</a>, viverra non, semper suscipit, posuere a, pede.</p>
<p>Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. <a href="#twitter">Aliquam porttitor mauris sit amet orci</a>. Aenean dignissim pellentesque felis.</p>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>

Other technique:
Tweet selected text >> codepen.io/hugobessaa/pen/xDtri

Bye :-h

0 Komentar WTF
Jika berbicara tentang property overflow, salah satu yang tidak bisa lepas dan biasanya selalu mengikuti adalah property scroll! Apabila kita membuat sebuah konten area kemudian diberi batasan jarak ketinggiannya, maka akan terciptalah si scroll itu? Jadi salah satu fungsi scrolling adalah memberitahukan kepada kita, bahwasannya isi dari sebuah konten masih ada. Cara konvensional dari penggunaan scroll biasanya dengan menahan klik kiri pada mouse. Lantas bagaimana jika mouse kita rusak klik kirinya, tentu dengan bantuan tombol keyboard masih bisa :P

Example:

Retro lo-fi raw denim est excepteur dreamcatcher. Fap eiusmod reprehenderit exercitation, cred terry richardson biodiesel incididunt ex tempor synth est do ut. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Leggings Austin ad, sustainable labore fap wolf. Synth voluptate whatever chambray irony in, jean shorts tempor veniam twee. Irure tempor terry richardson, sunt wolf eu irony veniam craft beer master cleanse voluptate beard +1 banksy. Scenester you probably haven't heard of them 8-bit odio. Wayfarers DIY raw denim, pariatur williamsburg incididunt fanny pack you probably haven't heard of them quinoa non helvetica aute laboris. Vinyl tumblr letterpress craft beer trust fund.. Ethical veniam bicycle rights nisi, odio yr assumenda synth fap. Scenester you probably haven't heard of them 8-bit odio. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur. Stumptown irony VHS, keffiyeh ex tumblr keytar aute excepteur.

Sekarang AA mau berbagi cara membuat simple div scrolling menggunakan bantuan JavaScript. Ketika disorot (hover) maka secara otomatis scroll akan berjalan dengan sendirinya ke atas atau ke bawah.
DEMO

codepen.io/beben-koben/full/Joejrm

Kode CSStd.scroll {cursor: pointer;width:100%;height:25px;text-align:center;background:#f5f5f5;}
td.scroll:after {content:'Hover Here';}
Silahkan sobat hias sendiri dengan menambahkan variabel pada CSS!
<table width="100%" border="0" cellspacing="0" cellpadding="3" bgcolor="#ffffff">
<tr>
<td id="toUp" onMouseOver="scrollStart('Up', 'div_content', 'toUp');" onMouseOut="scrollEnd('toUp');" class="scroll"></td>
</tr>
<tr>
<td>
<div id="div_content" style="height:200px; overflow-y:hidden; overflow-x:hidden;">

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

</div>
</td>
</tr>
<tr>
<td id="toDown" onMouseOver="scrollStart('Down', 'div_content', 'toDown');" onMouseOut="scrollEnd('toDown');" class="scroll"></td>
</tr>
</table>
NB:
Jika sobat ingin menambahkan div scrolling, pada markup HTML harus berbeda unik-id. Berikut unikID tersebut toUp, toDown and div_content Jadi dengan begitu mau sebanyak apapun scrolling content yg kalian inginkan harap perhatikan UNIK-ID!
<script type='text/javascript'>
//<![CDATA[
var ourInterval;
var origColor = "#f7f7f7";
var overColor = "#f3f3f3";
var scrollSpeed = 50;
var scrollHeight = 5;

function scrollStart(direction, divID, elementID){
//CHANGE THE BACKGROUND COLOR OF THE TD THE MOUSE IS OVER
document.getElementById(elementID).style.backgroundColor = overColor;
// REPEATED CALL EITHER scrollUp OR scrollDown
ourInterval = setInterval("scroll"+direction+"('"+divID+"')", scrollSpeed);
}
function scrollEnd(which){
// OUR MOUSE IS OUT, SO RETURN TD TO ORIGINAL COLOR
document.getElementById(which).style.backgroundColor = origColor;
// STOP CALLING THE SCROLL FUNCTION
clearInterval(ourInterval);
}
function scrollUp(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop - scrollHeight;
}
function scrollDown(which){
// SET THE SCROLL TOP
document.getElementById(which).scrollTop = document.getElementById(which).scrollTop + scrollHeight;
}
//]]>
</script>
FINISH.

Source by: dsgdev.wordpress.com/2006/09/25/simple-div-scrolling

Happy scroll \m/

0 Komentar WTF
Salah satu tema artikel yang masih banyak dipostingkan orang adalah mengenai tutorial accordion Mulai dari yg sederhana sampai dengan tingkat full stylish style! AA Koben sekarang akan berbagi satu cara bagaimana cara membuat 3D accordion. You can look final result here codepen.io/Vampireos/full/DAfdr. Karena ini full-stylish banget, maka penggunaan kode CSS agak lumayan ;)) Selain efek 3D, bagian terakhir kotak konten pada accordion ini menggunakan trik stack of cards. Apakah itu, you can read here what is that codepen.io/Adevade/pen/ogyreb.
You lucky, i want make a screenshot...3d-accordionSobat bisa melihat bagian berputar, dan efek kotak bagian bawah terlihat seperti konten bertumpuk!

Mengapa menggunakan accordion?

Coba pikirkan tentang accordion sebagai alat manajemen konten. Bila sobat memiliki halaman yang dipecah menjadi puluhan paragraf, link, gambar, atau banyak blok konten ... salah satu solusinya yaitu memasang accordion :)

Kode CSS

Pasangkan kode CSS pada tempat semestinya. Editlah code sesuai dengan keperluan (warna, background, lebar, tinggi dll)
<ul class="container anim-label-4 anim-art">

<li>
<input checked="checked" id="ac-1" name="ac-3D" type="radio"/><label for="ac-1" onclick="" title="Title Tampak Depan">Title Tampak Belakang</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-2" name="ac-3D" type="radio"/><label for="ac-2" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-3" name="ac-3D" type="radio"/><label for="ac-3" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
            </li>

            <li>
<input id="ac-4" name="ac-3D" type="radio"/><label for="ac-4" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                </article>
            </li>

            <li>
<input id="ac-5" name="ac-3D" type="radio"/><label for="ac-5" onclick="" title="Title Tampak Belakang">Title Tampak Depan</label>
                <article>
<p>----------- BLAH BLEH BLOH -----------</p>
                    <p>----------- BLAH BLEH BLOH -----------</p>
                    <p><iframe frameborder="0" height="315" src="//www.youtube.com/embed/k3L7pwrE-tw" width="100%"></iframe></p>
                </article>
            </li>

</ul>
Kalau sobat kepingin model lain, silahkan cari saja di Best Practices for Accordion Interfaces in Web Design webdesignledger.com/web-design-2/best-practices-accordions-in-web-design

Happy accordion \m/

al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE