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

2 Komentar WTF
Ada metode terbaru untuk menanamkan embed video youtube ke dalam blog kita tercinta!
Sangat mudah untuk menanamkan video YouTube dengan metode iframe tetapi kita akan terkejut dengan mengetahui berapa besar ukuran byte yang tertanam/terbawa video YouTube itu ked dalam halaman postingan. Browser harus mendownload file JavaScript tambahan untuk memutar video YouTube saja. File-file ini di download dan bahkan jika pengunjung tidak pernah memainkan video tertanam tidak hanya meningkatkan ukuran byte dari halaman web, tetapi browser harus membuat beberapa permintaan HTTP untuk memutar satu video. Hal ini meningkatkan waktu loading keseluruhan halaman sehingga mempengaruhi kecepatan loading halaman. Kelemahan lain dengan default kode embed YouTube adalah bahwa itu belum responsif.

Google+ menggunakan teknik baru untuk embedding video YouTube! Hanya menampilkan gambar thumbnail embeds dari video YouTube dan video akan di putar hanya bila kita mengklik gbr thumbnail tersebut. Segitu saja keterangannya yah, AA Koben akan berbagi tutorial dari master Amit Agarwal owner www.labnol.org mengenai "how to add a better method for embedding youtube videos" Keunggulan kalau kita memakai trik ini adalah, embed video sudah responsive dan ukuran byte yg di bawa sangatlah kecil :)

.youtube-player {
position: relative;
padding-bottom: 55%;
/* Use 75% for 4: 3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
/* My option for preposition display thumbnail img */
top: -4.789em;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
-moz-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("IMAGE-TOMBOL-PLAY ABU-ABU 72px x 72px") no-repeat;
cursor: pointer;
}
.youtube-player:hover .play {
background: url("IMAGE-TOMBOL-PLAY MERAH 72px x 72px") no-repeat;
}
Gantikan link image background dengan gambar kreasi kalian masing-masing dengan resolusi 72px x 72px
<script>//<![CDATA[
/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */

document.addEventListener("DOMContentLoaded",

function () {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
//]]></script>
Kalau sudah, penulisan ketika memosting gunakan syntax sbb
<div class="youtube-player" data-id="YQHsXMglC9A"></div>
Gantikan kode YQHsXMglC9A dengan ID VIDEO YouTube!

DONE.

DEMO: codepen.io/beben-koben/full/xERyRO/
Resource by: www.labnol.org/internet/light-youtube-embeds/27941

Apabila sobat tetap kepengen memakai atribut iframes dalam penulisan embed video youtube namu tetap responsive, you can try this trick...Reframe.js, superembed.js

Bonus:
kissui.scrollanim - css-locks - HTML-Sheets-of-Paper - docs2epub - emoji-css - ClipBoard - docpress - txt.wav - github-explorer - hakoniwa - lightgallery.js - web-quickeditor - city-generator

0 Komentar WTF
Sebagai bloglang blogger petualang tak sengaja menclok di Arlina Design! Salah satu blog keren menceritakan banyak artikel mantab seputaran blogspot. Sobat harus cekidot postingan yang satu ini membuat recent post by label dengan fungsi tab. Template-template simpel dan indah terlahir dari sana juga :D Template dengan nama G Vusion 2 yang sudah di pakai oleh seorang blogger yg beralamatkan optimasidroid.blogspot.com ternyata memiliki tampilan tombol download yang mirip dengan kepunyaan web jalantikus.com Tutorial sekarang akan bercerita bagaimana cara membuat tombol download seperti di web jalan tikus ;)

Berikut penampakannya

Jalan TikusBlog Optimasidroid
download-button-jalantikustombol-download-jalantikus
Beda-beda dikit lah bro :D

#lapakdownload {
width: 100%;
position: relative;
border: 1px solid #DDD;
border-radius: 5px;
display: inline-block;
background-color: rgba(f, f, f, 0.5);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin: 10px 0;
font-family: 'Roboto', Segoe UI, Segoe, Arial, Verdana, sans-serif;
}
.iconapp {
width: 16%;
float: left;
padding: 16px 0;
text-align: center;
}
.iconapp img {
width: 70px;
height: 70px;
}
.detaildownload {
width: 84%;
padding: 10px;
}
.title-wrapper {
width: 55%;
}
a.title-download {
color: #252525;
font-size: 20px;
text-decoration: none;
font-weight: 900;
}
a.title-download:hover {
text-decoration: underline;
}
.versi-app {
color: #999;
font-weight: 300;
font-size: 20px;
text-decoration: none;
}
.detail-dev {
width: 55%;
margin-top: 6px;
display: inline-block;
}
.robotijo {
width: 20px;
height: 20px;
background-image: url(//3.bp.blogspot.com/-d67M7snFvCQ/Vn-mYIuY0cI/AAAAAAAAAXc/rEQJBMsYSRs/h120/i-os-spr.png);
background-color: #6ab344;
background-size: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0);
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
a.text-dev {
color: #999;
font-size: 14px;
text-decoration: none;
vertical-align: middle;
}
a.btn-download {
position: absolute;
top: 20px;
right: 20px;
height: 40px;
text-decoration: none;
line-height: 38px;
border-radius: 4px;
padding: 0 20px;
font-size: 15px;
background-color: #008EFA;
color: #fff;
font-weight: 900;
transition: 0.5s;
}
a.btn-download:hover {
background-color: #0B78E8;
color: #fff;
}
.source {
position: absolute;
bottom: 0;
right: 0;
padding: 2px 10px;
background: #F8F8F8;
border-top: 1px solid #DDD;
border-left: 1px solid #DDD;
border-top-left-radius: 4px;
border-bottom-right-radius: 5px;
}
.introsource {
color: #999;
font-size: 11px;
line-height: 0;
font-weight: 400;
}
a.linksource {
font-size: 11px;
line-height: 18px;
text-decoration: none;
color: #999;
font-weight: 900;
transition: 0.5s;
}
a.linksource:hover {
text-decoration: underline;
}
@media only screen and (max-width: 768px) {
.detaildownload {
width: 80%;
}
.iconapp {
width: 20%;
}
}
@media only screen and (max-width: 480px) {
#lapakdownload {
width: 100%;
padding-bottom: 45px;
}
a.btn-download {
position: relative;
top: 8px;
right: 0;
padding: 8px 20px;
}
.source {
border-top-left-radius: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0 5px;
}
}
@media (max-width: 320px) {
.iconapp {
width: 100%;
}
.detaildownload {
width: 100%;
}
}

<div id="lapakdownload">
<div class="iconapp">
<img alt="" src="IMAGE-ICON-WEBSITE">
</div>
<div class="detaildownload">
<div class="title-wrapper">
<a class="title-download" href="ADDRESS-LINK.HTML">BLAH BLEH BLOH</a>
<span class="versi-app"></span>
</div>
<div class="detail-dev">
<i class="robotijo"></i>
<a class="text-dev">FVCK BY</a>
<a class="text-dev" href="ADDRESS-LINK-HOME">BLAH</a>
</div>
<a class="btn-download" href="ADDRESS-LINK-DOWNLOAD">Download</a>
</div>
<div class="source">
<span class="introsource">Download by </span>
<a class="linksource" href="ADDRESS-LINK-SOURCE">BLAH</a>
</div>
</div>

DEMO: codepen.io/beben-koben/pen/XjJrzY

Bonus:

Breadcrumbs - Gradiator - Responsive Tables: Grid Layout - Morphing faces with CSS - Bulletproof CSS only cross browser custom select - Fancy Animated Input Field - Jurassic Ipsum Generator in JS - Pure CSS Off-Canvas with Bootstrap - Color Palette Generator - Pure css popup box - PhotobloggR - a poto blogging template - Late-load animated gif and provide a pause button - Menu with mix-blend-mode buttons - yaBZRk - Colors Between - Animated gooey social SVG icons (pt 3) - notepadlet - Editing Images in CSS: Combining Techniques - Improve Call To Action With These 20 Code Snippets

Sii yuu :-h

0 Komentar WTF
Mungkin kita sudah tidak asing lagi dengan istilah tooltip! Tapi apakah kalian sudah kenal dengan Toolgif? Sebuah jQuery plugin sederhana yang akan menampilkan gambar berformat GIF dalam format tooltip (judul atau title kala menyorot sesuatu yang di beri tag) :D Seperti yang kita ketahui, gambar dengan format GIF ini lumayan memakan waktu loading. Ada bijaknya di akali dengan trick ini. Sobat tidak perlu khawatir mencari-cari gambar gif-nya, soalnya toolgif ini layanan kreasi dari web giphy.com Giphy site bisa sobat pakai mau buat karya macam apapun, lihat coba halaman labsnya giphy.com/labs

Untuk bisa menggunakan layanan jasa tool-GIF, pada blog sobat sudah harus tertanam script jQuery.

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="toolgif.js"></script>
Cara pemakaiannya cukup mudah. Sobat tinggal sisipkan variabel <span class="toolgif">BLAH</span> Berikut beberapa syntax HTML yg bisa kalian pakai.

Default<p>I am a <span class="toolgif">test</span>.</p>Add your own gif by adding "data-url" in your html<p>Don't use <span class="toolgif" data-url="http://66.media.tumblr.com/0b05c6d462cfd59a25722c7843a12207/tumblr_ob8ivb32NO1v9gbpno1_400.gif">drugs</span>.</p><p>Do you wear <span class="toolgif" data-tag="deal with it">glasses</span>?</p>Set "data-place" value top or bottom. Default is top.<p>You see i am below the <span class="toolgif" data-place="bottom" data-tag="coding">text</span>.</p>Langkah terakhir panggil ke semua itu dengan Activate Toolgif
$(function() { 
$(".toolgif").toolgif(); 
});
You can customize them.
$(".toolgif").toolgif({
    width: 200,
    height: 100,
    speed: 200,
    borderRadius: 5,
    textColor: "initial",
    gifChange: true //If you make it false , one random gif limited by your tag will be found on Giphy.Gif won't change when you hover over your text again unless page reload is made.
});
Resource & demo by:
mburakerman.github.io/toolgif - github.com/mburakerman/toolgif - codepen.io/mburakerman/full/dXwgwN

Bonus:
Material floating button CSS - Fancy menu - Dropdown CSS animation examples - Action Button. Only CSS - yJRNoL - Search text highlight - Ripple Modal Effect

2 Komentar WTF
Ada beberapa update artikel bagi kalian pelanggan web dynamicdrive! Pada halaman dynamic drive CSS library coba tengok sendiri? Sekarang AA Koben mau berbagi pada halaman JavaScript pada web tersebut yang menceritakan bagaimana cara membuat zoom pada gambar dengan jQuery script ;) Proyeknya di beri nama dengan judul Zoomio jQuery in place Image Zoom. Bagi sobat yang ingin memasang fitur ini, konten blog harus banyak berkoar-koar dengan gambar yah :)) Sebelum ke acara tutorial, ada baiknya sobat baca-baca dulu trik serupa yg sudah pernah gue bahas cloud zoom on blog.
Like this...

cutebirds

Or...
Mila saha???

Please dont forget to read this css zoom and product magnification without JavaScript :-bd

Kenapa AA jatuhkan pilihan cara men-zoom image hasil karya dari tim dynamic-drive! Selain script dan CSS yg relatif sedikit (kecil), tetapi kita bisa membuat beberapa opsi pemakaian: standard demos, dynamically changing the zoomable image's src to create an image gallery & calling zoomio() more than once on the same image.

Silahkan sobat download terlebih dahulu bahan-bahannya di halaman zoomio.htm (zoomio.css & zoomio.js) Di dalam code CSS sobat buat lagi kode untuk mengatur lebar dan tinggi image!
#zoomiocontainer { /* container containing enlarged image (native sized image) */
 position: absolute;
 z-index: 1000;
 overflow: hidden;
 background: white;
 visibility: hidden;
}
#zoomiocontainer img { /* image inside zoom container */
 width: auto !important;
 height: auto !important;
 position: absolute !important;
 display: block !important;
}
#zoomiocontainer.mobileclass { /* CSS class added to zoom container on mobile OS */
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

/* CONTOH KODE CSS CUSTOMIZE */
.sampleimage {
 width: 400px;
 height: auto;
}
.blur { 
filter: url(#blur-effect-1); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect-1\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect-1");
-webkit-filter: blur(3px);
}
Kode CSS custom tersebut yg nanti akan di panggil dengan jQuery script?
<script type='text/javascript'>
jQuery(function($){ // on DOM load
 $('.sampleimage').zoomio({
  fadeduration: 450
 })
})
</script>
Syntax HTML seperti berikut<img class="sampleimage blur" src="LINK-GAMBAR" alt="" />Beres deh, dengan begitu sobat sudah mendapatkan trick zoomio versi standar. Kalau mau versi lainnya silahkan datang dan pelajari di source sumber

www.dynamicdrive.com/dynamicindex4/zoomio.htm

Waktu memosting free HTML tester with ACE feature saya kelupaan bonus link! Di sini saja deh bonusnya yah...

Hyro - popcode - jhc-webitor - htmleditor - html live editor - SimpleWebEditor - choped - Html5PreviewEditor - Code editor - edit - code player - qckMeddler - code bit - Editor - HTMLTester - htmledit - codePlayground - fiddly - fiddle - 1797 - htmlbook style editor - HTML HEX EDITOR - html2canvas - live - CodePlayer - MZMobileHtmlEditor - playground - kodeWeave - sandbox

See you :-h
al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE