Trik Komputer

Senin, 06 April 2015

Shortcode Plugin Blogger for Write Syntax with Easy

Pada tanggal 4/03/2015 master Mohammad beserta STCnetwork team telah membuat Blogger Shortcode Plugin. Blogger short code plugin adalah sebuah sistem yang akan membuat web/blog design dan penciptaan widget dengan hanya menggunakan script plugin (a macrocode)! Adapun fitur yg ditawarkan yaitu agar kita dapat menyisipkan video, audio, photo gallery, tabs, accordions etc. Fitur tersebut dapat langsung berfungsi pada post area, widgets, side-bar, kolom komentar dan dimana lagi juga bisa (still on work)? Dengan begini proses Embedding Objek di Blogger tidak pernah semudah sebelumnya.

Blogger shortcode adalah satu baris macrocode yang berisi satu set instruksi yang memungkinkan kita melakukan hal-hal yang bagus dengan upaya minimalis. Shortcode dapat membantu menanamkan file atau membuat objek di BlogSpot blog dengan satu baris kode yang biasanya akan memerlukan banyak kerja kompleks, kode panjang and jelek :P

Sekarang anda dapat dengan mudah memasukkan benda seperti Video, Audio, File, slideshow dan semua elemen web penting seperti akordion, tab, tombol warna-warni, kotak dll ke dalam Header, Sidebar, Footer, Pos, Pages, Judul dan luar biasa bahkan di dalam komentar! Hal ini tidak memerlukan pengetahuan tentang HTML, CSS atau JavaScript. Plugin ini sangat ringan dan multiple-embed-support yg akan mengurangi waktu loading halaman beban sebesar 50%.
Singkat cerita inspirasi datang hampir sama dengan kepunyaan shortcode wordpress!

List of Supported Shortcodes

Sejauh ini telah dikembangkan sekitar 10 shortcode dan rencana ke depan untuk dikembangkan lagi sekitar 50 shortcode insya Allah dalam bulan-bulan ini. Shortcode akan dibuat berdasarkan kepentingan dan kegunaan mereka.
Berikut ini adalah shortcode yg sudah dikembangkan sejauh ini.

Shortcode	Definisi
[accordion]	Membuat daftar item secara vertikal ditumpuk yg mana setiap item dapat "memperluas" atau "ditarik" untuk mengungkapkan isi yang berhubungan dengan item. Item dapat diaktifkan dan dinonaktifkan dengan mudah.
[tab]	Widget tab memungkinkan beberapa dokumen atau panel yang akan terkandung dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih antara set dokumen.
[code]	Menampilkan syntax Highlighter yang mempertahankan format asli dari kode sumber.
[quote]	Membuat blockquote yg fullstylish.
[button]	Menyisipkan tombol CSS3 berwarna-warni.
[icon]	Masukan ikon FontAwesome di mana saja dengan dukungan pilihan kustom.
[soundcloud]	Memasukkan embeds soundCloud track.
[dailymotion]	Memasukkan embeds video dailymotion.
[divider]	Menyisipkan horizontal separator untuk membagi bagian, juga mengandung tombol Back To Top
[num]	Menyisipkan a number enclosed inside a circular background.
[warning]	Menyisipkan kotak warning message.
[success]	Menyisipkan kotak sukses message.
[alert]	Menyisipkan kotak alert message.
[info]	Menyisipkan kotak dengan beberapa info message.
[update]	Menyisipkan kotak dengan update status message.
more on!	it's way . . .

Langkah-langkah Instalasi

Ikuti langkah-langkah berikut untuk menginstal Shortcode Plugin ke dalam template blogger kalian.

Go To Blogger > Template > Backup Download full template kalian!
Click Edit HTML
Press Ctrl + F, search </body>
Paste file dynamically updated JS tepat diatasnya.

<!-- Blogger Shortcode Plugin Dynamic JS File -->  <script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>

Kemudian search <head>
Pastekan file CSS berikut tepat di bawahnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>  <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Perhatikan bahwa dalam kode di atas telah menyertakan versi terbaru dari jQuery dan FontAwesome. Saya menyarankan agar menggunakan versi ini bukan versi lama, dan mungkin sobat sudah menggunakannya.

Save & done.

Gunakan Shortcode Plugin Dynamic JS file bawaan, karena file shortcodes.js akan selalu diperbaharui.

Shortcode Syntax

Shortcode memiliki nama dan attributes. Attributes adalah pilihan yang membantu mengkonfigurasi objek. Shortcode dilambangkan dengan tanda kurung persegi [ Square brackets ]. Square brackets dibuka & ditutup seperti HTML tetapi dengan format yg lebih sederhana (mirip dengan markdown)
Ex:
Misalkan sobat ingin memasukan embed video dari dailymotion ke dalam postingan!

[dailymotion src="x2lhjki"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" /]

Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini

[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]

Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)

>> jQuery Accordion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/blogger-shortcode-for-jquery-accordion.html
>> jQuery "Tabs Shortcode" For Blogger!
www.mybloggertricks.com/2015/04/create-tabs-in-blogger.html
>> Dailymotion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/dailymotion-shortcode-for-blogger.html
>> SoundCloud Shortcode For Blogger!
www.mybloggertricks.com/2015/04/add-SoundCloud-Player-in-Blogger.html
>> Facebook Page Plugin Shortcode For Blogger
www.mybloggertricks.com/2015/04/add-facebook-page-plugin-in-Blogger.html
>> Create CSS3 Notification Boxes in Blogger
www.mybloggertricks.com/2015/04/message-box-shortcodes-for-blogger.html
>> YouTube Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/create-a-YouTube-Shortcode-in-Blogger.html
>> Syntax Highlighter Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/SyntaxHighlighter-Shortcode-for-Blogspot.html
>> Buttons Shortcode - Create CSS3 Buttons in Blogger!
www.mybloggertricks.com/2015/05/button-shortcode-for-blogger.html
>> Image Shortcode - Embed Images in Blogger Comments!
www.mybloggertricks.com/2015/05/insert-image-shortcode-in-blogger.html
>> Create Shortcode For CSS3 Tooltip in Blogger!
www.mybloggertricks.com/2015/05/create-shortcode-for-css3-tooltips.html
>> Create Shortcode For Responsive HTML Tables!
www.mybloggertricks.com/2015/05/HTML-Table-Shortcodes.html
>> Horizontal Divider Line With Back-To-Top Button
www.mybloggertricks.com/2015/06/CSS3-Divider-shortcode.html

Syntax Errors

Hindari membuat kesalahan-kesalahan ini saat mengetik nama shortcode dan attributes:

Jangan gunakan CamelCase atau UPPER-CASE untuk nama atribut atau nama Shortcode. Gunakan hanya huruf kecil.
Jangan menambahkan spasi di antara nama shortcode dan tanda kurung persegi.
Macro shortcode dapat menggunakan tanda kutip tunggal (') atau tanda kutip ganda (") untuk nilai atribut, atau menghilangkan tanda kutip sepenuhnya jika nilai atribut tidak mengandung spasi.

[table col='123' row=456] sama dengan [table col="123" row="456"]

Sebuah ruang (spasi) diperlukan antara nama shortcode dan atribut shortcode. Bila lebih dari satu atribut yang digunakan, setiap atribut harus dipisahkan oleh setidaknya satu spasi.
Shortcode parser tidak menerima tanda kurung persegi dalam atribut.

[tag attribute="[Some value]"]

Links source:
www.mybloggertricks.com
ask.mybloggertricks.com/t/which-blogger-shortcode-would-you-like-us-to-create/1684
Need Quick Help within 24 Hours? ask.mybloggertricks.com

Jumat, 03 April 2015

Make it Offline in Local Storage

Berbagi trik dan tutorial bagaimana cara melakukan penyimpanan (Save As) Fitur baru dari HTML5 yaitu local storage akan berperan penting dalam hal ini! Adapun sarana yang akan dipakai adalah browser engine. Singkat cerita kita akan mengefisiensikan fungsi dari browser yg kita punya untuk dijadikan penyimpanan file. File dapat berupa .txt, .html, or etc.
Apakah sobat masih ingat dengan trick <html contenteditable> Syntax tersebut adalah cara tercepat merubah mesin browser menjadi simple editing editor atau notepad in browser. Dengan melakukan pencet tombol Ctrl + S, sobat sudah dapat menyimpan data dengan ekstension .html

Berikut beberapa lists yg sobat bisa kunjungi untuk belajar:

Downloadify

github.com/dcneiner/Downloadify

a[download]

html5-demos.appspot.com/static/a.download.html

updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

Saving generated files on the client-side

eligrey.com/blog/post/saving-generated-files-on-the-client-side

eligrey.com/demos/FileSaver.js

Save/download data generated in JavaScript

hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html

HTML5 localStorage

toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api

Javascript to save Textarea as a txt file

runnable.com/U5HC9xtufQpsu5aj/use-javascript-to-save-textarea-as-a-txt-file

Loading, Editing, and Saving a Text File in HTML5 Using Javascript

thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip

Sebagai bonus AA Koben akan berbagi informasi how to make a ridiculously simple personal wiki! Adapun tujuan WIK dibuat by martinpllu adalah sbb:

Benar-benar sederhana.
Menyimpan semua data di browser localStorage
Tidak ada separate 'edit mode' seperti kebanyakan wiki. Halaman langsung bisa diedit.
Bekerja dengan baik pada mobile dan desktop.
Dukungan navigasi browser (back/forward/bookmark etc.)
Menyimpan semua data secara lokal pada perangkat.
Navigasi keyboard.
Bekerja secara offline.

Silahkan meluncur ke halaman source guna mendownload dan mempelajari lebih lanjut github.com/martinpllu/wik :D

Sabtu, 28 Maret 2015

Selection Good Resources March 2015

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

Jumat, 20 Maret 2015

Make Inline Quote Tweet use jQuery for Blogger

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

Sabtu, 14 Maret 2015

Simple Div Scrolling using JavaScript

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 CSS

td.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/

Sabtu, 07 Maret 2015

Make 3D Accordion Using CSS

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...

Sobat 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/

Senin, 02 Maret 2015

Get Free 10 Tools For You

Salah satu cara dalam urusan mempercepat loading web/blog adalah dengan melakukan kompres CSS! Berbagai jenis tools compressor banyak tersedia. Sekarang AA Koben akan berbagi tools CSS minifier dengan nama CSS Shrink by master Stoyan Stefanov! Sobat dapat melihat penjelasan dalam bentuk slide share cssshrink.com/velocity dan playground pada halaman cssshrink.com. Sebagai bloglang peselancar dunia maya terbaik, gue telusuri sumber dari shrink, and AA dapatkan 10 tool buat hiburan kalian ;)) (perhatikan navigasi menu)

Berikut tools-nya:

BSCSS
Colormin
CSS Min
CSS Shrink
CSS JS
CSS Lexer
Gonzales AST
Mensch
Prettyugly
CSS properties

Apakah sobat tergiur dengan semua itu? You can get all for free :))

Unduh cssshrink-master di 4shared by Beben Koben.
www.4shared.com/zip/C1KIJW13ce/cssshrink-master.html
Download cssshrink-master.zip in Ziddu.
downloads.ziddu.com/download/24401696/cssshrink-master.zip.html

Ekstrak folder cssshrink-master.zip ► Open Demo folder ► Happy play.
Jika pengen merubah kembali kode CSS yg sudah di kompres ke bentuk semula (beautify) sobat bisa mencoba tool Get Free Download 3 Tool Beautify Code. Kalau mau yg praktis sobat dapat mencoba alternatif lain di halaman prettydiff.com Itu jg sudah open-source bero ;)
Demikian dan terima kasih atas perhatian sodara-sodara :) Selamat bermain-main tool!
Source by: www.phpied.com, www.csspatterns.com, perfectionkills.com & github.com/stoyan

Password .ZIP : ToolsByStoyanStefanov

Yeah... \m/