• Home
  • Disclaimer
  • Privacy Policy
  • Sitemaps

Pinguin Techno

Select Menu
  • Home
  • Blogging
  • Sumber Artikel
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Error Page
Home » CSS » jQuery » jQuery Image Slider With Three Panels and 3D Look

Tuesday, 14 January 2014

jQuery Image Slider With Three Panels and 3D Look

Unknown
Add Comment
CSS, jQuery
Tuesday, 14 January 2014
Dalam tutorial ini kita akan membuat jQuery image slider with three panels and 3D look. Idenya adalah untuk memiliki panel utama dan dua panel lateral yang yang sedikit diputar dalam ruang 3D. Bila menavigasi, kita akan melihat masing-masing gambar berikutnya di setiap panel. Kita akan menggunakan CSS 3D Mentransformasi dengan perspektif dan CSS Transisi.

Langsung saja menuju ke TKP


  • Demo
  • Download



Markup HTML

Struktur awal yang akan kita buat akan terdiri dari sebuah divisi dengan angka. Setiap angka akan berisi gambar dan figcaption dengan judul dan keterangan untuk gambar:
<div class="fs-slider" id="fs-slider">

 <figure>
  <img src="images/1.jpg" alt="image01" />
  <figcaption>
   <h3>Eloquence</h3>
   <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
  </figcaption>
 </figure>

 <figure>
  <img src="images/2.jpg" alt="image02" />
  <figcaption>
   <h3>Quintessential</h3>
   <p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
  </figcaption>
 </figure>

 <!-- ... -->

</div>
Kita akan memberi jQuery plugin untuk mengubah struktur yang akan menjadi satu, berikut ini source HTML:
<section class="fs-container">

 <div class="fs-wrapper">

  <div class="fs-slider" id="fs-slider">

   <div class="fs-block">

    <figure style="display: block; ">
     <img src="images/1.jpg" alt="image01" />
     <figcaption>
      <h3>Eloquence</h3>
      <p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
     </figcaption>
    </figure>

   </div><!-- /fs-block -->

   <div class="fs-block">
    <!-- ... -->
   </div>

   <!-- ... -->

  </div><!-- /fs-slider -->

  <nav class="fs-navigation">
   <span>Previous</span>
   <span>Next</span>
  </nav>

 </div><!-- /fs-wrapper -->

</section><!-- /fs-container -->
Setiap angka akan dibungkus ke dalam wrapper dengan class fs-blok dan kita akan menambahkan navigasi untuk semuanya.

CSS

Karena kita ingin slider gambar menjadi responsif, kami akan memberikan persentase lebar. Tapi kita juga akan menentukan lebar minimal dan maksimal sehingga tidak menekan terlalu banyak atau tumbuh di luar proporsi atau melibihi tag div tsb. Kita akan menambahkan beberapa posisi ke samping karena blok kita akan diposisikan menggunakan CSS (semua gambar akan berada di tengah) dan yang tidak akan mempengaruhi lebar dari elemen:
.fs-container {
 margin: 20px auto 50px auto;
 position: relative;
 width: 40%;
 padding: 0 15%;
 max-width: 700px;
 min-width: 220px;
 height: 500px; 
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}

.fs-container:before {
 content: '';
 position: absolute;
 bottom: -40px;
 background: transparent url(../images/shadow.png) no-repeat center center;
 height: 90px;
 width: 90%;
 left: 5%;
 opacity: 0.8;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 background-size: 100% 100%;
}

.fs-wrapper {
 width: 100%;
 height: 100%;
 position: relative;
 -webkit-perspective: 1000px;
 -moz-perspective: 1000px;
 -o-perspective: 1000px;
 -ms-perspective: 1000px;
 perspective: 1000px;
}

.fs-slider{
 width: 100%;
 height: 100%;
 position: absolute;
 display: none;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 pointer-events: none;
}

.fs-block {
 margin: 0;
 position: absolute;
 width: 70%;
 height: 100%;
 left: 15%;
 pointer-events: auto;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.fs-block:nth-child(1) { 
 -webkit-transform-origin: top right;
 -webkit-transform: translateX(-100%) rotateY(-35deg);
 -moz-transform-origin: top right;
 -moz-transform: translateX(-100%) rotateY(-35deg);
 -o-transform-origin: top right;
 -o-transform: translateX(-100%) rotateY(-35deg);
 -ms-transform-origin: top right;
 -ms-transform: translate(-100%);
 transform-origin: top right;
 transform: translateX(-100%) rotateY(-35deg);
}
.no-touch .fs-block:nth-child(1):hover {
 -webkit-transform: translateX(-100%) rotateY(-30deg); 
 -o-transform: translateX(-100%) rotateY(-30deg);
 transform: translateX(-100%) rotateY(-30deg);
}

.fs-block:nth-child(2) {
 z-index: 100;
}

.fs-block:nth-child(3) {
 -webkit-transform-origin: top left;
 -webkit-transform: translateX(100%) rotateY(35deg);
 -moz-transform-origin: top left;
 -moz-transform: translateX(100%) rotateY(35deg);
 -o-transform-origin: top left;
 -o-transform: translateX(100%) rotateY(35deg);
 -ms-transform-origin: top left;
 -ms-transform: translate(100%);
 transform-origin: top left;
 transform: translateX(100%) rotateY(35deg);
}

.no-touch .fs-block:nth-child(3):hover {
 -webkit-transform: translateX(100%) rotateY(30deg); 
 -o-transform: translateX(100%) rotateY(30deg);
 transform: translateX(100%) rotateY(30deg);
}

.fs-block:after{
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 1000;
 pointer-events: none;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border-left: 1px solid rgba(119,119,119,1);
 border-right: 1px solid rgba(119,119,119,1);
 left: -1px;
}

/* Borders are only needed if we have the 3d look */
.no-csstransforms3d .fs-block:after {
 border: none;
}

.fs-block:nth-child(1):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.2)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
}

.fs-block:nth-child(2):after {
 opacity: 0.8;
 background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 21%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 70%, rgba(0,0,0,0.12) 81%, rgba(0,0,0,0.5) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(21%,rgba(0,0,0,0.12)), color-stop(31%,rgba(0,0,0,0.03)), color-stop(50%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0.03)), color-stop(81%,rgba(0,0,0,0.12)), color-stop(100%,rgba(0,0,0,0.5)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
}

.fs-block:nth-child(3):after {
 background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.65)));
 background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
 background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
}

.fs-block figure {
 width: 100%;
 height: 100%;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: 1;
}

.fs-block figure:first-child{
 z-index: 10;
}

.fs-block figure img {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
}

.fs-block figcaption {
 padding: 0 20px;
 margin: 0;
 position: absolute;
 width: 100%;
 top: 25%;
 background: rgba(0,0,0,0.4);
 overflow: hidden;
 height: 0%;
 opacity: 0;
 text-align: center;
 -webkit-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -o-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: all 700ms cubic-bezier(0, 0, .15, 1);
 transition: all 700ms cubic-bezier(0, 0, .15, 1);
}

.fs-block figcaption.fs-transition {
 height: 35%;
 opacity: 1;
}

.fs-block figcaption h3 {
 font-size: 40px;
 line-height: 40px;
 margin: 0;
 padding: 20px 0;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
 font-family: 'Prata', serif;
 font-weight: normal;
}

.fs-block figcaption p {
 color: #fff;
 padding: 20px 0;
 margin: 0;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 border-top: 1px solid rgba(255,255,255,0.2);
 box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.fs-navigation {
 position: absolute;
 z-index: 2000;
 bottom: 10px;
 right: 15%;
 margin-right: 15px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.fs-navigation span {
 float: left;
 width: 26px;
 height: 26px;
 border-radius: 4px;
 text-indent: -90000px;
 cursor: pointer;
 opacity: 0.6;
 margin-right: 3px;
 background: rgba(0,0,0,0.4) url(../images/arrow.png) no-repeat 50% 50%;
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 transition: all 0.3s linear;
 pointer-events: auto;
}

.fs-navigation span:nth-child(2) {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
}

.fs-navigation span:hover{
 opacity: 1;
}

/* Transitions */
.fs-block:nth-child(1) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
}
.fs-block:nth-child(2) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
 transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
}
.fs-block:nth-child(3) figure {
 -webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -moz-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -o-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 -ms-transition: width 900ms cubic-bezier(0, 0, .15, 1);
 transition: width 900ms cubic-bezier(0, 0, .15, 1);
}

/* Media Queries */

@media screen and (max-width: 1024px) {
 .fs-block figcaption h3 {
  font-size: 26px;
 }
}

@media screen and (max-width: 768px) {
 .fs-block figcaption {
  padding: 0 10px;
 }
 .fs-block figcaption h3 {
  font-size: 16px;
  padding: 10px 0;
 }
 .fs-block figcaption p {
  font-size: 13px;
 }
}

Javascript

Pilihan Plugin kami hanya akan memiliki pengaturan autoplay. Seperti telah kita lihat sebelumnya, kita mengatur konfigurasi transisi dalam CSS.
$.ImgSlider.defaults = {
 autoplay : false,
 interval : 4000
};
Kita akan mulai dengan preloading semua gambar, setelah itu kita akan menjalankan fungsi _init:
_init    : function( options ) {

 // options
 this.options   = $.extend( true, {}, $.ImgSlider.defaults, options );

 this.current   = 0;

 // https://github.com/twitter/bootstrap/issues/2870
 var transEndEventNames = {
  'WebkitTransition' : 'webkitTransitionEnd',
  'MozTransition'  : 'transitionend',
  'OTransition'  : 'oTransitionEnd',
  'msTransition'  : 'MSTransitionEnd',
  'transition'  : 'transitionend'
 };
 this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

 // the initial elements
 this.$initElems   = this.$el.children( 'figure' );
 // total number of elements
 this.initElemsCount  = this.$initElems.length;

 if( this.initElemsCount &lt; 3 ) {

  return false;

 }

 // build layout
 this._layout();
 // init events
 this._initEvents();

 // autoplay on
 if( this.options.autoplay ) {

  this._startSlideshow();

 }

}
_layout    : function() {

 this.$initElems.wrapAll( '<div class="fs-temp">
</div>
' ).hide();

 this.$initElems
  .filter( ':lt(3)' )
  .clone()
  .show()
  .prependTo( this.$el )
  .wrap( '<div class="fs-block">
</div>
' );

 this.$el
  .wrap( '<section class="fs-container"></section>' )
  .wrap( '<div class="fs-wrapper">
</div>
' );

 this.$blocks = this.$el.children( 'div.fs-block' );

 // cache the 3 main blocks
 this.$blockL = this.$blocks.eq( 0 );
 this.$blockC = this.$blocks.eq( 1 );
 this.$blockR = this.$blocks.eq( 2 );

 this.$blockC.find( 'figcaption' ).addClass( 'fs-transition' );

 // all items
 this.$temp  = this.$el.find( 'div.fs-temp' );

 // resize images
 this._resizeBlocks();

 // add navigation if needed
 if( this.initElemsCount &gt; 3 ) {

  var $nav = $( '<nav class="fs-navigation">PreviousNext</nav>' ).appendTo( this.$el.parent() );

  // next and previous
  this.$navPrev = $nav.find( 'span:first' );
  this.$navNext = $nav.find( 'span:last' );

  this._initNavigationEvents();

 }

}
_initNavigationEvents : function() {

 var _self = this;

 this.$navPrev.on( 'click.imgslider', function() {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate( 'left' );

 } );
 this.$navNext.on( 'click.imgslider', function() {

  if( _self.options.autoplay ) {

   clearTimeout( _self.slideshow );
   _self.options.autoplay = false;

  }

  _self._navigate( 'right' );

 } );

}

_navigate    : function( dir ) {

 if( this.isAnimating === true ) {

  return false;

 }

 this.isAnimating = true;

 var _self = this,
  $items = this.$temp.children(),
  LIndex, CIndex, RIndex;

 this.$blocks.find( 'figcaption' ).hide().css( 'transition', 'none' ).removeClass( 'fs-transition' );

 if( dir === 'right' ) {

  LIndex = this.current + 1;
  CIndex = this.current + 2;
  RIndex = this.current + 3;

  if( LIndex &gt;= this.initElemsCount ) {

   LIndex -= this.initElemsCount

  }

  if( CIndex &gt;= this.initElemsCount ) {

   CIndex -= this.initElemsCount

  }

 }
 else if( dir === 'left' ) {

  LIndex = this.current - 1;
  CIndex = this.current;
  RIndex = this.current + 1;

  if( LIndex &lt; 0 ) {

   LIndex = this.initElemsCount - 1

  }

 }

 if( RIndex &gt;= this.initElemsCount ) {

  RIndex -= this.initElemsCount

 }

 var $elL = $items.eq( LIndex ).clone().show(),
  $elC = $items.eq( CIndex ).clone().show(),
  $elR = $items.eq( RIndex ).clone().show();

 // resize images
 $elL.children( 'img' ).css( this.$blockL.data( 'imgstyle' ) );
 $elC.children( 'img' ).css( this.$blockC.data( 'imgstyle' ) );
 $elR.children( 'img' ).css( this.$blockR.data( 'imgstyle' ) );

 this.$blockL.append( $elL );
 this.$blockC.append( $elC );
 this.$blockR.append( $elR );

 // now show new images

 var $slides = this.$blocks.find( 'figure:first' ).css( 'width', '0%');

 if( Modernizr.csstransitions ) {

  $slides.on( this.transEndEventName, function( event ) {

   var $this   = $( this ),
    blockIdx = $this.parent().index('');

   _self._slideEnd( dir, blockIdx, $elC );

   $this.off( _self.transEndEventName ).remove();

  } );

 }
 else {

  $slides.each( function() {

   var $this   = $( this ),
    blockIdx = $this.parent().index('');

   _self._slideEnd( dir, blockIdx, $elC );

  } );

  this._slideEnd();

 }

}
_slideEnd    : function( dir, blockIdx, $main ) {

 if( blockIdx === 0 ) {

  if( this.current === this.initElemsCount - 1 &amp;&amp; dir === 'right' ) {

   this.current = 0;

  }
  else if( this.current === 0 &amp;&amp; dir === 'left' ) {

   this.current = this.initElemsCount - 1;

  }
  else {

   ( dir === 'right' ) ? ++this.current : --this.current;

  }

  this.isAnimating = false;

 }
 else if( blockIdx === 1 ) {

  $main.find( 'figcaption' ).addClass( 'fs-transition' );

 }

}
_initEvents    : function() {

 var _self = this;

 $window.on( 'debouncedresize.imgslider', function() {

  _self._resizeBlocks();

 } );

},
// resize the images
_resizeBlocks   : function() {

 var _self = this;

 this.$blocks.each( function( i ) {

  var $el  = $( this ).children( 'figure' ),
   $img = $el.children( 'img' ),
   dim  = _self._getImageDim( $img.attr( 'src' ), { width : $el.width(), height : $el.height() } );

  // save the image dimentions
  switch( i ) {
   case 0 : _self.$blockL.data( 'imgstyle', dim ); break;
   case 1 : _self.$blockC.data( 'imgstyle', dim ); break;
   case 2 : _self.$blockR.data( 'imgstyle', dim ); break;
  };

  // apply style
  $img.css( dim );

 } );

}

  • Demo
  • Download



Dan itu saja artikel mengenai jQuery image slider with three panels and 3D look! Saya harap Anda menikmati tutorial ini dan merasa berguna!
Jika ada pertanyaan kita bahas di form komentar di bawah..
Terima kasih!
Suka Artikel? Bagikan: Facebook Twitter Google+
0 Komentar untuk " jQuery Image Slider With Three Panels and 3D Look"

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Entri Populer

  • EDU Backlink
    EDU Backlink
    Backlink .EDU sekarang ini masih menjadi incaran bagi para blogger untuk menaikkan ranking situs/blog mereka, tapi kadang-kadang kita meras...
  • Minima Responsive Template
    Minima Responsive Template
    DEMO | DOWNLOAD Minima Responsive Blogger Template sempurna Untuk Blog Pribadi , modern dan sepenuhnya responsif (coba mengubah ...
  • Tutorial Membuat Koneksi WDS di Mikrotik
    Tutorial Membuat Koneksi WDS di Mikrotik
    Teori Dasar Wireless Distribution System (WDS) WDS (Wireless Distribution System) adalah sistem yang memungkinkan interkoneksi antar Access...
  • Mikrotik Tersambar Petir
    Mikrotik Tersambar Petir
    Sedikit sharing tentang sambaran petir di Mikrotik . Beberapa waktu lalu terjadi keanehan di jaringan yang saya kelola, dimana jaringan inte...
  • Cara Mengetahui Password Winbox Mikrotik
    Cara Mengetahui Password Winbox Mikrotik
    Lupa Username dan Password Mikrotik? Lupa Username dan Password di Winbox Mikrotik? Jika jawabannya Ya , maka anda berada di tempat yang t...
  • Claud Storage Gratis Untuk Penyimpanan Data Online
    Claud Storage Gratis Untuk Penyimpanan Data Online
    Claud Storage Gratis Untuk Penyimpanan Data Online - Sebelum masuk ke inti materi, saya terangkan sedikit tentang layanan cloud storage . Se...
  • Penjelasan Queue Tree & PCQ serta Penerapannya di Mikrotik
    Penjelasan Queue Tree & PCQ serta Penerapannya di Mikrotik
    Pengaturan dan managemen Bandwidth di Mikrotik tidak dapat lepas dari fitur Queue. Ada dua jenis Queue yang dapat digunakan di Mikrotik, ya...
  • Membuat Posting Layar Penuh
    Membuat Posting Layar Penuh
    Cara Membuat Posting Layar Penuh - Saya membuat sebuah aplikasi/widget kecil untuk membuat posting di blog menjadi memiliki alternatif tamp...
  • Cara Memantau dan Memonitor Jaringan Mikrotik Menggunakan The Dude
    Cara Memantau dan Memonitor Jaringan Mikrotik Menggunakan The Dude
    Memantau dan memonitor jaringan mikrotik dan perangkat lainnya yang saling terhubung dapat dilakukan dengan mudah menggunakan aplikasi yang ...
  • Tutorial Shared Bandwidth Management Mikrotik Menggunakan Simple Queue
    Tutorial Shared Bandwidth Management Mikrotik Menggunakan Simple Queue
    Shared Bandwidth Management Mikrotik digunakan untuk mengalokasikan bandwidth tiap client dengan rate yang bervariasi tergantung aktif tida...

Labels

Android (2) Artikel (37) Backup (2) Bandwidth Management (8) Blogging (63) Blogspot (9) Blokir Website (6) Bridging (2) Burst (1) CSS (38) Dasar Mikrotik (24) Desain Rumah (1) DHCP (2) DNS (4) Download (9) eBook (1) Email (1) Error (1) Facebook (18) Failover (2) Firewall Mikrotik (21) Game (1) Hack (1) Hotspot (8) IDM (1) Install (2) Internet (11) Joomla (1) jQuery (24) Kaos Mikrotik (2) Komputer (5) Lain-Lain (13) Layer 7 (4) Linux (1) Load Balance (3) Mikrotik (24) Mikrotik Lanjut (51) Mikrotik Outdoor (2) Modem (1) MTCNA (2) MUM (5) Netcut (2) Netwatch (4) Password (1) Petir (1) Photoshop (1) PoE (1) Power Mikrotik (3) Proxy (6) RB433 (1) RB751U-2HnD (6) RB951Ui-2HnD (4) Reset (3) RouterBoard (10) RouterOS (19) Routing (5) Scripting (4) Security (1) SEO (20) Setting Mikrotik (34) SMS (1) SXTG-2HND (1) Template (31) The Dude (1) Tools (4) Troubleshooting (1) Tunnel (1) Tutorial Mikrotik (58) Twitter (2) Upgrade (4) USB (1) USB Modem (3) User Manager (2) Virtual (7) VPN (1) Widget (32) Winbox (7) Windows (2) Wireless Mikrotik (13) Wireless P2P (5) Wireless Security (1) Wireless Tools (1) Wordpress (10)
Copyright 2014 Pinguin Techno - All Rights Reserved
Template By Jenny Psychicfio