Showing posts with label Artikel. Show all posts
Showing posts with label Artikel. Show all posts

Membuat Multiple Login (User Account) di Chrome

google chrome
Buat sobat boelshare yang mempunyai lebih dari satu account di yahoo / google / facebook  atau yang lainnya, dan suka menggunakan account-nya secara berbarengan sekarang semakin mudah untuk membuat multiple user atau melakukan multiple login di chrome dengan munculnya google chrome dengan update-an terbaru, dan feature terbarunya. pada  Google Chrome 16.0.912.63 stable for Windows, sekarang tidak perlu ribet lagi untuk melakukan settingan sana-sini, cukup beberapa langkah saja untuk membuat multiple user atau multiple login di chrome. Sebelumnya update terlebih dahulu google chrome sobat boelshare, atau jika belum ada download Google Chrome 16.0.912.63 stable for Windows, kemudian ikutin langkah-langkah berikutnya.
Berikut ini adalah cara mudah untu membuat multiple user atau multiple login di chrome:
  1.  Pilih Menu - Option - Personal Stuff - Add New User

    multi login chrome - boelshare

    multiple user - boelshare
  2. Setalah klik Add New User maka akan tercipta avatar dan nama secara acak  dan muncul halaman window baru / New Window
    multi account di chrome
  3. Klik 2x pada gambar avatar untuk merubah nama dan gambar avatar, setelah selesai klik OK
    multiple login di chrome
  4. Untuk menggunakannya, gunakan halaman window baru yang tadi terbuka ketika melakukan Add New User  
  5. Untuk melakukan switch User, klik gambar avatar yang berada di pojok kiri atas dan pilih user yang akan di gunakan.
    multiple login
  6. Selesai
Read More

Scroll to Top Animation for Blogger with Jquery

back to top - scroll to top
Lama Tidak menulis artikel, pada kesempatan kali ini boelshare ingin memberikan trik tutorial membuat Animasi Back to Top atau Scroll to Top pada blogspot. Apa itu Back to Top??, Back to Top atau scroll to top adalah semacam "Page Jump"  untuk mempermudah pengunjung blog kembali kehalaman atas tanpa melakukan scroll pada mouse. Biasanya tombol back to top di letakkan di bawah halaman blog. Untuk membuat tombol / button Back to Top diperlukan kode script sperti ini:
  1. Login ke blogger.
  2. Masuk ke Template => Edit HTML => Proceed => Expand Widget Templates. 
  3. Tambahkan kode ini:  id="top"  pada bagian  <body> , sehingga menjadi  <body id="top">  atau bisa juga tambahkan kode ini :  <div id='top'></div>  dibawah kode  <body> , gunakan CTRL + F untuk mempermudah pencarian
  4. Kemudian masukkan kode ini sebelum kode </body>
    
    
    
    
  5. agar posisi tombolnya berada di sebelah pojok kanan bawah, tambahkan kode css berikut ini:
    #back-top{position:fixed;bottom:8px;right:10px}
    #back-top img{opacity:0.3;-webkit-transition:1s;-moz-transition:1s;transition:1s}
    #back-top img:hover{opacity:1.0}
    
  6. Simpan Template, selesai....
Contohnya bisa di lihat pada blog ini,,semoga bermanfaat.. 
Read More

Tutorial Membuat Grafik Menggunakan Highcharts

Tutorial Highcharts
Pada kesempatan kali ini boelshare akan mencoba membuat grafik (chart) menggunakan javascript (Highcharts Js), seperti yang tampak pada gambar disamping. Sebenarnya banyak plugin javascript yang berguna untuk membuat grafik yang tersedia di internet, tapi kali ini kita akan mencoba membahas tentang Highcharts Js. Highcharts adalah sebuah Interaktive Javascript charts yang dibuat oleh Highsoft untuk membuat grafik dengan javascript, Amerika. Untuk membuat grafik /chart dengan highcharts memerlukan javascript library berupa jQuery atau mootools. Berikut langkah-langkah cara membuat grafik / chart menggunakan javascript (Highcharts) :

Instalasi (Installation)
  1. Download JQuery dan Package Highcharts, Ekstrak file highcharts
  2. Copy folder "js" hasil ekstrak-an kemudian paste ke direktori tempat kerja sobat, Jangan lupa copy-paste juga file Jquery yang tadi di download ke folder "js", untuk memanggil file tersebut memasukan script dibawah ini:
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/highcharts.js" type="text/javascript"></script>
    <!-- 1a) Optional: add a theme file -->
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="js/modules/exporting.js"></script>
  3. Kemudian ketik secript sebagai berikut: 
    <script type="text/javascript">  
       var chart;
       $(document).ready(function() {
        chart = new Highcharts.Chart({
         chart: {
          renderTo: 'container',
          defaultSeriesType: 'column'
         },
         title: {
          text: 'Hasil Penjualan Motor'
         },
         subtitle: {
          text: 'http://boelshare.blogspot.com'
         },
         xAxis: {
          categories: [
           'Jan', 
           'Feb', 
           'Mar', 
           'Apr', 
           'May', 
           'Jun', 
           'Jul', 
           'Aug', 
           'Sep', 
           'Oct', 
           'Nov', 
           'Dec'
          ]
         },
         yAxis: {
          min: 0,
          title: {
           text: 'Jumlah'
          }
         },
         legend: {
          layout: 'vertical',
          backgroundColor: '#FFFFFF',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          shadow: true
         },
         tooltip: {
          formatter: function() {
           return ''+
            this.x +': '+ this.y +' unit';
          }
         },
         plotOptions: {
          column: {
           pointPadding: 0.2,
           borderWidth: 0
          }
         },
                series: [{
          name: 'Jakarta',
          data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
        
         }, {
          name: 'Bekasi',
          data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
        
         }, {
          name: 'Bogor',
          data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
        
         }, {
          name: 'Bandung',
          data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
        
         }]
        });        
       });    
      </script>
    
  4. Untuk menampilkan hasilnya, masukkan script berikut di dalam tag <body></body> :
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
  5. Script lengkapnya sebagai berikut:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
     <meta name="author" content="Imamfirmansyah" />
    
     <title>Untitled 1</title>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <!-- 1a) Optional: add a theme file -->
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="js/modules/exporting.js"></script>
    
    <script type="text/javascript">
      
       var chart;
       $(document).ready(function() {
        chart = new Highcharts.Chart({
         chart: {
          renderTo: 'container',
          defaultSeriesType: 'column'
         },
         title: {
          text: 'Hasil Penjualan Motor'
         },
         subtitle: {
          text: 'http://boelshare.blogspot.com'
         },
         xAxis: {
          categories: [
           'Jan', 
           'Feb', 
           'Mar', 
           'Apr', 
           'May', 
           'Jun', 
           'Jul', 
           'Aug', 
           'Sep', 
           'Oct', 
           'Nov', 
           'Dec'
          ]
         },
         yAxis: {
          min: 0,
          title: {
           text: 'Jumlah'
          }
         },
         legend: {
          layout: 'vertical',
          backgroundColor: '#FFFFFF',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          shadow: true
         },
         tooltip: {
          formatter: function() {
           return ''+
            this.x +': '+ this.y +' unit';
          }
         },
         plotOptions: {
          column: {
           pointPadding: 0.2,
           borderWidth: 0
          }
         },
                series: [{
          name: 'Jakarta',
          data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
        
         }, {
          name: 'Bekasi',
          data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
        
         }, {
          name: 'Bogor',
          data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
        
         }, {
          name: 'Bandung',
          data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
        
         }]
        });
        
        
       });
        
      </script>
    
    </head>
    
    <body>
    
    <!-- 3. Add the container -->
      <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
    
    </body>
    </html>
    

Penjelasan Lebih Lanjut:

  • Pada point ke-3 ini, kita memanggil file-file javascript yang dibutuhkan.
  • Pada script 
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    merupakan themes untuk tampilan highcharts, ada 4 jenis themes yang disediakan highcharts. bisa disesuaikan sesuai selera.
Read More

Recent Comments

Free Page Rank Tool
alexa rank. boelshare
Free Auto Backlinks boelshare.blogspot.com
free search engine submission The American Directory TK Free Web Directory Bloggers - Meet Millions of Bloggers

free counters
Internet Blog DirectoryComputers Blogs
blog directory
eXTReMe Tracker
Software
Personal Blogs
Hot! Free Download Software Full Version W3 Directory - the World Wide Web Directory

free link

 

Selamat Datang! di Blog Boelshare.