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
Beberapa faktor yang menyebalkan ketika ingin melakukan download suatu file kita dihadapkan dengan: short url, ads link, dead link, quota exceeded and etc. Dengan adanya hambatan² tersebut sudah pasti tindakan yang mesti dilakukan mencari cara/trik agar kita bisa melewatinya! AA Koben sekarang akan mencoba berbagi trik bagaimana cara download file dari web google drive yang terkena imbas quota exceeded (quota habis) Karena link DL memakai jasa drive.google.com, sobat tentu harus punya account google. Kalau tidak punya, yaaa tidak tahu juga apakah trik ini akan berhasil :))

Default link share akan terlihat sebagai berikuthttps://drive.google.com/file/d/0B2bcpf9RLMRDOUd0dTNScjJoc2M/view?usp=sharingTampilan pada browserdrive-google-viewJika tombol download di klik dan anda tidak terkena imbas quota exceeded maka file dapat langsung di unduh. Tetapi jiga sobat terkena imbas spt berikut

Default link download akan terlihat sebagai berikuthttps://docs.google.com/uc?id=0B2bcpf9RLMRDOUd0dTNScjJoc2M&export=downloaddocs-google-downloadMunculah kata-kata

Sorry, you can't view or download this file at this time.

Too many users have viewed or downloaded this file recently. Please try accessing the file again later. If the file you are trying to access is particularly large or is shared with many people, it may take up to 24 hours to be able to view or download the file. If you still can't access a file after 24 hours, contact your domain administrator.Google - Help - Privacy & Terms
Bagaimana solusinya!!!

Login pada account Google Drive kalian. Pada sisi kiri coba pilih salah satu file (My Drive) dan klik. Maka address url pada browser akan berubah menjadihttps://drive.google.com/drive/folders/xxxxXXXxXxxXxXXXxxxLihat alamat link yg akan di downloadhttps://drive.google.com/file/d/0B2bcpf9RLMRDOUd0dTNScjJoc2M/view?usp=sharingkopi deretan angka & huruf yg berjumlah ± 28 karakter0B2bcpf9RLMRDOUd0dTNScjJoc2MKemudian rangkai menjadihttps://drive.google.com/drive/folders/0B2bcpf9RLMRDOUd0dTNScjJoc2MAkan terbuka halaman spt brktgoogle-driveLalu klik tombol Recent yg ada di sebelah kiri. Jika tidak terjadi lag, maka akan tampak file baru dengan judul suara super lovebird jawa timur.mp3 (contoh) Lalu sorot dan pilih dan lakukan klik kanan pada suara super lovebird jawa timur.mp3 pilih Make a copy Akan ada file baru dengan judul Copy of suara super lovebird jawa timur.mp3 Klik kanan pada Copy of suara super lovebird jawa timur.mp3 pilih Download.

Beres tinggal download file :)

Tahan tombol Ctrl pada keyboard, klik kiri pada file suara super lovebird jawa timur.mp3 and Copy of suara super lovebird jawa timur.mp3 lalu klik kanan dan pilih Remove (buat ngehapus). Demikian trik cara bagaimana mendownload file di drive.google.com yang terkena efek quota exceeded alias abis quota :-h

0 Komentar WTF
Tutorial lawas berbicara tentang news ticker Jika ingin penjelasan apakah yang di maksud dengan news ticker, silahkan baca via wikipedia :D AA Koben akan berbagi info bagaimana cara membuat recent post blogger using jQuery! Kalau sobat tertarik dengan yang memakai JavaScript murni, anda bisa meluncur ke alamat www.kompiajaib.com/2015/06/animated-news-ticker-recent-posts.html. Seperti yg gue bilang, tuts ini terhubung dengan jQuery script! Template sodara harus sudah tertanam script:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>Kalau sudah ada abaikan langkah ini jangan pasang lagi, lanjut ke langkah berikutnya.
.tickerwrapper {
position: relative;
}
.tickhead {
background: #dd4c39 url(http://1.bp.blogspot.com/-ZgHDwAw_JBU/VIHPDuGqE-I/AAAAAAAABsM/vXmfcaqsL9s/) no-repeat;
background-position: 125px 10px;
background-size: 20px;
position: absolute;
line-height: 41px !important;
height: 40px;
width: 125px;
padding: 0 40px 0 5px;
text-align: center;
color: #fff;
font: 600 15px 'pt sans', sans-serif;
z-index: 1;
top: 0;
left: 0;
}
.tick-er {
padding-left: 180px;
height: 40px !important;
overflow: hidden;
background: #555;
line-height: 40px !important;
}
.tick-er ul {
padding: 0;
margin: 0;
list-style: none;
}
.tick-er ul li a {
color: #fff;
font: 400 15px 'pt sans', sans-serif;
text-decoration: none;
}
Silahkan atur-atur en edit-edit kode CSS itu.
<script type='text/javascript'>//<![CDATA[
!function(t,e,n){function i(i,o){function a(){h.elem.children().css("margin",0).children().css("margin",0),h.elem.css({position:"relative",height:h.opts.height,overflow:"hidden"}),h.targ.css({position:"absolute",margin:0}),setInterval(function(){d()},100)}function r(){h.timer=setInterval(function(){1==h.winFocus&&l(h.opts.direction)},h.opts.interval),t(h.opts.controls.toggle).addClass("et-run").html(h.opts.controls.stopText)}function c(){clearInterval(h.timer),h.timer=0,t(h.opts.controls.toggle).removeClass("et-run").html(h.opts.controls.playText)}function l(t){var e,n,i;if(h.elem.is(":visible")){"up"==t?(e=":first-child",n="-=",i="appendTo") : (e=": last-child",n="+=",i="prependTo");var o=h.targ.children(e),s=o.outerHeight();h.targ.stop(!0,!0).animate({top:n+s+"px"},h.opts.speed,h.opts.easing,function(){o.hide()[i](h.targ).fadeIn(),h.targ.css("top",0),d()})}}function u(t){c(),l("up"==t?"up":"down")}function p(){var e=0,n=h.elem.css("display");h.elem.css("display","block"),h.targ.children().each(function(){e+=t(this).outerHeight()}),h.elem.css({display:n,height:e})}function f(e){var n=0;h.targ.children(": lt("+h.opts.visible+")").each(function(){n+=t(this).outerHeight()}),1==e?h.elem.stop(!0,!0).animate({height:n},h.opts.speed):h.elem.css("height",n)}function d(){"auto"==h.opts.height&&0!=h.opts.visible?(anim="init"==arguments.callee.caller.name?0:1,f(anim)):"auto"==h.opts.height&&p()}var h=this;return h.opts=t.extend({},s,o),h.elem=t(i),h.targ=t(i).children(":first-child"),h.timer=0,h.mHover=0,h.winFocus=1,a(),r(),t([e,n]).off("focus.jqet").on("focus.jqet",function(){h.winFocus=1}).off("blur.jqet").on("blur.jqet",function(){h.winFocus=0}),1==h.opts.mousePause&&h.elem.mouseenter(function(){h.timerTemp=h.timer,c()}).mouseleave(function(){0!==h.timerTemp&&r()}),t(h.opts.controls.up).on("click",function(t){t.preventDefault(),u("up")}),t(h.opts.controls.down).on("click",function(t){t.preventDefault(),u("down")}),t(h.opts.controls.toggle).on("click",function(t){t.preventDefault(),0==h.timer?r():c()}),{up:function(){u("up")},down:function(){u("down")},start:r,stop:c,options:h.opts}}var o="easyTicker",s={direction:"up",easing:"swing",speed:"slow",interval:2e3,height:"auto",visible:0,mousePause:1,controls:{up:"",down:"",toggle:"",playText:"Play",stopText:"Stop"}};t.fn[o]=function(e){return this.each(function(){t.data(this,o)||t.data(this,o,new i(this,e))})}}(jQuery,window,document),$(function(){$(".news-ticker").each(function(){var t=$(this).attr("data-domain"),e="http://www."+t+"/feeds/posts/summary/?max-results=99&alt=json-in-script",n=$(this);n.append('<div class="tickerwrapper"><span class="tickhead">Latest News</span><div class="tick-er"><ul></ul></div></div>'),$.ajax ({type:"GET",url:e,async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){for(var e=1;e<t.feed.entry.length;e++){for(var i=0;i<t.feed.entry[e].link.length;i++)if("alternate"==t.feed.entry[e].link[i].rel){var o=t.feed.entry[e].link[i].href;break}var s=t.feed.entry[e].title.$t,a='<li><a href="'+o+'">'+s+"</a></li>";$(".tick-er ul",n).append(a)}$(".tick-er").easyTicker({direction:"up",easing:"swing",speed:"slow",interval:2e3,height:"auto",visible:0,mousePause:1})}})})});
//]]></script>
Pasang script itu, terserah mau telanjang macam begituh atau dihostingkan terlebih dahulu.

Pada script dengan tulisan /feeds/posts/summary/?max-results=99 Gantikan nominal 99 sesuai dengan kebutuhan. Makin besar nominal, makin lama loading :p
Untuk pemasangan/pemanggilan sobat tinggal membuat syntax HTML sebagai berikut<div class='news-ticker' data-domain='DOMAIN-OR-NAMA-BLOG'></div>Contoh<div class='news-ticker' data-domain='beben-koben.blogspot.com'></div>Silahkan pasang mau berapa biji, bebas asalkan jangan sama domainnya :))

Artikel ini saya comot dari bloggerever How to add recent post news ticker widget in Blogger using jQuery www.bloggerever.com/2014/08/how-to-add-recent-post-news-ticker.html Jika kalian kunjungi site tersbut, maka cari artikel dengan judul "Download free Magazine style template for Blogger" Sikat template keren punya \m/

Permiooosss...:-h

0 Komentar WTF
Sebagai developer sudah seharusnya memahami ilmu yang dikuasainya. Jika berkecimpung dengan bahasa HTML ya harus sudah paham, kalau bahasa CSS musti begitu juga dan lain sebagainya. Cerita punya alur AA Koben akan berbagi tutorial bagaimana cara memberitahukan support CSS code! Salah satu web yg menjadi rujukan dalam kasus ini adalah www.caniuse.com Dengan memberikan link info kepada website tersebut, sobat tidak usah lagi capek-capek menuliskan/memberitahukan bahwa kode CSS ini mendukung terhadap mozilla, google chrome, safari, etc. Plus opsi link ke website dokumen www.w3.org
Contoh begini...

Ketika kita akan memberitahukan salah satu properti HTML5 (Video), kita cukup menuliskan dengan syntax HTML seperti berikut <get-caniuse>video</get-caniuse> Nanti akan muncul ikon kecil di sebelah kanan tulisan video, tinggal klik ikon tersebut maka akan muncul gambar support browser engine plus link info ke 2 web yg gue bicarakan tadi.
Demo & source: codepen.io/tevko/full/OVQeyP - github.com/tevko/getCaniuse

get-caniuse {
display: inline-block;
}
get-caniuse * {
box-sizing: border-box;
}
get-caniuse .caniuse-card {
max-width: 500px;
position: absolute;
border: solid 1px #555;
background-color: #fff;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 15px #000;
}
get-caniuse .caniuse-card p {
margin-top: 0;
}
get-caniuse .caniuse-card .title {
font-weight: bold;
font-size: 21px;
}
get-caniuse .caniuse-card .caniuse-close {
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
font-size: 19px;
}
get-caniuse .caniuse-card .caniuse-supports {
padding: 15px 0;
text-align: center;
}
get-caniuse img {
cursor: pointer;
padding-left: 3px;
vertical-align: middle;
}
get-caniuse .CIU_bs_supported {
width: 75px;
height: 75px;
}

Silahkan hias-hias sendiri kode css dasar itu.

<script type='text/javascript'>//<![CDATA[
(function(){window.CIU={settings:{elems:'get-caniuse',cIco:'http://www.google.com/s2/favicons?domain=caniuse.com',CIUData:'',dataURL:'https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json',objFormatted:false},init:function(){this.createLinks();},createLinks:function(){var s=this.settings,cElems=document.querySelectorAll(s.elems);Array.apply(null,cElems).forEach(function(elem,idx){elem.addEventListener('click',this.getCIUData.bind(elem,elem.innerHTML,s));var i=new Image();i.src=s.cIco;i.style.width='15px';i.style.display='inline-block';elem.appendChild(i);}.bind(this));},getCIUData:function(string,s,e){if(!this.classList.contains('caniuse-disabled')){s.CIUData===''?CIU.retrieveJSON(string,this):CIU.getClosestMatch(string,this);}},retrieveJSON:function(string,elem){var s=this.settings,request=new XMLHttpRequest();request.open('GET',s.dataURL,true);request.onload=function(){if(request.status>=200&&request.status<400){s.CIUData=JSON.parse(request.responseText).data;this.getClosestMatch(string,elem);}else{this.fallBack(string);}}.bind(this);request.onerror=function(){this.fallBack(string);}.bind(this);request.send();},fallBack:function(string){window.open('http://caniuse.com/#search='+string);},getClosestMatch:function(string,elem){if(elem.querySelector('.caniuse-card')!==null){elem.querySelector('.caniuse-card').style.display='block';elem.classList.add('caniuse-disabled');}else{var s=this.settings,strFormat=string.replace(/-/g,'').toUpperCase(),regexp=new RegExp('\('+strFormat+'\)'),keys=Object.keys(s.CIUData),requestedKey;if(!s.objFormatted){keys.forEach(function(key){var keyFormatted=key.replace(/-/g,'').toUpperCase();s.CIUData[keyFormatted]=s.CIUData[key];delete s.CIUData[key];console.log(key)});s.objFormatted=true;keys=Object.keys(s.CIUData);}
keys.forEach(function(key){if(key.match(regexp)){requestedKey=key;}});requestedKey===undefined&&this.fallBack(string);this.makeCard(s.CIUData[requestedKey],elem,string);}},makeCard:function(obj,elem,string){var getSupportData=function(){var stats=obj.stats,checking=[stats.ie,stats.firefox,stats.chrome,stats.safari,stats.opera,stats.edge],supported='';
stats.ie.name = 'http://2.bp.blogspot.com/-6GVR7a3BA7s/US3hF1BSAuI/AAAAAAAACs4/a52CcQyQLV4/s100-c/';
stats.firefox.name = 'http://2.bp.blogspot.com/-Sii5gQhgLr0/UXbcgYQbTRI/AAAAAAAAADI/bhaBg4xQE4w/s100-c/';
stats.chrome.name = 'http://2.bp.blogspot.com/-s5_r3quOORs/TtdgvZO7jwI/AAAAAAAAB6M/o3wRYiQUIIc/s100-c/';
stats.safari.name = 'http://2.bp.blogspot.com/_3uomXQRHOSE/SMaLSOJzs9I/AAAAAAAAAII/KXngJd59C2Y/s100-c/';
stats.opera.name = 'http://2.bp.blogspot.com/-gWKKJtBSMZA/VPLvGAXir5I/AAAAAAAABBQ/iNXy5ov5SR0/s100-c/';
stats.edge.name = 'http://2.bp.blogspot.com/-F5aQdYlFlNo/VUlbv4NYwFI/AAAAAAAAA9o/TSZb9eYw2No/s100-c/';
checking.forEach(function(check){Object.keys(check).forEach(function(key){if(supported.indexOf('<img class="CIU_bs_supported" src="'+check.name+'">')===-1&&(check[key]==='y'||check[key]==='p'||check[key]==='a x #2'||check[key]==='a #1')){supported+='<img class="CIU_bs_supported" src="'+check.name+'">';}});});return supported;};var card='<div class="caniuse-card">'
+'<p class="title">'
+obj.title
+'</p>'
+'<p class="description">'
+obj.description
+'</p>'
+'<a class="speclink" href="'+obj.spec+'" target="top">W3C Spec</a>'
+'<div class="caniuse-supports">'+getSupportData()+'</div>'
+'<a class="speclink" href="http://caniuse.com/#search='+string+'" target="top">See more on CanIUse.com...</a>'
+'<span class="caniuse-close">X</span>'
+'</div>';elem.innerHTML+=card;elem.classList.add('caniuse-disabled');elem.addEventListener('click',function(e){if(e.target.classList.contains('caniuse-close')){elem.classList.remove('caniuse-disabled');elem.querySelector('.caniuse-card').style.display='none';}});}};})();CIU.init();
//]]></script>

Simpan JavaScript itu sebelum/di atas tag </body> (Recommended) atau tag </head>

Pemakaian ketika akan melakukan postingan, harus pakek syntax <get-caniuse>BLAH-BLEH-BLOH</get-caniuse>

Browser Detection - codepen.io/brandonkennedy/pen/XbQdbW
Kalau kepengen link info via wikipedia, you dapat baca get wikipedia headline using jquery wiki.

0 Komentar WTF
Malas mosting sebenarnya :)) Dalam postingan sebelumnya what your choice bootstrap or material design google gue memberikan satu link extra source ke halaman w3schools yang berbicara tentang "faster and more beautiful responsive web sites inspired by google material design" Nah, AA Koben sudah buatkan versi offline halaman tersebut bagi kalian! Tetapi hanya berjalan pada browser mozilla ;)) Bagi yg mau silahkan download Google Material Design.zip downloads.ziddu.com/download/24947130/Google-Material-Design.zip.html Ekstrak file.zip kemudian buka pada address bar browser file dengan nama W3.CSS Home.htmW3-CSS Dari codepen dengan nama user Akshay Nair, saya mencomot beberapa tutorial ringan. Yang akan ane bahas yaitu tentang web dock
#dock {
position: fixed;
bottom: 0;
width: 100%;
min-height: 30px;
}
#dock .dock {
margin: 0 auto -17px;
transform-style: preserve-3d;
transform: translateY(100px);
perspective: 5000px;
perspective-origin: 50% 0;
transition: all 0.4s ease;
text-align: center;
}
#dock .dock ul {
list-style-type: none;
padding: 0;
z-index: 100;
margin-bottom: -119px;
transform: translateZ(100px);
}
#dock .dock ul li {
display: inline-block;
}
#dock .dock ul li a {
display: inline-block;
background: #fff;
border: 2px solid #aaa;
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align: center;
text-decoration: none;
transition: all 0.4s ease;
text-align: center;
line-height: 50px;
font-size: 13px !important;
color: #555;
font-family: Helvetica,sans-serif;
}
#dock .dock ul li a:hover ~ .label {
opacity: 1;
top: -20px;
}
#dock .dock ul li span.label {
position: absolute;
top: -5px;
margin-left: -50px;
opacity: 0;
transition: all 0.2s ease;
color: #888;
}
#dock .dock .back-dock {
width: 400px;
margin: 0 auto -80px;
z-index: -1;
height: 200px;
background: #333;
transform: rotateX_(260deg);
border-radius: 10px;
}
#dock .dock .back-dock ul {
text-align: center;
opacity: 0.2;
-webkit-filter: blur(3px);
filter: url(#blur-effect);
/********
This Is Snippet CSS Blur for Mozilla
http://beben-koben.blogspot.com/2013/12/snippet-inline-css-filter-for-mozilla-ii.html
http://codepen.io/beben-koben/pen/ckKzh
*********/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect");
transform: scale(1.01, 2);
}
#dock .dock .back-dock ul a {
cursor: default;
}
#dock:hover > .dock {
transform: translateY(0px);
}
Tolong ganti kode transform: rotateX_(260deg); tanpa garis bawah X_( (bentrok ama kode emot)

<div id='dock'>
<div class='dock'>
<ul>
<li><a href='#'>Home</a><span class='label'>Home</span></li>
<li><a href='#'>Post</a><span class='label'>Link1</span></li>
<li><a href='#'>Project</a><span class='label'>Link2</span></li>
<li><a href='#'>About</a><span class='label'>Link3</span></li>
<li><a href='#'>Contact</a><span class='label'>Link4</span></li>
</ul>
<div class='back-dock'>
<ul>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a></li>
<li><a>E</a></li>
</ul>
</div>
</div>
</div>
Jika efek CSS tidak berjalan, maka code CSS harap di fix/prefix terlebih dahulu :D
Demo and other source:
>> WebDock - codepen.io/phenax/pen/LVqLdK
>> Custom Context Menu - codepen.io/phenax/pen/BNGjBO
>> Pure CSS Sidemenu - codepen.io/phenax/pen/GJPwKg
>> Fixed-width buttons - www.steliosconstantinides.com/FormButtons
>> FontCDN - fontcdn.org
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9 0

FACEBOOK PAGE