AGcreator Blog

Simple Lightbox Evolution untuk Blog

Lightbox evolution ini pernah saya gunakan pada template sebelumnya untuk 'Konversi Kode'. Tutorial cara pemasangan Lightbox Evolution ini sebetulnya sudah dishare oleh Om-Dayz (Dayz Hidayat). Akan tetapi setelah saya cek ulang ternyata kodenya sudah kehapus. oleh karena itu saya coba share ulang untuk sobat semua.

Bagi sobat yang ingin menerapkan lightbox ini, silahkan ikuti langkah mudahnya :

1. Pasang framework jQuery diatas kode </head>:

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

Apabila sudah terpasang jQuery silahkan ganti dengan versi 1.7.2, karena saya coba dengan beberapa versi sampai yang terbaru, tidak bisa bekerja

2. Pasang Lightbox jQuery serta CSS-nya masih di atas kode </head>

<link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ 
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script>

3. Simpan Template

Cara Penggunaan

Untuk penggunaan Lightbox Evolution ini, cukup tambahkan class='lightbox' pada url tujuan. Untuk lebih lengkapnya lihat cara penggunaan dibawah ini :

Gambar Satuan

<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Untuk menambahkan class='lightbox' pada setiap gambar secara otomatis, simpan kode ini di atas </body>

<script type='text/javascript'>
  jQuery(document).ready(function(){
    $(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightbox();
  });
</script>

Album / Gallery

Untuk membuat Gallery, tambahkan nama album dengan menggunakan tag rel contoh rel="nama-album"

<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" rel="nama-album" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>

Inline Content

id="loremipsum" Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque.

<a class="lightbox" href="#loremipsum">Buka LoremIpsum</a>
<a class="lightbox" href="?lightbox[width]=534&amp;lightbox[height]=165#loremipsum">Buka LoremIpsum dengan ukuran tertentu (534x165)</a>

Youtube

<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>

Flash /SWF

<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="lightbox">Flash</a>

Iframe

<a href="https://kang-is.googlecode.com/svn/trunk/converter.html?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Buka Iframe</a>
<a class="lightbox" data-options='{"width":450, "height":450, "iframe": true}' href='https://kang-is.googlecode.com/svn/trunk/converter.html' rel='nofollow'>Versi HTML5</a>

Sebetulnya masih banyak cara penggunaannya, namun yang diatas itu yang paling sering digunakan.

FULL Repost from : Blog Kang Ismet

Download Teamviewer + Cara Install versi Indonesia

Seperti biasanya , kali ini kang rian ingin berbagi tutorial yang sangat mudah dan mungkin berguna untuk sobat yang membutuhkan software dan cara install software "Teamviewer" ini ..

Apa itu Teamviewer?

Sekilas tentang Teamviewer : Team viewer adalah sebuah software yang berfungsi untuk mengerakan computer client / teman anda dari jarak jauh , yang bisa di gunakan sesuai keperluan, seperti persentasi / tutorial / teknisi,dsb .. Info lengkap?

Berikut adalah screen shot / tampilan software Teamviewer itu sendiri :
SCREENSHOT TEAMVIEWER

Baiklah, setelah mengetahui apa itu Teamviewer, dan apa fungsi nya.. untuk sobat yang ingin mendownload software ini, dan mengetahui cara install software ini , silahkan klik tautan/link download di bawah ini :

Download Teamviewer + Cara Install [ Indonesia ]

Cara Membuat Gambar Bergetar dengan CSS3 Animasi

Hehe, CSS3 Animasi lagi nih sob .. pada kesempatan kali ini saya akan berbagi catatan/tutorial mengenai sedikit css3 transform yang di buat khusus untuk effect gambar bergetar apabila di sentuh , untuk sobat yang gak sabar pengen lihat langsung demo nya , silahkan sentuh pada gambar logo kang rian dibawah ini :

Untuk tutorial nya silahkan sobat simak langsung Markup HTML dan Struktur CSS dibawah ini :

Markup HTML :


<img class="digoyang" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZONZDrwv1kDuW3rb-o1AUtv1BEUA3Mxtiy6NDQuMhn3KsUi7KdYf54sncJdX8gYetqyiMVbNiu5vHntFw1SND73KlYjMoJPfsX1_k7mgtFcFI2ZrqtKDImVmJmmJ_sjbRuYs1FTgCljCT/s1600/Kang+Rian.png"/>

Struktur CSS3 Animation :


img.digoyang:hover {
animation-name: digoyang;
-moz-animation-name:  digoyang ;
-webkit-animation-name:  digoyang;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  digoyang  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  digoyang  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  digoyang  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Catatan : Jika ada yang ingin ditanyakan silahkan tanyakan pada kolom komentar sesuai dengan apa yang dibahas pada halaman tutorial ini , terima kasih

Source code : http://blog.ridhomf.web.id/

Simple Responsive Navigation HTML5 Menu

Pada kesempatan ini saya akan berbagi sedikit source code CSS & Javascript untuk membuat Simple Menu Navigation "Responsive" untuk sobat blogger , untuk sumber nya sendiri saya lupa :D , karena saya sendiri googling dan hanya menemukan source ini dari Jsfiddle.net , sebelum membuat Simple Responsive Navigation HTML5 Menu pastikan sobat sudah memasang jQuery library & meta tag media query dibawah ini untuk mengaktifkan nya, silahkan simpan tepat di atas kode </head>:


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

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Catatan :
Jika salah satu kode di atas sudah terpasang diblog sobat, saya sarankan untuk tidak menduplikasi kan Jquery library & Meta tag Query di atas , karena akan bentrok satu sama lain .

Jika sobat penasaran seperti apa Simple Responsive Navigation HTML5 Menu ini, sobat bisa melihat langsung demo nya disini : DEMO
Untuk membuktikan responsive nya silahkan perkecil frame browser nya pada halaman DEMO, seperti gambar dibawah ini :

Baiklah, Jika langkah di atas sudah dimengerti kita lanjut ke tahap berikutnya , yaitu memasang ( CSS - Javascript & HTML ) nya ..

Berikut Kode CSS nya :



nav {
 height: 40px;
 width: 100%;
 background: #656565;
 font-size: 11pt;
 font-family: 'PT Sans', Arial, sans-serif;
 font-weight: bold;
 position: relative;
 border-bottom: 2px solid #283744;
}

nav a {
 color: #fff;
 display: inline-block;
 width: 100px;
 text-align: center;
 text-decoration: none;
 line-height: 40px;
 /*text-shadow: 1px 1px 0px #283744;*/
}

nav header {
 display: none;
  
}

nav ul {
 padding: 0;
 margin: 0 auto;
 width: 400px;
 height: 40px;
}
nav li {
 display: inline;
 float: left;
}

nav li a {
 border-right: 1px solid #787878;
 box-sizing:border-box;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
}


nav li:last-child a {
 border-right: 0;
}
nav a:hover, nav a:active {
 background-color: #868686;
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
 nav { 
    height: auto;
  
   }
 
 nav header {
 display: none;
  
}
 
   nav ul {
    width: 100%;
    display: block;
    height: auto;
  
   }
   nav li {
    width: 50%;
    float: left;
    position: relative;
   }
   nav li a {
  border-bottom: 1px solid #787878;
  border-right: 1px solid #787878;
 }
   nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
  background: #656565;
   }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
 nav {
  border-bottom: 0;
  background: #656565;
  width: 100%;
  height: 33px;
  padding: 7px 0 0 0;
  
 }
 
 
  
 nav ul {
  display: none;
  height: auto;
  padding: 10px 0 0 0;
  clear: both;
  background: #656565; 
 
 }
 
 .btn {
  width: 24px;
  height: 22px;
  background: #3CC;
  float: left;
  cursor: pointer;
  margin: 0 10px 0 10px;
  padding: 3px 0px 0 6px;
  -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
          border-radius: 2px;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP-thsKvsW3xif2TYrfGgnWHRk03a3FtdRU7u8WCTq7yh4EhxFw4JoNxSX0k7_lwqhjREuNaaxgRJW0qOf2V6EOgWkIJ8wNwlUP2VOH-VnwHHPHyR4MMSH_qpH_yAGZI4DzHBlE8Caxo7/s20/menu-responsive.png') no-repeat center;
 }
 
 .btn .icon {
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 3px;
  background-color: #f5f5f5;
  -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

 
 
 
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
 nav li {
  display: block;
  float: none;
  width: 100%;
 }
 nav li a {
  border-bottom: 1px solid #787878;
 }
}

Berikut Kode JAVASCRIPT nya :


$(function() {
   var pull   = $('.btn');
    menu   = $('nav ul');
    menuHeight = menu.height();

   $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
   });

   $(window).resize(function(){
          var w = $(window).width();
          if(w > 320 && menu.is(':hidden')) {
           menu.removeAttr('style');
          }
      });
  });

Berikut Kode HTML, Untuk memanggil Menu Responsive nya :


<nav>
 <div class="btn">
    </div>
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Contact</a></li>
        <li><a href="http://goo.gl/7vVcM5" target='_blank'>Blog</a></li>
    </ul>
    
</nav>

Selanjutnya , silahkan sobat kreasikan sendiri dari source code Simple Responsive Navigation HTML5 Menu di atas , jika ada yang ingin ditanyakan silahkan tanyakan lewat form komentar dibawah ini , semoga bermanfaaat! :) terima kasih ..

Smooth Scrolling Effect - Paling Simple BRO!

Haha , kenapa ane bilang paling simple? monggo sobat bukti.in sendiri yahh :D , pada kesempatan kali ini ane cuman mau re-share tutorial dari web nya abang ane "CSS-Tricks.com" wkwkwk, soalnya abang ane sama-sama tak berambut kaya author nya css-tricks.com :D hehe *bercanda ..

Untuk demonstransi nya , contoh kita akan membuat sebuah link/anchor text yang fungsinya ketika di klik link tersebut akan menggiring kita ( bukan menggiring bola ) untuk ke tempat/area divisi yang kita inginkan , contoh klik tombol tambahkan komentar dibawah ini :

Tambahkan Komentar

Markup seperti link di atas, ± Sepert ini :

<a href="#comment-form">Tambahkan Komentar</a>

Ekhm , belum beres bro! :D , sebelum bikin markup di atas jangan lupa pasang javascript di bawah ini tepat di atas kode </head> yaah bro, silahkan bro! jangan malu-malu :


<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
//]]>
</script>

Cara Menampilkan Jam, Hari & Tanggal dengan Javascript.

Kesempatan oh Kesempatan .. alhamdulillah akhirnya ada kesempatan juga buat sharing lagi! . kali ini saya ingin berbagi pengetahuan seputar bumbu Javascript.. tentang "Bagaimana Cara Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" ..

Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat :

Cara Menampilkan Tanggal dengan Javascript :


<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
//-->
</script>

Hasilnya :

Cara Menampilkan Hari dan Tanggal dengan Javascript :

<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum&#39;at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
    thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
//-->
</script>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :

<script type="text/javascript">
<!--
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min);
//-->
</script>

Hasilnya :

Dengan Format AM/PM :


<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
    a_p = "AM";
} else {
    a_p = "PM";
}
if (curr_hour == 0) {
    curr_hour = 12;
}
if (curr_hour > 12) {
    curr_hour = curr_hour - 12;
}

var curr_min = d.getMinutes();
curr_min = curr_min + "";
if (curr_min.length == 1) {
    curr_min = "0" + curr_min;
}
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>

Hasilnya :

Cara Menampilkan Jam saat ini! dengan Javascript ( Aktif ) :

<div id="clock"></div>
<script type="text/javascript">
<!--
function showTime() {
    var a_p = "";
    var today = new Date();
    var curr_hour = today.getHours();
    var curr_minute = today.getMinutes();
    var curr_second = today.getSeconds();
    if (curr_hour < 12) {
        a_p = "AM";
    } else {
        a_p = "PM";
    }
    if (curr_hour == 0) {
        curr_hour = 12;
    }
    if (curr_hour > 12) {
        curr_hour = curr_hour - 12;
    }
    curr_hour = checkTime(curr_hour);
    curr_minute = checkTime(curr_minute);
    curr_second = checkTime(curr_second);
 document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
    }

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
setInterval(showTime, 500);
//-->
</script>

Hasilnya :

Silahkan berikan komentar jika ada pertanyaan :)

Cara Cepat Belajar Pure CSS3 Animation.

Hello world, Pada kesempatan kali ini Kang Rian ingin berbagi ilmu secara instan di dalam 1 halaman membahas seputar CSS Animasi ( Support di semua Browser ).

Apa itu Pure CSS Animation ?
Maksud dari Pure sendiri adalah , Pembuatan Animasi yang hanya menggunakan satu metode yaitu CSS (Cascading Style Sheets) , tanpa di iringi dengan panggilan Bumbu Javascript, dsb .

Berikut Simple Demonstrasi-nya sob :

Dan berikut adalah contoh mudah Syntax CSS Animasi :


.animasi {

position:relative;

animation:sukasuka 3s infinite; /*Safari*/

-webkit-animation:sukasuka 3s infinite; /*Chrome*/

}



@keyframes sukasuka

{

0% {top:0px; }

50% {top:50px;}

100% {top:0px;}

}



@-webkit-keyframes sukasuka /*Safari and Chrome*/

{

0% {top:0px; }

50% {top:5px;}

100% {top:0px;}

}

Pengertian dari Syntax CSS Animation di atas :

1. @keyframes : keyframes berfungsi untuk menentukan gerak animasi ..

2. sukasuka : itu hanyalah sebuah nama animasi yang menentukan animasi yang dibuat melalui properti @keyframes seperti contoh di atas , bisa dirubah sesuka hati sobat.

3. % : Persentase , nah! didalam @keyframe / menentukan gerak animasi , sobat bisa menggunakan persentase agar lebih mudah , setiap persentase 0 - 100% bisa sobat kreasikan sesuka-hati sobat. :)

4. -webkit- : Hmm, untuk sobat yang paham Syntax CSS3 , itu pasti udah pada tau yah :D .. Untuk sobat yang belum tau , -webkit- sendiri berfungsi agar CSS Animasi berjalan pada Browser-browser baru, seperti Google Chrome & Safari.

5. 3s : 3 Second , maksud nya adalah untuk menentukan durasi / kecepatan animasi yang di buat dari @keyframes tadi . :)

6. infinite : Maksudnya adalah menentukan bahwa animasi yang dibuat dari @keyframes tadi bergerak terus-menerus ( tanpa henti ) . Hehe kalo Bahasa sunda nya tuh "Teu Eureun-eureun" :D hehe *kidding

* Sekian penjelasan seputar Pure CSS3 Animation menurut Kang Rian , semoga postingan "Cara Cepat Belajar Pure CSS3 Animation" ini bermanfaat. Kurang dan lebih nya mohon dimaafkan, karena si akang juga sama-sama masih belajar.! hehe , untuk pertanyaan seputar CSS3 Animasi silahkan Komentar pada Form Komentar dibawah postingan ini .

Referensi : http://w3schools.com/css/css3_animations.asp