Create a PDF file in your favorite browser

Masih ingat dengan artikel post pdf viewer for browser mozilla & chrome! Sebuah apps .html untuk bisa membuka & menampilkan files dengan format PDF di browser engine? Sekarang gue mau bagi satu apps lagi yang masih beroperasi pada browser engines yaitu pdfmake. PDF make is Client/server side PDF printing in pure JavaScript! Kalau penjelasan versi saya mungkin begini, membuat file PDF di mesin browsingan :D

Source n download: github.com/bpampuch/pdfmake
Mirror: www.4shared.com/zip/GsYzoqHUba/pdfmake.html Pass .ZIP: bpampuch.

Sebenarnya dengan software pdf editor kita sudah bisa melakukan banyak hal. Tetapi sebagai user offline process in browser, gue pasti akan selalu berbagi hal-hal apa saja yg bisa beroperasi pada browser engine ;) Begitu saja postingan hari ini, maklum lagi shaum gak banyak basa-basi-bacot :D perbanyak amalan akhirat O:-)

BONUS

Add whatsapp smileys on Blogger Posts and Comments ► bit.ly/1HlWoix - Checkbox Trickery with CSS ► bit.ly/1HlWqH3 - Open Modal with CSS ► cssdeck.com/labs/open-modal-with-css - Sliding Radio Button Menu ► cssdeck.com/labs/sliding-radio-button-menu - Animated popup menu ► cssdeck.com/labs/s5pgj1of - Animated border menu ► cssdeck.com/labs/3xkmmii0 - Off-Canvas Menu ► codepen.io/ryanmorr/pen/ZGXLXd - Grid Menu Button ► codepen.io/joshmantis/pen/bdoZwa - CSS accordion no-js ► cssdeck.com/labs/gngi13bd - marklib ► bowlingx.github.io/marklib

Happy Ramadhan Kareem :)>-

Free Services from Web Reloado

Sebenarnya tidak sengaja menemukan web ini! Awalnya lagi iseng-iseng searching di google dengan keyword HTML editor dan mencari siapa tauk ada HTML-editor baru yang bisa dibagikan kepada kalian ;) Kemudian AA Koben nemuin code.reloado.com sebuah tool testing platform untuk HTML, JS dan CSS. Editor yang mengadopsi gaya dari site jsbin tempo doeloe! Gue juga dulu pernah share tool serupa, do you want to try free download openHTML and JS Bin editor.
Telusur punya usut sampai ke web reloado.com, ternyata sebuah search engine bro :-O Mungkin lebih khusus searching akan meliputi wilayah Germany! Soalnya daerah si-empunya. Sobat dapat melakukan add url di sana, dan akan langsung ter-direct ke (dot)de [beben-koben.blogspot.de]? Berikut rincian privasi add-url:

1. IP addresses are not saved.
2. Searches are not associated.
3. No registration required.

Kalau berminat bisa juga langsung lakukan add dari sini:

URL:

Satu lagi yg gue temukan dari web ini adalah layanan menampilkan snapshoot (screenshot) site! Cobalah sobat melakukan search di web reloado atau buka ini saja beben koben on Reloado perhatikan dan sorot gambar icon preview! This is trick similar with websnapr, but now we talk about website thumbnails and screenshots for your site.
Apakah kepingin yg seperti itu!!!

Get started, this is the plan!http://t.reloado.com/api.php?src=[URL]&w=[width]&h=[height][URL] URL (Harus di isi) - [width] width (opsi) - [height] height (opsi)
Contoh: <img src="http://t.reloado.com/api.php?src=http://embah-google.blogspot.com&w=300&h=250" />or<img src="http://t.reloado.com/api.php?src=www.bing.com&w=300&h=250" />Itu cara mengambil thumbnail website dengan syntax HTML image. Lantas bagaimana cara menampilkan screenshots via link disorot-sorot akan muncul si thumbnailnya? Pastikan pada template blog sobat sudah terpasang jQuery script, jika sudah ada abaikan!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

#WSBubble {
display: none;
overflow: hidden;
position: absolute;
box-shadow: 0 0 6px #b4b4b4;
}
#WSBubble img {
margin: 0;
}
#WSBubble.small {
width: 220px;
height: 170px;
background: url(http://reloado.com/images/ajax-loader.gif);
}
img.websnapr {
width: 10px;
height: 10px;
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    $("body").append('<div id="WSBubble" class="small"></div>');
    $("a.websnapr").hover(function (e) {
        this.t = this.title;
        this.title = "";
        $("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px").html('<img width="220" height="170" src="http://t.reloado.com/?url=' + encodeURIComponent(this.href) + '" />').fadeIn("slow")     
 }, function () {
        this.title = this.t;
        $("#WSBubble").fadeOut("fast")
    }).mousemove(function (e) {
        $("#WSBubble").css("top", (e.pageY + 15) + "px").css("left", (e.pageX + 15) + "px")
    })
});
//]]>
</script>

Planing HTML<a href="HYPERLINK-HOME-WEBSITE" class="websnapr"><img src="LINK-IMAGE"></a>or<a href="HYPERLINK-HOME-WEBSITE" class="websnapr">YOUR TITLE</a>Pada penulisan syntax link harus memakai properti class="websnapr"

DEMO: codepen.io/beben-koben/full/PqKajG
Kalo tertarik dengan teknik yg lain, sobat bisa coba baca artikel add mini preview links to blogger like snapshot capture!

Happy coding \m/

Medium Lightbox for Image Zoom, Nice and Elegant

Nemu yang berbeda tentang lightbox satu ini! Master davidecalignano on github membuat MediumLightbox. Dengan segala fitur fungsi yg menyertainya mungkin ini lightbox sederhana tetapi full stylish punya :-) Terinspirasi dari web sosmed medium.com gambar-gambar di sana dapat di klik (zoom) kemudian mengembalikan ke keadaan semula dengan di klik lagi atau dengan cara melakukan scroll! Uniknya tuh scroll, customize zoom image and responsive :D
Ditulis dalam javascript murni untuk kinerja yang lebih baik, ringan dan sederhana. Rada ribet dalam penulisan syntax HTML menurur saya :D

Bagi sobat yg tertarik untuk memasang medium lightbox, silahkan ikuti langkah-langkah berikut ini...

.post {
max-width:700px;
width: 100%;
margin: 0 auto;
}

figure {
margin: 0;
position: relative;
clear: both;
margin: 10px;
}
figure.left {
margin-left: 0;
}
figure.right {
margin-right: 0;
}
figure.full {
margin-left: 0;
margin-right: 0;
}
.one-third {
width: 33.33%;
}
.half {
width: 50%;
}
.full {
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}

/* MediumLightbox style */

.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
.img {
display: block;
margin: auto;
max-width: 100%;
}
.aspectRatioPlaceholder .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zoom-effect .img {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
.zoom-effect .zoomImg,.zoom-effect .zoomImg-wrap {
position: relative;
z-index: 900;
transition: all 300ms;
}
.zoom-effect .zoomImg-wrap--absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zoom-effect .zoomImg {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
}
.zoom-effect .zoomOverlay.show {
opacity: 1;
}
.zoom-effect .zoomOverlay {
z-index: 800;
background: #fff;
position: absolute;
transition: opacity 300ms;
opacity: 0;
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
}

Perhatikan kode CSS.post {
max-width: 700px;
width: 100%;
margin: 0 auto;
}Jangan di pakai kode tersebut, tetapi perhatikan properti max-width: 700px Properti itu harus tertanam pada tag post area blog anda sekalian. Singkat cerita, jika pada area pos sobat sudah memiliki nominal panjang, abaikan kode itu!

Hostingkan JavaScript berikut medium-lightbox.js Kemudian coba letakan terlebih dahulu di atas tag </body> bisa juga sebelum tag </head>
Contoh:<script src="medium-lightbox.js" ></script>
<script>
MediumLightbox ('figure.zoom-effect', {
//margin:20
});
</script>Margin - default: 20 - Margin dalam px diterapkan umtuk gambar dalam tampilan zoom.

Bagian syntax HTML seperti yg sudah saya katakan sebelumnya, sedikit ribet ;)) Ribet demi gaya kan gak apa-apa bos :))

<figure class="one-third left zoom-effect">
 <div class="aspectRatioPlaceholder">
  <div class="aspect-ratio-fill" style="padding-bottom: 00.000000%;"></div>
   <img class="img" data-width="475" data-height="360" src="LINK-IMAGE">
 </div>
</figure>

Keterangan:

Dalam tagging figure, class dengan properti zoom-effect harus ada. Adapun variasi class lain, sobat bisa rangkai dengan seperti yg ada pada kode CSS (.left, .right, .full, .one-third, & .half)

<div class="aspect-ratio-fill" style="padding-bottom: 00.000000%;"></div>
Kode ini juga musti ada, nilai style (padding-bottom) adalah rumusan...Tinggi gambar/Lebar gambar dikalikan 100 [(height/width)*100]

data-width="000" data-height="000"
Nominal pada properti tsb adalah efek lebar dan tinggi zoom pada gambar (perbesaran tampilan gambar)

Done!

Demo: codepen.io/beben-koben/full/LVLXqe
Source: github.com/davidecalignano/MediumLightbox

Buzz Information for Blogger by Google

Agan Koben hanya akan menyampaikan dua informasi update dari blogger dan google. Yang pertama datang dari blooger buzz tentang pembaharuan syntax XML. Sobat bisa baca di sini buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html Versi master Taufik www.dte.web.id/2015/06/pembaharuan-operator-xml-blogger-2015.html Karena saya juga belum paham, silahkan sobat blogger membaca sendiri :D Semoga dengan adanya pemutakhiran expression ini akan lebih efisien tentunya ;)
Informasi ke dua datang dari google mengenai material icons! Salah satu layanan dari google design yang memungkinkan kita untuk melakukan pemanggilan icon. Sobat mungkin lebih familiar dengan Font Awesome Icon! Tidak jauh berbeda dengan hal itu, tetapi di sini kita akan menggunakan hostingan langsung dari embah google :D Ada 750+ icon yg sudah tersedia dengan size hanya 40KB saja dengan format woff2!

AA akan coba tuntun bagaimana cara memasang material icons google. Ada 2 metode yg bisa kita pakai.

Metode 1

Cara termudah untuk mengatur ikon font untuk digunakan dalam setiap halaman web adalah melalui Google Web Font. Yang perlu Anda lakukan adalah memasukkan satu baris HTML berikut:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />Letakan yaaa kira-kira di bawah tag <head>

Metode 2

Bagi sobat yg ingin menghosting sendiri font web, bisa melakukan dengan cara ini:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Adapun link download source nanti ada pada akhir acara! Aturan CSS render font icon adalah sbb:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Ekstra aturan untuk CSS render

// Aturan untuk ukuran ikon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

// Aturan untuk menggunakan ikon sebagai hitam sebagai warna latar belakang.
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

// Aturan untuk menggunakan ikon putih sebagai warna latar belakang.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Cara penggunaan huruf ikon di HTML. Contoh sederhana...

Display	Syntax
face	<i class="material-icons">face</i>
face	<i class="material-icons UNIK-ID for CLASS">face</i>

Source:
>> www.google.com/design/icons
>> google.github.io/material-design-icons
>> github.com/google/material-design-icons
>> codeload.github.com/google/material-design-icons/zip/master
>> github.com/google/material-design-icons/blob/master/iconfont/codepoints
Bonus...
>> www.google.com/design/tool/devices

Sebenarnya memang lagi rombak besar-besaran ngikutin trend material design gitooh :D

Terima kasih :)

Make Scroll to Top use Link on Menu Navigation

Ada yang tidak biasa pada tutorial scroll to top kali ini! Biasanya jika kita membuat tut back to top pasti terbayangkan tombol/link jika di pencet akan kembali ke atas? Tetapi untuk saat ini kita akan membuat trick tombol kembali ke atas akan dipadukan dengan sebuah menu navigasi! Jadi ketika sobat memencet tombol, bukan kembali ke atas melainkan akan membuka sebuah navigation menu yg tersembunyi. Setelah terbuka menunya maka akan ada beberapa title, yg mana title tersebut telah disisipkan unik-id guna melakukan scroll to...
Begitulah kira-kira penjelasan yg membingungkan :D

#navigation {
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
font-size: 1.1em;
width: 100%;
height: 50px;
color: #fff;
background: #6c524d;
z-index: 1;
}
ul {
list-style-type: none;
padding: 0;
line-height: 1em;
}
li {
padding-left: 2%;
display: inline;
}
li:first-child {
padding-left: 0;
}
#tsttb {
border: none;
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
line-height: 42px;
color: #fff;
cursor: pointer;
font-size: 1.7em;
background: #6c524d;
border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
#tsttb:after {
content: "☰";
}
#tsttb:focus {
outline: none;
}

Planing syntax HTML<div id="navigation">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
<button id="tsttb"></button>

Pada syntax link HTML sudah ada hashtag (#) yg memiliki fungsi sebagai unik-ID. Buat apa, unik_ID sebagai tanda scroll-to-top. Pada syntax HTML di buat 5 title menu. Jadi akan ada unik0id berjumlah 5 jenis. Perhatikan komposisi HTML berikut...

<div id="home">
 BLAH-BLEH-BLOH Here
</div>
<div id="about">
 BLAH-BLEH-BLOH Here
</div>
<div id="services">
 BLAH-BLEH-BLOH Here
</div>
<div id="works">
 BLAH-BLEH-BLOH Here
</div>
<div id="contact">
 BLAH-BLEH-BLOH Here
</div>

Hashtag yg berada pada link menu, akan terintegrasi dengan komposisi HTML yg sudah disisipkan unik ID. Coba sobat cermati <div id="home"> Sobat bisa ganti #hashtag dan id="hashtag" yg penting harus sama!
Langkah selanjutnya masukan jQuery and JavaScript berikut sebelum/di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
// Show/hide menu & button on scroll
$(window).scroll(function() {
if ($(this).scrollTop() >= 20) {
$('button').fadeIn(200);
} else {
$('button').fadeOut(200);
}
});
// Show hide top menu
$(document).ready(function(){
$(this).scrollTop(0);
$('button').click(function() {
$('#navigation').slideToggle('slow');
});

$('li').click(function () {
$('#navigation').slideUp('slow');
});
});
// Smooth scroling ( https://css-tricks.com/snippets/jquery/smooth-scrolling/ )
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
event.preventDefault();
}
}
});
});
//]]>
</script>

SAVE.

Demo & source Transform scroll to top button to: show menu on top: codepen.io/marioyiann/pen/ZGByoR

Happy to top \m/