Terains

LIVE ARTICLE

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

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

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

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

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

jika kita membuat sebuah blog memang agak sulit untuk menghendle sendiri, dari membuat tampilan,pernak pernik blog dan postingan, sampai mengumpulakan informasi agak sedikit rumit jika dikerjakan sendiri dan memakan waktu yang lama, jadi di blogger kini sudah tersedia fitur dimana kita bisa menginvite teman melalui email untuk dijadikan penulis atau author di blog kita berikut langkah-langkahnya

1. pastikan email yang dituju sudah pernah terdaftar di blogger
2. masuk ke setting > pada bagian blog author tambahkan author dengan mengklik +add authors

3. buka email author untuk menerima invite yang kita kirim

4. nah sekarang email yang dituju sudah bisa mengakses blog kita, namun dengan menu teratas, hanya bisa posting tergantung admin blognya mau menempatkan sebagai author atau admin,

nah itulah tutorial dari saya bagai mana cara menambahkan author pada blog, sekarang kamu memiliki user lain yang akan membantu kamu membuat sebuah postingan, semoga bermanfaat, jangan lupa tinggalkan komentarnya, salam

Tag: cara membuat author pada blog

Berbagi informasi itu indah, kali ini saya akan kasi tau nih website penyedia tempalte responsive untuk blogger yang gratis, tempat yang dibagikan cukup keren dan enak dilihat, termaksud template blog ini nih, saya download di website www.themexpose.com, dan sekarang mengenai template responsive.
apa kamu sudah tau atau mengenal apa itu template responsive?
mungkin kita sudah agak familiar dengan kata template responsive seiring perkembangan teknologi, perubahan bahasa program juga ikut berubah mengikuti perkembangan teknologi, mengenai template responsive adalah istilah dari sebuah layout web/blog yangmana layoutnya dapat berubah mengikuti besar resolusi monitor/layar pada perangkat yang digunakan seperti halnya menggunakan monitor dengan resolusi 1440x900 atau 1360 768 dan HP canggih smartphone sudah parti berbeda layar screennya, namun web/blog dapat menyesuaikan layounya sesuai perangkat yang digunakan sehingga web/blog tempak rapi dan teratur.
mengapa memilih template responsive?
beberapa penjelasan diatas, penggunaan template responsive sangat efektif digunakan disaat sekarang ini,mengingat banyaknya user yang menggunakan hp smartphone atau tablet dan sebagainya, jadi kita tidak perlu membuat versi web untuk handphone karena layout akan sendirinya menyesuaikan layoutnya untuk perangakt tertentu
bagaimana membuat website/blog responsive?
beberapa developer webs kini sudah membuat sebuah framewrok css yang opnesourc dimana kita dapat membuat template website/blog menjadi responsive, diatara dari framework css tersebut adalah

Demikian artikel saya, mohon maaf jika ada kata-kata kurang pas atau silap, mohon dimaklumi

Tag: template responsive, web responsive, framework css

Meta tag pada blogger, kenapa harus pasang meta tag pada blogger?, ini merupaka salah satu tips blog SEO untuk cepat terindex oleh google dan selurus artikel blog juga cepat terindex oleh blogger, dengan memberi meta tag di template blog kita.

sedikit penjelasan tentang meta tag dan fungsinya, sebagai mana dari beberapa sumber meta tag murupakan salah satu elemen bahasa pemograman web HTML yg berfungsi untuk memberi informasi kepada search engine tentang blog dan artikel pada blog kita maupun dalam sebuah halam website, meta tag dapat berupa deskripsi/keterangan blog atau web dimana meta tag diletakkan tepat dibawah element <head>, jadi sangat perlu dipasang pada blog kita, langsung saja kita mulai memasangnya pada blog kita

Code berikut sudah di edit sebelumnya, jadi tidak ada yang parlu di rubah lagi tinggal copy paste pada tempatnya

1. Masuk ke template > Edit Html
kemudian cari code <head> dan pastekan code berikut tepat dibawahnya

<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>
<data:blog.title/>
</title>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<title>
<data:blog.pageName/>
|
<data:blog.title/>
</title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<title>
Archive for
<data:blog.pageName/>
</title>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<title>
<data:blog.pageName/>
</title>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<title>
<data:blog.title/>
-
<data:blog.pageName/>
</title>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>
Page Not Found
</title>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<title>
<data:blog.pageTitle/>
- All Post
</title>
</b:if>
</b:if>

kemudian save dan meta tag sudah siap dipasang

Tag: Blog Seo, Meta tag, memasang meta tag

Terains

Popular Posts

Labels

Flickr Images

Blog Archive

Most Trending