Monday, 30 April 2012

membuat toolbar dengan efek jQuery dan CSS3



Berikut ialah contoh toolbar dengan efek jQuery dan CSS3

* Cara pembuatannya sebagai berikut
* Masuk ke blogger
* Pilih Rancangan dan masuk ke Edit HTML
* Tekan tombol F3 dan cari kode <head>
* Letakan kode jquery dan CSS dibawah ini  diatas kode <head> atau sebelum kode <head>


<link href='https://sites.google.com/site/jayanaktkj/toolbar/style.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/jayanaktkj/toolbar/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){
   
  //hide toolbar and make visible the &#39;show&#39; button
    $(&quot;span.downarr a&quot;).click(function() {
    $(&quot;#toolbar&quot;).slideToggle(&quot;fast&quot;);
    $(&quot;#toolbarbut&quot;).fadeIn(&quot;slow&quot;);   
  });
 
  //show toolbar and hide the &#39;show&#39; button
  $(&quot;span.showbar a&quot;).click(function() {
    $(&quot;#toolbar&quot;).slideToggle(&quot;fast&quot;);
    $(&quot;#toolbarbut&quot;).fadeOut();   
  });
 
  //show tooltip when the mouse is moved over a list element
  $(&quot;ul#social li&quot;).hover(function() {
        $(this).find(&quot;div&quot;).fadeIn(&quot;fast&quot;).show(); //add &#39;show()&#39;&#39; for IE
    $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
        $(this).find(&quot;div&quot;).hide();
    });
  });
 
  //don&#39;t jump to #id link anchor
  $(&quot;.facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a&quot;).click(function() {
   return false;                                        
    });
   
  //show quick menu on click
    $(&quot;span.menu_title a&quot;).click(function() {
        if($(&quot;.quickmenu&quot;).is(&#39;:hidden&#39;)){ //if quick menu isn&#39;t visible
            $(&quot;.quickmenu&quot;).fadeIn(&quot;fast&quot;); //show menu on click
        }
        else if ($(&quot;.quickmenu&quot;).is(&#39;:visible&#39;)) { //if quick menu is visible
      $(&quot;.quickmenu&quot;).fadeOut(&quot;fast&quot;); //hide menu on click
    }
    });
   
    //hide menu on casual click on the page
    $(document).click(function() {
            $(&quot;.quickmenu&quot;).fadeOut(&quot;fast&quot;);
            $(&quot;.quickmenu&quot;).css({&#39;vivibility&#39;: &#39;hidden&#39;});
    });
    $(&#39;.quickmenu&#39;).click(function(event) {
        event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
    });

       
});
   
</script>

* Dan langkah terakhir cari kode <body> letakan kode dibawah ini diatas atau sebelum kode <body>

<div id='toolbarbut'> <!-- hide button -->
<span class='showbar'><a href='#'>show bar</a></span>

</div>

<div id='toolbar'> <!-- toolbar container -->

<div class='leftside'> <!-- all things in floating left side -->
  <ul id='social'>
    <li><a class='rss' href='#'/><!-- icon -->
      <div class='tip' id='tiprss'><!-- tooltip -->
        <ul>
          <li><a href='alamat-url'>580 Readers</a></li>

          <li><a href='alamat-url'><small>[Subscribe]</small></a></li>
        </ul> 
      </div>
    </li>
    <li><a class='facebook' href='#'/>
      <div class='tip' id='tipfacebook'>
        <ul>
          <li><a href='http://www.facebook.com/sharer.php?u=&quot;%20+%20data:post.url%20+%20&quot;&amp;title=&quot;%20+%20data:post.title%27%20target=%27_blank'>Share Page</a></li>

          <li><a href='alamat-url'>| Profile</a></li>
        </ul> 
      </div> 
    </li>
    <li><a class='twitter' href='#'/>
      <div class='tip' id='tiptwitter'>
        <ul>
          <li><a href='http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>ReTweet</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul> 
      </div>
    </li>
    <li><a class='delicious' href='#'/>
      <div class='tip' id='tipdelicious'>
        <ul>
          <li><a href='alamat-url'>Bookmark</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul> 
      </div>
    </li>
    <li><a class='digg' href='#'/>
      <div class='tip' id='tipdigg'>
        <ul>
          <li><a href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Digg</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul> 
      </div>
    </li>
    <li><a class='stumble' href='#'/>
      <div class='tip' id='tipstumble'>
        <ul>
          <li><a href='alamat-url'>Stumble</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul> 
      </div>
    </li>
  </ul>
</div>

<div class='rightside'> <!-- all things in floating left side -->
  <span class='downarr'> <!-- hide button -->
  <a href='#'/>
  </span>

  <span class='menu_title'>
    <a class='menutit' href='#'>quick menu</a> <!-- quick menu title -->
  </span>
  <div class='quickmenu'>
    <ul> <!-- quick menu list -->
      <li><a href='alamat-url'>Beranda</a></li>
      <li><a href='alamat-url'>Tips dan Trik</a></li>

      <li><a href='alamat-url'>jQuery</a></li>
      <li><a href='alamat-url'>CSS3</a></li>
      <li><a href='alamat-url'>Blog</a></li>
      <li><a href='alamat-url'>Web</a></li>
    </ul>
  </div>
</div>

</div>

Friday, 27 April 2012

membuat menu lava lamp horizontal jQuery



Dalam tutorial yang lalu saya mempostingkan bagaimana cara membuat menu lava lamp gray. Dalam tutorial kali ini saya akan membuat menu lava lamp jQuery yaitu sedikit berbeda dari tutorial yang lalu. Menu lava lamp yang kali ini background nya transparan
* Contohnya bisa dilihat
disini



* Cara membuatnya sebagai berikut masuk ke blogger
* Pilih Rancangan
* Masuk ke Edit HTML
* Cari kode <head> letakan kode jQuery dibawah ini tepat diatas kode <head> atau sebelum kode <head>


<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/sliding-menu/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.geektantra.com/projects/jquery-sliding-menu/stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- jQuery UI is Optional. Its only required if using easing functions. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.geektantra.com/projects/jquery-sliding-menu/javascripts/jquery.sliding-menu.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();
  jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 });
});
</script>


* Setelah itu cari kode <body> letakan kode dibawah ini diatas atau sebelum kode <body> kode dibawah ini juga bisa diletakan di Gadget yaitu dengan cara tambah Gadget dan pilih HTML

<div id="HorizontalSlidingMenu">
    <ul class="SlidingMenu Horizontal">
      <li><a href="http://shofitkj.blogspot.com">Beranda</a></li>
      <li><a href="alamat-url">Album</a></li>

      <li><a href="alamat-url">Tips dan Trik</a></li>
      <li><a href="alamat-url">Blog</a></li>
      <li><a href="alamat-url">RSS Feed</a></li>
    </ul>
    <div class="ClearFix"></div>
  </div>

* Kode diatas bisa kalian Edit masing masing dan ganti alamat-url dengan alamat url kalian masing masing dan terakhir simpan dan lihat hasilnya

Wednesday, 25 April 2012

membuat menu jQuery smoth dropdown navbar





Dalam tutorial sebelumnya yaitu membuat menu jQuery smoth dropdown kali ini saya akan mempostingkan bagaimana cara membuat menu jQuery smoth dropdown navbar  contohnya bisa kalian lihat diblog saya yaitu jaya tkj klik



oke langsung saja cara pembuatannya sebagai berikut:
* Login ke blogger
* Masuk kerancangan dan pilih Edit HTML
* Tekan F3 dan cari kode <head> letakan kode jQuery dan CSS dibawah ini diatas kode <head> atau sebelum kode <head>


<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish.css" type="text/css" />
    <link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish-navbar.css" type="text/css" />
    <link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/smoth-jquery2/theme2.css" type="text/css" />
    <script src="https://sites.google.com/site/jayanaktkj/smoth-jquery2/jquery-1.3.2.min.cs.js" type="text/javascript"></script>
    <script src="https://sites.google.com/site/jayanaktkj/smoth-jquery2/superfish.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQueryCS(function() {
            jQueryCS("ul.cs-superfish").superfish();   
        });
    </script>

* Dan langkah terakhir letakan kode dibawah ini diatas kode <body> kalian juga bisa menambahkan kode dibawah ini di tambah gadget HTML yaitu di rancangan

<ul class="cs-superfish sf-menu sf-navbar">
        <li class="current first">
            <a href="http://shofisanjaya.blogspot.com">menu item</a>
            <ul class="sf-shadow-off">
                <li class="first"><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a>

                    <ul class="sf-shadow-off">
                        <li class="first"><a href="http://alamat-url">inner item</a></li>
                        <li><a href="http://alamat-url">inner item</a></li>
                        <li><a href="http://alamat-url">inner item</a></li>
                        <li><a href="http://alamat-url">inner item</a></li>
                        <li><a href="http://alamat-url">inner item</a></li>

                        <li><a href="http://alamat-url">inner item</a></li>
                        <li class="last"><a href="http://alamat-url">inner item</a></li>
                    </ul>
                </li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>

                <li><a href="http://alamat-url">inner item</a></li>
                <li class="last"><a href="http://alamat-url">inner item</a></li>
            </ul>
        </li>
        <li>
            <a href="#">menu</a>
            <ul class="sf-shadow-off">

                <li class="first"><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>

                <li class="last"><a href="http://alamat-url">inner item</a></li>
            </ul>
        </li>
        <li>
            <a href="#">menu item asd sdf s</a>
            <ul class="sf-shadow-off">
                <li class="first"><a href="http://alamat-url">inner item</a></li>

                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li><a href="http://alamat-url">inner item</a></li>
                <li class="last"><a href="http://alamat-url">inner item</a></li>

            </ul>
        </li>

    <li class="last"><a href="#" title="Menu title without inner level.">menu item</a></li>
</ul>

Monday, 23 April 2012

Tarif dan cara daftar paket internet smart fren


Ini adalah daftar tarif internet smart fren.  Setiap paket memiliki kecepatan download dan upload yang berbeda beda. Untuk downloadnya yang paling kecil adalah 153 Kbps sampai 3.1 Kbps dan untuk uploadnya 128 Kbps sampai 1.8 Kbps. Silahkan pilih paket sesuai kebutuhan anda..
Download s/d 384 Kbps dan Upload s/d 128 Kbps dengan paket sbb:
harian = Rp. 5.000 hub: *123*3*2*1 sms: Data[spasi]unl1
mingguan = Rp. 30.000 hub: *123*3*2*7 sms: Data[spasi]unl7
bulanan = Rp. 90.000 hub: *123*3*2*30 sms: Data[spasi]unl30

Download s/d 153 Kbps dan Upload s/d 128 Kbps dengan paket sbb:
Bulanan = Rp. 45.000 hub: *123*3*3*30*0 sms: Data[spasi]R30

Paket Volume Based untuk Prabayar dan cara berlangganan:

Download s/d 3.1 Mbps dan Upload s/d 1.8 Mbps
20 mb = harian Rp. 1.000 caranya: hub: *123*3*1*20 sms: Data[spasi]vol20
100 mb = harian Rp. 3.000 caranya: hub: *123*3*1*100 sms: Data[spasi]vol100
250 mb = mingguan Rp. 10.000 caranya: hub: *123*3*1*250 sms: Data[spasi]vol250
600 mb = mingguan Rp. 20.000 caranya: hub: *123*3*1*600 sms: Data[spasi]vol600
2 Gb = bulanan Rp. 50.000 caranya: hub: *123*3*1*2000 sms: Data[spasi]vol2000
6 Gb = bulanan Rp. 100.000 caranya: hub: *123*3*1*6000 sms: Data[spasi]vol6000
12 Gb = bulanan Rp. 150.000 caranya: hub: *123*3*1*12000 sms: Data[spasi]vol12000