Cara Memasang JQuery

demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery(seperti gambar di atas) Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel
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

Langkah 10
Simpan Template dan Preview blog... 

(by.oktri.co.cc) 

Read More... Cara Memasang JQuery

Tips mengunci folder tanpa software

Hi...Temen2, kali Ini saya akan berbagi tips Mengunci folder tanpa Software,Tips ini Mungkinn Bisa membantu teman2 apabila Ingin menyimpan folder atau data supaya lebih aman,atau lainnnya,
dari pada kita download software pengunci kita bikin sendiri aja ok., tapi inget jangan disalah gunakan trik ini...ok.
nah caranya pertama , bikin NEW TEXT DOCUMENT di notepad nya tau kan
kemudian
isi dengan :



@ECHO OFF
titipan kunci folder
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Locker goto MDLOCKER
:CONFIRM
echo Serius nich mau Kunci ??(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Locker "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Foldernya dah terkunci
goto End
:UNLOCK
echo Eiittt masukkan pasword dulu
set/p "pass=>"
if NOT %pass%== oktri goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Locker
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md Locker
echo Foldernya berhasil di buat
goto End
:End

setelah itu SAVE AS dengan nama kunci.bat

NAh SELESAI
sekarang
kita klik kunci.bat nya
tar muncul folder : locker
taruh file2 kamu di sana
kemudian kalo dah selese
tinggal klik kunci.bat lageee

mau buka???
tinggal klik kunci.bat lagi abis itu masukkan pasword : oktri

(by.oktri.co.cc)

Read More... Tips mengunci folder tanpa software

Pasang Alert di Blog Sebagai Pesan Penutup

Tutorial sebelumnya, saya sudah pernah membahas tentang memasang alert di blog untuk pesan pembuka. Nah, untuk kali ini saya akan mencoba membuat alert di blog tapi sebagai penutup. Efek ini akan muncul apabila pengunjung atau kita sendiri menutup jendela blog kita, otomatis akan muncul kotak alert. Untuk mempersingkat, mari kita tengok bagaimana caranya :D

1. Login ke Blogger
2. Pilih Layout/Tata Letak
3. Kemudian pada tab menu pilih Edit HTML
4. Kalau sudah beri tanda pada Expand Template Widget
5. Taruh kode di bawah ini di bawah kode</head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Terima KAsih Atas Kunjungan Anda, Ditunggu Kunjungan Selanjutnya');
}
parent.window.onunload=goodbye;

</script>

Ketrangan :
Tulisan tebal berwarna merah bisa Anda ganti dengan kalimat penutup Anda sendiri.
6.Kembali ke pengeditan oke? setelah meletakkan kode tersebut, langkah selanjutnya adalah SIMPAN PERUBAHAN :D

Selamat berkreasi!!! :D 

(by.oktri.co.cc)

Read More... Pasang Alert di Blog Sebagai Pesan Penutup

Cara Membuat Read More Otomatis

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down. 

Buat blogger baru, seperti saya ini saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.,yang sebelumnya saya lakukan memang agak ribet pada saat posting artkel atau pun tulisan...saat ini saya menggunakan read more otomatis...

Berikut langkah – langkah dalam membuat read more otomatis :

1. Silahkan login ke blogger terlebih dahulu.
   
2. Klik Tata Letak.
   
3. Kemudian klik Edit HTML.
   
4. Centang Expand Template Widget.
   
5. Letakkan kode berikut ini tepat diatas kode </head>

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore link script, version 2.0 (for blogspot)

    (C)2008 by Anhvo

    visit http://en.vietwebguide.com to get more cool hacks
    ********************************************/
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>

6. Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda : 

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>      


sehingga sekarang hanya ada satu <data:post.body/>


7.   Kemudian hapus kode :


<data:post.body/> atau <p><data:post.body/></p> 

8. Ganti kode tersebut dengan kode berikut ini : 
   
   <b:if cond='data:blog.pageType != "item"'>
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More � <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   
9. Kemudian Simpan Template. 

Keterangan :

• summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
• summary_img = 360 –-> untuk tinggi postingan dengan gambar.
• img_thumb_height = 120 –> tinggi gambar.
• img_thumb_width = 150 –> lebar gambar.
• Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Silahkan sobat atur sesuai template sobat. Selamat berkreasi.
(by.okti.co.cc)

Read More... Cara Membuat Read More Otomatis

Cara Membuat Double Klik untuk Back to Top (Kembali ke Atas)

Hy..Friend Setelah selesai membaca artikel di blog, tanpa sadar kita sudah berada di bagian paling bawah blog. Untuk kembali ke atas harus gulung scrollbar deh.Karena itu kita bisa membuat sebuah shortcut agar pengunjung bisa kembali ke bagian atas blog dengan mudah hanya dengan double klik,
Langsung aja deh, caranya gini nih:

1. Pergi ke Layout--->Edit HTML
2. Centang dulu kotak pada Expand Template Widget
3. Kemudian pasangkan kode berikut sebelum kode  </head>

<script language="JavaScript1.2">
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

4. Simpan
Mudah kan? Semoga Bermanfaat... 

(by.oktri.co.cc)

Read More... Cara Membuat Double Klik untuk Back to Top (Kembali ke Atas)

Membuat Pesan Pembuka pada Blog

Trik ini sangat mudah alias gampang banget diterapkan. Trik ini berfungsi sebagai pesan pembuka, ya seperti yang dikatakan pada judul tadi, kotak yang akan muncul sebelum loading page blog, udah pernah liyat kan blog yang ada pesan pembukanya? Mereka itu pake cara ini nih. Ohya, ada beberapa trik yang membuat trik ini menjadi sebegitu indahnya, tetapi kali ini yang standar dulu deh, oke???

Langsung aja deh, caranya gini nih:

1. Pergi ke Layout--->Edit HTML
2. Centang dulu kotak pada Expand Template Widget
3. Kemudian pasangkan kode berikut sebelum kode </body>

<script language="JavaScript">alert("SELAMAT DATANG DI BLOG SAYA");</script>

sebagai contoh:

4. Tulisan yang berwarna merah dapat Anda ganti dengan tulisan/kata-kata Anda sendiri
5. Simpan dan lihat deh Hasilnya :D



Semoga bermanfaat okeee...

(by.oktri.co.cc)

Read More... Membuat Pesan Pembuka pada Blog