LIVE ARTICLE
Loading...
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

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'/>
    <!-- SEO Meta Tag -->
    <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 == &quot;item&quot;'>
      <meta expr:content='data:blog.pageName' name='keywords'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.searchLabel'>
        <meta content='noindex,nofollow' name='robots'/>
      </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <b:if cond='data:blog.isMobile'>
      <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <!-- SEO Title Tag -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <title>
        <data:blog.title/>
      </title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <title>
        <data:blog.pageName/>
        |
        <data:blog.title/>
      </title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <title>
        Archive for
        <data:blog.pageName/>
      </title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <title>
        <data:blog.pageName/>
      </title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.searchLabel'>
        <title>
          <data:blog.title/>
          -
          <data:blog.pageName/>
        </title>
      </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <title>
        Page Not Found
      </title>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <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

Berikut ini adalah beberapa cara atau solusi bagi yang sedang mengalami trouble pada saat menginstall wamp server versi terbaru, wamp server tidak jalan,logo wamp server warna orange, itu disebabkan karena Apahce belum jalan, nah saya akan kasi solusi tepat untuk kamu yang sedang mengalaminya. pertama saat install wamp server muncul error MSVCR100.dll missing, hal tersebut karena kamu belum menginstall Visual Studio 2012 : VC 11 vcredist_x64/86.exe  Visual Studio 2012 VC 11 vcredist_x64/86.exe kamu dapat mendownloadnya di situs resminya disini, dan install sesuai versi windows yang kamu gunakan

saat mencoba akses localhost di browser malah error

jika kamu belum menginstall vcredist_x64/86.exe maka icon wamp server saat diklik kanan atau kiri tidak akan muncul apa-apa, akan tetapi setelah kamu install vcredistnya nah akan muncul menu pilihan seperti gambar dibawah ini,

lansung masuk saja pilih Apache > Service > Install Service , dan kemudian nanti muncul pemberitahuan windows firewall pilih Allow, nah, setelah itu start ulang all service wamp servernya seperti gambar dibawah ini,

 logonya akan berubah menjadi hijau menandakan wamp server sudah bisa digunakan, tinggal buka localhost.


kamu sekarang sudah bisa mengakses localhostnya


Tag: Wamp Server Error Windows 7, Wamp server cannot run, wamp server, wamp server missing MSVCR100.dll