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
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 :DPDF Maker

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 :)>-

0 Komentar WTF
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/

0 Komentar WTF
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

4 Komentar WTF
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...
DisplaySyntax
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 :)
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9 0

FACEBOOK PAGE