logo blog

Memasang Photoshop Pixlr Editor Online Di Blog

Memasang Photoshop Pixlr Editor Online Di Blog
Memasang Photoshop Pixlr Editor Online Di Blog

Cara Memasang Photo Editor Online di Blog

Tutorial Memasang Photo Editor Online Di Blog. Kita akan memasang embed dari Pixlr Editor yang fungsinya mirip dengan photoshop, corel draw, paint dan aplikasi editor lainnnya, cuma Photo Pixlr Editor ini di jalankan dalam mode online.

Pixlr Editor adalah editor photo browser yang cukup bagus untuk mendesain sebuah gambar atau tulisan, dilengkapi dengan tool - tool yang lumayan komplit, seperti halnya pada photoshop offline, corel, paint dan lainnya.

Buat kalian yang ingin melihat tampilan dari Photoshop Pixlr Editor Online, bisa liat di tombol button berikut ini.
Demo Photoshop Online

Dan Bagi kalian yang ingin memasangnya di blog, silahkan ikuti tutorial singkat berikut ini...

Cara memasang Editor Poto Di Blog

  • Silahkan login ke blogger.com
  • Lalu kalian buat laman baru, contoh lihat gambar.
  • Memasang Photoshop Pixlr Editor Online Di Blog
    Silahkan beri judul sesuai keinginan kalian, misal Photoshop Pixlr Editor Online
  • Kalo sudahh, silahkan masuk ke mode HTML, contoh lihat gambar.
  • Lalu masukan script berikut ke dalamnya....
  • 
    <style>
    /* The Modal (background) */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */padding-top: 100px; /* Location of the box */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content */.modal-content {background-color: #fefefe;padding: 20px;max-width: 1023px;margin-left: auto;margin-right: auto;border-radius: 12px;}button{display: block;position: relative;width: 120px;padding: 0;margin: 10px 20px 10px 0;font-weight: 600;text-align: center;line-height: 50px;color: #FFF;border-radius: 5px;transition: all 0.2s;background: #00AE68;box-shadow: 0px 5px 0px 0px #007144;border: none;cursor: pointer;}button:hover {margin-top: 15px;margin-bottom: 5px;box-shadow: 0px 0px 0px 0px #007144;}.tombol {width:18%;margin: 0 auto 20px;display: block;}/* The Close Button */.close {color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: #000;text-decoration: none;cursor: pointer;}#x {width: 20px;height: 20px;background-color: #2c2822;position: relative;border-radius: 3px;top: -13px;left: 12px;}#x:after,#x:before{position:absolute;top:9px;left:0px;content:'';display:block;width:20px;height:2px;background-color:red;}#x:after{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#x:before{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}</style>
    </head>
    <body>
    <div class='tombol'>
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
      <!-- Modal content -->
    <div class="modal-content">
      <span id='x' class="close"></span>
      <script type='text/javascript'>
        //<![CDATA[
        document.write('<iframe src="https://pixlr.com/editor/" allowfullscreen="allowfullscreen" style="height: 700px; width: 100%;border: none;"></iframe>');
        //]]>
        </script>
        </div>
      </div>
    
    <script>
      var modal = document.getElementById('myModal');
      var btn = document.getElementById("myBtn");
      var span = document.getElementsByClassName("close")[0];
      btn.onclick = function() {
          modal.style.display = "block";
      }
      span.onclick = function() {
          modal.style.display = "none";
      }
      window.onclick = function(event) {
          if (event.target == modal) {
              modal.style.display = "none";
          }
      }
    </script>
    
  • Kalo sudah, tinggal di publikasikan..
Cukup sekian dan terima kasih, semoga artikel tentang cara memasang tools photoshop pixlr editor online di blogger ini bermanfaat.

Base64 Encoder Tools Online

Base64 Encoder Tools Online
base64 encode tool

free base64 encode tool online

Cara Menyembunyikan Script Dengan Base64 Encoder Base64 adalah sebuah metode untuk melakukan proses encode /atau decode data biner dalam format string ASCII yang diterjemahkan kedalam radix 64. Base64 implementasinya menggunakan char A–Z, a–z, dan 0–9 ditambah 2 char lagi yaitu "+" dan "/“.

Skema encode/decode base 64 umumnya digunakan untuk menyandikan data biner yang akan disimpan dan ditransferkan melalui media yang dirancang untuk menangani data tekstual.

Hal ini digunakan untuk memastikan data tetap utuh tanpa modifikasi selama proses transformasi . Base 64 digunakan juga pada layanan mailing dan penyimpanan data pada XML

Ketika kalian men encode sebuah file css, html, javascript atau gambar menjadi base64, maka kualitas ataupun fungsi dari file tersebut tidak akan berubah. Base64 ini hanya merubah bentuk eksternalnya saja.

Image /gambar yang di convert ke base64, gambar tersebut nantinya bisa di buka dalam mode offline (tanpa harus ada koneksi untuk meloadnya)

Kalian bisa memanfaatkannya untuk backgroun sebuah website /atau blog yang nanti diadak memerlukan banyak data untuk menampilkanya.

Nah bagi kalian yang ingin mencoba tool base 64 encode ini, bisa buka button dibawah ini.

Base64 Encoder Tools Online

Buka toolsnya terus upload filenya ke situ nanti akan otomatis di encode ke base64.

Kalo sudah di encode, kalian tinggal menerapkan scriptnya ke dalam template atau struktur css kalian.

Tapi ada tata cara untuk penempatannya. Berikut scrip agar hasil encode dapat berjalan dengan baik di template sobat.

Cara menyembunyikan script, scc, javascript dengan base64


<img src="data:image/jpeg;base64,Ganti dengan hasil Generated base64"/>

<img src="data:image/gif;base64,Ganti dengan hasil Generated base64"/>

<img src="data:image/png;base64,Ganti dengan hasil Generated base64"/>

<script type="text/javascript" src="data:text/javascript;base64,Ganti dengan hasil Generated base64"></script>

<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ganti dengan hasil Generated base64"/>

.yourClass{background: url('data:image/jpeg;base64,Ganti dengan hasil Generated base64');

<xml><image>data:image/jpeg;base64,Ganti dengan hasil Generated base64</image></xml>

Silahkan ganti tulisan yang sudah saya kasih block hitam, tulisan merah dengan kode hasil encode dari base64.


Kode pembungkus base64 lainnya yang munkin dibutuhkan.


  <image>
   <title>An Image</title>
   <link>https://mastamvan.blogspot.com/</link>
   <url>KODE HASIL ENCODE BASE64</url>
  </image>
  

  <img src="KODE HASIL ENCODE BASE64"/>
  

  <style type="text/css">
   div.image {
    width:            100px;
    height:           100px;
    background-image: url('KODE HASIL ENCODE BASE64');
   }
  </style>
  

  <script src="KODE HASIL ENCODE BASE64" type="text/javascript"></script>
  

  <script type="text/javascript">
   function mastamvan(css){
   var xdx = document.createElement("link");
   xdx.href = "data:text/css;base64,"+css;
   xdx.rel = "stylesheet";
   document.head = document.head || document.getElementsByTagName('head')[0];
   document.head.appendChild(xdx);
   }
   mastamvan("KODE HASIL ENCODE BASE64")
  </script>
  

  <link rel="stylesheet" type="text/css" href="KODE HASIL ENCODE BASE 64"/>
  

Cukup sekian dan terimakasih, semoga artikel dari blog mas tamvan tentang Base64 Encoder Tools Online ii bermanfat.
Jangan lupa kalo bermanfat di sahre ya :)

Credit Template Redirect Ketika Di Hapus Atau Di Rubah Namanya

Credit Template Redirect Ketika Di Hapus Atau Di Rubah Namanya
Cara Menghapus Credit Link Template Yang Di Redirect

Cara Agar Credit Template Tidak Bisa Di Hapus Dengan Auto Redirect

Javascript : Membuat Credits Template Redirect Tidak Bisa Di Ganti Atau Di Hapus Cara Melindungi Credit Link Template dengan Cara Auto Redirect Ke website kita ketika di hapus urlnya atau di ganti namanya dan juga ketika pembungkus divnya di hapus.

Buat sobat blogger yang suka berbagi template free atau premium dan ingin agar credit atau hak cipta kalian tidak bisa di hapus atau di ganti namanya oleh pengguna bisa mengunakan cara yang akan saya share ini.

Dengan script ini kita dapat membuat template dengan credit yang aman, tapi agan juga harus pintar-pintar menyembungikan script ini agar tidak bisa di ganti melalui javascriptnya.

Di tutorial ini juga sekalian saya akan berbagi cara menyembunyikan javascript dengan base64. Sebenarnya base64 bisa digunakan juga untuk menyembunyikan css, CSS Style, javascript, ekstensi .jpeg, ekstensi .gif, ekstensi .png, XML Image.

Saran Baca Sampai Mengerti
Jadi ketika website kalian atau blog kalian di CTRL + U css / javascript tidak akan terlihat karena dengan base64 script kalian akan di encoding ke biner dalam ASCII format string dengan menerjemahkan ke dalam radix-64 representasi. Istilah Base64 berasal dari pengalihan tertentu ke encoding konten MIME.

Nah tanpa basa basi lagi, mari kita lanjut ke tutorialnya.

Cara Melindungi Link Credit Templates Blogger Dengan Javascript

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode </body>
  • Masukan Javascript di bawah ini, tepat di atasnya.

<script type='text/javascript'>
$(document).ready(function(){
            //Let's first setup the redirect
        function redirect(){
            window.location.assign('https://mastamvan.blogspot.com');
        }
            //which things we got to check
        function check(){
            if($('#creditid').length === 0){
                    redirect();
                }
                else if($('#creditlink').length === 0){
                    redirect();
                }
                if($('credits').length === 0){
                    redirect();
                }
                else if($('#creditlink').length === 0){
                    redirect();
                }
                else if($("#creditlink").attr("href") !== "https://mastamvan.blogspot.com"){
                    redirect();
                }
                else if($('#creditlink').text() !== "Blog Mas Tamvan"){
                    redirect();
                } 
            }
        //execute the function on page load
        check();
        //excute the function at the intervals of 5 seconds.
        setInterval(function () {check()}, 5000);
        });
</script>
Silahkan ganti url dan nama yang sudah saya kasih block hitam dengan url yang kalian mau dan nama yang kalian mau.
  • Kalo sudah tinggal save templates.
Tapi kalo scriptnya terbuka seperti itu, percuma kalian protek kalo ga di sembuniin scripnya. Untuk menyamarkan scriptnya agar tidak bisa di ctrl + f silahkan ikuti tutorial berikut ini.

Cara Menyembunyikan script dengan base64


  • Lalu masukan javascript di atas ke dalam kotak yang sudah tersedia.
  • Ingat : Jangan copy dengan kode pembungkusnya. (bagian ini jangan di masukan)
    
    <script type='text/javascript'>
    
    </script>
    
  • Kalo sidah di masukan scriptnya, kalian klik button Encode Sebelah tulisan Base 64
  • Copy semua kodenya terus gabungkan dengan kode berikut...
  • 
    <script type="text/javascript">
    function mastamvan(js){
    var xdx = document.createElement("script");
    xdx.src = "data:text/javascript;base64,"+js;
    xdx.type = "text/javascript";
    document.head = document.head || document.getElementsByTagName('head')[0];
    document.head.appendChild(xdx);
    }mastamvan("YWxlcnQoJ2hlaScp")
    </script>
    
    Silahkan ganti tulisan yang sudah saya kasih block hitam dengan hasil encode base64 tadi, sehingga hasilnya seperti ini...
    
    <script type="text/javascript">
    
    function mastamvan(js){
    var xdx = document.createElement("script");
    xdx.src = "data:text/javascript;base64,"+js;
    xdx.type = "text/javascript";
    document.head = document.head || document.getElementsByTagName('head')[0];
    document.head.appendChild(xdx);
    }mastamvan("JChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKXsKICAgICAgICAgICAgLy9MZXQncyBmaXJzdCBzZXR1cCB0aGUgcmVkaXJlY3QKICAgICAgICBmdW5jdGlvbiByZWRpcmVjdCgpewogICAgICAgICAgICB3aW5kb3cubG9jYXRpb24uYXNzaWduKCdodHRwczovL21hc3RhbXZhbi5ibG9nc3BvdC5jb20nKTsKICAgICAgICB9CiAgICAgICAgICAgIC8vd2hpY2ggdGhpbmdzIHdlIGdvdCB0byBjaGVjawogICAgICAgIGZ1bmN0aW9uIGNoZWNrKCl7CiAgICAgICAgICAgIGlmKCQoJyNjcmVkaXRpZCcpLmxlbmd0aCA9PT0gMCl7CiAgICAgICAgICAgICAgICAgICAgcmVkaXJlY3QoKTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIGVsc2UgaWYoJCgnI2NyZWRpdGxpbmsnKS5sZW5ndGggPT09IDApewogICAgICAgICAgICAgICAgICAgIHJlZGlyZWN0KCk7CiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICBpZigkKCdjcmVkaXRzJykubGVuZ3RoID09PSAwKXsKICAgICAgICAgICAgICAgICAgICByZWRpcmVjdCgpOwogICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgZWxzZSBpZigkKCcjY3JlZGl0bGluaycpLmxlbmd0aCA9PT0gMCl7CiAgICAgICAgICAgICAgICAgICAgcmVkaXJlY3QoKTsKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIGVsc2UgaWYoJCgiI2NyZWRpdGxpbmsiKS5hdHRyKCJocmVmIikgIT09ICJodHRwczovL21hc3RhbXZhbi5ibG9nc3BvdC5jb20iKXsKICAgICAgICAgICAgICAgICAgICByZWRpcmVjdCgpOwogICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgZWxzZSBpZigkKCcjY3JlZGl0bGluaycpLnRleHQoKSAhPT0gIkJsb2cgTWFzIFRhbXZhbiIpewogICAgICAgICAgICAgICAgICAgIHJlZGlyZWN0KCk7CiAgICAgICAgICAgICAgICB9IAogICAgICAgICAgICB9CiAgICAgICAgLy9leGVjdXRlIHRoZSBmdW5jdGlvbiBvbiBwYWdlIGxvYWQKICAgICAgICBjaGVjaygpOwogICAgICAgIC8vZXhjdXRlIHRoZSBmdW5jdGlvbiBhdCB0aGUgaW50ZXJ2YWxzIG9mIDUgc2Vjb25kcy4KICAgICAgICBzZXRJbnRlcnZhbChmdW5jdGlvbiAoKSB7Y2hlY2soKX0sIDUwMDApOwogICAgICAgIH0pOw==")
    </script>
    
  • Nah sekarang tinggal masukan scriptnya ke template sobat.
  • Cari kode </body> dan masukan javascript tadi di atasnya.

Kode Html Credit Templates Dari Blog Mas Tamvan


  • Struktur Credit footernya harus seperti berikut.
  • 
    <credits id="creditid">  
                <a id="creditlink" href="https://mastamvan.blogspot.com">Blog Mas Taghmvan</a>
    </credits>
    
    Silahkan ganti lagi bagian yang sudah saya kasih block hitam....
  • Untuk tempat peletakan dan cssnya pasti kalian sudah hapal.
  • Okeh cukup sampai di sini tutorial dari blog mastamvan..
Semoga artikel tentang cara melindungi hak cipta atau credti pada template dengan auto redirect ini bermanfaat bagi kita semua ya :)
jangan lupa komentarnya ya :) Biar berkah.. Apabila ada yang salah dalam penulisannya mohon di maafkan ya :)

Trik Seo Blog Otomatis Menambahkan Title Dan Alt Pada Semua Image

Trik Seo Blog Otomatis Menambahkan Title Dan Alt Pada Semua Image
Trik Seo Blog Otomatis Menambahkan Title Dan Alt Pada Semua Image

Trik Seo Images auto add title and alt in all image

Cara Otomatis menambahkan atribut title dan alt pada semua image atau gambar di blog. Haloo sobat, pada kesempatan kali ini saya akan berbagi script untuk menambahkan title dan deskripsi pada semua link image di blog.

Untuk Menambahkan alt / Deskripsi dan title pada blog biasanya bisa di lakukan dengan banyak cara.

Pada postingan kali ini saya akan berbagi cara manual dan cara otomatis untuk menambahkan title dan alt di setiap link image yang ada di postingan blog kalian.
Apa bila kalian pernah mengecek blog kalian di situs chkme.com untuk mengecek seberapa seonya blog kalian, pasti pernah mengalami pesan sebagai berikut.
Images: 100 images and 80 missing descriptions
For an image the description is fundamental. Correct this for a successful optimization. Show | Hide
Images: 100 images and 100 missing titles
While not essential and not used to calculate the final score, we suppose that for an image a title can be really useful. Try fixing any error, if required. Show | Hide

Untuk mengatasi masalah images missing descriptions dan images missing titles kalian bisa mengatasinya dengan cara pertama.
Buat kalian yang ingin mencobanya, silahkan ikuti tutorial pada blog mas tamvan ini

Cara Manual Menambahkan Deskripsi /alt dan title pada image blog


  • Silahkan upload gambar kalian ke postingan. Klik Gambarnya lalu pilih propertis. #lihat gambar
  • Trik Seo Blog Otomatis Menambahkan Title Dan Alt Pada Semua Image
  • Nanti akan ada keluar dialog box untuk menambahkan title dan deskripsi /alt pada image kalian.
  • Trik Seo Blog Otomatis Menambahkan Title Dan Alt Pada Semua Image
  • Silahkan masukan title dan alt sesuai isi dari artikel kalian. Kalo sudah, tinggal klik ok aja.
  • Bagi kalian yang ingin menambahkan title dan alt tapi postingan sudah di publikasikan dan males untuk menambahkannya secara manual, di sini saya akan berikan cara otomatisnya...

Cara Otomatis menambahkan title dan alt pada semua link gambar

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML.
  • Cari Code </body> 
  • Lalu masukan Javascript berikut di atasnya.
  • 
     <script type='text/javascript'>  
     //<![CDATA[  
     $(document).ready(function() {  
      $('img').each(function(){  
       var $img = $(this);  
       var filename = $img.attr('src')  
       $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
       $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));  
      });  
     });  
     //]]>  
     </script>
    
    Kalo scriptnya belum bekerja, silahakn masukan script ini di atas kode <head>
    
    <script type='text/javascript'>
    //<![CDATA[
    if (typeof(jQuery) == 'undefined') {
    //output the script (load it from google api)
     document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
    }
    //]]>
    </script>
    
Saya rasa cukup sampai di sini postingan tentang cara menambahkan title dan alt pada image blog ini, semoga bermanfaat.
Apabila ada yang mau ditanyakan, silahkan bertanya di kolom komentar ya :)

Membuat Multi Tab Video Streaming Responsive di Blog

Membuat Multi Tab Video Streaming Responsive di Blog
Membuat Multi Tab Video Streaming Responsive Di Blog

Cara memasang multi tab video streaming responsive di blog

Pada postingan kali ini saya akan berbagi tentang multi tab video streaming. Jadi kalian bisa memasukan 3 (tiga video)bisa untuk pilihan chanel atau bisa untuk menambah vido lanjutannya.

bisa juga kalian menaruh beberapa video dengan kualitas yang berbeda, bisa juga menaruh video dengan server yang berbeda, buat cadangan apa bila uploadan video / film di server yang satu tidak bisa di play.

Demo Tampilan Multi Tab Video Streaming Responsive Di Blog

Nah bagi kalian yang igin memasang multi tab video streaming youtube responsive di blog, silahkan ikuti langkah demi langkah berikut ini.

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML.
  • Cari Code </head>
  • Lalu masukan css dibawah ini tepat di atas kode tadi.
  • 
    <style type='text/css'>
    .tab-buttons{
      overflow:auto;
      text-align: center;
    }
    .tab-buttons button{
      background:#363f45;
      color:#feb41c;
      border:none;
      padding:10px 20px;
      font:700 15px 'segoe ui',sans-serif;
      text-transform:uppercase;
      cursor:pointer;
      -webkit-transition:all 300ms ease-in;
      -moz-transition:all 300ms ease-in;
      transition:all 300ms ease-in;
    }
    .tab-buttons button.active{
        color: #fff;
        background: #5e7c88;
    }
    .tab-content>div{
      padding:20px;
      background:#5e7c88;
      font:400 16px 'segoe ui',sans-serif;
      color:#fff;
    }
    
    .tab-content iframe{width:100%!important;height:400px;}
    @media screen and (max-width:960px){
    .tab-content iframe{max-height:90%}}
    @media screen and (max-width:768px){
    .tab-content iframe{max-height:75%}}
    @media screen and (max-width:600px){
    .tab-content iframe{max-height:60%}}
    @media screen and (max-width:480px){
    .tab-content iframe{height:auto!important;max-height:auto!important}}
    </style>
    
  • Selanjutnya cari kode </body>, masukan javascript berikut di atasnya.
  • 
    <script>
    var myApp=angular.module('tabs',[]);
    myApp.controller('shift_tabs',function(){
      this.activeTab;
      this.makeShift=function(e){
        this.activeTab=e;
      }
      this.isActive=function(f){
        if(f==this.activeTab){
          return true
        }
      }
    });
    </script>
    
    Multi tab video streaming responsive ini memerlukan ajax,jika di template sobat belum terdapat scriptnya, silahkan masukan script berikut di atas kode </head>
    
    <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
    
    Jika di template agan sudah terpasang, lewati script ini.
  • Save template.

Cara memasang multi tab youtube responsive di postingan

  • Buat postingan baru, lalu masuk ke tab html, lihat gambar.
  • Membuat Multi Tab Video Streaming Responsive Di Blog
  • Copy dan masukan html dibawah ini ke dalam postingan..
  • 
    <div class='outer' ng-app='tabs'>
      <div class='tabs' ng-controller='shift_tabs as shift'>
        <div class='tab-buttons' ng-init='shift.makeShift(1)'>
          <button ng-click='shift.makeShift(1)' ng-class='{active:shift.isActive(1)}'>HD 720p</button>
          <button ng-click='shift.makeShift(2)' ng-class='{active:shift.isActive(2)}'>HD 720p</button>
          <button ng-click='shift.makeShift(3)' ng-class='{active:shift.isActive(3)}'>BRRIP 1080p</button>
        </div>
        <div class='tab-content'>
          <div ng-show='shift.isActive(1)'><iframe  src="https://www.youtube.com/embed/v8WjMiodcKo" frameborder="0" allowfullscreen></iframe></div>
          <div ng-show='shift.isActive(2)'><iframe src="https://www.youtube.com/embed/Wjyf44hTDco" frameborder="0" allowfullscreen></iframe></div>
          <div ng-show='shift.isActive(3)'><iframe  src="https://www.youtube.com/embed/CaObO42bjiI" frameborder="0" allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
    
    Silahkan sesuaikan tulisan HD 720p, HD 720p, BRRIP 1080p. dengan tulisan yang kalian mau.
    Ganti juga url yang saya block seperti https://www.youtube.com/embed/v8WjMiodcKo, dengan url video kalian.
  • Selesai, tinggal di publikasikan.

Cukup sekian dan terimakasih, semoga artikel tentang Membuat Multi Tab Video Streaming Responsive Di Blog

Apabila ada yang mau bertanya, silahkan bertanya di kolom komentar.

video youtube responsive

Cara Membuat Widget Pop Up Dengan Waktu Yang Sudah Di Tentukan

Cara Membuat Widget Pop Up Dengan Waktu Yang Sudah Di Tentukan
Cara Membuat Widget Pop Up Denagn Waktu Yang Sudah Di Tentukan

Cara Membuat widget popup card di blog dengan waktu yang sudah di tentukan

membuat Widget Pop dengan waktu yang sudah di tentukan, kali ini saya akan berbagi widget pop up card dengan waktu yang sudah di tentukan untuk memunculkannya disertai dengan tombol clos (keluar).

Sebelumnya saya juga sudah membuat yang hampir mirip namun pada postingan sebelumnya saya tidak menentukan waktu untuk memunculkan widgetnya. Jadi pas blog di load widget akan muncul.

Buat kalian yang ingin melihatnya silahkan simak di poastingan berikut ini. Cara Membuat Widget Pop Up Card Di Blogger

Pada postingan yang ini saya memberikan waktu untuk meload /atau menampilkan widget pop up dengan waktu yang sudah di set.

Nah untuk tutorial cara pemasangannya silahkan simak tutorial dibawah ini.

Widget Popup Card javascript with timer


  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari
  • 
    #myModal{
      display:none;
    }
    #timer{
      visibility: hidden;
    }
    /*Widget Pop Up Card*/
    #mstamvan {
        z-index: 1000;
        position: fixed !important;
        top: 100px;
        left: 50%;
        width: 700px;
        margin-left: -350px;
    }
    #belakang {
        left: 0px;
        background: #000 none repeat scroll 0% 0%;
        opacity: 0.6;
        position: fixed;
        z-index: -1;
        top: 0px;
        height: 100%;
        width: 100%;
    }
    .tulisan {
    font-size: 20px;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 50%;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    display: inline-block;
    padding: 2px 9px;
    text-align: center;
    font-family: arial,sans-serif;
    position: absolute;
    top: -15px;
    right: -20px;
      collor:#344;
      return:false;
    }
    .isinya {
          border-radius: 3px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        width: 700px;
        height: 400px;
        border: 4px solid #FFF;
    }
    
  • Sekarang Masukan Javascript Dibawah Ini Tepat Diatas Kode </BODY>
  • 
    <script>
    var count=-1; // initially -1 as we are having a delay of 1000ms
    var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
    function timer()
    {
      count=count+1;
      if (count >=6) //+1 than the req time as we have a delay of 1000ms
      {
         clearInterval(counter);
         /////////////what code should go here for the modal to pop up??///////////////////////
          $("#myModal").modal();
         return;
      }
        document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
    }
    </script>
    
    if (count >=6) //+1 than the req time as we have a delay of 1000ms Silahkan ubah anga 6 (enam)utuk menentukan berapa menit waktu untuk membuka widget pop upnya.
  • Setelah itu cari kode </head>, dan masukan javascript berikut ini....
  • 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  • Sekarang kita tinggal memasang hatmlnya, Terserah kalian mau pasang di mana. Copy Dan Letakan HTML dibawah ini tepat di atas kode </BODY> atau di atas </head>
  • 
    <span id="timer"></span>
    <div class="modal fade" id="myModal" >
    <div id='mstamvan'>
    <div id='belakang'></div>
    <div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
    <div class='isinya'><a href='https://fb.com/tejasukmana99' target='_blank'><img style="width: 700px; height: 400px;" alt='Mas Tamvan on Facebook!' src='https://4.bp.blogspot.com/-196pX0WJCMw/V2_2x4jUl7I/AAAAAAAAA0w/pA0-YCzd8TEv1tq5YO2dNB-xb0m346ZKQCLcB/s1600/card-widget-design.png'/></a>
      </div>
    </div>
    </div>
    
Silahkan kalian ganti url ini dengan url tujuan kalian
https://fb.com/tejasukmana99
Ganti juga link gambar ini dengan link gambar / image kalian
https://4.bp.blogspot.com/-196pX0WJCMw/V2_2x4jUl7I/AAAAAAAAA0w/pA0-YCzd8TEv1tq5YO2dNB-xb0m346ZKQCLcB/s1600/card-widget-design.png
Dan jangan lupa, widget pop up card ini memerlukan ajax jquery, kalo di template sobat belum ada silahkan tambahkan script ini di atas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


Cukup sekian dan terima kasih, semoga artikel tentang Widget Pop Up Dengan Waktu Untuk Membukanyaini semoga bermanfaat.

Apabila ada yang tidak mengerti silahkan bertanya di kolom komentar, insya allah admin akan bantu.

Cara Membuat Recent Comments Disqus

Cara Membuat Recent Comments Disqus
Cara Membuat Recent Comments Disqus

Cara Membuat Widget Recent Comments Disqus Di Blog

Cara Memasang Recent Comments Disqus Di Blogger, Pada postingan kali ini saya selaku admin blog mas tamvan akan berbagi tutorial memasang sebuah widget komentar disqus di website blogger.

Widget Komentar terbaru ini khusus bagi kalian yang memasang komentar disqus di blognya, jadi kalo kalian memasang widget ini tapi tidak memasang komentar disqus atau tidak ada yang komentar di akun disqus kalian. maka tampilannya akan kosong.

Buat kalian yang memasang komentar bawaan blogger, mungkin nanti saya akan posting d kemudian hari..

Widget komentar disqus ini sangat simple kalian tinggal pasang dan udah jadi tinggal sesuain sendiri tampilannya dengan selera kalian.

Okeh tanpa basa basi lagi mari kita masuk ke tahap pemasangan widget recent comments disqus di blog.

  • Login ke Blogger.com
  • Masuk ke Tataletak , klik Tambahkan Gadget atau add widget
  • Lalu cari dan klik HTML/Javascript, contoh lihat gambar.
  • Cara Membuat Recent Comments Disqus
  • Setelah di klik nanti akan ada tampilan seperti ini...
  • Cara Membuat Recent Comments Disqus
  • Tinggal masukan script dibawah ini kedalamnya....
  • 
    <style scoped="scoped" type="text/css">
    #recent_comments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
    #recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
    #recent_comments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
    #recent_comments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
    #recent_comments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#aaa}
    #recent_comments p.dsq-widget-meta a:hover{color:#ff675c}
    #recent_comments li.dsq-widget-item{margin:0;padding:6px 10px 6px 0;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
    #recent_comments li.dsq-widget-item:last-child{border-bottom:none}
    #recent_comments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
    #recent_comments a.dsq-widget-user:hover{color:#999;}
    #recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
    #recent_comments .dsq-widget-comment p{display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;max-width:100%;}
    #recent_comments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s}
    #recent_comments .dsq-widget-item pre:hover {background:#ffe4ad;}
    #recent_comments .dsq-widget-item pre code{color:#908575;font-size:82%}
    #recent_comments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#ebd099}
    #recent_comments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
    </style>
    <div id="recent_comments" class="dsq-widget">
    <script defer="defer" type='text/javascript'>
    //<![CDATA[
    document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://tejasukmana.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
    //]]>
    </script>
    
Yang saya kasih garis border merah, tulisan ini tejasukmana ganti dengan id komentar disqus kalian ya.
Recent Comments disqus ini memerlukan ajax, buat template kalian yang belum terpasang script ajax, silahkan masukan script ini di atas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

  • Silahkan save dan done, lihat hasilnya.
  • Kalo belum ada komentar silahkan coba anda komentar sendiri di salah satu artikelnya, untuk membukrikan apakah widgetnya berhasil dengan sempurna atau tidak.


Cukup sekian dan terima kasih, semoga artikel dari saya tentang Cara Membuat Recent Comments Disqus Di Bloggerini bermanfaat ya.

Jangan lupa, bila ada kesulitan silahkan bertanya di kolom komentar ya :)

Addmefast Auto Like Follow Share No Spam

Addmefast Auto Like Follow Share No Spam
auto like, faceboo, instagram, follow, twitter

Auto Like, Follow, Comen, Share, Poke, Instagram, Facebook, Twitter

All In One Auto Like Facebook, Auto Follow Instagram, Twitter dll Pada postingan kali ini mas tamvan akan berbagi situs penyedia auto follow instagram, twitter, like facebook dll yang pastinya no spam

Sebelumnya saya juga pernah share situs auto like / foolow ig (instagram) terbaru, bagi kalian yang ingin mencobanya silahkan kunjungi post ini Auto Like Dan Follow Instagram Terbaru 2016 Work mudah mudahan masih work..

Kelebihan Dan Kekuarang situs auto like addmefast .....

kelebihan : Situs ini tidak mengandung spam, karena situs ini menggunakan poin, tidak menggunakan Access Token atau aplikasi yang harus dipasang pada akun kita..

Kekurangan : Kalian harus mencari /atau mempunyai points untuk mendapatkan like, follos, jadi tidak otomatis akan banyak likenya. Semakin banyak poinst semakin banyak like ke status kita..

Nah bagi kalian yang ingin mencoba tools auto like ini, simak cara daftar dan menggunakan addme fast berikut ini..

  • Kalian harus sudah mempunyai akun google (gmail), kalo belum punya, daftar dulu..
  • Silahkan kalian daftar, klik TRY FOR FREE NOW Nanti akan ada tampilan seperti berikut...
  • Addmefast Auto Like Follow Share No Spam
  • Lalu isi data Registrationnya. Kalo sudah klik Sign Up.
    nanti akan ada pesan seperti berikut
  • Congratulations! Your registration completed successfully. To be able to login your account, please check Your email and confirm account.
  • Silahkan buka email kalian, nanti akan ada pesan dari addmefast, klik Click here to confirm
  • Kalo sudah nanti akan ada pesan Confirm Email
    Thank You!
    Your mail was confirmed and points were added to your main balance successfully. Now you can log in to your account and start your promotion.
  • Kalo sudah, kalian login ke addmefastnya. nanti ada pesan Terms & conditions, klik saja I agree.
  • Untuk akunpertama kali daftar akan mendapatkan 50 points.

Cara Menggunakan Addmefast

  • Silahkan Klik Add Site/Page
  • Disitu ada tool untuk memilih tools apa yang akan di gunakan. seperti :
  1. Type : Auto Apa yang ingin di gunakan
  2. Countries : pilih saja WORLDWIDE / terserah kalian.
  3. Title : Judul Apa aja
  4. Page URL : Silahkan isi dengan url / id facebook, instagram, twitter dll kalian
  5. Total Clicks : Biarkan saja off / terseah kalian
  6. Total Clicks : Biarkan off / terseah kalian
  7. CPC : Untuk Poin dari auto like kalian, silahkan pilih 2 - 10 angka.
  • Kalo sudah klik save changes, dan tunggu yang like berdatangan.
Kalo poin kalian habis, yang like ga bakalan ada untuk mendapatkannya kalian harus like, follow status orang dengan cara klik free points lalu pilih mau like, follow biar dapet poin.
Pilih yang poinnya banyak.


Oke lah cukup sampai d sini, ane ngantuk mau tidur dulu :v
Kalo ada yang mau di tanyakan silahkan bertanya di kolom komentar ya :)

Daftar tools yang ada di situs addmefast.


Cukup sekian dan terima kasih telah membaca artikel dari saya tentang. Auto like follow instagram twitter facebook dan sosial media lainnya dengan addmefast ini :)

auto like tanpa token

auto like status facebook

auto like and followers instagram

auto like bahasa indonesia

auto like beranda facebook

auto like buat facebook

auto like follow instagram terbaru

auto follow instagram gratis

auto follow instagram 2015

auto follow instagram android

instagram auto follower bot

instagram auto follow app

auto follow instagram online

auto like instagram 2016

auto follow instagram apk

Cara Menghapus Pratinjau Di Blogger

Cara Menghapus Pratinjau Di Blogger
Cara Menghapus Pratinjau Di Blogger

Bagaimana Cara Menghapus Pertinjauan Di bLog

Cara Menghapus Pratinjau (preview) Di Blogger. Bagaimana cara menghapus Pratinjau (preview) saat melihat postingan yang belum di publikasikan, supaya bisa di lihat dengan sempurna??

Pada postingan kali ini di blog mas tamvan ini akan berbagi cara menghilangkan Pratinjau (preview) di blogger.

Bagi kalian yang suka melihat postingan di Pratinjau (preview) sebelum mempublikasikannya pasti suka melihat di pojok kiri atas bertulisan Pratinjau (preview).

Cara menghilangkan Pratinjau (preview) di blog

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode </body>
  • Lalu Ganti dengan kode ini &lt;!--</body>--&gt;&lt;/body&gt;
  • Save template lalu coba pertinjauan postingan blog n done.
Baca juga postingan lainnya.



Cukup sekian dan terimakasih, semoga artike tentang Cara Menghapus Pratinjau Di Blogger

Jangan lupa untuk tinggalkan jejak di kolom komentar...

Cara Memasang CSS Minifier Dan Beautifier di Blog

Cara Memasang CSS Minifier Dan Beautifier di Blog
Cara Memasang CSS Minifier Dan Beautifier Di Blog

Cara Memasang Tools Css Compresor Dan Beautifer Di Blog

Memasang Tools CSS minifier Dan Beutifer di blog. Berbagi tools untuk merapihkan css yang berantakan /atau di compres bisa juga digunakan untuk mencompres /atau minifier css.

Jadi tools ini bisa digunakan untuk merapihkan dan juga mencompres css kalian. Supaya menjadi lebih seimple / menjadi rapih, beraturan.

sebelumnya saya juga sudah berbagi tools All In One, tools untuk merapihkan. HTML, CSS, JavaScript bagi kalian yang ingin mencobanya silahkan kunjungi postingan ini..... HTML, CSS, Javascript Compressor Dan Beautifier

Dan masih banyak tools lainnya, silahkan cek di daftar tools online di blog mas tamvan ini. Tools Online

Nah kali ini saya akan berbagi tools untuk dipasang pada blog kalian, barang kali ada yang mau wkwk. Tampilan dari tools ini sebagai berikut.

CSS Minifier And Beautifier


Silahkan di coba dulu, kalo tertarik untuk memasangnya, ikuti tutorial berikut ini.

Cara Simple Memasang CSS Minifier Dan Beautifer Di Blog


  • Login dulu ke Blogger.com
  • Buat postingan baru / laman baru
  • Lalu masuk ke tab HTML
  • Cara Memasang CSS Minifier Dan Beautifier di Blog
  • Lalu pastekan Script Css minifier dan beautifer ini kedalamnya.

<script src='https://cdn.rawgit.com/senchalabs/cssbeautify/master/cssbeautify.js'></script>
<div class="bungkus">
  <div class='judul' >
    <strong>CSS Minifier And Beautifier</strong>
        </div>
  <div class="isinya">
    <textarea placeholder="INPUT TO MINIFIER CSS" class="cssmin-in cssbeaut-out col-sm-5"></textarea>
    <textarea placeholder="INPUT TO BEAUTIFIER CSS" class="cssmin-out cssbeaut-in col-sm-5 "></textarea>
  </div>
  <div class="cssmin-btn col-sm-2">
      <button class="btn btn-primary minify" type="submit">Minify CSS</button>
      <button class="btn btn-primary clear-code" type="submit">Clear All</button>
      <button class="btn btn-primary beautify" type="submit">Beautify CSS</button>
      </div>
</div>
<script>
$(function() {
  /*
   * Just some styling helpers
   */
  var inputWidth = $('.col-sm-5').width();
  $('textarea').height(inputWidth*(3/4));
  $('.cssmin-btn').css('margin-top',inputWidth*(1/3)+'px');
  $('.cssbeaut-btn').css('margin-top',inputWidth*(1/3)+'px');
  
  /*
   * 
   */
  $('.minify').click(function() {
    var input = $('.cssmin-in').val();
    var output = input
      .replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g, '')
      .replace(/\s*\{\s*/g, '{')
      .replace(/\s*\}\s*/g, '}')
      .replace(/\s*\:\s*/g, ':')
      .replace(/\s*\;\s*/g, ';')
      .replace(/\s*\,\s*/g, ',')
      .replace(/\s*\~\s*/g, '~')
      .replace(/\s*\>\s*/g, '>')
      .replace(/\s*\+\s*/g, '+')
      .replace(/\s*\!\s*/g, ' !');
    $('.cssmin-out').val(output);
  });
  $('.clear-code').click(function() {
    $('.cssmin-in').val('');
    $('.cssmin-out').val('');
  });
  $('.beautify').click(function() {
    var beaut_input = $('.cssbeaut-in').val();
    var beaut_output = cssbeautify(beaut_input, {
      indent: '    ',
      openbrace: 'end-of-line',
      autosemicolon: true
    });
    $('.cssbeaut-out').val(beaut_output);
  });
  $('.beaut-clear-code').click(function() {
    $('.cssbeaut-in').val('');
    $('.cssbeaut-out').val('');
  });
});
</script>
<style>
.bungkus{max-width:540px;margin:0 auto;background:#2c3e50;width:100%;}.judul{width:100%;margin:5% auto 0 auto;background:#16A085;font-family:'Lobster',cursive;position:relative;-moz-box-shadow:0 4px 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.4);box-shadow:0 4px 4px rgba(0,0,0,0.4);}.judul>strong{text-align:center;color:#fff;padding:18px;width:91%;display:block;font-size:24px;}.isinya{width:100%;height:361px;margin:0 auto;}.cssmin-in{width:47%;height:361px !important;float:left;margin-top:0px;margin-left:2px;}.cssmin-out{width:47%;height:361px !important;float:right;margin-top:0px;margin-right:2px;}textarea{width:99%;height:357px;border:none;resize:none;}.cssmin-btn{width:100%;background:#2C3E50;margin:0 auto !important;}.minify{width:15%;margin:2%;}.beautify{width:15%;margin:2%;}.btn{width:30%;border:0px;background:#f26262;padding:12px;color:white;cursor:pointer;border-radius:6px;}.btn:hover{background:#5ba435;}
</style>
Tools ini memerlukan ajax jquery. Jika di template anda belum ada / toolsnya tidak bekerja. Masukan Script Berikut di atas </head>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' ></script>
  • Jangan lupa kasih judul, lalu publikasikan. dan selesai....


Cukup sekian dan terimakasih, semoga artikel tentang Cara Memasang CSS Minifier Dan Beautifier di Blog
Jangan lupa tinggalkan jejak anda di kolom komentar :)

CSS Material Design Box Shadows

CSS Material Design Box Shadows

CSS Google Material Design Box Shadows

Pada postingan kali ini saya akan berbagi material design box shadow dari google

Bagi kalian yang sedang men desain blognya untuk menjadi seperti yang disarankan oleh mbah google. Dengan desain baru yang diberi nama dengan Material Design, desain yang tipis dengan animasi yang membuat tampilanya simple dan elegan.

Sebelumnya saya juga sudah berbagi postingan tentang material design, bagi kalian yang ingin melihatnya silahkan kunjungi postingan berikut ini.......
Membuat Material Design Button Ripple Effect Di Blogger
Nah bagi kalian yang ingin membuat shadow pada tag div atau yang lainnya, silahkan copy css box shadow dibawah ini. Pilih salah satu yang kalian suka.

5 css google material design box shadow

1

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
2

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
3

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
4

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
5

.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Silahkan ganti .card-1, .card-2, .card-3, .card-4 dan .card-5
Sesuai dengan tag class /atau id css kalian.

Cukup sekian dan terimakasih, semoga artikel tentang CSS Material Design Box Shadows ini bermanfaat.
Jangan lupa komentarnya ya :)

Pure css Responsive Dropdown Menu Navigation

Pure css Responsive Dropdown Menu Navigation
Pure css Responsive Dropdown Menu Navigation

Membuat Menu Navigation Responsive Only CSS

Membuat menu dropdown responsive dengan css. Kali ini blog mas tamvan akan berbagi menu navigation bar yang simple dan juga responsive.

Menu Navigation Bar ini sangat mobile friendly, cocok buat blog kalian yang kebanyakan visitornya dari handpone (HP), yang tentunya akan memudahkan para pengunjung untuk melihat isi dari menu bar.

Sebelumnya saya juga sudah berbagi tutorial Memasang Menu Navigation Bar Responsive

Bedanya menu bar yang saya share kali ini... menu ini hanya menggunakan css untuk tampilan yang simple dan tidak memberatkan loading blog..
yang lain juga sih tidak terlalu memberatkan, karena jquery / javascript yang digunakan tidak terlalu banyak /atau berat.

Pure css Responsive Dropdown Menu Navigation Okeh lah, langsung saja ke tutorial cara pemasangannya ke blog.....
  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.
  • 
    .toggle,[id^=drop]{display:none;}nav{margin:0;padding:0;background-color:#1565C0;}nav ul li:hover{background:#2576D2;}
    #logo{display:block;padding:0 30px;float:left;font-size:20px;line-height:60px;}
    nav:after{content:"";display:table;clear:both;}
    nav ul{float:right;padding:0;margin:0;list-style:none;position:relative;}
    nav ul li{margin:0px;display:inline-block;float:left;background-color:#1565C0;}
    nav a{display:block;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none;}
    nav ul li ul li:hover{background:#2576D2;}
    nav a:hover{background-color:#2576D2;}
    nav ul ul{visibility:hidden;opacity:0;position:absolute;transform:translateZ(0);transform:translateY(10%);transition:all 0.5s ease 0s,visibility 0s linear 0.5s;}
    nav ul li:hover>ul{display:inherit;visibility:visible;opacity:1;transform:translateX(0%);transition-delay:0s;}
    nav ul ul li{width:170px;float:none;display:list-item;position:relative;}
    nav ul ul ul li{position:relative;top:-60px;left:170px;}
    li>a:after{content:'+';}
    li>a:only-child:after{content:'';}
    @media all and (max-width:808px){
     nav ul ul{display:none;position:absolute;top:60px;}
     nav ul li:hover>ul{display:inherit;}
     #logo{display:block;padding:0;width:100%;text-align:center;float:none;}
     nav{margin:0;}
     .toggle+a,.menu{display:none;}
     .toggle{display:block;background-color:#368DF0;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none;border:none;}
     .toggle:hover{background-color:#0E4584;}
     [id^=drop]:checked+ul{display:block;width:100%;}nav ul li{display:block;width:100%;}
     nav ul ul .toggle,nav ul ul a{padding:0 40px;}
     nav ul ul ul a{padding:0 80px;}
     nav a:hover,nav ul ul ul a{background-color:#000000;}
     nav ul li ul li .toggle,nav ul ul a,nav ul ul ul a{padding:14px 20px;color:#FFF;font-size:17px;}
     nav ul li ul li .toggle,nav ul ul a{background-color:#212121;}
     nav ul ul{float:none;position:static;color:#ffffff;visibility:visible;opacity:1;transform:none;}
     nav ul ul li:hover>ul,nav ul li:hover>ul{display:none;}
     nav ul ul li{display:block;width:100%;}
     nav ul ul ul li{position:static;}}
    @media all and (max-width:330px){
     nav ul li{display:block;width:94%;}}
    
  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah </header> atau <body>. Atau terserah kalian mau ditaro dimana.
  • 
            <nav>
            <div id="logo">Your Logo here</div>
    
            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <!-- First Tier Drop Down -->
                        <label for="drop-1" class="toggle">WordPress +</label>
                        <a href="#">WordPress</a>
                        <input type="checkbox" id="drop-1"/>
                        <ul>
                            <li><a href="#">Themes and stuff</a></li>
                            <li><a href="#">Plugins</a></li>
                            <li><a href="#">Tutorials</a></li>
                        </ul> 
    
                    </li>
                    <li>
    
                    <!-- First Tier Drop Down -->
                    <label for="drop-2" class="toggle">Web Design +</label>
                    <a href="#">Web Design</a>
                    <input type="checkbox" id="drop-2"/>
                    <ul>
                        <li><a href="#">Resources</a></li>
                        <li><a href="#">Links</a></li>
                        <li>
                           
                        <!-- Second Tier Drop Down -->        
                        <label for="drop-3" class="toggle">Tutorials +</label>
                        <a href="#">Tutorials</a>         
                        <input type="checkbox" id="drop-3"/>
    
                        <ul>
                            <li><a href="#">HTML/CSS</a></li>
                            <li><a href="#">jQuery</a></li>
                            <li><a href="#">Other</a></li>
                        </ul>
                        </li>
                    </ul>
                    </li>
                    <li><a href="#">Graphic Design</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
    
    Silahkan taro html menu navigationnya sesuai keinginan kalian... Kalo kurang paham silahkan bertanya di kolom komentar.
    #untuk logo
    
    <div id="logo">Your Logo here</div>
    
    #untuk link dan judul
    Silahkan ganti tanda pagar (#) dengan link kalian dan home dengan judul yang kalian mau
    
    <li><a href="#">Home</a></li>
    Contoh
    <li><a href="http://mastamvan.blogspot.com/">Blog Mas Tamvan</a></li>
    

Cukup sekian dan terimakasih, semoga artikel tentang Responsive Menu Navigation Drop Down With CSSini bermanfaat.

Jangan lupa tinggalkan jejak d kolom komentar ya :)

HTML, CSS, Javascript Compressor Dan Beautifier

HTML, CSS, Javascript Compressor Dan Beautifier
HTML, CSS, Javascript Compressor Dan Beautifier

HTML, CSS, Javascript Minify And Maxifier

Tools Online untuk merapihkan dan juga mencompres html, css dan javascript secara online kali ini blog mas tamvan akan berbagi sebuah tools online yang berfungsi untuk.....

Tools All In One ini fungsinya buat mencompres html, compres css dan javascript. Selain untuk mencompres, tools ini bisa juga untuk mengembalikannya menjadi seperti semula atau bisa digunakan untuk merapihkan html, merapihkan css dan javascript yang berantakan.

Jadi dengan tools ini kalian dapat memperkecil ukuran css, javascript dan juga html, yang dapat membuat loading blog tidak terlalu berta [loading blog menjadi cepat dan ringan]..

Bagi kalian yang ingin mencoba tools online ini, silahkan klik buttons dibawah ini...


Sebelumnya saya juga sudah berbagi tools yang fungsinya sama untuk mencompres /atau Minify html dan css. Untuk melihat tools yang ini silahkan kunjungi di link berikut... Free Tool Untuk Merapihkan HTML Dan CSS Online

Dan tentunya jangan lupa untuk mampir ke postingan blog mas tamvan yg lainnya ya :)
Cukup sekian dan terimakasih, semoga artikel tentang cara merapihkan dan cara mencompres html, javascript dan css ini bermanfaat bagi kita semua.

Jangan lupa tinggalkan jejak kalian di kolom komentar untuk mempermudah saya mengunjungi balik blog kalian :)
Dan selamat berpuasa, semoga amal ibadahnya diterima :)

Membuat Material Design Button Ripple Effect Di Blogger

Membuat Material Design Button Ripple Effect Di Blogger
material-button-ripple-effect-for-blogger

Cara Membuat Button Material Design

android material button ripple effect Cara membuat tombol button download atau demo dengan efect click ripple pada butonnya.

Hallo sobat, pada postingan kali ini saya akan berbagi button dengan animasi ripple ketika di klik, akan ada animasi seperti air yang di sentuh. Kira-kira seperti itu lah.

Untuk kalian yang ingin melihat seperti apa tampilan dari button material design ini, silahkan kunjungi link berikut ini.

Nah jika kalian ingin memasangnya, silahkan ikuti tutorial singkat berikut ini....

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari

.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;}
  • Sekarang Masukan Javascript Dibawah Ini Tepat Diatas Kode </BODY>

<script type='text/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");
    });
});
</script>
Button Material Design ini memerlukan ajaq, kalo di template sobat belum terpasang / efek butonnya ga berfungki.
Masukan script ajaq jquery berikut di atas </head>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  • Sekarang, save template.

Memasang Button Material Design Ke Postingan


  • Keluar dari Edit Html, masuk ke postingan.
  • Lalu pilih tab HTML, contoh lihat gambar
  • postingan-mode-html
  • ketika kalian ingin menambahkan tombol button, sepert link keluar tambahkan class="ripple red" di dalam kode link .red sesuaikan dengan warna yang kalian mau..
  • Contoh :
    
    <a class="ripple red" href="Link Disini">Demo</a>
    
  • Ini kode html untuk warna background yang sudah ada. Silahkan dipilih sesuka hati.

      <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>
  • Selesai, save dan publikasikan. Oye

Cukup sekian dan terimakasih, semoga artikel tentang cara Membuat Material Design Button Ripple Effect Di Bloggerini bermanfaat.

Jangan lupa tinggalkan jejak anda di kolom komentar untuk mempermudah admin mengunjungi balik blog kalian :)