Cara Install Node JS di Ubuntu 14.04

Node JS adalah sebuah platform berbasis Java  script, sebuah ‘task runner’, yang popularitasnya semakin meningkat, karena sangat membantu para developer dalam mengembangkan project. Dengan lebih dari 100.000 NPM (node package manager), dokumentasi yang sekelas wordpress, Node JS  merupakan angin segar bagi pengguna open source.

Continue reading “Cara Install Node JS di Ubuntu 14.04”

Membuat Sinkronisasi Video dan Slide Image Sederhana dengan Popcorn.js

Dengan adanya situs video seperti Youtube, perkembangan infornasi di internet semakin pesat! Banyak tutorial dalam bentuk video bertebaran, dengan semangat belajar yang cukup siapapun bisa mencari video tutorial dan belajar sendiri dari video. Disisi lain, metode pengajaran konvensional dengan memperlihatkan slide juga masih efektif.

Slide yang dimasukkan didalam video dapat dilakukan, tetapi akan lebih interaktif jika keduanya bisa muncul bersamaan.
Video merepresentasikan sang guru, dan slide merepresentasikan materi yang mewakili bahan pembelajaran. Maka untuk sebuah online learning yang efektif diperlukan video dan slide yang tersinkronisasi berdasarkan durasi video.

Bagaimana melakukan sinkronisasi video dan slide/gambar ? Popcorn.js! dan itu gratis!
Saya mendapatkan sebuah cara sederhana untuk dapat melakukan sinkronisasi sebuah video youtube dengan sebuah set gambar. Masih banyak contoh menarik lainnya di website developernya.

Berikut adalah snippetnya:

<html>
  <head>
    < script src="http://popcornjs.org/code/dist/popcorn-complete.min.js">
 
    <script>
      // ensure the web page (DOM) has loaded
      document.addEventListener("DOMContentLoaded", function () {
 
           // Create a popcorn instance by calling the Youtube player plugin
         var example = Popcorn.youtube(
           '#video',
           'http://www.youtube.com/watch?v=CxvgCLgwdNk' );
 
         // add a footnote at 2 seconds, and remove it at 6 seconds
         example.footnote({
           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"
         });
 
         // play the video right away
         example.play();
 
      }, false);
    </script>
  </head>
  <body>
    < div id="video" style="width: 360px; height: 300px;" >
    < div id="footnotediv">
  </body>
</html>

Sumber, Selamat mencoba 🙂

Bagaimana cara menambah character counter untuk excerpt pada WordPress

Bagaimana saya mengetahui jumlah karakter excerpt pada post wordpress saya? caranya, tambahkan script penghitung karakter atau character counter script ke dalam metabox excerpt anda.

Yep, seperti yang bisa teman-teman lihat di-atas, nantinya pada metabox excerpt, disebelah kanan atas akan terdapat character counter live yang akan menghitung jumlah karakter yang telah dimasukkan untuk excerpt, Sehingga jika kita menentukan batasan karakter yang tampil pada excerpt, kita dapat menentukan kata-kata yang tampil secara optimal. Buat yang konsen di dunia blogging, pastinya kata-kata bisa berarti traffic 🙂

Langsung saja saya paparkan hasil googling saya, mengenai cara menambah character counter untuk excerpt pada WordPress (penghitung karakter)

function excerpt_count_js (){
      echo '< script >jQuery ( document).ready(function(){
jQuery ( "#postexcerpt .handlediv").after("<div style=\"position:absolute;top:0px;right:5px;color:#666;\"><small>Excerpt length: </small><input type=\"text\" value=\"0\" maxlength=\"3\" size=\"3\" id=\"excerpt_counter\" readonly=\"\" style=\"background:#fff;\"/> <small>character(s).</small></div>");
     jQuery ( "#excerpt_counter").val(jQuery ( "#excerpt").val().length);
     jQuery ( "#excerpt").keyup( function() {
     jQuery ( "#excerpt_counter").val( jQuery ("#excerpt").val().length);
   });
});';
}
add_action ( 'admin_head-post.php', 'excerpt_count_js');
add_action ( 'admin_head-post-new.php', 'excerpt_count_js');

Semoga bermanfaat, makasih yang udah baca, bantu di share yah karena kita semua ingin tahu 🙂

Sumber: translasi dari sini akhirnya jadi ini deh

Membuat widget slider flexslider sederhana

Kali ini saya mau berbagi sedikit pengetahuan saya mengenai flexslider, dan membuat widget slider sederhana dengan flexslider ini, mariii…. 🙂

Okeh, mari kita membuat widget slider flexslider sendiri!

1. Download source dari Flexslider disini

Setelah source Flexslider berhasil didownload, ekstrak kedalam folder sesuai keinginan. Kalau saya menaruhnya di folder ‘js’, jadi kurang lebih seperti ini ‘public_html/js’

2. Struktur dasar dari Flexslider

Deklarasi Javascript dan CSS flexslider dilakukan dalam tag ‘< head >‘

< link rel="stylesheet" href="http://www.domainmu.com/js/flexslider/flexslider.css" type="text/css" media="screen"  />
< script type="text/javascript" src="http://www.domainmu.com/js/flexslider/jquery.flexslider-min.js" >
< script type="text/javascript" >
			jQuery ( document).ready(function($){
				$ ( '.flexslider').flexslider({
					slideshowSpeed: 36000, //silahkan diganti
					animationDuration: 36000 //silahkan diganti
				});
			});
		< /script >

Deklarasi HTML yang akan menjadi slider dengan flexslider, letakkan di bagian mana kamu mau slidernya muncul

< div class="flexslider">
  < ul class="slides">
    < li>
      < img src="slide1.jpg" />
    
    < li>
      < img src="slide2.jpg" />
    
    < li>
      < img src="slide3.jpg" />
    
  

Secara HTML flexslider ini sudah berfungsi dengan baik. Tapi karena post ini judulnya adalah membuat widget slider flexslider sederhana, maka belum lengkap kalau belum kita buat widgetnya yah 🙂 Maka langsung saja kita ke langkah selanjutnya!

3. Pembuatan widget slider flexslider

Deklarasi dasar pembuatan sebuah widget dalam wordpress adalah seperti berikut:

    class My_Widget extends WP_Widget {

	public function __construct () {
		// widget actual processes 
                // definisi variable2 utama dari widget yang akan kita buat
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
                // HTML widget yang akan tampil
	}

 	public function form ( $instance ) {
		// outputs the options form on admin
                // tampilan form widget di WP-admin
	}

	public function update ( $new_instance, $old_instance ) {
		// processes widget options to be saved
                // apabila form widget kamu di edit, valuenya akan ter-update
	}
}

//Daftarin dan eksekusi widget kamu
add_action ( 'widgets_init', function (){
     register_widget ( 'My_Widget' );
});

Berikut adalah sample widget yang sudah jadi, harap maklum masih sederhana, silahkan bermain-main lebih lanjut 🙂


class Widget_Ku extends WP_Widget {

function __construct () {

$widget_ops = array ( ‘classname’ = > ‘widget_ku’, ‘description’ = > __(‘Widget Flexslider Sederhana’, ‘Widget_Ku’) );
$control_ops = array ( ‘width’ = > 300, ‘id_base’ = > ‘widget_ku’ );

parent::__construct (
‘widget_ku’, // Base ID
‘Widget Flexslider Sederhana’, // Name
$widget_ops,
$control_ops
);

}

function form ( $instance ) {

$defaults = array (
‘image_id1’ = > ”,
‘image_id2’ = > ”,
‘image_id3’ = > ”,
);

$instance = wp_parse_args ( (array) $instance, $defaults );
?>
< fieldset style =" background-color: #F1F1F1; width: 95.5%; border: 1px solid #DDD; padding: 10px 0px 10px 10px;">
< table style=" width: 100%;" cellpadding="0" cellspacing="0">
< tr>
< td>< label>Image url 1
< td align="left">
< input style=" width: 98%;" type=" text" id=" get_field_id( ‘image_id1’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id1’ ); ?>” value=”< ? php echo $instance['image_id1'] ?>” />

< tr>
< td>< label>Image url 2
< td align="left">
< input style="width: 98%;" type="text" id="< ? php echo $this->get_field_id( ‘image_id2’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id2’ ); ?>” value=”< ? php echo $instance['image_id2'] ?>” />

< tr>
< td>
< td align="left">
< input style="width: 98%;" type="text" id="< ? php echo $this->get_field_id( ‘image_id3’ ); ?>” name=”< ? php echo $this->get_field_name( ‘image_id3’ ); ?>” value=”< ? php echo $instance['image_id3'] ?>” />

< ? php } function update ( $new_instance, $old_instance ) { $instance['image_id1'] = $new_instance['image_id1']; $instance['image_id2'] = $new_instance['image_id2']; $instance['image_id3'] = $new_instance['image_id3']; return $instance; } function widget ( $args, $instance ) { ?>
< div class="flexslider">
< ul class="slides">
< ? php $i=1; while ($instance['video_id'.$i] != '') { ?>
< li>
< img src="“>

< ? php $i++; } ?>

< ? php } } add_action ( 'widgets_init', 'load_widget_ku' ); function load_widget_ku () { register_widget( 'Widget_Ku' ); } [/html] Nahhh..... selamat mencoba yah 🙂 Jika ada pertanyaan silahkan diajukan dibawah, semoga saya bisa membantu. Semoga Artikel saya memberikan sedikit pencerahan, silahkan di share supaya 'kita semua bisa' membuat widget slider sederhana dengan Flexslider.