Akhirnya Bootstrap 4 Release

Setelah lama menunggu akhirnya Bootstrap 4 release juga, mereka menyebut Bootstrap 4 Alpha dimana booststrap menerangkan dalam blognya, banyak yang mendukung untuk bootstrap v4 ini. bisa baca disini
http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/ 
berikut ini beberapa attirubut yang dijelaskan pada blog bootstrap

• Overhauled spacing utilities to use a numerical tiering (to avoid confusion with grid tiers).
• Continued refactoring efforts to replace markup-specific selectors with classes across several components (including pagination, lists, and more). Still more to do here with additional components.
• Reverted media queries and grid containers from rems to pixels as viewports are not affected by font-size. See #17403 for details. We’ve got a ton of grid work left, too. Feel free to follow along with #18471.
• Reverted .0625rem width borders to 1px for more consistent component borders that avoid zoom and font-size bugs across browsers.
• Renamed .img-responsive to .img-fluid to avoid future confusion on the various responsive image solutions out there.
• Replaced ZeroClipboard with clipboard.js for Flash-independent copy buttons.
• Inputs and buttons now share the same border variable to ensure components are always sized similarly.
• Updated all pseudo-element selectors to use the spec’s preferred double colon (e.g., ::before as opposed to :before).
• Cards now have outline variants and mixins to support extending base classes further.
• Utility classes for floats and text alignment now have responsive ranges. This means we’ve dropped the non-responsive classes to avoid duplication.
• Added support for jQuery 2.
• And hundreds more Sass improvements, bug fixes, documentation updates, and more.

sekarang kita sudah bisa install melalui package manager seperti bower, composer, npm ,meteor nuget,
tapi hingga saat artikel ini ditulis pada website resminya bootstrap 4belum tersedia versi compilednya
bootstrap 4
oke yang ingin berkenan atau mau mencoba fitur baru pada bootstrap 4 silahkan gan! mumpung masih anget :D

Cara screenshot halaman web dengan mozilla firefox

Halo sobat blogger hari ini saya akan mencoba membahas cara screenshot halaman web di browser mozilla firefox, caranya cukup mudah dan simple! tampa harus install addons atau aplikasi lain
biasanya kita kalau mau screenshot cukup menekan print screen pada keyboard, namun hasilnya tidak seperti yang kita inginkan, sebelum membahas cara screensot di mozilla terlebih dahulu saya beri tahu cara-cara screenshot.

Cara Pertama Menggunakan Keyboard

       Menggunakan keyboard, pencet screenshot pada keboard kamu kemudian buka aplikasi paint  klik start kemudian ketik paint.

paint sudah tersedia di  versi Windows OS  setelah pain terbuka tinggal paste saja, atau tekan CTRL+V

Cara Kedua Menggunakan Aplikasi Snipping Tools

    Aplikasi Snipping Tools sudah tersedia di windows OS, dengan mengklik start kemudiak ketik snip maka akan terlihat aplikasi snipping toolnya,

cara menggunakan snipping tool lebih mudah dan simple, ditambah lagi dengan snipping tool kita dapat men-seleksi atau memilih yang akan kita akan ambil gambarnya.

Cara Ke-tiga Screenshot Menggunakan Mozilla Firefox
nah cara screenshot dengan mozilla hanya mengambil gambar web saja, tida untuk gambar dekstop, dengan cara ini kita dapat mengambil gambar website dengan ukuran penu atau juga bisa dengan konten tertentu.
screenshot di mozilla firefox menggunakan perintah screenshot
berikut caranya :
tekan CTRL+F2 pada browser mozilla maka akan muncul developer toolbarnya, pada developer toolbar
ketik screenshot --fullpage untuk mengambil gambar website ukuran penuh dan kualitas gambar bagus.

 tapi jika ingin mengambil konten tertentu ketik screenshot --selector kemuan attributnya sebagai contoh

diatas saya mencoba menggambil gambar menu navbar saya dan hasilnya seperti dibawah ini


baiklah sekian dulu toturial dari saya cara screenshot halaman website menggunakan mozilla dengan kulitas gambar bagus, dan juga beberapa cara screenshot screen, jika sobat blogger ada pertanyaan dapat langsung comment dibawah ini. terimakasih! salam Blogger

cara menyembunyikan tag konten berdasarkan device di bootstrap

bagi sobat blogger yang sudah familiar dengan bootstrap berikut ini saya akan membagi tutorial cara menyembunyukan suatu div sesuai device yang digunakan pengunjung agar website yang kita buat lebih effesien tampilannya, umumnya pengunjunga banyak menggunakan smartphone untuk browsing nah di website kita kadang ada konten-konten yang tidak support dengan device yang digunakan pengunjung tampilan kontennya bisa amburadul kalau dibuka lewat hand phone, nah dengan menggunakan bootstrap kita tidak perlu menambahkan media query pada file css, bootstrap sudah menyiapkan attribut class yang dapat menyembunyikan konten berdasarkan device pengunjung
sebagai contoh table, nah umumnya tabel tidak responsive dengan device hand phone walaupun sekarang sudah banyak plugin yang membuat tebel pada website menajdi responsive, akan tetapi masih ada kelemahannya, jadi kita bisa mengatur tebel hanya terlihat pada user yang menggunakan tablet atau dekstop.

berikut beberapa attribut class pada bootstrap yang sudah tersedia yang dapat kita gunakan
hidden-xs handphone 768px
hidden-sm  tablet (≥768px)
hidden-md untuk dekstop yang resolusi layar  ≥992px
hidden-lguntuk dekstop yang resolusi layar  ≥1200px 
nah bagaimana cara penerapannya? berikut caranya:


perhatikan script HTML dibawah ini

<div class="container">

   <h3>Example teble bootstrap</h3>

  <div class="hidden-xs hidden-sm">

    <h1>this content visible with phone device or tablet</h1>

    <p>table is not visible in this device</p>

  </div>



  <div class="hidden-md hidden-lg">

    <h1>this content visible with phone device</h1>

    <table class="table">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>john@example.com</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>mary@example.com</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>july@example.com</td>

      </tr>

    </tbody>

  </table>

  </div>

<div>

pada script HTML diatas terdapat div dengan attribut class hidden-xs dan hidden-sm dimana atrribut tersebut akan dihidden jika terlihet dengan menggunakan handphone atau tablet
untuk contoh demo dapat dilihat dibawah ini

See the Pen ZQmGVK by Budi Setiawan (@bizanniusz) on CodePen.

Keterangan :
pada contoh demo diatas table terlihat hanya pada ukuran device hand phone atau tablet, karena ukuran dari with demo  ini sama seperti tablet atau hand phone table akan terlihat, dan sebaliknya jika kita membuka menggunakan dekstop table tidak akan tampil ( di sembunyikan ).
tags: tutorial bootstrap, belajar bootstrap, cara menggunakan bootstrap

script adblock killer dan cara memasangnya pada blog

hari ini saya akan mencoba membahas tentang adblock killer, adblock killer merupakan script untuk memblock konten dari adblock yang terpasang di browser, bagi sobat blogger yang memiliki iklan pada blog pasti tau tentang adblock,

untuk mendapatkan scriptnya bisa langsung kunjungi website resmi disini oke jika mau script yang pada blog ini yang sudah dimodifikasi sedikit berikut scriptnya

<style>

#yd57{z-index:999 !important;position:fixed !important;position:fixed;top:-3px;left:1px;width:100%;height:100%;background-color:#fff;opacity:.95;filter:alpha(opacity=95);display:block;padding:10% 0}
#yd57 *{text-align:center;margin:0 auto;display:block;filter:none;font:bold 18px Titillium web, sans-serif;text-decoration:none}
#yd57 ~ *{display:none}</style><div id="yd57">
<div>
Please enable JavaScript!<a href="http://goo.gl/kOWD3"></a></div>
</div><script>window.document.getElementById("yd57").parentNode.removeChild(window.document.getElementById("yd57"));(function(l,m){function n(a){a&&yd57.nextFunction()}var h=l.document,p=["i","s","u"];n.prototype={rand:function(a){return Math.floor(Math.random()*a)},getElementBy:function(a,b){return a?h.getElementById(a):h.getElementsByTagName(b)},getStyle:function(a){var b=h.defaultView;return b&&b.getComputedStyle?b.getComputedStyle(a,null):a.currentStyle},deferExecution:function(a){setTimeout(a,2E3)},insert:function(a,b){var e=h.createElement("div"),d=h.body,c=d.childNodes.length,g=d.style,f=0,k=0;if("yd57"==b){e.setAttribute("id",b);g.margin=g.padding=0;g.height="100%";for(c=this.rand(c);f<c;f++)1==d.childNodes[f].nodeType&&(k=Math.max(k,parseFloat(this.getStyle(d.childNodes[f]).zIndex)||0));k&&(e.style.zIndex=k+1);c++}e.innerHTML=a;d.insertBefore(e,d.childNodes[c-1])},displayMessage:function(a){var b=this;a="abisuq".charAt(b.rand(5));b.insert("<"+a+'><p><h4>Mohon Adblock anda di matikan sebentar, kami sangat berterimakasih atas kerjasamanya! </h4></p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr7nITzq7yW33eRmQZliYdO-qNtc-5lH_q8gjs9B5_fPLcGsAMBz75FvvsoKKmJmXjNj0SDqQwqCS8NP-JZeYjokEPQccBjOsZztXREOCj6avHLbDv1egkHpJVOD-NBxB_ehcgPDryV6dx/s1600/Disable-Adblock-in-Blogger-Blogs.png" /> <a href="http://goo.gl/kOWD3"></a> <p>silahkan baca-baca artikel gratis kami</p>'+("</"+a+">"),"yd57");h.addEventListener&&b.deferExecution(function(){b.getElementBy("yd57").addEventListener("DOMNodeRemoved",function(){b.displayMessage()},!1)})},i:function(){for(var a="AdPanelLogo,ad_B1,adbox1,adsbox4,rtmod_ad,sidebar-ads,topAdArea,ad,ads,adsense".split(","),b=a.length,e="",d=this,c=0,g="abisuq".charAt(d.rand(5));c<b;c++)d.getElementBy(a[c])||(e+="<"+g+' id="'+a[c]+'"></'+g+">");d.insert(e);d.deferExecution(function(){for(c=0;c<b;c++)if(null==d.getElementBy(a[c]).offsetParent||"none"==d.getStyle(d.getElementBy(a[c])).display)return d.displayMessage("#"+a[c]+"("+c+")");d.nextFunction()})},s:function(){var a={'pagead2.googlesyndic':'google_ad_client','js.adscale.de/getads':'adscale_slot_id','get.mirando.de/miran':'adPlaceId'},b=this,e=b.getElementBy(0,"script"),d=e.length-1,c,g,f,k;h.write=null;for(h.writeln=null;0<=d;--d)if(c=e[d].src.substr(7,20),a[c]!==m){f=h.createElement("script");f.type="text/javascript";f.src=e[d].src;g=a[c];l[g]=m;f.onload=f.onreadystatechange=function(){k=this;l[g]!==m||k.readyState&&"loaded"!==k.readyState&&"complete"!==k.readyState||(l[g]=f.onload=f.onreadystatechange=null,e[0].parentNode.removeChild(f))};e[0].parentNode.insertBefore(f,e[0]);b.deferExecution(function(){if(l[g]===m)return b.displayMessage(f.src);b.nextFunction()});return}b.nextFunction()},u:function(){var a=".jp/ads/,/ad_counter_,/adratio.,/ads-03.,/ads-banner,/adsummos2.,_ad_choices.,-468x70.,/728x90top.,_728_90.".split(","),b=this,e=b.getElementBy(0,"img"),d,c;e[0]!==m&&e[0].src!==m&&(d=new Image,d.onload=function(){c=this;c.onload=null;c.onerror=function(){p=null;b.displayMessage(c.src)};c.src=e[0].src+"#"+a.join("")},d.src=e[0].src);b.deferExecution(function(){b.nextFunction()})},nextFunction:function(){var a=p[0];a!==m&&(p.shift(),this[a]())}};l.yd57=yd57=new n;h.addEventListener?l.addEventListener("load",n,!1):l.attachEvent("onload",n)})(window);</script>

Jika belum paham cara memasangnya berikut step by step cara pemasangan adblock killer
Step 1
masuk kehalaman layout
Step 2
pilih tambah widget,

kemudian pilih HTML/javascript

pastekan code diatas kedalamnya dan save

dan selamat adblock killer sudah dipasang
mudah-mudahan bermanfaat, jangan lupa tinggalkan komentar sobat, Salam Blogger

tag: cara disable adblock di blog, cara matikan adblock, cara mendeteksi adblock, script mematikan adblock

cara memperbaiki tampilan youtube error di mozilla

agan pernah mengalami error tapilan youtube atau sedang mengalami error  di mozilla seperti gambar dibawah ini?

padahal sudah install ulang tapi tampilannya masih tetap error 
itu disebabkan browser gagal melaod file stylesheet (css), banyak yang mengira ini karena jaringan kita lemot? padahal buka web lain lancar, dan mengira DNSnya sedang error, dan sebaginya, beberapa cara yang saya sebutkan mungkin sudah pernah dicoba namun hasilnya tetap tidak bisa, nah bagai mana cara memperbaikinya? berikut caranya


1. pada adresbar ketik about:support   kemudian refresh firefox

 dan cuba buka lagi youtubenya pasti sudah normal! sekian tutorial singkat saya mudah-mudahan bermanfaat

tags: tampilan youtube error, fix tampilan youtube