Home Archives for May 2016

Saturday, May 28, 2016

Cara Memblokir Iklan Telkom

Diterbitkan

Beberapa hari ini saya dibuat kesal dengan salah satu provider ISP, ya sebut saja telkom. Saya selaku pelanggan ISP tersebut menyayangkan adanya injeksi iklan yang muncul saat browsing yang diberikan pihak ISP tersebut. Sudah bayar mahal, koneksi kadang tidak menentu, dan dapat iklan pula. Siapa yang tidak jengkel?
Setelah saya coba searching mengenai iklan ini dan mendapatkan beberapa cara alternatif untuk memblokir injeksi iklan ini. Oke berikut cara yang saya gunakan untuk memblok iklan yang muncul di sistem operasi yang saya gunakan saat ini yaitu windows 10.

1. Buka notepad dengan Run as administrator.
2. Pada menu Notepad, pilih File lalu Open / Ctrl+O.
3. Arahkan atau Cari file hosts di C:windows/system32/drivers/etc/hosts ( Bila tidak muncul, ganti type dari .txt ke all files).
4. Setelah muncul, dibagian paling bawah tambahkan beberapa kode berikut :

127.0.0.1 cfs.u-ad.info
127.0.0.1 u-ad.info
127.0.0.1 cfs2.uzone.id
127.0.0.1 uzone.id
127.0.0.1 v3.mercusuar.uzone.id
127.0.0.1 mercusuar.uzone.id

5. Lalu save dan tutup file nya.
6. Silahkan clear cache browser anda, lalu browsing kembali seperti biasa.

Begitulah langkah sederhana untuk memblok iklan injek dari telkom, untuk cara yang saya jelaskan diatas hanya bekerja di sisi client / pengguna ISP tersebut, untuk para developer web mungkin harus mengakali dengan memodifikasi tag html seperti menambahkan spasi di awalan dan akhiran tag body atau menggunakan SSL/HTTPS. Sekian mengenai langkah sederhana cara memblok injeksi iklan telkom apabila ada kesalahan dalam penulisan, penulis memohon koreksiannya. Silahkan dicoba dan semoga bermanfaat.

(New Update) Free Material Design Template Blogger - MDFostrap

Diterbitkan
mdfostrap new

material design blogspot template

MDFostrap Blogger Templates is a simple & clean designed with material design style and with a great responsive design. "Please don't" use this theme for a blog with a bad niche or AGC Blog

MDFostrap Material Design Template Feature :
  • Responsive Design
  • SEO Friendly
  • Mobile Friendly
  • Breadcrumbs
  • Awesome LightBox
  • Ads Ready
  • Auto Blog Post Summarize
  • Social Share Button
  • Subscribe Form
  • 2 Column
  • Inline Edited
  • CSS3 + HTML Dropdown Menu
  • Featured Category By Label
  • Contact Page
  • Custom Error 404 Page
Update
22 Juni 2016- Clean Post
- Color Schemes
- Subscribe Color Schemes
- Awesome Search box
- Simple popular posts

Wednesday, May 4, 2016

Material Design Button Ripple Effect Code Snippet

Diterbitkan
material design button css

Fostrap - Tutorial how to make button material design, because the material has its own style and design I think is very good and simple.

The HTML

<!DOCTYPE html>
<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Material Design Button Ripple Effect Snippet">
    <title>Material Design Button Ripple Effect</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="header">
      <h1 class="title">Material Design Button Ripple Effect</h1>
    </div>
    <div class="container btn-space">
      <a class="ripple red" href="#">Button</a>
      <a class="ripple pink" href="#">Button</a>
      <a class="ripple blue" href="#">Button</a>
      <a class="ripple cyan" href="#">Button</a>
      <a class="ripple teal" href="#">Button</a>
      <a class="ripple yellow" href="#">Button</a>
      <a class="ripple orange" href="#">Button</a>
      <a class="ripple brown" href="#">Button</a>
      <a class="ripple grey" href="#">Button</a>
      <a class="ripple black" href="#">Button</a>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>

The CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.header {
  background-color: #2196F3;padding:55px 0px;text-align:center;margin-bottom: 10px;
}
.header > .title {
  line-height: 48px;
    font-size: 48px;color: #FFF;margin-top: 0px;margin-bottom: 0px;
}
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}
@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}
@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}
.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}
.btn-space{
    text-align: center;
}
.ripple {
    text-align: center;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.ripple:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
.red {
    background-color: #F44336;
}
.pink {
    background-color: #E91E63;
}
.blue {
    background-color: #2196F3;
}
.cyan {
    background-color: #00bcd4;
}
.teal {
    background-color: #009688;
}
.yellow {
    background-color: #FFEB3B;
    color: #000;
}
.orange {
    background-color: #FF9800;
}
.brown {
    background-color: #795548;
}
.grey {
    background-color: #9E9E9E;
}
.black {
    background-color: #000000;
}

The Javascript

$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
Note : If you've got a button yourself, you simply add the class .ripple
Subscribe to: Posts (Atom)