Free Download StackEdit Markup Editor Latest

Berbicara tentang markdown editor memang sudah bertebaran artikel yang tersedia. Satu contoh phenomenal adalah Emmet. Gue sekarang sudah menemukan markdown editor paling anyar. StackEdit adalah, open-source markdown editor berdasarkan pageDown, markdown library digunakan oleh stack overflow dan stack exchange sites lainnya. Kita dapat mengelola beberapa dokumen markdown documents online atau offline, mengekspor dokumen dalam markdown atau HTML dan memformatnya menggunakan template, synchronize dokumen markdown di cloud.
Kita juga dapat mengedit dokumen markdown yang ada dari google drive, dropbox dan hard drive lokal. Kita dapat mempublikasikan dokumen markdown di gitHub, gist, google drive, dropbox atau SSH server, berbagi link ke dokumen yang membuat markdown dalam tampilan yang bagus.

Sebelum ke acara berbagi apps stackedit, ada baiknya sobat-sabit melihat koleksi tentang markdown editor yg pernah ada sebelumnya. Pemanasan dengan model syntax baru yang memang banyak di gunakan pada mark-down editor!

Online Markdown Editor Dillinger

Markdown Editor by Jon Combe

Ternyata banyak juga bro tools editor markup yang beginian! Kalau di share satu per satu gak akan habis 1 hari buat mosting. Tengok coba nih 78 Tools for Writing and Previewing Markdown Tapi dari segitu banyak belum ada yg namanya stackEdit markdown editor :-" yg paling komplit and full stylish bin keren mak nyus.

Live Demo	Resource
benweet.github.io/stackedit	github.com/benweet/stackedit

Agar berjalan mulus stackedit markup editor ini, klik navigasi menu pojok kiri atas dan scroll ke bawah perhatikan tulisan Related projects. Itulah links download proxy ke berbagai web tujuan! Gue jg kagak ngerti sih :D Silahkan sobat explore sendiri sajah :))

Bonus link demo pilihan AA Koben dari codepen.io

cdpn.io/nzbEI | cdpn.io/gdpzF | cdpn.io/mBrvn | cdpn.io/reAKn | cdpn.io/LfmGF | cdpn.io/drxcj | cdpn.io/hvcka | cdpn.io/fthBl | cdpn.io/jKHoh | cdpn.io/HnCEl | cdpn.io/wFkGp | cdpn.io/KphdG

pacinispace.blogspot.com/2013/07/write-in-markdown-stackedit-with-custom.html
Happy coding \m/

From me for you Bro...

Berawal dari sebuah konsep mengenai Social Feed (iOS7) drbl.in/hWnE, kemudian direalisasikan oleh David Leininger menjadi begini cdpn.io/xwErb iOS7 zoom-out side nav reveal. Efek zoom yang dihasilkan dari kreasi tersebut mungkin mirip dengan avgrund lab.hakim.se/avgrund a modal UI concept karya master Hakim El Hattab! Masih ingat dengan artikel berikut meny iframe with function onload event.Master Koben :D sudah berkreasi dengan meny dijadikan shortcut link usefully yang akan terlihat pada sebuah iframe tanpa harus membuka link open a new tab? Sekarang gue mau berbagi iOS7 zoom-out side nav reveal ditambahkan feature yang ada pada meny iframe with function onload event ;) Di sini AA hanya membuat 3 buah tools saja yah: HTML Editor - Color Picker and Phrase or Convert
Screenshot before & after click button iOS7 Zoom-out Side Nav

Before	After

Including Third Helpfully Tools

Pada demo sumber tombol kotak yg berada di pojok kiri atas berukuran height: 28px; - width: 28px; nah sama AA sudah dibikin panjang agar mempermudah dalam melakukan click²

Tombol tersebut berguna untuk maximize and minimize (zoom out & zoom in) Jadi jika sobat tidak terbiasa dengan tampilan kecil, tinggal klik saja tombol itu! Silahkan di download aplikasinya

Ekstrak terlebih dahulu File.zip kemudian buka index.html dan taruh address tsb di browsingan kalian. Pokoknya di eksplore saja sendiri bagaimana fitur yg tersedia. Semoga bermanfaat :) Capek...capek... #:-S
Happy coding \m/

Make Sitemap for Blogger by Category Updated

Mungkin agak janggal AA Koben mau berbagi artikel mengenai sitemap for blogger? Blog sudah berdiri tahunan kok baru memosting tutorial membuat sitemaps (daftar isi) blog :D Eit, tapi entar dulu, site-map kali ini bisa jadi penyempurnaan dari widget daftar isi tabulasi untuk blogger karya master Taufik Nurrohman. Karya dia menerapkan teknik pemanggilan maxResults: 99999, tanpa ada batasan! Jadi jika ada postingan yang berjumlah 100 akan terbuka langsung semua.Bagaimana halnya jika ada tutorial yg bisa membuat sitemap berdasarkan kategori tersebut akan tetapi kita bisa mengatur jumlah post yg akan ditampilkannya! Lebih dahsyatnya lagi, akan ada tombol Prev and Next juga :)) Pokoknya keren :-bd

Demo Sitemap for Blogger

Mau...!!!

Gue tidak akan sharing yg susah-susah bro, bikinnya juga cetek :D Datangi halaman ini Duy Pham Blog scroll ke bawah dikit, taruh deh link blog kalian pada kotak yg bertuliskan Địa chỉ blog, kemudian pencet tombol Cetek kan...wuekekekekkk :P
Nih bonus masih karya master Duy Pham:
Membuat Thread comments dengan penanaman tombol like blog.duypham.info/2012/12/them-nut-like-cho-thread-comment.html
Menampilkan avatar di samping judul postingan blog.duypham.info/2013/04/hien-thi-avatar-nguoi-viet-bai-ben-canh-tieu-de-bai-viet.html
Ada yg kelupaan, agar terlihat keren list category, pakek ini lab.hakim.se/scroll-effects karya master Hakim el-Hattab
Happy blogging \m/

Modifications your Pagenav Blogger with This Style

Entah apa maksud dan tujuan dengan beberapa istilah berikut ini: snippet, tweak, forked, modification and bla.bla..bla... Satu yang pasti hasil jadi kode dari seorang kreator bisa kita edit sana-sini sehingga cocok diterapkan ke dalam blog tercinta :-< Seperti yang telah gue sharing di from me to you tempat yang memberikan jasa kepada orang-orang untuk berkreasi secara full stylish :D Seabrek code's dengan live preview dapat kita saksikan dan tentunya kita comot ;))
AA Koben akan memberi contoh memodifikasi kode kepada kalian!
Original coded cssdeck.com/labs/full/ufct35ys5t

Demo & Download Resource

Hanya melakukan perubahan warna, padding, margin and etc lumayan nyut-nyut #:-SBelum lagi urusan memasukannya ke dalam blog, harus edit² lagi tentunya agar terlihat sreg. Gue akan beri source kode, coba sama sobat pasangkan ke dalam template blog. Gantikan gaya PageNav blog sobat agar menjadi seperti ini

Demo & Download Resource

Setelah melihat 2 sources diatas, apakah engkau teringat akan sesuatu? Hal yang dahulu belum dapat dilakukan oleh CSS sekarang sudah bisa?? Ini dia effect LavaLamp use CSS3. Mirip² dengan hal itu kan... Koben sudah pilihkan beberapa source keren mengenai lava lamp effect using css3. CobYat pasYti ke SeungSeum dEch =))

cdpn.io/AxjIr | cdpn.io/GsIxk | bit.ly/1aetVcn | bit.ly/1aetXRv | bit.ly/1aetZZm | bit.ly/1aeu27K | cdpn.io/xamAC

Happy coding \m/

Some Little from me for You

Jika sobat kepengen memiliki menu navigasi dengan konten link-link berjejer sangkin banyaknya, maka lihatlah postingan AA yang berjudul improve skill css anymore with css1k. Berpuluh-puluh demontrasi bisa kalian lihat hanya dengan ukuran CSS file sebesar 1K! Tinggal sedikit sentuhan kreatifitas agar sreg ditanamkan ke dalam blog tercinta :x Kode CSS sedikit, namun mark-up HTML lumayan :D Jadi kita bisa menyebutnya menu reuteung ala CSS1K. Berikut contoh menu-reuteung (edit dikit sana-sini) jsfiddle.net/bebenkoben/gEBrX/show Web jsFiddle dashboardnya diperbaharui ;)) Links resource keren punya sebenarnya sudah banyak tersedia! Tinggal urusan mendapatkannya, cocok apa tidak, mudah apa sulit dan faktor X lainnya ;)

Berikut beberapa links source pilihan

cdpn.io/izswy, cdpn.io/AepGb, cdpn.io/xzjGB, cdpn.io/xgqtc, cdpn.io/KJkEs, cssdeck.com/labs/full/ufct35ys5t, cssdeck.com/labs/full/8852y8sb, cdpn.io/Ayaqv, cssdeck.com/labs/full/forms-validation-styling-semantics, bit.ly/1a8NR07, bit.ly/1a8O2si & bit.ly/1a8ObvR

Coba sobat datangi link-link tersebut, pasti bakalan seru. Kalau merasa kurang besok lagi saja. Berikut bonusnya dari AA membuat form search atau kotak pencarian bergaya hover.

#search input[type="text"]:hover {width: 208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqI-JWKz8Au3IsPZ-MgyxEBEX09u_gS27LUrdZV3m08Sp9yF4qmnSsc6Yt9yZwp6E49-3cVNpVirksbe7CWuwSOy4whL4xGkEViWOuy7dPm8FpIleH6zmBwA2aD_yxUV3ee0gomRLU6nWw/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #FFF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: fixed;
top: 0px;
right:20px;
}

Markup HTML<form action="http://YOUR-BLOG.blogspot.com/search/" id="search" method="get" target="top">
<input name="q" placeholder="Query here..." size="40" type="text" />
</form>Happy coding :)
Bbn cheers \m/

Make Share Links for Twitter, Facebook and Google Plus

Keberadaan web jejaring tidak dapat dielakan dalam rangka menyebarkan links, terutama link web-web favorit! Dengan adanya share links (berbagi link) kurang-lebihnya akan dapat mendongkrak popularitas sebuah weblog ;) Gue AA Koben mau berbagi tutorial membuat strong social buttons untuk 3 web jejaring terkenal, yaitu twitter, facebook dan google+ Kenapa hanya 3 macam? Karena tiga biji juga full stylish bro b-) :)) Langkah pertama yang mesti kalian lakukan adalah membuat gambar kecil dengan ukuran 40px x 20px Kalau sudah buat gambarnya, baru deh ke acara bumbu CSS & HTML.
ScreenshotGambar dengan tulisan Tweet this adalah efek hover yg dihasilkan! Ketika tidak di sorot, maka akan hanya terlihat Tweet this, Like this and Plus this :P

.share-circle {
width: 75px;
height: 75px;
position: relative;
border-radius: 50%;
border-width: 10px;
border-style: solid;
float: left;
}
.share-circle:not(:last-child) {
margin-right: 5px;
}
.share-circle span {
width: 75px;
height: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 18px;
font-weight: 800;
font-size: 17px;
color: #FFF;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
transition: line-height 300ms ease-out;
}
.share-circle:hover span {
line-height: 40px;
}
.share-circle a {
position: absolute;
display: block;
height: 23px;
top: 31px;
transition: opacity 300ms ease;
opacity: 0;
}
.share-circle:hover a {
opacity: 1;
}
.facebook {
border-color: #30497e;
background-color: #3B5998;
}
.facebook:hover {
background-color: #4164ac;
}
.facebook a {
left: 22%;
width: 40px;
background: url('FACEBOOK-IMAGE_40px x 20px') no-repeat top left;
}
.twitter {
border-color: #3d83d3;
background-color: #4099ff;
}
.twitter:hover {
background-color: #4fa0fe;
}
.twitter a {
left: 22%;
width: 40px;
background: url('TWITTER-IMAGE_40px x 20px') no-repeat top left;
}
.plus {
border-color: #ab1e23;
background-color: #C92228;
}
.plus:hover {
background-color: #d02f35;
}
.plus a {
left: 22%;
width: 40px;
background: url('GOOGLE-PLUS-IMAGE_40px x 20px') no-repeat top left;
}

<div class="share-circle twitter">
<span>Tweet<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle facebook">
<span>Like<br/>this</span>
<a href="#" ></a>
</div>
<div class="share-circle plus">
<span>Plus<br/>this</span>
<a href="#" ></a>
</div>

Jadi deh, kalian tinggal sisipkan link tujuan pada syntax link yg sudah ada. Semoga berkenan :)
Resource by: cdpn.io/IizAn Bonus: cdpn.io/wpHBt
Happy coding \m/

Make Dark Accordion Navigation Menu use jQuery

Dua artikel sebelumnya kita sudah bersuka ria dengan tagging HTML pre. Sekarang gue mau mengangkat kembali tutorial yang bertemakan lumayan berjubel dibahas yaitu mengenai accordion Jika sobat searching di blog ini dengan keyword accordion maka akan ditemukan seonggok artikel full stylish seputaran informasi tersebut ;) Sumber resource memberikan judul dengan title dark navigation menu Menu itu kalau dilihat-lihat seperti accordion! Terintegrasi dengan jQuery script jika kita mau menggunakannya. Uniknya dari menu dark navigation yakni menyisipkan variabel CSS :after selector pada tagging unordered listBerikut bumbu-bumbunya...

.areaUL {
width: 200px;
box-shadow: 0 0 10px black;
margin: auto auto; /* menjadi di tengah */
border-radius: 6px;
border: 1px solid #181e26;
}
.areaUL ul {
list-style: none;
margin: 0;
padding: 0;
}
.areaUL li {
padding: 10px;
border-bottom: 1px solid #1c2029;
font-size: 13px;
color: #111;
padding-left: 35px;
font-weight: 600;
position: relative;
cursor: pointer;
}
.areaUL li:first-child {
border-radius: 4px 4px 0px 0px;
}
.areaUL li:last-child {
border-radius: 0px 0px 4px 4px;
border-bottom: none;
}
.areaUL li:after {
font-family: 'Open Sans',sans-serif;
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
left: 14px;
top: 12px;
font-size: 14px;
}
.areaUL .profile:after {
content: "\2620";
}
.areaUL .messages:after {
content: "\2709";
}
.areaUL .settings:after {
content: "\270e";
}
.areaUL .logout:after {
content: "\25ba";
}
.areaUL .submenu {
display: none;
background: #212930;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.areaUL .submenu.expanded {
display: block;
}
.areaUL .submenu ul {
padding: 0;
margin: 0;
}
.areaUL .submenu li {
background: transparent;
border: none;
color: #778ea1;
margin-left: 10px;
padding-left: 20px;
}
.areaUL .submenu li:after {
left: 5px;
color: #616b7c;
content: "+";
}

jQuery call<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".menu>li").click(function(){
$(this).next().slideToggle(500);
});
});
//]]>
</script>Markup HTML

<div class='areaUL'>
  <ul class='menu'>
    <li class='profile'>TITLE 1</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 1.1</li>
        <li>Sub Title 1.2</li>
        <li>Sub Title 1.3</li>
      </ul>
    </div>
    <li class='messages'>TITLE 2</li>
    <div class='submenu expanded'>
      <ul>
        <li>Sub Title 2.1</li>
        <li>Sub Title 2.2</li>
        <li>Sub Title 2.3</li>
      </ul>
    </div>
    <li class='settings'>TITLE 3</li>
    <div class='submenu'>
      <ul>
        <li>Sub Title 3.1</li>
        <li>Sub Title 3.2</li>
      </ul>
    </div>
    <li class='logout'>TITLE 4</li>
  </ul>
</div>

FINISH.
Resource by: cdpn.io/ILegs
Bonus:
www.jacklmoore.com/notes/jquery-accordion-tutorial
designshack.net/tutorialexamples/cssaccordion/index.html
Happy coding \m/