Jika Aku Tiada

Sabtu, 30 April 2011

Vertical Sliding Info Panel With jQuery

Artikel kali ini berbasis jQuery n diadaptasi dari http://www.oktri.co.cc/2010/04/cara-membuat-vertical-sliding-info.html
Oke langsung saja berikut ini :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini:
]]></skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<div class='panel'>
<h3>Selamat Datang Di OKTRI BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i634.photobucket.com/albums/uu66/oktri_2009/o-3Jqh3BlhR3srjirD0J-A.jpg' width='73px'/>
<p>Nama saya Oktri darmadi,saya seorang Mahsiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://oktridarmadi.blogspot.com/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>

<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/oktridarmadi' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//oktri.darmadi' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>

<li><a href='http://oktridarmadi.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://www.oktri.co.cc/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Oktri</a>

Catatan: script langkah 9,tinggal diedit sesuai dengan blog anda

Membuat 2 Widget Melayang

Okay....saatnya buat 2 widget melayang.....
langsung aj yach...begini caranya
1. login ke blog sobat
2. Pada bagian dasbor pilih rancangan
3. pilih elemen laman
4. tambah gadget
5. Pilih HTML/Javascript
6. Masukkan Kode berikut
<style type="text/css">
    #gb{
    position:fixed;
    top:30px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:200px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:#000000;
    background:#000000;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">

    
    <br />
    <br />
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
7. save
8. add html lagi
masukkan kode di bawah ini lalu kalau udah save ya...
<style type="text/css">
    #hitsukeFX{
    position:fixed;
    top:285px;
    z-index:+1000;
    }
    .hitsukeFXtab{
    height:200px;
    width:30px; float:left;
    cursor:pointer;
    background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8mjCxq8Ck6oUKI08LUsnW05WIaTSEtPCjGvDLcPNxNkt749WRojXU7K-XLXuwVbcrDOLDgZyoZrwcTXWueQehQKnoUrCF2zISc5NAsYEJL4lyQcX8WmgKJoGDFRGy4EhCda9Jlsslck4/s1600/icon1.png ') no-repeat;
    }

    .hitsukeFXcontent{ float:left;
    border:#000000;
    background:#000000;
    padding:10px;
    }

    </style> <script type="text/javascript">
    function showHidehitsukeFX(){
    var hitsukeFX = document.getElementById("hitsukeFX");
    var w = hitsukeFX.offsetWidth;
    hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
    hitsukeFX.opened = !hitsukeFX.opened;
    }

    function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }

    </script>
    <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
    <div class="hitsukeFXcontent">

      

    <br />
    <br />
    <div style="color: white; font-family: "Trebuchet MS",sans-serif;">
    Widget By <a href="http://www.sichandra.com/">Muhammad Chandra</a></div>

    <div style="text-align:right">
    <a href="javascript:showHidehitsukeFX()"> [close] </a>
    </div>
    </div>
    </div><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Catatan: Pada tulisan yang bercetak merah, letakkan html sobat di bawahnya............
Sumber : http://www.sichandra.com/2010/12/membuat-dua-widget-tersembunyi-di-blog.html

Cara Membuat Menu bar Multi Level Drop Down

Posting kali ini akan membahas tentang bagaimana Membuat Multi Level Drop Down di blog anda. waktu itu aku pernah ingin mempunyai menu bar yang berbobot. Yupz, menu bar yang bersusun.

Ehhh, pucuk di cinta ulam pun tiba, tiba-tiba seorang teman (Syagha Icikage) memberikan aku sebuah url....langsung aj ku buka ....kira2 beginilah caranya....

Login dulu ke bloger.com
Ke menu rancangan >---->>Lalu pilih edit html
Sebelum mengedit template Anda, Anda sebaiknya menyimpan sebuah salinan dari template tersebut
Lalu cari kode </head> di kotak html,jika susah mencari anda bisa menekan Ctrl+f untuk mengeluarkan menu pencarian huruf pada halaman Mozilla Firefox.
Letakkan kode berikut persis diatas kode </head>:

<link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>
Simpan template yang sudah dipaste kan sesuai dengan yang diatas
Setelah di save sekarang menuju menu Tata letak dan pilih menu Elemen halaman Lalu tambah gadget halaman dengan

HTML/JAVASCRIPT
Tambahkan fungsional pihak ketiga atau kode lainnya ke blog Anda.
Oleh Blogger
copy kode berikut dan pastekan ke dalam gadget HTML/JAVASCRIPT Anda:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://trieck69.blogspot.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://trieck69.blogspot.com">Item</a></li>
</ul>
<br style="clear: left" />
</div>
simpan gadget trus letakan gadgate persis dibawah header save template dan lihatlah
Anda juga bisa menambah dan mengganti nama menu sesuka hati, Saya ambilkan contoh dimenu yang pertama

Menu yang belum dirubah

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://trieck69.blogspot.com">Item 1</a></li>

perhatikan kode yang diberi warna hijau,karena warna hijau lah yang akan kita rubah
menjadi

Menu yang sudah dirubah

<div id="myslidemenu" class="jqueryslidemenu">

<ul>
<li><a href="http://URL BLOG ANDA.blogspot.com">HOME</a></li>

PERUBAHAN
URL MASUKAN SESUAI DENGAN ALAMAT YANG MAU DITUJU
TEXT ITEM 1 SAYA GANTI MENJADI HOME
Terimakasih, Dan kini Anda telah memiliki Menu bar Multi Level Drop Down di Blog Anda.....

Pembelajaran selesai semoga blog yang anda buat jadi tambah cantik........

Sumber:http://trieck69.blogspot.com/2010/06/cara-membuat-menubar-multi-level-drop.html

Memperbaiki Flashdisk yang Rusak

Bagi anda yang sedang mengalami masalah dengan flashdisk, khususnya kasus flashdisk terdeteksi di Windows namun tidak bisa di format anda bisa menggunakan beberapa cara berikut ini untuk memperbaikinya : Format flashdisk melalui Linux/LiveCD Linux
(original page: http://linux.or.id/node/2835/)
Langkah yang harus dilakukan:
1. Booting komputer menggunakan LiveCD Linux, misal Slax KillBill, Knoppix atau distro lainnya,
2. Setelah login ke sistem, masukkan flashdisk yang bermasalah tadi ke salah satu port USB. Demi keamanan data, pastikan hanya flashdisk yang bermasalah saja yang terpasang,
3. Pastikan flashdisk anda terdeteksi, atau setidaknya indikator led nyala,
4. Masuk ke console
5. Pada console jalankan cfdisk /dev/sda1 (sesuaikan dengan flashdisk ke berapa yang terpasang),
6. Delete atau hapus partisi pada flashdisk,
7. Buat partisi baru dengan memilih Create New | Write,
8. Simpan perubahan yang baru saja anda lakukan,
9. Format flashdisk dengan cara mengetikan perintah mkfs.vfat-f32 /dev/sda1 di console.
10. Flashdisk anda telah memiliki partisi baru, sehingga bisa digunakan kembali baik di Linux maupun di Windows.
Format flashdisk Menggunakan USB Disk Storage Format Tool
Di samping cara di atas, anda juga bisa menggunakan tools yang dikeluarkan oleh pihak ketiga. Salah satunya adalah Hewlet Packard (HP). Walaupun tools ini dikeluarkan oleh HP, namun utilisasinya juga bisa digunakan pada flashdisk merek lain.
Berikut langkah-langkah memperbaiki flashdisk yang tidak bisa di format menggunakan HP USB Disk Storage Format Tool:
1. Download aplikasi HP USB Disk Storage Format Tool di sini,
2. Install aplikasi tersebut, rekomendasi OS yang digunakan adalah Microsoft Windows 2000, Windows 2003 Server dan Novel Netware,
3. Masukkan flashdisk yang bermasalah ke salah satu port USB. Pastikan flashdisk anda terdeteksi dan memperoleh alokasi drive di Windows,
4. Jalankan aplikasi HP USB Disk Storage Format Tool
5. Tentukan drive tempat flashdisk terpasang,
6. Pilih Create New or Replace Existing Configuration untuk membuat partisi baru baru dan menghapus konfigurasi yang ada di flashdisk,
7. Format flashdisk anda sesuai dengan file sistem yang diinginkan.
http://agusnurli.wordpress.com/2007/08/15/beberapa-kemungkinan-mengapa-usb-flash-disk-tidak-terdeteksi-pc/

Laman

Sabtu, 30 April 2011

Vertical Sliding Info Panel With jQuery

Membuat 2 Widget Melayang

Cara Membuat Menu bar Multi Level Drop Down

Memperbaiki Flashdisk yang Rusak