logo blog

Cara Membuat Komentar Blog Menjadi Show Hide

Cara Membuat Komentar Blog Menjadi Show Hide
Cara Membuat Komentar Blog Menjadi Show Hide

Cara Membuat Show Hide Pada Komentar Blog

Menjadikan Komentar Blog Show Hide Valid HTML5

Cara Merubah komentar blog menjadi singkat dengan tombol show hide. Manfaat merubah komentar blog menjadi show hide ini tidak terlalu banyak, hanya membuat blog menjadi singkan jika ada banyak komen pada blognya, mungkin bisa juga membuat loading blog jadi lebih cepat karena tidak terlalu banyak meload image di komentar blog.

Cara Membuat Komentar Blog Menjadi Show Hide

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.

a.openpanel{width:100%;text-decoration:none;text-transform:uppercase;font-family:'Exo 2',sans-serif;font-weight:300;font-size:20px;display:inline-block;position:relative;text-align:center;color:#00c7ec;border:1px solid #00c7ec;border-radius:5px;line-height:3em;padding-left:5em;padding-right:5em;box-shadow:0 0 0 0 transparent;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;transition:all .2s ease-in}a.openpanel em{display:block;position:absolute;top:15px;right:15px;border:6px solid transparent;border-top-color:#fff}a.openpanel:hover{color:#fff;box-shadow:0 0 30px 0 rgba(0,199,236,.5);background-color:#00c7ec;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}a.openpanel:hover:before{-webkit-animation:shine .5s 0s linear;-moz-animation:shine .5s 0s linear;animation:shine .5s 0s linear}a.openpanel:active{box-shadow:0 0 0 0 transparent;-webkit-transition:box-shadow .2s ease-in;-moz-transition:box-shadow .2s ease-in;transition:box-shadow .2s ease-in}a.openpanel:before{content:'';display:block;width:0;height:86%;position:absolute;top:7%;left:0;opacity:0;background:#fff;box-shadow:0 0 15px 3px #fff;-webkit-transform:skewX(-20deg);-moz-transform:skewX(-20deg);-ms-transform:skewX(-20deg);-o-transform:skewX(-20deg);transform:skewX(-20deg)}@-webkit-keyframes shine{from{opacity:0;left:0}50%{opacity:1}to{opacity:0;left:100%}}@-moz-keyframes shine{from{opacity:0;left:0}50%{opacity:1}to{opacity:0;left:100%}}@keyframes shine{from{opacity:0;left:0}50%{opacity:1}to{opacity:0;left:100%}}
  • Selanjutnya, cari kode </head> lalu masukan javascript dibawah ini tepat diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('kerenPanel')
.before('<a class="openpanel" href="#" title="Comments">' + openPanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
return false;});
});
//]]>
</script>

Kalau sudah tinggal save dan lihat hasilnya.
Jangan lupa mampir ke tutorial lainnya di blog saya ya.


Cukup sekian dan terimakasih, semoga artikel tentang cara membuat komentar blog menjadi show hide ini bermanfaat.

Encrypt Tool Online Untuk Menyembunyikan Script

Encrypt Tool Online Untuk Menyembunyikan Script
encrypt tool-online

Cara Menyembunyikan Script HTML dengan Encrypt

Tool Untuk Menyembunyikan Script HTML, Javascript Dan yang lainnya Dengan Encrypt.

Bagi kalian yang suka membuat atau mendesain template dan membagikannya secara free atau premium pastinya tidak ingin hak cipta dari template yang kalian buat dirubah dengan nama orang yang memakai template tersebut.Untuk Mengatasi / mengecoh agar susah di edit kalian bisa menggunakan Encrypt Tools Online ini.

Dengan Encrypt Tool Online ini kalian bisa menyembunyikan html, javascript agar  script / html di template yang kalian buat sedikit membuat orang yang mau merubahnya menjadi kesulitan.

Contoh Script yang mau di encrypt
Masukan javascript beserta pembungkusnya. Contoh :
<script type='text/javascript'>
kode kalian
</script>

Nah bagi kalian yang ingin menggunakan tools ini, silahkan klik butoon dibawah untuk membuka toolnya.

Tools Encrypt Online Untuk Menyembunyikan Script HTML dan yang lainnya

 

Masukan Javascript Kamu Disini - - Published by : Blog Mas Tamvan

Untuk cara penempatannya, kalian bisa taro di tempat yang tadi kalian Encrypt, tapi kalau script biasanya diatas </body> atau </head>

Jangan lupa mampir ke postingan lainnya di blog mas tamvan ya :)

  • Membuat Responsive Menu Navigation Bar Scrolling

  • Mentahan Mega Menu Responsive :v

  • Simple Menu Navigation Bar Responsive



Cukup sekian dan terimakasih, semoga artikel tentang Encrypt Tool Online Untuk Menyembunyikan Script ini bermanfaat, jika ada yang mau ditanyakan silahkan bertanya dikolom komentar.

Membuat Responsive Menu Navigation Bar Scrolling

Membuat Responsive Menu Navigation Bar Scrolling
Membuat Responsive Menu Navigation Bar Scrolling

Cara Membuat Responsive Menu Navigation Bar Scrolling Di Blog

Membuat Menu Bar Navigation Responsive Dengen Efek Scroll Horizontal

Kali ini saya akan share sebuah menu navigation responsive dengan efek animation scroll horizontal. Sebelumnya saya juga pernah update menu navigation scroll pada menu drop downnya. bagi kalian yang ingin melihatnya, silahkan kunjungi Menu Navigation Bar Scroll Drop Down

Tapi pada menu bar yang satu ini tidak dilengkapi dengan menu drop down, kalo ingin memasang drop down silahkan d otak atik lagi ya :)

Untuk melihat demo dari tampilan menu ini, silahkan kunjungi link dibawah ini.

jangan lupa mampr ke postingan lainnya ya :)



Nah sekarang masuk ke tutorial pemasangannya.
Bahan Bahan Yang harus ada di template.
Template kalian harus sudah terpasang :
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
Dan
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Kalau sudah ada lewati tapi kalo belum silahkan dipasang tepat diatas </head>

Responsive Scrolling Menu Navigation Bar

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.



#main {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}


#navMenu {
  background: #222;
  position: relative;
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
}
#navMenu #navMenu-wrapper {
  overflow: hidden;
  height: 60px;
  padding: 0 30px;
}
#navMenu-items {
  margin: 1px 20px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#menuSelector {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}
#navMenu ul li {
    display: inline-block;
    height: 60px;
    margin: 0px;
    box-shadow: 1px 0px 0px rgb(51, 51, 51) inset;
    border-left: 1px solid rgb(0, 0, 0);
}
#navMenu ul li a {
    color: #FAFAFA;
    padding: 0px 15px !important;
    line-height: 44px;
}
.slick-prev, .icon-chevronleft { transform: rotate(180deg); }
.icon-chevronleft, .icon-chevronright {
  background-image: url('http://www.jqueryscript.net/demo/Responsive-Scrolling-Navigation-Menu-With-jQuery-jQuery-UI/arrow.png');
  background-repeat: no-repeat;
  background-size: 20px;
}
.navMenu-paddle-left, .navMenu-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 20px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-prev, .navMenu-paddle-left { left: 0; }
.arrow {
  width: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-next, .navMenu-paddle-right { right: 0; }



  • Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya.


<script>
$(function() {
  var items = $('#navMenu-items').width();
  var itemSelected = document.getElementsByClassName('navMenu-item');
  navPointerScroll($(itemSelected));
  $("#navMenu-items").scrollLeft(200).delay(200).animate({
    scrollLeft: "-=200"
  }, 2000, "easeOutQuad");
 
  $('.navMenu-paddle-right').click(function () {
    $("#navMenu-items").animate({
      scrollLeft: '+='+items
    });
  });
  $('.navMenu-paddle-left').click(function () {
    $( "#navMenu-items" ).animate({
      scrollLeft: "-="+items
    });
  });

  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var scrolling = false;

    $(".navMenu-paddle-right").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("right");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    $(".navMenu-paddle-left").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("left");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    function scrollContent(direction) {
        var amount = (direction === "left" ? "-=3px" : "+=3px");
        $("#navMenu-items").animate({
            scrollLeft: amount
        }, 1, function() {
            if (scrolling) {
                scrollContent(direction);
            }
        });
    }
  }
  
  $('.navMenu-item').click(function () {
    $('#navMenu').find('.active').removeClass('active');
    $(this).addClass("active");
    navPointerScroll($(this));
  });

});

function navPointerScroll(ele) {

  var parentScroll = $("#navMenu-items").scrollLeft();
  var offset = ($(ele).offset().left - $('#navMenu-items').offset().left);
  var totalelement = offset + $(ele).outerWidth()/2;

  var rt = (($(ele).offset().left) - ($('#navMenu-wrapper').offset().left) + ($(ele).outerWidth())/2);
  $('#menuSelector').animate({
    left: totalelement + parentScroll
  })
}
  </script>
  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah </header>. Atau terserah kalian mau ditaro dimana.


<div id='main'>
  <div id="main2">
    <div id="navMenu">
      <div id="navMenu-wrapper">
        <ul id="navMenu-items" style="">
          <div id="menuSelector"></div>
          <li class="navMenu-item active"> <a href="#">Home</a> </li>
          <li class="navMenu-item"> <a href="#">Templates</a> </li>
          <li class="navMenu-item"> <a href="#">Widget</a> </li>
          <li class="navMenu-item"> <a href="#">Javascript</a> </li>
          <li class="navMenu-item"> <a href="#">Jquery</a> </li>
          <li class="navMenu-item"> <a href="#">HTML dan CSS</a> </li>
          <li class="navMenu-item"> <a href="#">Contact</a> </li>
          <li class="navMenu-item"> <a href="#">About</a> </li>
          <li class="navMenu-item"> <a href="#">RSS</a> </li>
          <li class="navMenu-item"> <a href="#">Social Media</a> </li>
          <li class="navMenu-item active"> <a href="#">Navmenu </a> </li>
        </ul>
        <div class="navMenu-paddles">
          <button class="navMenu-paddle-left icon-chevronleft" aria-hidden="true"> </button>
          <button class="navMenu-paddle-right icon-chevronright" aria-hidden="true"> </button>
        </div>
      </div>
    </div>
  </div>
</div>


  • Tinggal Save Dan Lihat hasilnya. Salam Tamvan.
Cukup sekian artikel tentang cara membuat menu scroll responsive ini, semoga bermanfaat apa bila ada yang mau ditanyakan komen aja :)

Simple Menu Navigation Bar Responsive

Simple Menu Navigation Bar Responsive

Membuat Menu Bar, Menu Navigation Responsive

Membuat menu bar navigation responsive simple di blog

Malam sobat, kali ini saya akan share menu navigation bar responsive dengan tombol search di blog. Bagi kalian yang ingin mengganti atau merubah dan memasang menu bar / menu navigation menjadi responsive, silahakn coba menu ini cukup simple. Menu navigation ini tidak drop down jadi hanya tampil seperti biasa.

Nah bagi kalian yang ingin melihat tampilan dari menu ini, silahkan klik link dibawah ini.


Baca Juga tutorial lainnya ya :)



Cara Membuat Simple Navigation Bar Di Blogger.

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.


* {
  margin: 0;
  padding: 0;
  font: 15px "Ubuntu";
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  position: relative;
  width: 60px;
  height: 51px;
  overflow: hidden;
  transition: width 0.5s;
  margin: auto;
  -webkit-backface-visibility: hidden;
  background: rgba(0, 0, 0, 0);
  float: right;
}
form.opened {
  width: 330px;
}
form.opened:before {
  position: fixed;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
input[type="search"] {
  position: absolute;
  top: 0;
  right: 28px;
  height: 51px;
  width: 0;
  float: left;
  font-size: 1.5em;
  border-radius: 30px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  outline: none;
  border: none;
  padding-left: 20px;
  color: #28d7d7;
  transition: width 0.5s;
}
form.opened input[type="search"] {
  width: 300px;
  transition: width 0.5s;
}
button {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: #28d7d7;
  border: none;
  color: #FFF;
  font-size: 1.3em;
  outline: none;
  cursor: pointer;
}
form.opened button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

nav {
  position: relative;
  width: 90%;
  margin: 45px auto;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  background: -webkit-linear-gradient(#111111, #222222);
  background: -moz-linear-gradient(#111111, #222222);
  background: -o-linear-gradient(#111111, #222222);
  background: -ms-linear-gradient(#111111, #222222);
  background: linear-gradient(#111111, #222222);
  overflow: hidden;
}
@media (max-width: 1110px) {
  nav {
    margin: 0;
    width: 100%;
    height: 45px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  }
}
nav > h3 {
  display: none;
}
@media (max-width: 1110px) {
  nav > h3 {
    display: block;
    color: #ffffff;
    font-size: 1.3em;
    background: -webkit-linear-gradient(#606c88, #3f4c6b);
    background: -moz-linear-gradient(#606c88, #3f4c6b);
    background: -o-linear-gradient(#606c88, #3f4c6b);
    background: -ms-linear-gradient(#606c88, #3f4c6b);
    background: linear-gradient(#606c88, #3f4c6b);
    position: absolute;
    right: 0px;
    padding: 10px 13px 11px 13px;
    cursor: pointer;
  }
}
nav > ul > li {
  display: inline-block;
}
@media (max-width: 1110px) {
  nav > ul > li {
    display: block;
  }
}
nav > ul > li > a,
a:visited {
  display: block;
  padding: 15px;
  color: #777777;
  font-weight: 300;
}
nav > ul > li > a:hover {
  color: #ffffff;
}
@media (max-width: 1110px) {
  nav > ul > li > a:hover {
    background: -webkit-linear-gradient(#606c88, #3f4c6b);
    background: -moz-linear-gradient(#606c88, #3f4c6b);
    background: -o-linear-gradient(#606c88, #3f4c6b);
    background: -ms-linear-gradient(#606c88, #3f4c6b);
    background: linear-gradient(#606c88, #3f4c6b);
  }
}
.active,
.active:visited {
  color: #ffffff;
  background: -webkit-linear-gradient(#606c88, #3f4c6b);
  background: -moz-linear-gradient(#606c88, #3f4c6b);
  background: -o-linear-gradient(#606c88, #3f4c6b);
  background: -ms-linear-gradient(#606c88, #3f4c6b);
  background: linear-gradient(#606c88, #3f4c6b);
}
@media (max-width: 1110px) {
  .active,
  .active:visited {
    background: transparent linear-gradient(#606c88, #3f4c6b) repeat scroll 0% 0%;
  }
}
.expand {
  height: 100%;
}
.hide {
  display: none;
}

  • Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya.

<script type='text/javascript'>
$(document).ready(function(){
    $('nav').click(function() {
        $(this).toggleClass('expand');
        $(this).siblings().not(this).toggleClass('hide');
    });
});
// https://dribbble.com/shots/2308755-Search-Transform-Principle-Freebie
$('button').on('click', function(e) {
  e.preventDefault();
  $('form').addClass('opened');
  $('input[type="search"]').focus();
});

$('input[type="search"]').on('focusout', function(e) {
  $('form').removeClass('opened');
});
</script>

  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah <body>. Atau terserah kalian mau ditaro dimana.


<nav>
  <h3>&#9776;</h3>
  <ul>
    <li><a class="active" href="#">MS.Tamvan</a></li>
    <li><a href="#">Desktop</a></li>
    <li><a href="#">Phone</a></li>
    <li><a href="#">Tablet</a></li>
    <li><a href="#">TV</a></li>
    <li><a href="#">Server</a></li>
    <li><a href="#">Cloud</a></li>
    <li><a href="#">Management</a></li>
    <li><a href="#">Download</a></li>
      <form>
  <input type="search" placeholder="Search">
  <button>
    <span class="fontawesome-search"></span>
  </button>
</form>
  </ul>

</nav>

Langkah terakir simpan template dan lihat hasilnya.

Cukup sekian dan terimakasih, smeoga artikel tentang Menu bar navigation responsive ini bermanfaat, jangan lupa komentarnya apabila ada yang tidak dimengerti.

Mentahan Mega Menu Responsive :v

Mentahan Mega Menu Responsive :v
mega menu responsive

Membuat Mega Menu Responsive Di Blog

Share Mentahan mega menu responsive

Malam sobat, kali ini saya mau share mega menu navigation responsive tapi saya hanya berbagi script mentahannya [ belum saya edit-edit ] :v . Kalau mega menu sebelumnya udah saya edit jadi tingal pasang dan ganti link. Oke lah barang kali kalian mau mencoba mengedit / merapihkan mega menu ini, silahkan di comot scriptnya.
Jangan lupa mampir ke post lainnya ya :)



Silahkan comot script mega menu navigation responsive dibawah ini.

Link Demo Dan Script Mentahan Mega Menu Responsive






Ok selamat mencoba untuk merapihkannya.
Cukup sekian dan terimakasih, semoga artikel ini bermanfaat ya :)

Membuat Mega Menu Navigation Simple

Membuat Mega Menu Navigation Simple
mega menu navigation

Cara Membuat Mega Menu Navigation Simple Di blogger

Mega Menu Navigation With Thubdinal

Kali ini mas tamvan akan share lagi mega menu navigation yang akan menampilkan postinan blog berdasarkan label yang disertai dengan image / thubdinal dari post itu sendiri.

Mega menu Navigation ini pasti kalian juga pernah liat di beberapa blogger sebelumnya tapi bingung untuk mencari tutorialnya. Nah disini saya akan berikan tutorial cara pemasangannya di blog kalian.

Sangat simple tapi kekurangannya pada menu drop down mega label ini tidak responsive, saya belum sempat membuatnya jadi resonsive karena memang saya tidak bisa membuat sebuah blog atau widget jadi responsive :v :v bisanya cuman copas :)

Nah bagi kalian yang ingin memasangnya di blog, silahkan ikuti tutorial di blog mas tamvan ini. Tapi jangan lupa untuk membaca tutorial tips dan trik lainnya ya :)



Sebelum melanjutkan ke tutorialnya, alangkah lebih baiknya kalian liat dulu tampilan dari mega menu ini, supaya tidak kecewa setelah pemasangan.

ONLY EDITOR

Nah sekarang lanjut ke cara pemasangan mega menunya.

Membuat Mega Menu Navigation Simple Di blog

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> Atau </style>
  • Lalu masukan CSS dibawah ini tepat di salah satu code yang kalian cari tadi


#bungkus-nasi {
    background: #222 none repeat scroll 0% 0%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-bottom: 5px solid #63C4F1;
}
#bungkus-tamvan{position:relative;overflow:hidden;height:61px;width:auto;float:left;padding-left:5px;padding-right: 12px;}
#bungkus-tamvan img{height:autox;width:47px}
.logo-mstamvan h1{font-size:43px;margin:0}
.logo-mstamvan h1 a{font-family:'Yanone Kaffeesatz',sans-serif;transition:all 1s ease}
.logo-mstamvan h1 span{width:auto;height:47px;background:#none !important;display:inline-block;float:left;margin-top:8px;margin-right:10px;position:relative;transition:all .5s}
.logo-mstamvan h1 a:hover span{background:#none;transform:rotate(360deg)}
.logo-mstamvan .description{text-transform:capitalize;display:none}

#ms-tamvan{float:left;position:relative;width:auto;margin:0;font-size:18px;font-family:'Yanone Kaffeesatz',sans-serif;font-weight:400;text-transform:uppercase}
.ms-tamvan *{margin:0;padding:0}
ul.ms-tamvan{list-style:none;line-height:1;overflow:visible!important;padding:0}
ul.ms-tamvan:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0}
ul.ms-tamvan li{border-left:1px solid #000;box-shadow:1px 0 0 #333 inset;list-style:none;position:relative;float:left;margin:0!important;padding:0!important}
ul.ms-tamvan li a{color:#fff;display:block!important;line-height:60px;margin:0;padding:0 15px!important}
ul.ms-tamvan li a:hover,ul.ms-tamvan li a.hoverover{background:#333}
ul.ms-tamvan ul{z-index:999;position:absolute;display:none;top:100%;border:1px solid #ccc}
ul.ms-tamvan ul li{min-width:160px;box-shadow:none;background:none!important;float:none!important}
ul.ms-tamvan ul li a{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;padding:12px 14px}
ul.ms-tamvan ul li a:hover,ul.ms-tamvan ul li a.hoverover{color:#000!important;background:#63C4F1}
ul.ms-tamvan ul ul{display:none;left:100%;top:0}
ul.ms-tamvan li div.submenu{box-shadow:3px 3px 5px #333;display:none;position:absolute;width:600px;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#f9f9f9;border:none;z-index:999}
ul.ms-tamvan ul,ul.ms-tamvan ul li{display:block!important;border:none;margin:0!important;padding:0!important}
ul.ms-tamvan ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#222}
ul.ms-tamvan ul.postslist{position:relative;display:block;width:65%;float:right;background:#f9f9f9;margin:8px 0!important}
ul.ms-tamvan ul.postslist li{display:block;overflow:hidden;box-shadow:0 1px 0 0 #fff;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:5px 5px 5px 110px !important;margin-right:10px!important}
ul.ms-tamvan ul.postslist li:last-child{border-bottom:none;box-shadow:none}
ul.ms-tamvan ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:50px;overflow:hidden;border:1px solid #eee}
ul.ms-tamvan ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0}
ul.ms-tamvan ul.postslist li a{color:#000!important;border:none!important;background:none;display:block;line-height:1.4;box-shadow:none;padding:0!important}
ul.ms-tamvan .loader{background:url(https://lh3.googleusercontent.com/-tvsFPhYWC6w/Ui4Qkjn2eoI/AAAAAAAAGH8/dyHH8KQIQ60/h120/loading.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.ms-tamvan .menuArrow{border-bottom:10px solid transparent;border-top:10px solid transparent;border-left:10px solid #000;display:block;height:0;margin-top:-10px;position:absolute;right:11px;top:50%;width:0}
ul.ms-tamvan li:hover > ul,ul.ms-tamvan li:hover div.submenu{display:block}

  • Masukan Javascript dibawah ini, tepat diatas kode </body>.


<script type='text/javascript'>jQuery(document).ready(function($){$('#ms-tamvan').ajaxBloggerMenu({numPosts:7,defaultImg:'https://lh3.googleusercontent.com/-bX9QkKivPsU/UhmMCRTYNjI/AAAAAAAAGCA/UhxTPXYjElQ/w140-h140-p/no-image.png'})});</script>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this. menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("( http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[ ^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li. attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this .ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t. hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function (){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex. issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this. url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData. q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url .replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function (){e("<span></span>",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts: function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel=== "alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s100-c/"):n.settings.defaultImg;r.push('<li><span class="imgCont"><a href="',s,'"><img alt="',i,'" src="',o,'" title="',i,'"/></a></span><a title="',i,'" href="',s,'">',i,"</a></li>")}):r.push("<h5>","Sorry!!, No Posts to Show", "</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error" ){this.hideLoader();this.addArrow();this.container.html("<h5>Error!! Could not fetch the Blog Posts!</h5>")}},addArrow:function(){this.lielem.closest("li").find ("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).appendTo(this.li.closest("li"))}, menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li"). height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first"). removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("navmenublue").find(">li").find("ul:first").addClass( "verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax: function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn. ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function (){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>


  • Langkah selanjutnya pemasangan HTML untuk menampilkan mega menu akan di simpan dimana.
  • Silahkan copy Script HTML berikut ini. Lalu simpan dimana saja yang kalian mau. Contoh saya simpan di bawah </head> Atau diatas kode <wrapper. Terserah kalian mau dipasang dimana.


<div id='bungkus-nasi'>
<div class='clearfx'></div>
<div>
<div class='logo-mstamvan section' id='bungkus-tamvan'><div class='widget logo-mstamvan' id='mas-tamvan'>
<div id='logo-mstamvan-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<a href='http://mastamvan.blogspot.co.id/' style='display: block' title='Blog Mas Tamvan'><span><img src="https://lh5.googleusercontent.com/-e2_uAWpvXNY/AAAAAAAAAAI/AAAAAAAAAAA/94iI4Kccgwc/s96-c-mo/photo.jpg" alt="Call Me Nick"></span>
Blog Mas Tamvan
</a>
</h1>
</div>
<div class='descriptionwrapper'>
<div class='description'><span>Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)</span></div>
</div>
</div>
</div></div>
</div>
<div>
<nav>
<ul class='ms-tamvan' id='ms-tamvan'>
<li><a href='http://mastamvan.blogspot.com/p/blog-page.html' target='_blank' title='Template Blog'><i class='fa fa-desktop'></i> Template</a></li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='CSS'><i class='fa fa-code'></i> CSS</a>
<ul class='submenu'>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Navigasi'><i class='fa fa-list'></i> Navigasi</a></li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='Slider'><i class='fa fa-picture-o'></i> Slideshow</a></li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='Gallery'><i class='fa fa-th'></i> Gallery</a></li>
</ul>
</li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Blogger' target='_blank' title='Blogging'><i class='fa fa-laptop'></i> Blogging</a>
<ul class='submenu'>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Widget' target='_blank' title='Widget Blog'><i class='fa fa-tablet'></i> Widget Blog</a></li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Tips%20Dan%20Trik' target='_blank' title='jQuery'><i class='fa fa-code'></i> jQuery</a></li>
</ul>
</li>
<li><a href='http://mastamvan.blogspot.co.id/search/label/Tools' target='_blank' title='SEO'><i class='fa fa-globe'></i> SEO</a></li>
<li><a href='http://mastamvan.blogspot.co.id/p/sitemap.html' target='_blank' title='Follow'><i class='fa fa-sitemap'></i> Sitemap</a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=6222520536924570210' target='_blank' title='Follow'><i class='fa fa-users'></i> Follow</a></li>
</ul>
</nav>
</div>

<div class='clearfx'></div>
</div>
    </div>



#Untuk Menampilkan Icon pada menu, Blog harus dipasang font awesome.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
#Untuk Mengaktifkan Script, Blog Harus dipasang ajax Jquery.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
*Simpan kode diatas tepat sebelum kode </head>.
*Kalau di blog anda sudah dipasang kode tersebut, sebaiknya jangan d pasang lagi!!!
#Jangan lupa untuk mengganti link http://mastamvan.blogspot.co.id/ dengan link blog kalian.


  • Apabila semuanya sudah terpasang dengan baik dan sempurna, silahkan save dan lihat hasilnya.
  • Semoga bermanfaat, salam tamvan

Cukup sekian dan terimakasih, semoga artikel yang saya share tentang Mega Menu Navigation ini bermanfaat.

Kalau ada yang tidak dimengerti saya harap unutk bertanya dikolom komentar ya. Biar saya perbaiki postingan ini agar lebih mudah dimengerti.

Cara Disable Supaya Gambar Tidak Bisa Di Klik Kanan

Cara Disable Supaya Gambar Tidak Bisa Di Klik Kanan
disable-klik-kanan-pada-gambar

Cara Disable Klik Kanan Pada Gambar. 

Bagaimana Cara Agar Gambar Di Blog Tidak Bisa Di Klik Kanan?

kali ini saya akan berbagi script agar gambar di halaman blog tidak bisa di klik kanan [ disable klik kanan pada Image ], Bagi kalian yang tidak ingin gambarnya di copas orang lain boleh coba alternatif ini untuk mengamankan gambar kalian di postingan blog supaya tidak bisa di klik kanan.

Untuk yang sudah berpengalaman ya pastinya tetep bisa untuk mencuri link / gambar tersebut, tapi kalau buat yang nubi hal ini akan sedikit merepotkan dan yang pasti akan mengurunkan niatnya untuk mencuri gambar itu.

Untuk tutorialnya silahkan liat dibawah ini, tapi janagan lupa baca juga tutorial lainnya ya.


Cara Pemasangan Agar Gambar Tidak Bisa di klik kanan

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code </body> Atau </head>
  • Lalu masukan Javascript dibawah ini tepat di salah satu kode di atas.

<script type='text/javascript'>
$('.hallo img').bind('contextmenu', function(e){
    return false;
});
</script>
  • Nah kalau script di atas, harus menambahkan div id hallo pada imagenya. Contoh.
<div class="hallo"> <img alt='disable klik kanan pada gambar' src="LINK IMAGE" title='disable klik kanan image' /> </div>
  • Nah cara penulisan imagenya seperti itu. Tapi Kalau inginsemua image tidak bisa di klik kanan, gunakan script berikut ini.

<script type='text/javascript'>
$('img').bind('contextmenu', function(e){
    return false;
});
</script>
  • Penempatan script sama ya.
  • Silahkan dicoba dan semoga bermanfaat, contoh hasil dari script diatas.

Disable Klik Kanan Pada Image

DEMO: mastamvan.blogspot.com

Gambar dibawah ini BISA di klik kanan

disable klik kanan pada gambar

Gambar dibawah ini TIDAK BISA di klik kanan

disable klik kanan pada gambar

  • Ok cukup sekian dan terimkasih. Selamat mencoba

Jangan lupa setelah baca post tentang Cara Disable Supaya Gambar Tidak Bisa Di Klik Kanan ini, baca juga artikel menarik lainnya ya :)

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar.

Tools Untuk Open Source Situs Yang Tidak Bisa Di CTRL + U

Tools Untuk Open Source Situs Yang Tidak Bisa Di CTRL + U
open_source

Cara Open Source Situs Yang Tidak Bisa Di CTRL + U Menggunakan Tools

Cara Membuka Source Code Situs Yang Tidak Bisa Di CTRL + U

Bagaimana cara untuk membuka situs yang di disable ctrl + u? Caranya cukup gunakan tools yang ada di blog mas tamvan ini, Dengan sekejap blog yang tidak bisa di ctrl + u langsung kebuka.  

CTRL + U biasanya digunakan oleh orang2 yang suka copas isi dari sebuah web / blog, walau ga semuanya ke copas tapi setidaknya ada beberapa script yang terbuka di situ. 

Tapi biasanya para blogger / publisher mendisable ctrl + u tersebut untuk mengamankan script didalamnya. 

Tapi jangan khawatir karena disini mas tamvan akan bagikan toolsnya.
Baca juga tips dan trik lainnya.




Nah untuk cara open source blog yang tidak bisa di ctrl + u, silahkan gunakan tools dibawah ini.

Tools open source Blog Yang di disable CTRL + U

Cara Penggunaan.
Masukan Url Situs yang tidak bisa di ctrl+u, lalu klik Intip Kode



Cukup sekian dan terimakasih, semoga tool ini bermanfaat.

Terimakasih telah membaca artikel tentang Cara membuka situs yang di protek atau di disable tidak bisa di ctrl + u dari mas tamvan.

Membuat Beautiful Table Responsive With CSS

Membuat Beautiful Table Responsive With CSS
table responsive

Membuat Table Responsive With CSS Di Blog

Cara Memasang Table Responsive Di Blog Dengan CSS

Share table responsive dengan style yang sangat menarik untuk dipasang pada blog. Bagi kalian yang ingin membuat sebuah table responsive langsung saja ikuti tutorial di blog mas tamvan ini.

Langsung saja, buat kalian yang ingin memasang table di blognya ikuti saja langkah langkahnya, sangat mudah tinggal tempel dan ganti beberapa kata saja.
Jangan lupa baca tutorial lainnya ya :)



Nah untuk melihat tampilan responsive dari table ini, silahkan klik tombol button dibawah ini.

Tutorial Pemasangan Table Responsive Di Blog

  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> Atau </style>
  • Lalu masukan CSS dibawah ini tepat di salah satu code yang kalian cari tadi


.container th h1 {
      font-weight: bold;
      font-size: 1em;
  text-align: left;
  color: #185875;
}
footer{text-align: center;}
.container td {
      font-weight: normal;
      font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
       -moz-box-shadow: 0 2px 2px -2px #0E1119;
            box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
      text-align: left;
      overflow: hidden;
      width: 80%;
      margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td, .container th {
      padding-bottom: 2%;
      padding-top: 2%;
  padding-left:2%;  
}

/* Background-color of the odd rows */
.container tr:nth-child(odd) {
      background-color: #323C50;
}

/* Background-color of the even rows */
.container tr:nth-child(even) {
      background-color: #2C3446;
}

.container th {
      background-color: #1F2739;
}

.container td:first-child { color: #FB667A; }

.container tr:hover {
   background-color: #464A52;
-webkit-box-shadow: 0 6px 6px -6px #0E1119;
       -moz-box-shadow: 0 6px 6px -6px #0E1119;
            box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  
  transition-delay: 0s;
      transition-duration: 0.4s;
      transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
}

  • Save Template.
  • Lalu masuk ke postingan blog yang inigin di tambahkan table.
  • Copy HTML dibawah ini dan masukan ke postingan, Tapi dalam posisi tab HTML, Lihat gambar!!

table responsive

<table class="container">
 <thead>
  <tr>
   <th><h1>Sites</h1></th>
   <th><h1>Views</h1></th>
   <th><h1>Clicks</h1></th>
   <th><h1>Average</h1></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Google</td>
   <td>9518</td>
   <td>6369</td>
   <td>01:32:50</td>
  </tr>
  <tr>
   <td>Twitter</td>
   <td>7326</td>
   <td>10437</td>
   <td>00:51:22</td>
  </tr>
  <tr>
   <td>Amazon</td>
   <td>4162</td>
   <td>5327</td>
   <td>00:24:34</td>
  </tr>
    <tr>
   <td>LinkedIn</td>
   <td>3654</td>
   <td>2961</td>
   <td>00:12:10</td>
  </tr>
    <tr>
   <td>CodePen</td>
   <td>2002</td>
   <td>4135</td>
   <td>00:46:19</td>
  </tr>
    <tr>
   <td>GitHub</td>
   <td>4623</td>
   <td>3486</td>
   <td>00:31:52</td>
  </tr>
 </tbody>
</table>

  • Sesuaikan kolom dan ganti namanya sesuai yang kalian ingin tampilkan.
  • Kalau sudah tinggal Save Template. dan salam tamvan :)

Auto Like Dan Follow Instagram Terbaru 2016 Work

Auto Like Dan Follow Instagram Terbaru 2016 Work
auto-like-follow-instagram

Website Auto foolow dan like instagram terbaru.

Website tool auto foolow dan like instagram no spam

Bagi kalian yang ingin menambah foolower ig / instagram dengan cepat dan mudah gunakan beberapa webset tools ini untuk menambah followers dan like instagram kalian.

Website auto foolow ini sudah di coba dan work, tapi jangan terlalu sering menggunakannya karena nanti akun kalian akan di block sama pihak yang mengurus website tersebut. Gunakan tools ini dengan bijak.

Dan ini List situs auto foolow dan like instagram terbaru 2017 work.

Itu website penyedia tools untuk menambah foolowers dan like instagram kalian, patuhi lah kebijakan yang ada pada website tersebut dan jika ada sesuatu yang terjadi atau sifatnya merugikan, saya tidak bertanggung jawab karena di sini saya hanya share saja.

Dan kurang lebihnya saya minta maaf, jika nanti ada tool auto follow ig yang lainnya saya akan tambahkan.

auto followers instagram tanpa menambah following

auto like instagram 2016 / 2017

auto followers instagram gratis 2017

auto followers instagram bot

auto instagram likes app

auto instagram likes free 2017

1000 free followers on instagram

auto follow instagram gratis

Free Tools Untuk Parse Atau Konversi Html

Free Tools Untuk Parse Atau Konversi Html
parse, konversi, html

Tools Untuk Parse, Merubah, Konversi Html Online

Cara Parse Atau Konversi HTML Menggunakan Tools

Bagi kalian yang suka membuat postingan melalui tab HTML seperti saya daripada menggunakan compose sebaiknya gunakan tools parse html ini pada saat kalian memasukan script HTML ke dalamnya, karena kalau tidak maka html yang di masukan tidak akan tampil malah hilang / bekerja di dalam postingan.

Untuk merubahnya sangat gampang, tinggal gunakan tools dibawah ini.
Kalian juga bisa mem parse html secara manual tapi itu dapat memakan waktu yang sangat lama karena kalian harus merubah bagian-bagian seperti berikut ini.

Code-> [ & ] menjadi-> [ &amp; ]
Code-> [ < ] menjadi-> [ &lt; ]
Code-> [ > ] menjadi-> [ &gt; ]
Code-> [ " ] menjadi-> [ &quot; ]
Code-> [ ± ] menjadi-> [ &plusmn; ]
Code-> [ © ] menjadi-> [ &copy; ]
Code-> [ ® ] menjadi-> [ &reg; ] 

Untuk cara penggunaannya sangat gampang, kalian tinggal mem paste kode HTML yang ingin di parse, kalo sudah tinggal klik Konversikan.

Nah jika ingin memparse kode HTML baru, kalian harus mengklik tombol bersihkan terlebih dahulu.
Nah langsung saja gunakan tools untuk konversinya.

Silahkan gunakan tools dibawah ini, untuk merubah kode html agar tidak bekerja saat dipublikasikan.


Baca juga tips dan trik lainnya yang sudah saya posting.

Tutorial Blogger Lainnya :
  • Memasang Tombol Konversi Dan Emoticon Di Atas Komentar Blog

  • Belajar Mendesain Blog Dengan Tools Editor Html Online

  • Cara Merubah Resolusi Foto Menjadi Lebih Besar



Cukup sekian dari saya tentang postingan Free Tools Untuk Parse Atau Konversi Html ini, semoga bermanfaat.